help with some css centering

[andy5000]

Hi i am building a website and i need to center my links on the page.
Here is a snippet from the html:

<tr>
<!--Navigation-->
<td class="toc;" rowspan="2"></td>
</tr>
</table>
<a href="home.html">Home</a>
<a href="dogs.html">Dogs</a>
<a href="newYork.html">New York</a>
<a href="misc.html">Misc Places</a>
</td>

Here is a snippet from the css:

table, td{border:none;table-layout:fixed;}
.toc{vertical-align:top;
width:110px;
background:#000000;
padding:25px;
text-align:center}

.center {text-align:center}
.right {text-align:right}
.main {text-align:top;padding-left:10px}

Hope you understand my problem and can help somehow.

Andrew Mayo

 

[killmoms]

Real question is why are you using a table for layout when you should be using divs defined in your stylesheet?

 

[dalvin200]

Hi i am building a website and i need to center my links on the page.
Here is a snippet from the html:

<tr>
<!--Navigation-->
<td class="toc;" rowspan="2"></td>
</tr>
</table>
<a href="home.html">Home</a>
<a href="dogs.html">Dogs</a>
<a href="newYork.html">New York</a>
<a href="misc.html">Misc Places</a>
</td>


Hope you understand my problem and can help somehow.

Andrew Mayo

your html seems to be wrong anyway..

you have an </table> and then some hyperlinks and then an </td>??? doesn't quite make sense..

for it to work i guess you need the wrap the links within the table..

ie:

<tr>
<td class="center">
<a href="home.html">Home</a>
<a href="dogs.html">Dogs</a>
<a href="newYork.html">New York</a>
<a href="misc.html">Misc Places</a>
</td>
</tr>


you should be using <div>'s anyway

 

[andy5000]

i tried using divs and came with the same problem. the darn buttons wont center.

Here is my css when i was using divs:
#navbar, navbar ul {display:block;margin:0; padding:0; list-style:none;}
#navbar a {display:block;width:10em;}
#navbar li {float:left;width:10em;}
#navbar li ul {display:none}
#navbar li:hover ul {position:fixed;display:block;width:10.1em;}
#navbar li ul li {float:none;width:auto;}
div.comment {clear:left;padding-top:5%;}

And my xhtml:
<div id="navbar">
<ul>
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="home.html">Animals</a>
<ul>
<li>
<a href="dogs.html">Dogs</a>
</li>
</ul>
</li>
<li>
<a href="home.html">Travels</a>
<ul>
<li>
<a href="newYork.html">New York</a>
</li>
<li>
<a href="misc.html">Misc</a>
</li>
</ul>
</li>
</div>

I am begginner you may tell lol
Please help

 

[dalvin200]

i tried using divs and came with the same problem. the darn buttons wont center.

Here is my css when i was using divs:
#navbar, navbar ul {display:block;margin:0; padding:0; list-style:none;}

Please help

add

text-align:center;

into the #navbar css..

 

[andy5000]

thats what i had thought but doesnt make any difference

 

[dalvin200]

your xhtml is also incorrect.. it should be this:

<div id="navbar">
<ul>
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="home.html">Animals</a>
</li>
<li>
<a href="dogs.html">Dogs</a>
</li>
<li>
<a href="home.html">Travels</a>
</li>
<li>
<a href="newYork.html">New York</a>
</li>
<li>
<a href="misc.html">Misc</a>
</li>
</ul>
</div>

also, you don't need to use lists to do this..

you could just have:

css:

#navbar {width:100%;text-align:center}
#navbar a {padding:10px;}

html:
<div id="navbar">
<a href="home.html">Home</a>
<a href="home.html">Animals</a>
<a href="dogs.html">Dogs</a>
<a href="home.html">Travels</a>
<a href="newYork.html">New York</a>
<a href="misc.html">Misc</a>
</div>

 

[andy5000]

now its totally broken seem to have sets of links.check your private messages

 

[dalvin200]

now its totally broken seem to have sets of links.check your private messages

did u try the code above i posted?

replied to your PM

 

[andy5000]

i wanted the main tabs (Home,Animals,Travels,Nature,Music,Misc,About) to be shown permantly then when you hovver over them the sub categories appear(Dogs,New York,flowers,Plants & Trees,musicians,instruments).