Foros del Web » Creando para Internet » CSS »

Div mas grande que el body que lo contiene ¿como?

Estas en el tema de Div mas grande que el body que lo contiene ¿como? en el foro de CSS en Foros del Web. Quiero hacer que la barra de navegacion sea mas grande que el body y vaya de lado a lado de la web. Como al body ...
  #1 (permalink)  
Antiguo 26/11/2013, 12:08
AwG
 
Fecha de Ingreso: abril-2013
Ubicación: Madrid, España
Mensajes: 21
Antigüedad: 6 años, 5 meses
Puntos: 0
Div mas grande que el body que lo contiene ¿como?

Quiero hacer que la barra de navegacion sea mas grande que el body y vaya de lado a lado de la web. Como al body le tengo puesto un width de 70% este div tambien se limita al 70%. Aqui lo explico graficamente:



La parte de la web que quiero cambiar es la azulada (añadida con el photoshop)

El codigo de la web es:

Código HTML:
<html>
<head>
	<title>Prueba</title>
	<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">
</head>
<body>
	<div class="header-bar">
		<header>
		

		<nav>
			<ul>
				<li><a href="#">Noticias</a></li>
				<li><a href="#">Informacion</a></li>
				<li><a href="#">Contacto</a></li>
			</ul>

		</nav>

		<content>
				
		</content>

	</header>
	</div>
	

</body>
</html> 
Código:
body{
	background-color: #edeff0;
	width: 70%;
	margin: 0 auto;
}

.header-bar{
	width: 100.95%;
	height: 50px;
	background-color: #384047;
	padding: 0;
	float: left;

}
¿A alguien se le ocurre que puedo hacer para solucionar eso?
  #2 (permalink)  
Antiguo 27/11/2013, 03:38
 
Fecha de Ingreso: noviembre-2013
Mensajes: 3
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Div mas grande que el body que lo contiene ¿como?

Buenas,

Creo que se cual es tu idea y lo que necesitas. Antes que nada, hay que tener el cuenta que el body actua como una div más, es decir, no puedes superar su width.

Yo lo he planteado de otra forma, por si te convence hacerlo así (creo que es la forma más correcta).

Código HTML:
<body>
	<div class="header-bar">
		<header>
		

		<nav>
			<ul>
				<li><a href="#">Noticias</a></li>
				<li><a href="#">Informacion</a></li>
				<li><a href="#">Contacto</a></li>
			</ul>

		</nav>

		<content>
                        <div class="center">prueba</div>
		</content>

	</header>
	</div>
	

</body> 
Código HTML:
body{
	background-color: #edeff0;
	width: 100%;
	margin:0;
}

.header-bar{
	width: 100%;
	height: 50px;
	background-color: #384047;
	padding: 0;
	float: left;
}

content .center {
	width: 70%;
	margin:auto;
}
No se si sabes a qué me refiero, si tienes alguna duda te responderé encantado.

Un saludo.
  #3 (permalink)  
Antiguo 27/11/2013, 04:20
Avatar de Verkia  
Fecha de Ingreso: noviembre-2013
Ubicación: Alicante
Mensajes: 26
Antigüedad: 5 años, 11 meses
Puntos: 2
Respuesta: Div mas grande que el body que lo contiene ¿como?

Simplemente en tu css, en vez de body{...} pon content{...}. No le des el 70% al body, si no al content y asi ya lo tendrás solucionado.

Un saludo
  #4 (permalink)  
Antiguo 27/11/2013, 17:30
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 8 meses
Puntos: 306
Respuesta: Div mas grande que el body que lo contiene ¿como?

La verdad que no conocia la etiqueta html <content>
Alguien que me indique donde puedo obtener mayor información al respecto, gracias.
Lamento el offtopic, pero tengo curiosidad.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 28/11/2013, 07:43
Avatar de jonni09lo
Colaborador
 
Fecha de Ingreso: septiembre-2011
Ubicación: Estigia
Mensajes: 1.471
Antigüedad: 8 años, 1 mes
Puntos: 396
Respuesta: Div mas grande que el body que lo contiene ¿como?

Cita:
Iniciado por C2am Ver Mensaje
La verdad que no conocia la etiqueta html <content>
Alguien que me indique donde puedo obtener mayor información al respecto, gracias.
Lamento el offtopic, pero tengo curiosidad.
content no hace parte de html ni html5 lo que si existe es el tag main

Saludos
__________________
Haz preguntas inteligentes-Como ser Hacker
No hacer preguntas por mensaje privado. No sólo no es inteligente sino que es egoísta.

Etiquetas: background, body, color, grande, html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:39.