[Resolvido] Span suporta somente texto ?

NetBoy16 · Setembro 29, 2011

Olá a todos e um bom dia, estou tentando fazer um menu como este, só que a única diferença seria que ao invés de texto, dentro de um link teria mais outros links(submenu), então meu código ficou assim:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#topo {
position:absolute;
left:-10px;
top:0px;
width:910px;
height:150px;
z-index:1;
}
#menu {
position:absolute;
left:0px;
top:151px;
width:250px;
height:650px;
z-index:2;
}
#centro {
position:absolute;
left:250px;
top:150px;
width:650px;
height:450px;
z-index:3;
}
ul.sidenav {
list-style:none;
margin:0 auto;
padding:0;
width:250px;
background-color:#0066FF;
border:1px solid #06C;
outline:1px solid #FFF;
}
ul.sidenav li a {
display:block;
text-decoration:none;
background:transparent url(img/arrow2.gif) no-repeat 5px 7px;
border-bottom:1px solid #06C;
border-top:1px solid #06C;
color:#FFF;
font:Verdana, Geneva, sans-serif 14px;
padding:15px 10px 10px 45px;	
width:195px;
}
ul.sidenav li a:hover {
 /* propiedades optativas */
 background: #FFF url(img/arrow1.gif) no-repeat 5px 7px;
 color:#0066FF;
 font:Verdana, Geneva, sans-serif 16px bold;
 border-top:1px solid #300;
}
ul.sidenav li span {
display:none;
}
ul.sidenav li a:hover span {
display:block;
font-size:14px;
padding:10px 0;
margin:0 0 0 -30px;
}
</style>

</head>

<body>
<div id="topo"></div>
<div id="menu">
<ul class="sidenav">
<li><a href="#">Home</a></li>
<li><a href="#">Viajens pelo Brasil <span><li><a href="#">- Pacotes</a></li><li><a href="#">- Hotéis</a></li><li><a href="#">- Resorts</a></li><li><a href="#">- Carros</a></li><li><a href="#">- Rodoviários</a></li><li><a href="#">- Hotéis Fazenda</a></li><li><a href="#">- Monte Sua Viajem</a></li></span></a></li>
<li><a href="#">Viajens pelo Mundo <span><li><a href="#">- Pacotes</a></li><li><a href="#">- Hotéis</a></li><li><a href="#">- Carros</a></li><li><a href="#">- Circuitos</a></li><li><a href="#">- Para Brasileiros</a></li></span></a></li>
<li><a href="#">Cruzeiros</a></li>
<li><a href="#">Passagens Aéreas</a></li>
<li><a href="#">Reservas de Hotéis</a></li>
<li><a href="#">Dicas de Viajem</a></li>
<li><a href="#">Sobre Nós</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
<div id="centro"></div>
</body>
</html>

Antes de usar <li> eu tentei colocar apenas link com o texto e um <br /> depois, mas tanto um quanto o outro não dá certo, os links ficam pra fora como se fosse uma list normal, então minha dúvida é, dentro de um <span> eu só consigo colocar texto? caso sim, qual seria uma alternativa para oque eu quero fazer? caso não, oque estou fazendo de errado.

Ficarei muito grato se alguém me ajudar, preciso muito terminar o site, e esse mesmo que é para uma vaga de emprego, então se eu passar vou conseguir o emprego, por isso quero fazer um site bem maneiro.

Ninguém sabe ?

William Bruno · Setembro 29, 2011

a marcação correta para submenus é:

<li>Item
   <ul>
      <li>Item submenu</li>
      <li>Item submenu</li>
   </ul>
</li>
<li>Outro item</li>

não faça Post Up! no tópico, apenas aguarde que alguém te responda.

Ainda não deu tempo de ninguém ler e responder. Que tal enqnto isso, ajudar outros membros com dúvida ?

a comunidade só se mantém se um responder o outro.

NetBoy16 · Setembro 29, 2011

Ahhh, então eu tenho que fazer novos ul, vou modificar o codigo qualquer coisa eu respondo novamente.

E desculpa pelo up, é pq já fazia tempo que eu tinha postado.

