Ir para conteúdo

POWERED BY:

Arquivado

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

Natanael1697

Espaço em branco no menu

Por , em Desenvolvimento frontend

Recommended Posts

Natanael1697    0

Natanael1697
Postado

Então estar sobrando um espaço no menu alguem ajuda ?

bj8vm0.png

 

segue meu codigo html e css .

<nav class="nav">
		<ul>
			<li><a href="">HOME</a></li>
			<li><a href="">SPORT</a></li>
			<li><a href="">ENTERTAINMENT ▼</a>
				<ul>
					<li><a href="">Carros</a></li>
					<li><a href="">Economia</a></li>
					<li><a href="">Mundo</a></li>
				</ul>
			</li>
			<li><a href="">TECHNOLOGY</a></li>
			<li><a href="">POLITICS</a></li>
			<li><a href="">FORUMS</a></li>
		</ul>
	</nav>

CSS .

.nav{
	width: 960px;
	height: 50px;
	margin: 0 auto;
	background: #16a085;
}

.nav li{
	position: relative;
	float: left;
}

.nav li a{
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	padding: 15px 30px;
	display: block;
}

.nav li a:hover{
	background: #1abc9c;
	transition-duration: 1s;
	color: #fff;
}

.nav li ul{
	position: absolute;
	top: 52px;
	left: 0;
	background-color: #1abc9c;
	display: none;
}

.nav li:hover ul, .nav li:hover ul{
	display: block;
}

.nav li ul li{
	border-bottom: 1px solid #FFF;
	width: 250px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

Testei aqui e exibiu normalmente, sem espaço. http://jsfiddle.net/rnxn/77Rst/

 

Tem alguma coisa no CSS que você não postou? (Por exemplo, precisei colocar "list-style" pra testar...). Alguma outra regra está sobrepondo a do menu de navegação, não esqueça que o resultado é em cascata. Veja: http://jsfiddle.net/rnxn/77Rst/1/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Natanael1697    0

Natanael1697
Postado

segue todo meu código :

 

HTML : 

<!doctype html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
	<header id="header">
		<div class="base-top">
			<p>Telephone : (00) 0000 - 0000.</p>
			<div class="social">
				<img src="img/social/facebook.png" title="Facebook">
				<img src="img/social/youtube.png" title="youtube">
				<img src="img/social/twitter.png" title="twitter">
				<img src="img/social/instagram.png" title="instagram">
			</div>
		</div>
		<div class="base-header">
			<h1 class="logo">
				<img src="img/devnews.png" title="DEVNEWS">
			</h1>
			<div class="publicidade">
				<img src="img/publicity/publicity.png" title"Publicidade">
			</div>
		</div>
	</header>
	<nav class="nav">
		<ul>
			<li><a href="">HOME</a></li>
			<li><a href="">SPORT</a></li>
			<li><a href="">ENTERTAINMENT ▼</a>
				<ul>
					<li><a href="">Carros</a></li>
					<li><a href="">Economia</a></li>
					<li><a href="">Mundo</a></li>
				</ul>
			</li>
			<li><a href="">TECHNOLOGY</a></li>
			<li><a href="">POLITICS</a></li>
			<li><a href="">FORUMS</a></li>
		</ul>
	</nav>
</body>
</html>

CSS : 

@charset "UTF-8";

body{
	width: 100%;
	height: 100%;
	background:url("../img/bg.png") no-repeat;
	background-size: 100%;
}

@font-face {
	font-family: 'era';
	src: url("../font/ERASMD.ttf");
}

/* CONFIG HEADER */
#header{
	width: 960px;
	height: 203px;
	margin: 0 auto;
}

.base-top{
	width: 960px;
	height: 50px;
	background: #d3d3d3;
	border-top: 3px solid #1abc9c;
}

.base-top p{
	float: left;
	font-family: 'era';
	font-size: 16px;
	color: #333;
	padding: 15px 15px;
}

.social{
	float: right;
	padding: 0px 15px;
}

.social img{
	padding: 9px 10px;
}

.base-header{
	width: 960px;
	height: 150px;
	background: #fff;
	margin: 0 auto;
}

.logo{
	float: left;
	margin: 55px 15px;
}

.publicidade{
	float: right;
	margin: 35px 15px;
}

/* CONFIG MENU */
.nav{
	width: 960px;
	height: 50px;
	margin: 0 auto;
	background: #16a085;
}

.nav li{
	position: relative;
	float: left;
}

.nav li a{
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	padding: 15px 30px;
	display: block;
}

.nav li a:hover{
	background: #1abc9c;
	transition-duration: 1s;
	color: #fff;
}

.nav li ul{
	position: absolute;
	top: 52px;
	left: 0;
	background-color: #1abc9c;
	display: none;
}

.nav li:hover ul, .nav li:hover ul{
	display: block;
}

.nav li ul li{
	border-bottom: 1px solid #FFF;
	width: 250px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Wilherme    0

Wilherme
Postado

 

Então estar sobrando um espaço no menu alguem ajuda ?

bj8vm0.png

 

segue meu codigo html e css .

<nav class="nav">
		<ul>
			<li><a href="">HOME</a></li>
			<li><a href="">SPORT</a></li>
			<li><a href="">ENTERTAINMENT ▼</a>
				<ul>
					<li><a href="">Carros</a></li>
					<li><a href="">Economia</a></li>
					<li><a href="">Mundo</a></li>
				</ul>
			</li>
			<li><a href="">TECHNOLOGY</a></li>
			<li><a href="">POLITICS</a></li>
			<li><a href="">FORUMS</a></li>
		</ul>
	</nav>

CSS .

.nav{
	width: 960px;
	height: 50px;
	margin: 0 auto;
	background: #16a085;
}

.nav li{
	position: relative;
	float: left;
}

.nav li a{
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	padding: 15px 30px;
	display: block;
}

.nav li a:hover{
	background: #1abc9c;
	transition-duration: 1s;
	color: #fff;
}

.nav li ul{
	position: absolute;
	top: 52px;
	left: 0;
	background-color: #1abc9c;
	display: none;
}

.nav li:hover ul, .nav li:hover ul{
	display: block;
}

.nav li ul li{
	border-bottom: 1px solid #FFF;
	width: 250px;
}

 

Tenta dar um Ctrl + F5 no navegador, caso tiver em cache com esse comando ele limpa o cache do navegador.

Ou tenta ver em outros navegadores se acontece isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Natanael1697    0

Natanael1697
Postado

valeu pessoal coloquei um overflow: hidden; no #header e o menu voltou ao normal.

#header{
	width: 960px;
	height: 203px;
	margin: 0 auto;
	overflow: hidden;
}

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