Ir para conteúdo

Arquivado

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

twpesquisa

Texto como bottom

Por , em Desenvolvimento frontend

Recommended Posts

twpesquisa    1

twpesquisa
Postado

Amigos,

 

tenho o código abaixo, porém estou quebrando cabeça em resolver apenas um detalhe,,,

gostaria de colocar o texto de cada link bem abaixo, ou seja, como bottom.

 

Alguém faz ideia de como resolver isso ?

 

 

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="pt" lang="pt">

<head>
<title>Menu Horizontal</title>
<style type="text/css">
<!--
#page-bar {
margin: 0px;
padding: 0px;
width:auto;
}

#page-bar ul {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}


#page-bar li {
float:left;
display:block;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}

#page-bar li a{
margin: 0px;
color:#000000;
display:block;
text-decoration: none;
width: 100px;
height:130px;
text-align:center;
vertical-align:bottom;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color:#000;
padding-top: 5px;
padding-bottom: 5px;
background-image:url(../imgs/png/menu_principal.png);
}

#page-bar li a:hover {
color:#FFF;
text-decoration: underline;
background-image:url(../imgs/png/menu_principal_ativo.png);
}

#page-bar li.selected a{
   color:#FFF;
background-image:url(../imgs/png/menu_principal_ativo.png);
}

-->
</style>
</head>

<body>
<ul id="page-bar">
<li><a href="url do item" target="_blank">Item 1</a></li>
<li class="selected"><a href="url do item" target="_blank">Item 2</a></li>
<li><a href="url do item" target="_blank">Item 3</a></li>
<li><a href="url do item" target="_blank">Item 4</a></li>
<li><a href="url do item" target="_blank">Item 5</a></li>
</ul>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Odair Oliveira_163654    2

Odair Oliveira_163654
Postado

Faz assim, testei aqui e deu certo: :thumbsup:

 

#page-bar li a{
color:#000000;
display:table-cell;
text-decoration: none;
width: 100px;
height:130px;
text-align:center;
vertical-align:bottom;
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
color:#000;
padding-top:0px;
background-image:url(../imgs/png/menu_principal.png);

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