Editei, olha como ficou o codigo:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#topo {
position:absolute;
left:-10px;
top:0px;
width:910px;
height:150px;
z-index:1;
}
#menu {
position:absolute;
left:0px;
top:151px;
width:250px;
height:650px;
z-index:2;
}
#centro {
position:absolute;
left:250px;
top:150px;
width:650px;
height:450px;
z-index:3;
}
ul.sidenav {
list-style:none;
margin:0 auto;
padding:0;
width:250px;
background-color:#0066FF;
border:1px solid #06C;
outline:1px solid #FFF;
}
ul.sidenav li a {
display:block;
text-decoration:none;
background:transparent url(img/arrow2.gif) no-repeat 5px 7px;
border-bottom:1px solid #06C;
border-top:1px solid #06C;
color:#FFF;
font:Verdana, Geneva, sans-serif 14px;
padding:15px 10px 10px 45px;	
width:195px;
}
ul.sidenav li a:hover {
 /* propiedades optativas */
 background: #FFF url(img/arrow1.gif) no-repeat 5px 7px;
 color:#0066FF;
 font:Verdana, Geneva, sans-serif 16px bold;
 border-top:1px solid #300;
}
ul.sidenav li span {
display:none;
}
ul.sidenav li a:hover span {
display:block;
font-size:14px;
padding:10px 0;
margin:0 0 0 -30px;
}
</style>

</head>

<body>
<div id="topo"></div>
<div id="menu">
<ul class="sidenav">
<li><a href="#">Home</a></li>
<li><a href="#">Viajens pelo Brasil <span><ul class="sidenav"><li><a href="#">- Pacotes</a></li><li><a href="#">- Hotéis</a></li><li><a href="#">- Resorts</a></li><li><a href="#">- Carros</a></li><li><a href="#">- Rodoviários</a></li><li><a href="#">- Hotéis Fazenda</a></li><li><a href="#">- Monte Sua Viajem</a></li></span></a></li></ul>
<li><a href="#">Viajens pelo Mundo <span><ul class="sidenav"><li><a href="#">- Pacotes</a></li><li><a href="#">- Hotéis</a></li><li><a href="#">- Carros</a></li><li><a href="#">- Circuitos</a></li><li><a href="#">- Para Brasileiros</a></li></span></a></li></ul>
<li><a href="#">Cruzeiros</a></li>
<li><a href="#">Passagens Aéreas</a></li>
<li><a href="#">Reservas de Hotéis</a></li>
<li><a href="#">Dicas de Viajem</a></li>
<li><a href="#">Sobre Nós</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
<div id="centro"></div>
</body>
</html>

MAS ELE FICOU BEM ESTRANHO, SERÁ QUE TEM COMO você TESTAR AI FAZENDO UM FAVOR?

William Bruno · Setembro 29, 2011

esse span não faz sentido. Remova.

faça assim logo:

ul.sidenav li:hover ul {

além disso, você deve fechar a tag a, antes de abrir o UL:

<li><a href="#">Viajens pelo Brasil</a>
   <ul class="sidenav">

NetBoy16 · Setembro 29, 2011

Mas eu fechei a tag a, mas depois de ter fechado o spam, vou testar isso que você disse ai.

Agora ele não está mais estrano :lol:, mas o submenu ainda fica aparecendo sem eu colocar o pointeiro do mouse emcima do menu :(

Olha como ficou o código e ve se está tudo certo, eu olhe e aparentemente está certo, olha ai por favor e me diga

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#topo {
position:absolute;
left:-10px;
top:0px;
width:910px;
height:150px;
z-index:1;
}
#menu {
position:absolute;
left:0px;
top:151px;
width:250px;
height:650px;
z-index:2;
}
#centro {
position:absolute;
left:250px;
top:150px;
width:650px;
height:450px;
z-index:3;
}
ul.sidenav {
list-style:none;
margin:0 auto;
padding:0;
width:250px;
background-color:#0066FF;
border:1px solid #06C;
outline:1px solid #FFF;
}
ul.sidenav li a {
display:block;
text-decoration:none;
background:transparent url(img/arrow2.gif) no-repeat 5px 7px;
border-bottom:1px solid #06C;
border-top:1px solid #06C;
color:#FFF;
font:Verdana, Geneva, sans-serif 14px;
padding:15px 10px 10px 45px;	
width:195px;
}
ul.sidenav li a:hover {
 background: #FFF url(img/arrow1.gif) no-repeat 5px 7px;
 color:#0066FF;
 font:Verdana, Geneva, sans-serif 16px bold;
 border-top:1px solid #300;
 display:block;
 padding:10px 0;
 margin:0 0 0 -30px;
}
</style>

</head>

