[CSS] Menu com bloco

[Zionrj 0]

Então galerinha estou com um probleminha (creio eu que seja simples, mas sou novato nisso...)

Criei um menu em CSS sendo que gostaria que ele fizesse um efeito de Bloco quando o mouse passar em cima... porém é necessário q ele fique do tamanho que criei pra tabela (altura) no caso foi de 43px. e qndo faço isso o texto (no caso link) sobe ao invés de ficar parado.

Aqui está uma imagem de tudo que falei acima (só que o correto é uma imagem de como deveria ter ficado):

 

 

Código Css:

 

 

body,td,th {
	font-family: Barmeno-Medium;
	font-size: 13px;
	color: #FFFFFF;
}

a {
	font-family: Barmeno-Medium;
	  display:block;
	font-size: 13px;
	color: #FFFFFF;
	
}
a:link {
	text-decoration: none;
		  display:block;
		color: #FFFFFF;
}
a:visited {
	text-decoration: none;
	  display:block;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	  display:block;
	font-family: Barmeno-Medium;
	font-size: 13px;
	line-height: normal;
	color: #FFFFFF;

}
a:active {
	text-decoration: none;
	  display:block;
	color: #FFFFFF;
}
a { font-syle:normal; font-weight:normal;}
a:hover {
	background-color: #920008;
	color: #FFFFFF;
	display:block;
	height:43px;
	font-family: Barmeno-Medium;
	font-size: 13px;
	background-position: center center;
	text-decoration: none;
	position: static;
	font-variant: normal;
	text-transform: none;
	font-style: normal;
	line-height: normal;
}

Já mechi em tudo que vocês possam imaginar... tanto que o código está grande...

Até li algumas coisas na internet mas nda que deixe eu aumentar na altura.

Então... Se alguem souber dá uma força aew!

Abraços

[Maujor 144]

Ola,

Teu CSS esta uma confusão total.

Estude mais um pouco os fundamentos das CSS antes de passar a prática.

[Kikitten 0]

Bom não vou contrariar o Maujor ^^ estude mais... porém existe uma coisa que pode ajudar.

Troque o line-height pelo mesma altura do menu, pelo que entendi 43px...

[Zionrj 0]

Olá Amigos...

realmente qndo falei que estou começando é pq nao tenho mta noção!

mas já pesquisei em bastantes sites sobre isso, principalmente um que tbm se chamava maujour que tinha bastante coisa f*** mas nda que resolva o meu problema...

Eu sei que meu css está grande e talvez "Bagunçado" mas acho que se alguem puder me apresentar alguma alternativa... estou a ouvidos...

[Kikitten 0]

Pelo jeito você não está prestando atenção o tal do maujour como você escreveu foi o primeiro a te responder o Maujor você vai aprender muito no site dele com certeza é só procurar. E se leu meu post com atenção já dei uma dica.

[Zionrj 0]

Então... eu coloquei a line height com 43px e nao mudou nda nao!

e tpw...procurei no site do maujour tb...mas o mais parecido foi um que parecia mto com isso que eu quero, mas o tamanho do bloco era pequeno... e no meu caso é necessário que o bloco seja maior...e o texto fique estático... entende?

Já tow ficando careca com isso...hauahaua... ow louco... será que existe isso ou eu que estou inventando um novo css... pq qndo projetei o site nao pesquisei saber se realmente existe esse css pq de inicio tbm poderia ser como imagem cambiavel (que sou contra);

Então...alguem já viu isso?

[Kikitten 0]

Bom se o line-height não funcionou... o CSS ta bagunçado mesmo. Infelizmente não vou te passar o codigo pronto ^^

Estude esse código... está bem comentado ... se ler saberá como mudar para ficar "do seu jeito"

Menu no site do Maujor

Porém não tente usar o tutorial para mudar o seu código... comece do começo denovo ^^

[Zionrj 0]

Vlw cara pela ajuda...

mas acho que esse css realmente nao existe ou ainda nao sabemos...pq como ti falei...da maneira que você me mandou o link eu sei fazer...mas qndo eu aumento na altura ele simplesmente sobe o texto como se estivesse em top...

mas mesmo assim obrigado pela ajuda...

Vou ver se dou uma estudada em outros css...e como falei sou novato nisso...sou designer gráfico mas estou querendo aprender mais sobre web e pra você pode parecer que sou "folgado" de querer seu código pronto...só acho que uma ajuda se eu soubesse nao estaria me custando nda...enfim... é isso...

 

 

Se alguem puder me ajudar nisso aew...vlw

[Kikitten 0]

Consegue partir daqui?

Sei como é difícil, mas esse é um menu muito simples e fácil de encontrar uma explicação por ai, por isso não queria passar o codigo.

Não é que eu esteja sendo má xD mas é que muitos já perguntaram isso... e já expliquei algumas vezes e já existem tópicos no fórum.

 

Não estou querendo ser chata e no início eu sei como é dificil achar o que queremos.

 

Espero que a partir daki consiga fazer o seu menu.

 

Boa Sorte com o projeto e estude o/

 

<!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>Untitled Document</title>
<style type="text/css">
* {margin: 0;
	padding: 0;
	}
ul li {display: inline;}

ul li a {display: block;
		 width: 100px;
		 height: 43px;
		 line-height: 43px;
		 text-align:center;
		 float: left;
		 font-size: 15px;
		 }
		 
ul li a:hover {background: #990000;}
</style>
</head>

<body>

	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Alicia</a></li>
		<li><a href="#">Downloads</a></li>
		<li><a href="#">Campanha</a></li>
		<li><a href="#">Galeria</a></li>
		<li><a href="#">Letras</a></li>
		<li><a href="#">Fórum</a></li>
	</ul>
	
</body>
</html>

[RafaelVenancio 0]

Faça assim:

 

Código HTML:

<html>
	<head>
		<meta charset="UTF-8" >
		<title>Exemplo</title>
		<link href="c/s.css" rel="stylesheet" type="text/css" />
	</head>
	
	<body>
		<!-- Menu -->
		<nav id="menu">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			<li><a href="">Menu 5</a></li>
		</nav>
	</body>
</html>

Código CSS

@import url(https://fonts.googleapis.com/css?family=Ubuntu);
* {
	outline:none;
}
body {
	font-size:12px;
	background:url("../i/bg1.jpg");
}

/* Menu */
nav#menu {
	text-transform:uppercase;
	list-style:none;
}
nav#menu li {
	position:relative;
	float:left;
	border-collapse:collapse;
	display:block;
}
nav#menu a {
	color:#3535FF;
	text-decoration:none;
	padding:7px 9px;
	font-family: 'Ubuntu', sans-serif;
	font-size:15px;
	border-bottom:1px solid transparent;
	text-align:center;
	letter-spacing:2px;
	display:block;
}
nav#menu a:hover {
	color:#A5D535;
	border-color:#35FF35;
}