amey jain amey jain - 6 months ago 15
HTML Question

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%;


}

Answer

Allright, a couple of things:

  1. The main thing the buttons were overlapping was because you had the following peace 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 properies are not usefull 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 futher.

Good luck!

Comments