CODEWITHSUNDEEP
htmlcss
Amey
Amey

Reputation: 252

HTML Table Columns are overlapping

My buttons are created as each column of respective row. but they are overlapping on each other and I can only see the last button created.There is some problem with my .css but I am not able to figure out what. I am new to HTML and CSS would really appreciate your help

test.html

<html>
<link href="button_style.css" rel="stylesheet" type="text/css" />

<body>
    <table align="center" id="scroll_tbl">
        <tr>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
                <a href='javascript:prevClick()'><img src="img/arrow_left.png" class="arrow" border="0" />&nbsp;Previous</a>
            </td>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
                <a href='javascript:nextClick()'>Next&nbsp;<img src="img/arrow_right.png" class="arrow" border="0" /></a>
            </td>
        </tr>
        <tr>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
                <a href="#" class="button"><span>Follow</span></a>
            </td>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
                <a href="#" class="button"><span>Follow</span></a>
            </td>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
                <a href="#" class="button"><span>Follow</span></a>
            </td>
        </tr>
        <tr>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-right:20px;">
                <a href="#" class="button"><span>Follow</span></a>
            </td>
            <td style="background-color: rgba(0, 0, 0, 0.00); padding-top:5px; padding-bottom:5px; padding-right: 5px; padding-left:20px;">
                <a href="#" class="button"><span>Donate</span></a>
            </td>
        </tr>
        <!--<div id="prev_next" style="background-color: #FF0000;  display: inline-block;"> <div id="previous" style="display:inline-block;">Previous</div><div id="Next" style="display:inline-block;">Next</div></div>-->
        <!--<div id='prev_next' style='background-color: #FF0000; display:inline-block; '><a href='javascript:prevClick()'><img src="img/arrow_left.png" class="arrow" border="0" /> Previous</a> &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; <a href='javascript:nextClick()' width='100'>Next <img src="img/arrow_right.png" class="arrow" border="0" /></a></div>-->
    </table>
</body>
</html>

button_style.css

    @import url(http: //fonts.googleapis.com/css?family=Nunito:300);

    body {
        font - family: "Nunito", sans - serif;
        font - size: 24 px;
    }
    a {
        text - decoration: none;
    }
    p {
        text - align: center;
    }
    sup {
        font - size: 36 px;
        font - weight: 100;
        line - height: 55 px;
    }

    .button {
        text - transform: uppercase;
        letter - spacing: 2 px;
        text - align: center;
        color: #0C5;

        font-size: 24px;
        font-family: "Nunito", sans-serif;
        font-weight: 300;

        margin: 5em auto;

        position: absolute; 
        top:0; right:0; bottom:0; left:0;

        padding: 20px 0;
        width: 220px;
        height:30px;

        background: # 0 D6;
        border: 1 px solid #0D6;
        color: # FFF;
        overflow: hidden;

        transition: all 0.5 s;
    }

    .button: hover, .button: active {
        text - decoration: none;
        color: #0C5;
        border-color: # 0 C5;
        background: #FFF;
    }

    .button span {
        display: inline - block;
        position: relative;
        padding - right: 0;

        transition: padding - right 0.5 s;
    }

    .button span: after {
        content: ' ';
        position: absolute;
        top: 0;
        right: -18 px;
        opacity: 0;
        width: 10 px;
        height: 10 px;
        margin - top: -10 px;

        background: rgba(0, 0, 0, 0);
        border: 3 px solid# FFF;
        border - top: none;
        border - right: none;

        transition: opacity 0.5 s,
        top 0.5 s,
        right 0.5 s;
        transform: rotate(-45 deg);
    }

    .button: hover span, .button: active span {
        padding - right: 30 px;
    }

    .button: hover span: after, .button: active span: after {
        transition: opacity 0.5 s,
        top 0.5 s,
        right 0.5 s;
        opacity: 1;
        border - color: #0C5;
        right: 0;
        top: 50%;

}

Upvotes: 0

Views: 5852

Answers (2)

Frank W.
Frank W.

Reputation: 787

Alright, a couple of things:

  1. The main thing the buttons were overlapping was because you had the following piece of code:

    .button { position:absolute; top:0; right:0; bottom:0; left:0; }

Check out this link w3 schools positioning with css

  1. You got a couple of elements where the syntax is wrong. For example, the spacings between list-style are not needed. Might work but I think it is best practice to not do this.

  2. Some CSS properties are not useful on the elements you put them on. Like putting list-style: none; on a table row.

I adjusted your code so it works as you wanted it and I fixed some of the errors you made. See THIS fiddle If you have any more questions I would be happy to help you further.

Good luck!

Upvotes: 5

nicolastrres
nicolastrres

Reputation: 451

I think you can solve your problem removing from the class .button this:

position: absolute;

Upvotes: 0

Related Questions