Estou tentando por em prática o conceito de Tableless (www.tableless.com.br) e estou tendo problemas na hora de alinhar um Div. Acho que há uma discordância entre as classes e selectors.
http://www.ttmclan.com.br/ttmnovo.htm
Verifiquem que o texto dos menus está totalmente desalinhado. Tentei de algumas formas, mas sem sucesso algum. Espero que alguém possa parar alguns minutinhos e dar uma lida no meu CSS para me ajudar com isso. Logo depois irei fazer um trabalho para o colégio sobre CSS e disponibilizar para o pessoal em forma de tutorial já que estou entendendo bem o conceito e quero passar o conhecimento para frente.
Ai vai o CSS:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
background-color: #02253A;
}
ul{
list-style-type:none;
}
#matches {
position: absolute;
background-image:url(img/matches.gif);
background-repeat:no-repeat;
width:150px;
height:160px;
left: 17px;
top: 158px;
}
#menu{
position: absolute;
background-image:url(img/menu.gif);
background-repeat:no-repeat;
width:150px;
height:180px;
left: 14px;
top: 329px;
}
#members{
position: absolute;
background-image:url(img/members.gif);
background-repeat:no-repeat;
width:150px;
height:250px;
left: 15px;
top: 518px;
}
#top{
width:600px;
height:120px;
}
#top img{
border: 1px solid #000000;
}
#top-bottom{
width:600px;
height:20px;
}
#body{
position:absolute;
width:400px;
height:600px;
background-image:url(img/back2.gif);
background-repeat:no-repeat;
text-align:center;
left:189px;
top:166px;
}
#bottom{
position:absolute;
left: 11px;
top: 773px;
width:600px;
height:20px;
background-color:#02253A;
}
#site{
position:static;
background-color:#003A4F;
width:600px;
height:770px;
text-align: center;
border-left-width:2px;
border-left-style:solid;
border-left-color:#00445E;
border-right-width:2px;
border-right-style:solid;
border-right-color:#00445E;
}
.menu{
width:100px;
text-align:left;
margin: 0 0 0 0;
}
