Fazer menú vertical se tornou uma tortura
Bom, não sei nem como explicar essa parada.Ha um tempo atras sofri pra aprender a deixar 2 divs uma do lado da outra e tal.. sempre funcionou.. dessa vez fiz exatamente a mesma estrutura, só que dentro de uma div Pai, com display table.Acontece que os elementos float quando estão definidos, não permitem que minha div pai seja alimentada com outras divs, alterando assim seu tamanho. Então, por segurança, deixei meu float:none;Minhas 3 divs principais (cabeçalho, menu horizontal e corpo) ficam direitinho dentro da div pai, mas quando tento colocar uma div do lado do corpo, mesmo esse estando com width definido para ser menor que a pai, logicamente, nenhum navegador exibe direito.é claaro que é alguma falha no script.. não sei se deixei de fazer algo..enfim, vou colocar aqui o código que escrevi;CSS:
/ CSS Document // Definindo IDs/#body {background:#F9F9FB;width:775px;display:table;margin:0 auto;border:#DEDCE4 thin solid;}#header {background-image:url(fundo_titulo.jpg);width:775px;height:200px;text-align:right;font-size:xx-large;line-height:200px;float:none;z-index:3;}#menu {width:775px;height:25px;background:url(fundo_menu.jpg);background-repeat:repeat-x;color:#FFFFFF;font-size:large;font-family:Tahoma, Arial, Helvetica, sans-serif;letter-spacing:3px;display:table;z-index:2;position:absolute;}#content {margin-top:20px;float:none;width:550px;display:table-column;z-index:3;}/Definindo Classes/.reldir { width:100px; vertical-align:top; display:block; }.item { float: left; width: 175px; display:table; height:auto; margin-left:10px;}.item a:link {color:#FFFFFF;text-decoration:none;font-size:normal;}.item a:hover {color:#FFFFFF;text-decoration:underline;letter-spacing:5px;font-size:normal;}.item a:visited {color:#f8f8f8;text-decoration:none;font-size:normal;}.popup { display:none; float:left; width:80px; z-index:1; background:#EEEEEE; border:#CCCCCC 1px solid;}.item:hover .popup { display:block; float:inherit; width:175px; visibility:visible;}.popup a:link {color:#000000;font-size:small;margin-left:15px;}.popup a:hover {color:#0000FF;background:#CCCCCC;font-size:small;margin-left:17px;}.popup a:visited {color:#666666;font-size:small;margin-left:15px;}
E o HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>André Bernardi - Blog</title><link href="corpo.css" rel="stylesheet" type="text/css" /></head><body><div id="body"><div id="header"><!--Cabeçalho!--><h1>Cabeçalho</h1></div><!--Menu!--><div id="menu" class="menu"> <div class="item"> <div><a href="#">Principal</a></div> <div class="popup"> <a href="#">link1</a><br /> <a href="#">link2</a><br /> <a href="#">link3</a> </div> </div> <div class="item"> <div><a href="#">Estudos</a></div> <div class="popup"> <a href="#">link1</a><br /> <a href="#">link2</a><br /> <a href="#">link3</a> </div> </div> <div class="item"> <div><a href="#">Bloguisses</a></div> <div class="popup"> <a href="#">link1</a><br /> <a href="#">link2</a><br /> <a href="#">link3</a> </div> </div></div><!--Conteúdo!--><br /> <div id="content"> <h2>Título</h2> <h3>Subtítulo</h3> <p>adsasdasd</p> <p>asdasda</p> </div> <div class="reldir"> <p>Relacionados </p> </div></div></body></html>
Se alguém souber, agradeço.----Sobre o XML Data Island.Ta bom.. tooodo mundo sabe que só funciona no IE. Acredito que para rodar algo semelhante no firefox precisaria-se de algum código em Javascript, sei lá.Mas como seeempre há um jeito mais facil, se alguém souber ai como inserir meus nos do XML na minha Index atravez do bom e velho xhtml, me fala ok?--Obrigado!E desculpem minha nooobisse
Discussão (2)
Carregando comentários...