¿Cómo hacer que el color de fondo del menú cubra toda la página en HTML y CSS?

dreknoun · 3 Jun 2014

Buenas betas,

Pues finalmente me estoy adentrando en el mundo de la programación y estoy probando algunas cosillas en HTML y CSS. Pues bien, estaba trabajando en maketar el header de una plantilla que diseñé y no encuentro la forma de hacerlo como lo quiero.

Definí el ancho máximo en el que quiero que se vea un menú, pero quiero que el color del menú se extienda a lo ancho de toda la zona superior de la pantalla. El problema está en que solo se adapta al tamaño máximo que definí.

No sé si se me comprende bien, así que dejo una imagen.

Así lo tengo ahora (definido un máximo de anchura), con esos margenes a los lados que no quiero:

Y quiero que el fondo cubra toda la página a lo ancho (pero manteniendo el contenido en los márgenes que delimité):

¿Alguien sabe como hacer para acoplar el color de fondo a lo ancho?

PD: Por favor, si algún mod (@ciclow iNeedYou) me hace el favor de moverlo, pensé que estaba en la sección de CSS, gracias.

iNeedYou · 3 Jun 2014

Tus deseos son órdenes 😛 Suerte con la solución.

dreknoun · 3 Jun 2014

Muchas gracias ire 🙂

Y a ver si alguien me puede ayudar que soy un manta (al menos por ahora) para esto 😕 jajaja

Billy Mays · 3 Jun 2014

dreknoun dijo:
Muchas gracias ire 🙂

Y a ver si alguien me puede ayudar que soy un manta (al menos por ahora) para esto 😕 jajaja

usastes weight 100% ?
sino funciona deja el código css para analizar las partes.

dreknoun · 3 Jun 2014

Utilicé un width de 100% para el menú, pero me descuadra el texto (lo tira todo hacia la derecha, pero fuera de los márgenes que quiero).
Así tengo el CSS ahora:

Insertar CODE, HTML o 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 dijo:
usastes weight 100% ?
sino funciona deja el código css para analizar las partes.

estudiseno · 3 Jun 2014

mira para realizar lo que quieres tienes que "doblar los div"

Esto es llamado wrapper, la envoltura del div principal.

esto va a quedar de esta manera:

Insertar CODE, HTML o PHP:

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

Insertar CODE, HTML o PHP:

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

Esto es un ejemplo coge lo que te interese 🙂

dreknoun · 3 Jun 2014

Estuve probando y no lo conseguí. No sé como hice antes para lograr que el fondo se expandiera todo, pero ahora el texto me queda descuadrado (se va a la derecha del todo).

No entiendo como aplicaste las clases ahí "fondo-menu cien" y "ancho-fijo acentrar", así no están bien puestas, ¿o sí? ¿No iría alguna coma por ahí

estudiseno dijo:
mira para realizar lo que quieres tienes que "doblar los div"

Esto es llamado wrapper, la envoltura del div principal.

esto va a quedar de esta manera:

Insertar CODE, HTML o PHP:

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

Insertar CODE, HTML o PHP:

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

Esto es un ejemplo coge lo que te interese 🙂

Billy Mays · 3 Jun 2014

dreknoun dijo:

Utilicé un width de 100% para el menú, pero me descuadra el texto (lo tira todo hacia la derecha, pero fuera de los márgenes que quiero).
Así tengo el CSS ahora:

Insertar CODE, HTML o 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;
}

y no me dejastes el div xD

estudiseno · 3 Jun 2014

lol

Me he quedado :sorrow:

las clases se separan por espacios... Si te lo pongo es por algo y no por que se me acaba de ocurrir 🙂

---------- Post agregado el 03-jun-2014 hora: 23:21 ----------

adivinando puedo llegar a la conclusión de esto

Insertar CODE, HTML o PHP:

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


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

Deja esas tal cual te lo he puesto ahí pero ya te digo no cuestiones implementa el codigo y despues comentas que tal.

dreknoun · 3 Jun 2014

Jajaja, ya aclaraba en el hilo que soy un manta en la programación, recién estoy empezando :ambivalence: jaja.
No sé porque creía que había que separarlas con una coma o punto y coma las clases.

Vale, acabo de probarlo y funciona, ahora el problema es que tengo el texto alineado a la izquierda fuera de los márgenes que quiero (y había delimitado) 🙁

Me quedó así (el menú tirado a la izquierda y el cuerpo bien centrado):

PD: No, no, no estaba cuestionando, había implementado el código pero no me funcionaba (obviamente, lo hice mal :/ ) por eso preguntaba jaja

estudiseno dijo:
lol

Me he quedado :sorrow:

las clases se separan por espacios... Si te lo pongo es por algo y no por que se me acaba de ocurrir 🙂

estudiseno · 3 Jun 2014

te he puesto codigo modificando lo que tenias.

Pero te recomiendo que pruebes implementado tu propio codigo aunque te sea un poco mas complejo y darle nombre a las clases que te resulte facil de recordar 🙂

dreknoun · 3 Jun 2014

estudiseno dijo:
te he puesto codigo modificando lo que tenias.

Pero te recomiendo que pruebes implementado tu propio codigo aunque te sea un poco mas complejo y darle nombre a las clases que te resulte facil de recordar 🙂

Ya,ya, lo estaba haciendo 🙂
Parece que estaba descolocado el texto porque no definí el margen donde debía 😕
Ya está todo corregido, muchas gracias por la ayuda (y a ti también @BillyMays 🙂 )