Duda con respecto al ancho de pagina

[DoPeY-BBS]

Que tal amigos, Tengo una duda con respecto al ancho de mi web.

He visto muchos Website que tienen la cabecera a todo ancho de la pagina y el cuerpo centrado (creo que esto se logra dando un margin lateral a la caja) y no he podido lograr este efecto porque como bien saben aun no estoy muy empapado de css y la única técnica que se es la del centrar la web,

Sin embargo hice lo contrario (he dejado de envolver la cabecera) y no he podido lograr nada.

Para que se entienda mejor

Pulsame

[locoxchacho]

bueno... lo que yo haria, si bien soy bastante nuevo en esto... es hacer dos cajas...

una de la cabecera, con width 100%... y otra, el cuerpo de la pagina, con el ancho deseado (digamos, 860px) con margin:auto.

de esta forma, la cabecera ocupara toda la pantalla del navegador y el cuerpo estara centrado.

creo que algo asi es lo que querias... si no me equivoco.

#cabecera {width:100%}
#contenido {width:860px; margin:auto} /*EL ancho que decidas tu, logicamente. */

creoq ue con ese CSS puedes lograr el efecto que quieres.. no lo probe, y soy nuevo en CSS tmb, asique si no funciona, mis disculpas!

[DoPeY-BBS]

Excelente locoxchacho, la verdad yo hice algo parecido pero no me dio resultado (el contenedor en la hoja de estilo tenia que cambiar de posición).

Gracias por tu ayuda

[kseso?]

Hola Dopey
la cabecera la alojas en un div contenedor fuera del resto, llamado por ejemplo

#cabecera {background: #xxx url(dir.xxx) ***; width: 100%; margin: 0 auto;}

y como supongo que el efecto que buscas es un fondo ocupando el 100% de ancho y el nombre y logo centrarlo con el resto, creas otro div donde alojar éstos:

#contiene_cabezota { width: /*el mismo que el cuerpo*/; /*resto de propiedades*/}

y en el html

<div id="cabecera>
<div id="contiene_cabezota> <!-- el contenido --> </div>
</div>
<div <!-- el resto de la página -->

Un saludo

P.D.: cualquier error u omisión es eso, no vayas a pensar en cierta competencia

[DoPeY-BBS]

Iniciado por kseso?

Hola Dopey
P.D.: cualquier error u omisión es eso, no vayas a pensar en cierta competencia

Interesante

Estaré pendiente de ese detalle

Gracias

la cabecera la alojas en un div contenedor fuera del resto, llamado por ejemplo

Cita:
#cabecera {background: #xxx url(dir.xxx) ***; width: 100%; margin: 0 auto;}

¿porque si el div esta al 100% la centra? si este ocupa todo el ancho de la cabecera.

[webosiris]

de hecho hay una forma más sencilla de hacer lo que queres: usando los elementos HTML y BODY, que también son elementos con los que podemos jugar.

Cortas una imagen de 1px de ancho por 200 de alto (o lo que sea) con el color de arriba, y lo mismo con el color de abajo. Despues

Código:

html{background:url(img/colorabajo.jpg) repeat-x bottom left #fff}
body{background:url(img/colorarriba.jpg) repeat-x top left}

De esa forma simulas los 3 colores sin necesidad de sacar divs del contenedor... porque si se dieron cuenta, por lo menos en el template de ejemplo, los contenidos del header y del footer tienen el mismo ancho que el contenido central.

[locoxchacho]

supongo que lo que quizo decir kseso? es lo siguiente:

los dos divs de la cabecera (el principal que ocupa el 100%, y el otro que es del mismo ancho que el contenido del contenido) y luego otro div, que seria el del contenido. El CSS podria ser el siguiente:

#header {width:100%; margin:auto 0px }
#titulo {width:860px; margin: auto } /* nuevamente, el ancho que quieras para el contenido */
#contenido {width:860px; margin: auto}

y el html algo asi:

<div id="header>
<div id="titulo">El Titulo de la pagina, etc.</div>
</div>
<div id="contenido">El contenido de la pagina aqui</div>

es algo parecido a lo que habia posteado kseso?, solo que el en el div del contenido no habia especificado el ancho, tons iba a ocupar el 100%, que es por defecto.

Espero que te ayude el codigo. Desde ya, puedes modificarlo a gusto, pero creo que eso resuelve la duda que tenias.

Un salduo, espero haber ayudado!

Pablo.

[DoPeY-BBS]

Iniciado por webosiris

de hecho hay una forma más sencilla de hacer lo que queres: usando los elementos HTML y BODY, que también son elementos con los que podemos jugar.

Cortas una imagen de 1px de ancho por 200 de alto (o lo que sea) con el color de arriba, y lo mismo con el color de abajo. Despues

Código:

html{background:url(img/colorabajo.jpg) repeat-x bottom left #fff}
body{background:url(img/colorarriba.jpg) repeat-x top left}

De esa forma simulas los 3 colores sin necesidad de sacar divs del contenedor... porque si se dieron cuenta, por lo menos en el template de ejemplo, los contenidos del header y del footer tienen el mismo ancho que el contenido central.

En realidad mi intención no es imitar esa plantilla, simplemente quise mostrar esa plantilla para que vean lo que yo quería lograr que era exactamente lo que expusieron los dos compañeros mas arriba en sus respuesta. de todas maneras se te agradece la ayuda Webosiris.

locoxchacho

Lo que noi logro entender es ¿por que si el id cabecera ocupa el 100% lo centra? tengo entendido que si el contenedor ocupa el 100% este no lo centra.

[webosiris]

Iniciado por DoPeY-BBS

En realidad mi intención no es imitar esa plantilla

ah, ok.

Lo que noi logro entender es ¿por que si el id cabecera ocupa el 100% lo centra? tengo entendido que si el contenedor ocupa el 100% este no lo centra.

evidentemente se trata de una errata. si mide 100% no hay que centrarlo, porque por definición el centro de un div con 100% de ancho se corresponde con el centro de la página (ya que también tiene 100% de ancho )

[kseso?]

Iniciado por DoPeY-BBS

Lo que noi logro entender es ¿por que si el id cabecera ocupa el 100% lo centra? tengo entendido que si el contenedor ocupa el 100% este no lo centra.

Evidentemente el "#cabecera" no queda centrado, ocupará todo el ancho de la pantalla.

Lo que hará su "margin: 0 auto;", es centrar su contenido, esto es, al "#contiene_cabezota" de mi ejemplo (que tiene un ancho menor) lo alojará en su interior dejando el mismo espacio a su izquierda que a su derecha.

Espero haberme explicado, DoYPeY-BBS, pero quizás fui yo quien no comprendió lo que pretendías.

Un saludo

[DoPeY-BBS]

¿para que centrar el contenido si le das un ancho de 100%? a eso es que me refiero, yo entendí tu explicación y creo que tu entendiste la mía pero ahora mi duda es esa, y no se, a lo mejor es mi falta de experiencia en el css pero yo lo veo tal como dice wbosiris

Un error

No se, visualmente yo no lo veo bien.

[kseso?]

He visto muchos Website que tienen la cabecera a todo ancho de la pagina y el cuerpo centrado

Creo que todo está en mi interpretación de esa línea de tu comentario inicial. Supuse que lo que pretendías lograr y no te salía era algo como el efecto de esta página:
Cebecera a todo lo ancho de la ventana, contenido restante con una anchura menor al 100% de la anchura y centrado.

Pero vamos, que tampoco merece la pena "marear tanto la perdiz"

Un saludo

[webosiris]

Iniciado por kseso?

Lo que hará su "margin: 0 auto;", es centrar su contenido, esto es, al "#contiene_cabezota" de mi ejemplo

así como lo pusistes, no se logra eso.
El margin:auto centra al elementeo al que se lo ponés, no a sus elementos hijos, pues el margen no es una propiedad heredable. Si queres centrar al #contiene_cabezota, tenes que ponerle el margin:auto al #contiene_cabezota , no a su padre.

Al final pienso que mi ejemplo SI se ajusta a lo que se busca, solo que no lo entendistes DoPeY.... yo digo que en vez de usar 5 divs (2 para la cabecera, 2 para el footer y 1 para le contendio) se puede usar solo 1 (el contenedor) y simular las "divisiones de color" del fondo poniendo imagenes de fondo al HTML y BODY.

[kseso?]

Gracias Webosiris por esa corrección.

Es uno de esos párrafos que por la mala redacción y las prisas, dicen lo contrario de lo que se quiso decir.