<body>
<div id="topo"></div>
<div id="menu">
<ul class="sidenav">
<li><a href="#">Home</a></li>
<li><a href="#">Viajens pelo Brasil </a><ul class="sidenav"><li><a href="#">- Pacotes</a></li><li><a href="#">- Hotéis</a></li><li><a href="#">- Resorts</a></li><li><a href="#">- Carros</a></li><li><a href="#">- Rodoviários</a></li><li><a href="#">- Hotéis Fazenda</a></li><li><a href="#">- Monte Sua Viajem</a></li></ul></li>
<li><a href="#">Viajens pelo Mundo </a><ul class="sidenav"><li><a href="#">- Pacotes</a></li><li><a href="#">- Hotéis</a></li><li><a href="#">- Carros</a></li><li><a href="#">- Circuitos</a></li><li><a href="#">- Para Brasileiros</a></li></ul></li>
<li><a href="#">Cruzeiros</a></li>
<li><a href="#">Passagens Aéreas</a></li>
<li><a href="#">Reservas de Hotéis</a></li>
<li><a href="#">Dicas de Viajem</a></li>
<li><a href="#">Sobre Nós</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
<div id="centro"></div>
</body>
</html>

Desde já estou muito grato por sua ajuda.

William Bruno · Setembro 29, 2011

usa a regra lá pra esconder:

ul.sidenav li ul {
       display:none;
}

as coisas só acontecem se você mandar acontecer.

NetBoy16 · Setembro 29, 2011

Então, o código fica assim:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#topo {
position:absolute;
left:-10px;
top:0px;
width:910px;
height:150px;
z-index:1;
}
#menu {
position:absolute;
left:0px;
top:151px;
width:250px;
height:650px;
z-index:2;
}
#centro {
position:absolute;
left:250px;
top:150px;
width:650px;
height:450px;
z-index:3;
}
ul.sidenav {
list-style:none;
margin:0 auto;
padding:0;
width:250px;
background-color:#0066FF;
border:1px solid #06C;
outline:1px solid #FFF;
}
ul.sidenav li a {
display:block;
text-decoration:none;
background:transparent url(img/arrow2.gif) no-repeat 5px 7px;
border-bottom:1px solid #06C;
border-top:1px solid #06C;
color:#FFF;
font:Verdana, Geneva, sans-serif 14px;
padding:15px 10px 10px 45px;	
width:195px;
}
ul.sidenav li a:hover {
 background: #FFF url(img/arrow1.gif) no-repeat 5px 7px;
 color:#0066FF;
 font:Verdana, Geneva, sans-serif 16px bold;
 border-top:1px solid #300;
 display:block;
 padding:10px 0;
 margin:0 0 0 0px;
}
ul.sidenav li ul {
display:none;
}
</style>

</head>

<body>
<div id="topo"></div>
<div id="menu">
<ul class="sidenav">
<li><a href="#">Home</a></li>
<li><a href="#">Viajens pelo Brasil </a><ul class="sidenav"><li><a href="#">- Pacotes</a></li><li><a href="#">- Hotéis</a></li><li><a href="#">- Resorts</a></li><li><a href="#">- Carros</a></li><li><a href="#">- Rodoviários</a></li><li><a href="#">- Hotéis Fazenda</a></li><li><a href="#">- Monte Sua Viajem</a></li></ul></li>
<li><a href="#">Viajens pelo Mundo </a><ul class="sidenav"><li><a href="#">- Pacotes</a></li><li><a href="#">- Hotéis</a></li><li><a href="#">- Carros</a></li><li><a href="#">- Circuitos</a></li><li><a href="#">- Para Brasileiros</a></li></ul></li>
<li><a href="#">Cruzeiros</a></li>
<li><a href="#">Passagens Aéreas</a></li>
<li><a href="#">Reservas de Hotéis</a></li>
<li><a href="#">Dicas de Viajem</a></li>
<li><a href="#">Sobre Nós</a></li>
<li><a href="#">Contato</a></li>
</ul>
</div>
<div id="centro"></div>
</body>
</html>

Apenas os menus aparecem normalmente, mas quando passo o mouse por cima ele muda a cor e a img, mas o texto fica por cima da img e os submenus não aparecem :huh:

EDIT: Quanto a questão do texto ficar em cima da img eu já me liguei que é o padding pois analisei o css, então ficou assim:

ul.sidenav li a {
display:block;
text-decoration:none;
background:transparent url(img/arrow2.gif) no-repeat 5px 7px;
border-bottom:1px solid #06C;
border-top:1px solid #06C;
color:#FFF;
font:Verdana, Geneva, sans-serif 14px;
padding-bottom:5px;
padding-left:40px;
padding-right:40px;
padding-top:5px;
width:170px;
}
ul.sidenav li a:hover {
 background: #FFF url(img/arrow1.gif) no-repeat 5px 7px;
 color:#0066FF;
 font:Verdana, Geneva, sans-serif 16px bold;
 border-top:1px solid #300;
 display:block;
 padding-bottom:5px;
 padding-left:40px;
 padding-right:40px;
 padding-top:5px;
 margin:0 0 0 0px;
 width:170px;
}

