[Resolvido] Alinhamento de menu em CSS

Alexandre_Cruz · Abril 25, 2009

Saudações,

Hoje enfreintei um problema apesar de tosco estou sem chão... estou com o menu "pronto" mas estou com problema para alinha-lo ao centro e também com a questão do backgroud.

O que quero afzer é o seguinte: usar a img de 1px de largura como fundo do menu (ocupando todo o "width" da pagina, fiz isso mas eu só consegui deixando o menu alinha a esquerda quero alinhado ao centro), Caso alguém possa consertar para mim agradeço desde ja, Alexandre

Asseguir estao os codes dos 2 arquivos, CSS e o HTML + imagens.

Imagens

NOTA: uma das imagens possue 1px de largura, sendo assim pode ser que voce acabe não vendo claramente a mesma, mas use o zoom do IE para visualizar ou salve o destino em uma pasta e visualize com uma ferramenta correspondente

esta aki é a de 1 px >> Imagem Postada <<

Imagem Postada

style.css

/* ----------------- CSS menu - Seventh Day Adventist Church - São Bernardo do Campo ----------------- */
/* --------------------------------------- Alexandre Cruz @ 2009 --------------------------------------*/
.black #iasd{
	position:center;
	display:block;
	height:42px;
	font-size:11px;
	font-weight:bold;
	background:transparent url(images/black_background.gif) repeat-x top left;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	text-transform:uppercase;
}
.black #iasd ul{
	margin:0px;
	padding:0;
	list-style-type:none;
	width:auto;
}
.black #iasd ul li{
	display:block;
	float:left;
	margin:0 3px 0 0;
}
.black #iasd ul li a{
	display:block;
	float:center;
	color:#000000;
	text-decoration:none;
	padding:14px 22px 0 22px;
	height:28px;
}
.black #iasd ul li a:hover,.black #iasd ul li a.atual{
	color:#FFF;
	background:transparent url(images/black_backgroundOVER.gif) no-repeat top center;
}
/* ------------------------------------------- Fim Menu CSS ------------------------------------------ */

index.htm

<!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="en" lang="en" >
<head>
<title>Igreja Adventista do Sétimo Dia de São Bernardo do Campo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<table align="center" width="550" height="42">
	<div class="black">
	<div id="iasd">
	<ul>
	<li><a href=http://" title="css menus" class="atual">Home</a></li>
	<li><a href=http://" title="css menus">A Igreja</a></li>
	<li><a href=http://" title="css menus">Departamentos</a></li>
	<li><a href=http://" title="css menus">Atuação</a></li>
	<li><a href=http://" title="css menus">Contato</a></li>
	</ul>
	</div>
	</div>
	</table>
</body>
</html>

William Bruno · Abril 25, 2009

Só altera isso aqui:

.black #iasd ul {
	margin: 0 auto;
	width: 520px;
	background-color: #ff0;
	padding:0;
	list-style-type:none;
}

Ah.. e:

-> tira essa tabela da marcação.

-> coloca as aspas como delimitador:

<li><a href="http://" title="css menus" class="atual">Home</a></li>

E dá uma revisada, tem marcação de mais, tem bastante coisa desnecessária ai..

<div id="iasd">
	<ul>

poderia ser:

<ul id="iasd">

afinal, o UL é um elemento nivel de bloco, tão bom qnto a div..

Alexandre_Cruz · Abril 25, 2009

Opa, bem não sei de voce, ams eu deixei assim para ficar mais organizado, vou ver como fica do seu modo, assim que terminar publico em minha pagina o resultado e jogo o link dela aki, Obrigado, Alexandre

William Bruno · Abril 25, 2009

Exatamente oque você chama de "organizado"? :huh:

veja.. elemento desnecessário, não "organiza" código, mas deixa ele confuso.. e mais pesado..

-> a table ali, é um erro

-> a falta de aspas no atrituto href é outro erro

-> uma div com id, englobando um ul sem id, é uma 'redundância'..

E se fosse pensar em "organização", o teu código está mal identado. Com a tua marcação, o correto seria:

<div class="black">
		<div id="iasd">
			<ul>
				<li><a href="http://" title="css menus" class="atual">Home</a></li>
				<li><a href="http://" title="css menus">A Igreja</a></li>
				<li><a href="http://" title="css menus">Departamentos</a></li>
				<li><a href="http://" title="css menus">Atuação</a></li>
				<li><a href="http://" title="css menus">Contato</a></li>
			</ul>
		</div><!-- /iasd -->
	</div><!-- /black -->

Alguns comentários, são interessantes.. mais pra frente, pode ficar confuso, e você não ter certeza oq fecha oque.

Mas vê ai, a alteração que propus, joga o menu pro centro da tela, sem tirar o efeito do background ocupar 100% de width.

.black #iasd ul {

Alexandre_Cruz · Abril 25, 2009

Concordo, mas... a falta das aspas foi sem querer xD e o table era uma tentativa de alinhar o menu (fiz a table limitei o tamanho e centralizei, ficou assim + - só para eu testar mesmo)

Alguns comentários, são interessantes..

Sim, eu apenas inseri o basico tierei os coments para n ficar muito grande (não sei se há limite de caracteres aqui, na duvida tirei)

Bem o link com o conteudo segue abaixo, não consegui arrumar da forma que me recomendou.

Clique aqui para baixar

Peço que veja o menu (sem table ja) e re-veja o que voce me passou, estou viajando na maionese

PS: Preciso da div do meu (se ainda permanecer em div) no centro e que o eixo x todo seja ocupado pela img black_background.gif (usando repeat)

William Bruno · Abril 25, 2009

Hum.. você não entendeu direito oque eu disse..

a minha intenção, era que você deixasse 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" xml:lang="en" lang="en" >
<head>
	<title>Igreja Adventista do Sétimo Dia de São Bernardo do Campo</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<div class="black">
	<img src="images/left_menu.gif" alt="" class="left" />
	<ul id="iasd">
		<li><a href="http://" title="css menus" class="current">Home</a></li>
		<li><a href="http://" title="css menus">A Igreja</a></li>
		<li><a href="http://" title="css menus">Departamentos</a></li>
		<li><a href="http://" title="css menus">Atuação</a></li>
		<li><a href="http://" title="css menus">Contato</a></li>
	</ul>
	<img src="images/right_menu.gif" alt="" class="right" />
</div><!-- /black -->

</body>
</html>

style.css

* {
	margin: 0;
	padding: 0;
	list-style: none;
}
.black {
	height: 42px;
	font-size: 11px;
	font-weight: bold;
	background: transparent url('images/black_background.gif') repeat-x top left;
	font-family: Arial, Verdana, Helvitica, sans-serif;
	text-transform: uppercase;
	position: relative;
}
.black img.left {
	position: absolute;
	left: 0;
	top: 0;
}
.black img.right {
	position: absolute;
	right: 0;
	top: 0;
}
.black ul#iasd {
	margin: 0 auto;
	width: 615px;
}
.black ul#iasd li{
	margin-right: 3px;
	float: left;
}
.black ul#iasd li a{
	color: #000;
	line-height: 42px;
	text-decoration: none;
	display: block;
	/* width: 100px; */
	text-align: center;
	padding: 0 22px;
}
.black ul#iasd li a:hover, 
.black ul#iasd li a.current{
	color: #fff;
	background: transparent url('images/black_backgroundOVER.gif') no-repeat top center;
}

Alexandre_Cruz · Abril 25, 2009

kkkkkk tava boiando mesmo xD, mas uma coisa:

1- o que seria o * no inicio do css ?

2- Apenas o primeiro menu ficou com o bg certo o resto ficou amarelo Oo, segue abaixo img:

Imagem Postada

Agradeço a aatenção até agora, Alexandre

EDIT: Achei um erro: voce por engano não pos a img de bg para carregar em todas as <li> apenas modificou a da class current xD, falta as bordas, vou ver se arrumo

Alexandre_Cruz · Abril 25, 2009

Completo, arrumei os code de bg e esta tudo funcionando corretamente, obrigado

(estou de saida, assim que voltar posto o code arrumado e os arquivos de exemplo para as pessoas, grato, Alexandre)

William Bruno · Abril 25, 2009

Dá uma olhada..

http://forum.imasters.com.br/index.php...t&p=1275286

Editei os códigos.. para posicionar as imagens de canto do teu menu...

última coisa que falta pra ficar bem bacana, é dar um min-width pro ".black", pra ele não engolir os itens, se diminuir muito a janela.

o * é um seletor global. você consegue aplicar propriedades à todos os elementos usando ele.

Eu nesse caso, apliquei margin e padding: 0, pra todo mundo, "resetando" assim o CSS.

Alexandre_Cruz · Abril 25, 2009

Resultado Final:

http://aleweb.webs.com/imasters/menu%20css/index.htm

style.css

* {
	margin: 0;
	padding: 0;
	list-style: none;
}
.black {
	height: 42px;
	font-size: 11px;
	font-weight: bold;
	background: transparent url('images/black_background.gif') repeat-x top left;
	font-family: Arial,Verdana,Helvitica,sans-serif;
	text-transform: uppercase;
}
.black ul#iasd {
	margin: 0 auto;
	width: 820px;
	background: transparent url('images/black_background.gif') repeat-x top center;
}
.black ul#iasd li{
	display: block;
	float: left;
	margin: 0 3px 0 0;
}
.black ul#iasd li a{
	background: transparent url('images/black_background.gif') repeat-x top center;
	display: block;
	color: #000;
	text-decoration: none;
	padding: 14px 22px 0 22px;
	height: 28px;
}
.black ul#iasd li a:hover, 
.black ul#iasd li a.current{
	color: #fff;
	background: transparent url('images/black_backgroundOVER.gif') no-repeat top center;
}

index.htm

<!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="en" lang="en" >
<head>
	<title>Igreja Adventista do Setimo Dia de São Bernardo do Campo</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

<div class="black">
	<ul id="iasd">
		<li><a href="http://" title="Home" class="current">Home</a></li>
		<li><a href="http://" title="A igreja">A Igreja</a></li>
		<li><a href="http://" title="Departamentos">Departamentos</a></li>
		<li><a href="http://" title="Atuação">Atuação</a></li>
		<li><a href="http://" title="Contato">Contato</a></li>
		<li><a href="http://" title="Contato">Contato</a></li>
		<li><a href="http://" title="Contato">Contato</a></li>
	</ul>
</div><!-- /black -->

</body>
</html>

// Adicionei o code para inserir o background nas imagens e adicionei ao estilo da borda entre os menus o background também, imagens estão disponiveis no inicio do tópico

Arquivado

[Resolvido] Alinhamento de menu em CSS

Recommended Posts

Alexandre_Cruz 4

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

Alexandre_Cruz 4

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

Alexandre_Cruz 4

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

Alexandre_Cruz 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alexandre_Cruz 4

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

Alexandre_Cruz 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante