Ir para conteúdo

POWERED BY:

Arquivado

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

Daniel Emiliano

Problemas de posicionamento de texto em menu

Por , em Desenvolvimento frontend

Recommended Posts

Daniel Emiliano    0

Daniel Emiliano
Postado

Gente, eu tô começando no que se diz respeito a webstandard

Me propus um desafio de fazer meu primeiro site valido em xhtml.

Eu até consegui, com exceção do menu do site.

Dem uma olhada nele:

 

www.danielemiliano.com.br/menu

 

Eu queria que o texto fique centralizado verticalmente dentro dos botões e não no topo como está.

Queria também que ele ficasse uns 15px afastado do canto direito da imagem.

Mas não consigo fazer nenhuma dessas duas coisas http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

Alguém pode me ajudar ?

Tô a 3 dias tentando isso.

Já consegui arrumar de várias formas, mas daí o validador de código não reconhece.

Tô pirandoooooooooooooooooooooooooo

Socorroooooooooooooooooooooooooooo

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Fiz umas pequenas alterações, espero ter ajudado:

<!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>Menu</title> <style type="text/css"> a { font-family: Arial; font-size: 9pt; color: #808080; text-decoration: none; font-weight: bold; } a:hover { color: #517854; } #menu { position: relative; width: 150px; } ul#rollover { margin: 0; padding: 0; list-style-type: none; width: auto; position: relative; display: block; } ul#rollover li a { padding: 0px; display: block; height: 30px; width: 150px; background: url('http://www.danielemiliano.com.br/menu/menu1.gif') no-repeat top right; text-align: right; margin-right: 15px; } ul#rollover li a:hover { background: url('http://www.danielemiliano.com.br/menu/menu2.jpg') no-repeat top right; } ul#rollover li span { margin-right: 15px; display: block; padding-top: 6px; } </style> </head> <body> <div id="menu"> <ul id="rollover"> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> <li><a href="index.htm" title="menu"><span>Texto do menu</span></a></li> </ul> </div> </body></html>

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Emiliano    0

Daniel Emiliano
Postado

webphlex

Valeu pela ajuda irmão.

Seu código funcionou direitinho ;)

 

 

RoXby

Pois é cara, muito bom esse tutorial.

Graças a ele entendi perfeitamente a funcionalidade desses itens.

Na verdade eu tinha lido isso ontem e consegui eu mesmo arrumar o menu graças a ele.

Ficou diferente da forma como o webphlex postou, mas funcionou igualmente e também foi validado.

 

Grato pela ajudas de vocês.

Só dem uma olhada se da forma que eu fiz está certo mesmo.

Abraço

 

Resultado final: http://www.danielemiliano.com.br/menu/

 

<!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>Menu</title>

<style type="text/css">

a {

font-family: Arial;

font-size: 9pt;

color: #808080;

text-decoration: none;

font-weight: bold;

}

a:hover {

color: #517854;

}

#menu {

position: relative;

width: 150px;

}

ul#saturday {

margin: 0;

padding: 0;

list-style-type: none;

width: auto;

position: relative;

display: block;

}

ul#saturday li a {

padding-top: 6px;

padding-right: 15px;

display: block;

height: 24px;

width: 135px;

background: url('http://www.danielemiliano.com.br/menu/menu1.gif') no-repeat top right;

text-align: right;

}

ul#saturday li a:hover {

background: url('http://www.danielemiliano.com.br/menu/menu2.jpg') no-repeat top right;

}

</style>

</head>

<body>

<div id="menu">

<ul id="saturday">

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

<li><a href="menu/index.htm" title="menu">Texto do menu</a></li>

</ul>

</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Existiam várias maneiras para fazer isso ;).Ficou porreiro.Abraço.Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoXbY    3

RoXbY
Postado

ashdiaushdas..qualquer coisa do genero é pessoal... layouts, códigos, isso depende da interpretação de cada pessoa, como ninguém igual ou pensa igual, apenas parecido.... nem preciso formular mais meu texto.. rssssvalidando de qualquer forma está correto X)abração rapaz!! ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Pois é existem diversas formas...

 

Eu particularmente gosto de utilizar line-height.

 

Só colocar a altura da mesma altura da linha.

 

Da pra fazer só com line-height sem o height.. mas é bom definir a altura pra evitar incompatibilidade com alguns navegadores ;)

 

ul#saturday li a {

display: block;

width: 135px;

height: 24px;

line-height: 24px;

background: url('http://www.danielemiliano.com.br/menu/menu1.gif') no-repeat top right;

text-align: right;

}

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