Como fazer a cor de fundo do menu cobrir toda a página em HTML e CSS?

dreknoun · 03/06/2014

Boas betas,

Pois finalmente estou entrando no mundo da programação e estou testando algumas coisinhas em HTML e CSS. Pois bem, estava trabalhando na montagem do header de um template que desenhei e não encontro a forma de fazê-lo como quero.

Defini a largura máxima na qual quero que um menu seja exibido, mas quero que a cor do menu se estenda pela largura de toda a zona superior da tela. O problema é que ele só se adapta ao tamanho máximo que defini.

Não sei se me compreendem bem, então deixo uma imagem.

Assim está agora (definido um máximo de largura), com essas margens nos lados que não quero:

E quero que o fundo cubra toda a página na largura (mas mantendo o conteúdo nas margens que delimitei):

Alguém sabe como fazer para acoplar a cor de fundo à largura?

PD: Por favor, se algum mod (@ciclow iNeedYou) me fizer o favor de mover, pensei que estava na seção de CSS, obrigado.

iNeedYou · 03/06/2014

Seus desejos são ordens 😛 Sorte com a solução.

dreknoun · 03/06/2014

Muito obrigado ire 🙂

E vamos ver se alguém pode me ajudar, pois sou um iniciante (pelo menos por enquanto) nisso 😕 hahaha

Billy Mays · 03/06/2014

dreknoun disse:
Muito obrigado ire 🙂

E vamos ver se alguém pode me ajudar, pois sou um iniciante (pelo menos por enquanto) nisso 😕 hahaha

usou width 100% ?
se não funcionar, deixe o código css para analisar as partes.

dreknoun · 03/06/2014

Utilizei um width de 100% para o menu, mas ele desalinha o texto (joga tudo para a direita, mas fora das margens que quero).
Assim está o CSS agora:

Inserir CODE, HTML ou PHP:

/*-----Header-----*/
header{
	margin: auto;
	overflow: hidden;
	width: 85%;
}


header #logo{
	width: 40%;
	background-color: #5acdff;
	font-size: 35px;
}


header #logo p{
	font-family: 'Raleway', helvetica, arial, sans-serif;
	font-size: 4rem;
	text-align: left;
	color: #fff;
}


/*-----Navegación-----*/


#top-nav{
	height: 36px;
	padding: 0;
	background: #1c1c1c;
}


#top-nav li{
	display: inline;
}


#top-nav li a{
	font-family: Arial;
	font-size: 13px;
	text-decoration: none;
	float: left;
	padding: 10px;
	background-color: #1c1c1c;
	color: #fff;
}


#top-nav li a:hover{
	background-color: #323232;
}

Billy Mays disse:
usou width 100% ?
se não funcionar, deixe o código css para analisar as partes.

estudiseno · 03/06/2014

olha, para realizar o que você quer, você tem que "dobrar as div"

Isso é chamado de wrapper, o invólucro da div principal.

isto vai ficar desta maneira:

Inserir CODE, HTML ou PHP:

<div class="fondo-menu cien"><header><nav class="ancho-fijo acentrar"></nav></header></div>

Inserir CODE, HTML ou PHP:

