Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, eu tenho um pequeno menu, que mostrará 6 images, ele me mostra tanto na vertical e horizontal.
HTM
<div class="BookmarkSites">
<ul>
<li>
<a target="_blank" href="[http://www.teste.com.br">](http://www.teste.com.br)
<img src="imagem1.gif">Imagem</a>
</li>
<li>
<a target="_blank" href="[http://www.teste.com.br">](http://www.teste.com.br)
<img src="imagem2.gif">IMagem 22</a>
</li>
<li>
<a target="_blank" href="[http://www.teste.com.br">](http://www.teste.com.br)
<img src="imagem3.gif">Imagem 35554</a>
</li>
<li>
<a target="_blank" href="[http://www.teste.com.br">](http://www.teste.com.br)
<img src="imagem4.gif">teste22</a>
</li>
<li>
<a target="_blank" href="[http://www.teste.com.br">](http://www.teste.com.br)
<img src="imagem5.gif">jdfhafh</a>
</li>
<li>
<a target="_blank" href="[http://www.teste.com.br">](http://www.teste.com.br)
<img src="imagem6.gif">jkdfgs saiopaweio</a>
</li>
</ul>
</div>.BookmarkSites{font-size:12px;font-family:verdana;margin:0px 0px 0px 0px}
.BookmarkSites a:link{color: #000000;text-decoration:none}
.BookmarkSites a:hover{color: #FF0000;text-decoration:none}
.BookmarkSites ul{list-style:none}
.BookmarkSites ul li{display:inline}
.BookmarkSites img{width:12px;height:12px;position:relative;top:1px;margin: 0px 2px 0px 0px;padding:2px 2px 0px 0px;border-style:none;}
A dúvida, com essa estrutura, sem alterar o div, ul e li, sem colocar nenhuma classe nova, ou talvez uma nova, é possível quebrar o menu em 2 linhas, ficaria 3 imagens em cima e 3 embaixo, com o seus textos, lembrando que dependendo do texto, um vai ser maior que o outro.
EX:
Imagem texto 1 Imagem texxxxto 2 Imagem texto 3
Imaguuuuem texto 4 Imagem texto 5 Imagemsss texto 6
Olá silverfox, mas como você quebraria seu menu?essa é minha dúvida.
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
}
#menu {
font: Arial;
background:#ccc;
padding: 3px;
width: 167px;
}display:block;
background:#fff;
margin: 3px;
}height:20px;
padding: 2px;
border-left:10px #A4D1FF solid;
display:block;
text-decoration:none;
color:#000000;
}border-color:#999;
text-decoration: underline;
}
</style>
<div id="menu">
<ul>
<li><a href="">Link #1</a></li>
<li><a href="">Link #2</a></li>
<li><a href="">Link #3</a></li>
<li><a href="">Link #4</a></li>
<li><a href="">Link #5</a></li>
</ul>
</div>Link #1
Link #2
Link #3
Link #4
Link #5
Para fazer assim:
Link #1 Link #2 Link #3
Link #4 Link #5
Sem utilizar br, só no css, eu não posso criar class ou id novos, utilizar apenas uma class que é do DIV.
O meu menu é montado por uma função em .js, então eu só tenho o css para manipular ele.
bastaria definir o width do elemento pai(nesse caso o #MENU):
<style type="text/css">
*{
margin:0;
padding:0;
list-style:none;
}
#menu {
font: Arial;
background:#ccc;
padding: 3px;
width: 480px;
height:70px;
}float:left;
display:block;
background:#fff;
width: 150px;
margin: 3px;
}height:20px;
padding: 2px;
border-left:10px #A4D1FF solid;
display:block;
text-decoration:none;
color:#000000;
}border-color:#999;
text-decoration: underline;
}
</style>
<div id="menu">
<ul>
<li><a href="">Link #1</a></li>
<li><a href="">Link #2</a></li>
<li><a href="">Link #3</a></li>
<li><a href="">Link #4</a></li>
<li><a href="">Link #5</a></li>
<li><a href="">Link #5</a></li>
</ul>
</div> ;)você falou tudo manin, valeu, deu certo agora.
Foi até util pra mim isso!
Muito bom Silver...
:)
aplique ALT="" as TAGs <IMG>
não use DISPLAY:INLINE; use float:left;
veja neste tópico minha ultima mensagem:
http://forum.imasters.com.br/index.php?showtopic=251486
lá tem um exemplo de menu, bastará aplicar um tamaho mair a #menu e aplicar float:left; aos LIs
e só uma pergunta por acaso todas as imagens são iguais ou são diferentes ??
ponha um link para vermos seu menu com imagens