Este é o primeiro layout que estou arriscando desenvolver com CSS.
Montei a div do conteúdo, centrada com 778px.
Dentro dela, montei a div do topo, onde coloquei outra div, para o logotipo, onde eu queria, a 20px do limite da esquerda, e 20px do limite do topo.
Ainda dentro da div do topo, eu criei outra div, para o telefone, que não apareceu como eu queria, a 20px também do topo, e a 20 do limite da direita.
Podem me ajudar a entender porque não ficou no lugar que deveria.
(Estou usando com base de pesquisa o site do majour)
Meu HTML
<XHTML; 1.0 Strict !DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> <head> <title>mkhost | HOSPEDAGEM PROFISSIONAL DE SITES</title> <link href="includes/estilos.css" media="all" rel="stylesheet" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <div id="conteudo"> <div id="topo"> <div class="logo"><img src="imagens/logo.gif" /></div> <div class="telefone">11 6198-3927</div> </div> </div> </body> </html>
O Css referente ao topo:
#conteudo {margin: 0 auto; border-left: 2px solid #ffffff; border-right: 2px solid #ffffff; width: 778px; height:100%; background-color: #8DB0BF; } /* Definindo o topo do site */ #topo {margin: 0 auto; border-left: 1px solid #ffffff; border-right: 1px solid #ffffff; width: 765; height:81px; text-align:left; background:#fff url("../imagens/backTopo.gif"); /* "remédio" para o hack do IE */} .logo {position: relative; top: 20px; left: 20px;} .telefone { position: relative; top: 24px; left: 651px;}
A página está em http://www.mkhost.com.br/index.asp
Tentei validar no http://validator.w3.org/, só que da erro, não entendi onde esta o erro.
Estou escrendo em Xhtml strict, para aprender a escrever da forma correta.