estou começando agora a programação de sites com tableless, estava acustumado a montar sites com editores visuais tipo web page maker, sem nem me preucupar com o q era xhtml ou mesmo css, porem de algumas semanas pra ca devido a faculdade fui instruido a abandonar este procedimento e começar a programar em xhtml + css, então estou tendo minhas dificuldades, mas entendendo o quanto é importante supera-las estou em busca de material e tirando duvidas, então la vai:
meu principal problema é como posicionar as imagens, textos e outros dentro do site segue meus códigos e como a pagina está e deveria ficar.
Pagina xhtml
<!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" lang="pt-br">
<head>
<meta content="text/html; charset=UTF-8" />
<title>Página Inicial Jornal</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta content="Rodolpho Netto" name="author" />
</head>
<body>
<div id="banner">
<img src="banner.jpg" alt="Banner Principal" />
</div>
<div id="noticia">
<h2>Noticia 1</h2>
<p>
No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
No No No No No No No No No No No No No No No No No No No No No
</p>
<div id="imagem"><img src="jornal.gif" alt="Jornal" /></div>
</div>
<div id="menu">
<ul>
<li><a href="noticia1.html">Noticia1</a></li>
<li><a href="noticia2.html">Noticia2</a></li>
<li><a href="noticia3.html">Noticia3</a></li>
<li><a href="noticia4.html">Noticia4</a></li>
<li>Demais Noticias</li>
<li>Demais Noticias</li>
<li>Demais Noticias</li>
<li>Demais Noticias</li>
<li>Demais Noticias</li>
<li>Demais Noticias</li>
<li>Demais Noticias</li>
<li>Demais Noticias</li>
</ul>
</div>
<div id="validacao">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</div>
<div id="css"
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="CSS válido!" />
</a>
</div>
</body>
</html>
CSS dessa pagina
body {color:#000000; background-color:#D4DDE4; border:Black Medium Solid; }
#noticia { margin-left:280px; margin-right:280px; border:Black Medium Dashed; padding:10px;
}
#noticia p {
text-align:Justify;
}
#noticia h2 {
text-decoration:underline; text-align:Center; color:#000000; font-family:Arial, Helvetica, sans;
}
#imagem {
text-align: center;
}
#menu ul {font-weight:bold; list-style-type:square; position:absolute;
overflow:hidden;
left:110px;
top:149px;
border:Black Medium Dashed; padding:25px; padding-bottom:13px; }
#banner {text-align:Center; }
#jornal {text-align:Center; }
#menu li {}
#jornal {
position:absolute;
left:450px;
top:217px;
}
#validacao {
text-align:center;
left:110px;
top:149px;
}
#css {
text-align:center;
}Atualmente ela está assim e na imagem mostra onde eu quero colocar e não consigo:
Uploaded with ImageShack.us