.cien {width: 100%;}
.ancho-fijo {width:900px;}
.fondo-menu {background: #1e1e1e;}
.acentrar {margin: auto;}

Este é um exemplo, pegue o que lhe interessar 🙂

dreknoun · 03/06/2014

Estive testando e não consegui. Não sei como fiz antes para conseguir que o fundo se expandisse todo, mas agora o texto fica desalinhado (vai para a direita de tudo).

Não entendo como você aplicou as classes aí "fondo-menu cien" e "ancho-fijo acentrar", assim não estão bem colocadas, ou estão? Não iria alguma vírgula por aí

estudiseno disse:
olha, para realizar o que você quer, você tem que "dobrar as div"

Isso é chamado de wrapper, o invólucro da div principal.

isto vai ficar desta maneira:

Inserir CODE, HTML ou PHP:

<div class="fondo-menu cien"><header><nav class="ancho-fijo acentrar"></nav></header></div>

Inserir CODE, HTML ou PHP:

.cien {width: 100%;} .ancho-fijo {width:900px;} .fondo-menu {background: #1e1e1e;} .acentrar {margin: auto;}

Este é um exemplo, pegue o que lhe interessar 🙂

Billy Mays · 03/06/2014

dreknoun disse:

Utilizei um width de 100% para o menu, mas ele desalinha o texto (joga tudo para a direita, mas fora das margens que quero).
Assim está o CSS agora:

Inserir CODE, HTML ou PHP:

/*-----Header-----*/
header{
	margin: auto;
	overflow: hidden;
	width: 85%;
}


header #logo{
	width: 40%;
	background-color: #5acdff;
	font-size: 35px;
}


header #logo p{
	font-family: 'Raleway', helvetica, arial, sans-serif;
	font-size: 4rem;
	text-align: left;
	color: #fff;
}


/*-----Navegación-----*/


#top-nav{
	height: 36px;
	padding: 0;
	background: #1c1c1c;
}


#top-nav li{
	display: inline;
}


#top-nav li a{
	font-family: Arial;
	font-size: 13px;
	text-decoration: none;
	float: left;
	padding: 10px;
	background-color: #1c1c1c;
	color: #fff;
}


#top-nav li a:hover{
	background-color: #323232;
}

e você não me deixou a div xD

estudiseno · 03/06/2014

lol

Fiquei :sorrow:

as classes se separam por espaços... Se eu te coloco é por algo e não porque acabou de me ocorrer 🙂

---------- Post adicionado em 03-jun-2014 hora: 23:21 ----------

adivinhando posso chegar à conclusão disto

Inserir CODE, HTML ou PHP:

header{
    margin: auto;
    overflow: hidden;
    width: 100%;
    background: #1c1c1c;
}


#top-nav{
    height: 36px;
    padding: 0;
    width: 85%;
    margin: auto;
     }

Deixe essas tal como te coloquei aí, mas já te digo, não questione, implemente o código e depois comente como ficou.

dreknoun · 03/06/2014

Hahaha, já esclarecia no tópico que sou um iniciante na programação, estou começando agora :ambivalence: haha.
Não sei porque achava que tinha que separar as classes com uma vírgula ou ponto e vírgula.

Ok, acabei de testar e funciona, agora o problema é que tenho o texto alinhado à esquerda fora das margens que quero (e tinha delimitado) 🙁

Ficou assim (o menu jogado para a esquerda e o corpo bem centralizado):

PD: Não, não, não estava questionando, tinha implementado o código mas não funcionava (obviamente, fiz errado :/ ) por isso perguntava haha

estudiseno disse:
lol

Fiquei :sorrow:

as classes se separam por espaços... Se eu te coloco é por algo e não porque acabou de me ocorrer 🙂

estudiseno · 03/06/2014

te coloquei o código modificando o que você tinha.

Mas recomendo que teste implementando seu próprio código, mesmo que seja um pouco mais complexo, e dê nomes às classes que sejam fáceis de lembrar 🙂

dreknoun · 03/06/2014

estudiseno disse:
te coloquei o código modificando o que você tinha.

Mas recomendo que teste implementando seu próprio código, mesmo que seja um pouco mais complexo, e dê nomes às classes que sejam fáceis de lembrar 🙂

Sim, sim, estava fazendo isso 🙂
Parece que o texto estava desalinhado porque não defini a margem onde deveria 😕
Já está tudo corrigido, muito obrigado pela ajuda (e a você também @BillyMays 🙂 )

Como fazer a cor de fundo do menu cobrir toda a página em HTML e CSS?

dreknoun

iNeedYou

dreknoun

Billy Mays

dreknoun

estudiseno

dreknoun

Billy Mays

estudiseno

dreknoun

estudiseno

dreknoun

Tópicos similares