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