Agora oque falta é descobrir porque o menu não mostra o submenu :mellow:

William Bruno · Setembro 29, 2011

de novo.. só acontece se você mandar acontecer!

não estão aparecendopq você não mandou aparecer. Cadê o:

ul.sidenav li:hover ul { display: block; }

??

não precisa ficar recolando todo o código, isso dificulta a leitura do tópico, apenas indique oq você mudou.

So mande tudo novamente, se tiver mudado muita coisa.

NetBoy16 · Setembro 29, 2011

hmm, eu tinha pensado nisso, mas já tem o display block aki oh:

ul.sidenav li a {
display:block;
text-decoration:none;
background:transparent url(img/arrow2.gif) no-repeat 5px 7px;
border-bottom:1px solid #06C;
border-top:1px solid #06C;
color:#FFF;
font:Verdana, Geneva, sans-serif 14px;
padding-bottom:5px;
padding-left:40px;
padding-right:40px;
padding-top:5px;
width:170px;
}

Hmmm, agora foi, agora é só arrumar questão de cor e posicionamento, vlw :joia:

Só uma duvida rápida, usando o font: qual é a ordem certa? font-family e depeois vem oque ?

William Bruno · Setembro 29, 2011

font: bold 12px Tahoma;

NetBoy16 · Setembro 29, 2011

Hmmm, enquanto espera resposta fiz separado, agora ficou show:

<style type="text/css">
#topo {
position:absolute;
left:-10px;
top:0px;
width:910px;
height:150px;
z-index:1;
}
#menu {
position:absolute;
left:0px;
top:151px;
width:250px;
height:650px;
z-index:2;
}
#centro {
position:absolute;
left:250px;
top:150px;
width:650px;
height:450px;
z-index:3;
}
ul.menu {
list-style:none;
margin:0 auto;
padding:0;
width:250px;
background-color:#0066FF;
border:1px solid #06C;
outline:1px solid #FFF;
}
ul.menu li a {
display:block;
text-decoration:none;
background:transparent url(img/arrow2.gif) no-repeat 5px 7px;
border-bottom:1px solid #06C;
border-top:1px solid #06C;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
padding-bottom:5px;
padding-left:40px;
padding-right:40px;
padding-top:5px;
width:160px;
}
ul.menu li a:hover {
background: #FFF url(img/arrow1.gif) no-repeat 5px 7px;
color:#0066FF;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-weight:bolder;
border-top:1px solid #06C;
border-bottom:1px solid #06C;
display:block;
padding-bottom:5px;
padding-left:45px;
padding-right:45px;
padding-top:5px;
width:160px;
}
ul.menu li ul.submenu {
display:none;
}
ul.menu li:hover ul.submenu { 
display:block;
list-style:none;
padding:0;
width:250px;
background-color:#0066CC;
border:1px solid #06F;
outline:1px solid #FFF;
}
ul.submenu li a {
display:block;
text-decoration:none;
background:transparent url(img/arrow2.gif) no-repeat 5px 7px;
border-bottom:1px solid #06F;
border-top:1px solid #06F;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
padding-bottom:5px;
padding-left:50px;
padding-right:50px;
padding-top:5px;
width:130px;
}
ul.submenu li a:hover {
background: #FFF url(img/arrow1.gif) no-repeat 5px 7px;
color:#06C;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-weight:bolder;
border-top:1px solid #06F;
border-bottom:1px solid #06F;
display:block;
padding-bottom:5px;
padding-left:55px;
padding-right:55px;
padding-top:5px;
width:130px;
}
</style>

Só não sei como position a img do submenu pra ficar um pouco mais a frente da img do menu, sabe me dizer como eu faço tal façanha?

NetBoy16 · Setembro 29, 2011

Já tentei com margin e com padding, mas só o texto é movido, a img continua no lugar aonde estava

Edit: Consegui :clap: , é lá no background tem 5px, só mudei e deu certo, a imagem quando hover ele fica um poco mais abaixada, mas o padding e tamanho/posição das duas imagens e backgrounds são iguais, seilá porque, mas dá nada, isso n faz mal, tábom assim, olha ai como ficou:

Clique aqui

Muito obrigado mesmo por me aguentar essa manhã inteira :P :lol:

Pior que agora tá alinhado o texto com a img não tá ?

Arquivado

[Resolvido] Span suporta somente texto ?

Recommended Posts

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

NetBoy16 72

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante