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

  • Autor Autor dreknoun
  • Fecha de inicio Fecha de inicio

dreknoun

Iota
Diseñador
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
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.
 
Última edición:
Tus deseos son órdenes 😛 Suerte con la solución.
 
Muchas gracias ire 🙂

Y a ver si alguien me puede ayudar que soy un manta (al menos por ahora) para esto 😕 jajaja
 
dreknoun dijo:
Muchas gracias ire 🙂

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

usastes weight 100% ?
sino funciona deja el código css para analizar las partes.
 
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.
Hacer clic para expandir...
 
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 🙂
 
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í

 

y no me dejastes el div xD
 
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.
 
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 🙂
Hacer clic para expandir...
 
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 🙂
 
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 🙂
Hacer clic para expandir...


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 🙂 )
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro