menu horizontal com 100% de largura

[Aline Branco 0]

Olá! http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

 

Estou tentando fazer um menu q tem 6 opções, de larguras diferentes. E tem q ocupar toda a largura destinada ao menu (930px). Como faço para q se ajuste automaticamente?

 

Tentei usar display:table, mas não funcionou.

 

Tentei ajustar com padding, mas se coloco 58px quebra ( uma opção do menu fica na linha debaixo); Se coloco 57px, ficam faltando uns 5pxs, e dá pra perceber.

 

To quase apelando... rsrsss Colocando uma tabela com width:100% e uma opção do menu em cada célula. rsrssss Assim sei q vai funcionar, mas isso é resquício. kkkkk tableless pra q te quero!!!! kkkk http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

Será q alguém pode me ajudar???

 

Desde já, obrigada! http://forum.imasters.com.br/public/style_emoticons/default/natal_happy.gif

[William Bruno 1501]

Coloca o teu código... você construiu teu menu com UL LI?

experimentou um display: block no LI ?

 

Enfim, entende a diferença de um elemento nivel de bloco, e um inline?

[Aline Branco 0]

O código:

<ul class="menu_top">
		<li >
			<a href="#">
				<span>New Applications</span>
			</a>
		</li>
		
		<li >
			<a href="#">
				<span>Suggested Sites</span>
			</a>
		</li>

		<li >
			<a href="#">
				<span>In Site</span>
			</a>	
		</li>

		<li >
			<a href="#">
				<span>On File</span>
			</a>
		</li>

			<li >
			<a href="#">
				<span>Denied</span>
			</a>
		</li>		

		<li >
			<a href="#">
				<span>Retired</span>
			</a>
		</li>
	</ul>

 

/* MENU */

	.menu_top {
		height: 40px;
	}

	.menu_top li {
		list-style-type: none;
		float: left;
		text-align: right;
		background: url(../images/bg_bt_green.jpg) repeat-x top;
		display: block;
		height:40px;
		
		}

	.menu_top li a {
		background: url(../images/left_bt_green.jpg) no-repeat top left;
		padding-left: 15px;
		display: block;
		text-decoration: none;		
	}

	.menu_top li a span {
		display: block;
		height: 28px;
		background: url(../images/more_bt_green.jpg) no-repeat top right;
		font: bold  italic 14px "Arial";
		color: #333;
		padding: 15px 57.5px 0 13px;
		*cursor:hand;
	}

[Carlos Designer 0]

cade o seu css?

[Aprendiz CSS 3]

tem um link disso no ar

 

abraço

[William Bruno 1501]

<style type="text/css">
.menu_top {
	width: 930px;
}
.menu_top li {
	background-color: #ff0; /*enchergar q o LI herda o width do UL*/
	margin-bottom: 5px; /* só para você perceber o efeito*/
}
.menu_top li a {
	display: block;/* tornando o a block, todo o width dele, se torna um link*/
}
</style>

Coloque como deveria ficar, ainda não entendi bem oq você não conseguiu fazer.

Em todo caso, rode esse CSS para ver.

[Aline Branco 0]

tem um link disso no ar

 

abraço

Não. Ainda em desenvolvimento.

 

cade o seu css?

Editei o meu post e coloquei o css logo abaixo do html.

[Aprendiz CSS 3]

tenta colocar pelo menos em algum server free!

 

abraço

[Scaico 0]

eu acho que o que ela quer é que as margens esquerda e direita sejam iguais...

talvez seja o caso de colocar:

 

.menu_top {
height: 40px;
margin:0 auto;
}

[Aline Branco 0]

Testei mas,... Realmente, o LI herda atributos do UL, mas não está herdando width. E o ".menu_top li a" está com display:block.

 

Muito obrigada por me ajudar. Vamos conseguir. rsss

 

http://forum.imasters.com.br/public/style_emoticons/default/natal_smile.gif

----

[William Bruno 1501]

Aline, mostra o teu CSS.

Se você rodar esse CSS que te sugeri, acontece de herdar o width tb... em todo caso, você ainda pode fazer a redundância de colocar:

width: 100% no LI... coloque o teu CSS para vermos oq você fez.

 

Eu comentei o motivo de ter colocado o display: block, como é o resultado final?

[Aline Branco 0]

Vamos lá... Deixa ver se consigo me explicar melhor. rssss

 

Eu quero q o menu tenha width:100%

E q os itens do menu se ajustem automaticamente para ocupar os 100% da largura destinada ao menu.

 

Então, já q são 6 itens (e 100 dividido por 6 é aproximadamente 16.6%), pensei em colocar width:16.6% para li. Só q os itens do menu possuem tamanhos diferentes. E os dois primeiros itens ficam em duas linhas com essa largura. Ou seja, os li não podem ter larguras iguais. Eles tem q se ajustar automaticamente (como as tabelas fazem. Elas conseguem ocupar 100% da largura e ter as colunas de tamanhos diferentes, ajustadas automaticamente).

 

Tentei usar display: table-cell e display: table. Não funcionou. Mas confesso q nunca havia usado isso, então posso ter usado errado.

 

Como essa página é para ser entregue amanhã; consegui ajustar "na mão mesmo" rsss Com uso de padding.

Troquei os spans por divs e ajustei os paddings para conseguir o efeito desejado.

.menu_top li a div {
		display: block;
		height: 28px;
		background: url(../images/more_bt_green.jpg) no-repeat top right;
		font: bold  italic 14px "Arial";
		color: #333;
		padding: 12px 45.5px 0 25px;
		_float: left;
		_text-decoration: none;		
		*padding-right:42px;
		}

Tá funcionando no IE6, IE7 e Firefox. Mas esse jeito q fiz é "gambiarra". Tá com hacks. Tive q colocar style em uma div, por causa do IE (style="padding-right:45px;")... Enfim, não é a melhor forma, mesmo!!!! rssrsss O código não vai validar.

Vou separar em dois arquivos css, para poder ajudar na validação. Mas tenhos hacks específicos pra IE6. AFF!

Tem q ter uma forma melhor de se fazer isso.

[Aline Branco 0]

William Bruno,

 

Mostrei meu CSS. Eu editei meu post e coloquei o CSS e o HTML logo no início. http://forum.imasters.com.br/public/style_emoticons/default/natal_smile.gif

 

Coloquei pra rodar esse CSS que você sugeriu, mas não funcionou. http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif

Posso tentar novamente com mais calama amanhã.

 

Quando coloco width: 100% no LI, cada LI fica com 100% (ou seja com os 950px totais).

Assim, o menu fica "vertical", um link abaixo do outro.

 

não, você não comentou "o motivo de ter colocado o display: block, como é o resultado final. "

 

Mais uma vez, muito obrigada. Obrigada pela ajuda, pela atenção,... http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

 

Peço desculpa pela demora em te responder, mas... Hoje foi minha apresentação de projeto final na faculdade. Eu tava a mil! rssrssss

 

Até amanhã,

 

Aline

[brcontainer 16]

.menu_top li a div {

div dentro de <A> não é semantico.

 

use classes em determinados casos apenas(como elementos que se repetem)

Nesse caso use ID.