Ir para conteúdo

POWERED BY:

Arquivado

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

kreator

[Resolvido] alinhamento de links para menu!

Por , em Desenvolvimento frontend

Recommended Posts

kreator    0

kreator
Postado

opa galera,+ duvida!!!!to montando meu site e na parte do menu criei isso

 

<div id="menu">
<ul>

<li><a href="#">Home |</a></li>
<li><a href="#">Portifólio |</a></li>
<li><a href="#">Clientes |</a></li>
<li><a href="#">Contato |</a></li>


</ul>
</div><!-- menu -->

no servidor ele fica assim

 

home

portifólio

clientes

contato

 

eu quero assim

 

home | portifólio | clientes | contato

 

queria saber se eh no html ou no css q faço isso!!!

 

desde já agradeço http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Dá float nos LI.

e isso:

<div id="menu">
<ul>
poderia ser:

<ul id="menu">

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Kreator,

 

tente isso:

 

#menu ul {
	list-style: none;
}

#menu ul li {
	float: left;
	margin: 0 5px 0 5px;
}

#menu ul li a {
	text-decoration: none;
	font-size: 11px;
	color: #737E80;
	letter-spacing: 1px;
}

Poderia ser feito, também com o display: inline, mas eu prefiro usar float: left.

 

Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Não perdeu o link, apenas sobreescreveu o estado hover.

#menu ul li a:hover {
tal tal

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Aqui está normal:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style>
* {
	margin: 0;
	padding: 0;
}

#menu ul {
	list-style: none;
}

#menu ul li {
	float: left;
	margin: 0 5px 0 5px;
}

#menu ul li a {
	text-decoration: none;
	font-size: 11px;
	color: #737E80;
	letter-spacing: 1px;
}

#menu ul li a:hover {
	background-color: #333333;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="menu">
<ul>

<li><a href="#">Home</a> | </li>
<li><a href="#">Portifólio</a> | </li>
<li><a href="#">Clientes</a> | </li>
<li><a href="#">Contato</a></li>


</ul>
</div><!-- menu -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

kreator    0

kreator
Postado

vou passar o code inteiro para ver se n eh outro erro!!

 

<!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>
</head>

<body>
<?
include "css.php";
?>
<div id="fundo_paginas">

<div id="geral_paginas">

<div id="conteudo"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400">
		 <param name="movie" value="seu swf.swf">
		 <param name="quality" value="best">
		 <embed src="swf/background_home.swf"quality="Best" wmode=transparent pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="700" wmode="transparent"></embed>
</object>

</div><!-- conteudo -->

<div id="menu">
<ul>

<li><a href="#">Home |</a></li>
<li><a href="#">Portifólio |</a></li>
<li><a href="#">Clientes |</a></li>
<li><a href="#">Contato |</a></li>


</ul>
</div><!-- menu -->

</div><!-- geral paginas-->

</div><!-- fundo paginas -->

</body>
</html>

 

ARQUIVO .css

 

@charset "utf-8";
/* CSS Document */

#fundo_paginas{ background:inherit; background: #FFF; width:1000; height:700;}

#geral_paginas{ padding-top:0px}


#conteudo{ width:1000px;
		   height:585px;
}

#menu{ margin-top: 0px;background:inherit; background: #FF0;
width:1200; height:22;;float: none;
border:0px solid #F00;}

#menu ul {  
	list-style: none;
}

#menu ul li {
	float: left;
	margin: 0 5px 0 5px;
}

#menu ul li a {  
	text-decoration: none;
	font-size: 11px;
	color: #737E80;
	letter-spacing: 1px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Aqui deu certo em todos os browsers. :huh: :huh: :huh:

 

<!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>
<style type="text/css">
#fundo_paginas{ background:inherit; background: #FFF; width:1000; height:700;}

#geral_paginas{ padding-top:0px}


#conteudo{ width:1000px;
		   height:585px;
}

#menu{ margin-top: 0px;background:inherit; background: #FF0;
width:1200; height:22;;float: none;
border:0px solid #F00;}

#menu ul {  
	list-style: none;
}

#menu ul li {
	float: left;
	margin: 0 5px 0 5px;
}

#menu ul li a {  
	text-decoration: none;
	font-size: 11px;
	color: #737E80;
	letter-spacing: 1px;
}
#menu ul li a:hover {
	background-color: #333333;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<?
include "css.php";
?>
<div id="fundo_paginas">

<div id="geral_paginas">

<div id="conteudo"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400">
		 <param name="movie" value="seu swf.swf">
		 <param name="quality" value="best">
		 <embed src="swf/background_home.swf"quality="Best" wmode=transparent pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1000" height="700" wmode="transparent"></embed>
</object>

</div><!-- conteudo -->

<div id="menu">
<ul>

<li><a href="#">Home |</a></li>
<li><a href="#">Portifólio |</a></li>
<li><a href="#">Clientes |</a></li>
<li><a href="#">Contato |</a></li>


</ul>
</div><!-- menu -->

</div><!-- geral paginas-->

</div><!-- fundo paginas -->

</body>
</html>

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