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

AwG · #1 (**permalink**) 26/11/2013, 13:08

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?

JesusPerezManga · #2 (**permalink**) 27/11/2013, 04:38

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.

Verkia · #3 (**permalink**) 27/11/2013, 05:20

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

C2am · #4 (**permalink**) 27/11/2013, 18:30

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.

jonni09lo · #5 (**permalink**) 28/11/2013, 08:43

Cita:

Iniciado por C2am

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