Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

_DEH

Fazer menú vertical se tornou uma tortura

Por , em Desenvolvimento frontend

Recommended Posts

_DEH    0

_DEH
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Estude um pouco mais css, pois seu codigo css está com muitas coisas que poderiam ser abreviadas, muitas mesmo ;)

Da uma olhada aki no css link collection: http://forum.imasters.com.br/index.php?showtopic=124982

Compartilhar este post

Link para o post
Compartilhar em outros sites

_DEH    0

_DEH
Postado

aham.. pior que é mesmo..estou abreviando tudo agora..é costume, fazer primeiro grandão e depois ir resumindo.. falta de prática.bom, acabei de resolver o problema das colunas... é que esqueci mesmo.. o display estando em block ja faz tudo funcionar normalmente.. foi leiguisse minhas mesmo.valew ;)então agora o maior problema é mesmo o Data Island.. alguma ideia?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito