Ir para conteúdo

POWERED BY:

Arquivado

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

reidark

CSS - Menu não colado a borda

Recommended Posts

Fala galera, voltei de novo, tudo bom?

Bem, tenho uma dúvida rápida e simples (espero).

To fazendo um menu com a propriedade de lista, tava indo tudo bem, so que deu um probleminha no final, que é mais ou menos isso:

 

n1a2qu.jpg

ndvlt3.jpg

Como vocês podem ver, ele não "cola" na borda ou deixa apenas 1 espaçozinho entre ela, e eu queria que ele ficasse assim.

 

Bem, meu código do menu é esse:

 

div#menu{
	width:1000px;
	height:45px;
	background-image:url(images/menubg.png);
	background-repeat:repeat;
	margin:50px;
}
	
div#menu ul li{
	display:inline;
	position:relative;
	float:left;
	border-right:groove;
	border-right-width:2px;
	border-right-color:#333;
}

div#menu ul li a{
	font-family:Euphemia;
	font-size:12px;
	font-stretch:condensed;
	font-weight:bold;
	color:#FFF;
	text-decoration:none;
	float:left;
	display:block;
	padding:13px 30px;
}

div#menu ul li a:hover{
	background-color:#111;
}

Agradeço se me ajudarem!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Possui algum CSS Reset? Já tentou zerar a margem do body?

body {
margin:0;
}

Posta o código HTML também, para que possa ser mais fácil identificar os elementos estilizados. Essa div#menu compreende todo o menu? Porque nesse caso, o problema seria na

margin:50px;

aplicada nele, não?

Dica:
1. Não faça o browser processar códigos desnecessários. Só chame "div" antes da id (ex.: div#menu) se for realmente necessário. No seu caso, não parece ser, pode chamar só com #menu.

2. Abrevie suas declarações CSS. Exemplo:

font-family:Euphemia;
font-size:12px;
font-stretch:condensed;
font-weight:bold;

Poderia ser simplesmente:

font: bold 12px Euphemia condensed;

:seta: http://maujor.com/tutorial/abreviacss.php

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim, eu tenho um:

 

*{
margin: 0px;
}

Esse margin:50px é pra ele "descolar" da div "pai" e deixar uma margem pra essa div "filho".

E sobre esse negócio de abreviar, é até bom, mas eu acostumei a fazer ele inteiro, e até porque o site é pequeno então um pouquinho de codigo a mais não vai fazer diferença (acho).

 

Mas teria alguma solução?

Compartilhar este post


Link para o post
Compartilhar em outros sites

E sobre esse negócio de abreviar, é até bom, mas eu acostumei a fazer ele inteiro, e até porque o site é pequeno então um pouquinho de codigo a mais não vai fazer diferença (acho).

Nesse caso, não afeta muito. Para sites pequenos, até vale a organização. Mas, de preferência, não deixe virar um hábito. :)

 

E sobre a solução, posta o HTML pra facilitar a identificação dos elementos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa, obrigado pela atenção, mas acabei de conseguir!

Era a coisa mais fácil do mundo, eu só tinha que adicionar isso:

 

div#menu ul{
	margin:0px;
	padding:0px;
}

Obrigado e problema resolvido!

Pode fechar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.