Foros del Web » Creando para Internet » CSS »

Duda con respecto al ancho de pagina

Estas en el tema de Duda con respecto al ancho de pagina en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/01/2009, 22:18
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Duda con respecto al ancho de pagina

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #2 (permalink)  
Antiguo 07/01/2009, 23:40
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Duda con respecto al ancho de pagina

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!
  #3 (permalink)  
Antiguo 08/01/2009, 14:19
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Duda con respecto al ancho de pagina

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #4 (permalink)  
Antiguo 08/01/2009, 14:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda con respecto al ancho de pagina

Hola Dopey
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;}
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:

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

Cita:
<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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 08/01/2009, 16:18
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Duda con respecto al ancho de pagina

Cita:
Iniciado por kseso? Ver Mensaje
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

Cita:
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.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos

Última edición por DoPeY-BBS; 08/01/2009 a las 17:36
  #6 (permalink)  
Antiguo 08/01/2009, 22:56
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Duda con respecto al ancho de pagina

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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 09/01/2009, 16:09
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Duda con respecto al ancho de pagina

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.
  #8 (permalink)  
Antiguo 09/01/2009, 17:17
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Duda con respecto al ancho de pagina

Cita:
Iniciado por webosiris Ver Mensaje
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.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #9 (permalink)  
Antiguo 10/01/2009, 00:20
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Duda con respecto al ancho de pagina

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
En realidad mi intención no es imitar esa plantilla
ah, ok.

Cita:
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 )
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -

Última edición por webosiris; 10/01/2009 a las 00:28
  #10 (permalink)  
Antiguo 10/01/2009, 15:35
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda con respecto al ancho de pagina

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #11 (permalink)  
Antiguo 10/01/2009, 18:26
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Duda con respecto al ancho de pagina

¿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.
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #12 (permalink)  
Antiguo 10/01/2009, 18:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda con respecto al ancho de pagina

Cita:
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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #13 (permalink)  
Antiguo 10/01/2009, 19:04
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Respuesta: Duda con respecto al ancho de pagina

Cita:
Iniciado por kseso? Ver Mensaje
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.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #14 (permalink)  
Antiguo 11/01/2009, 08:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda con respecto al ancho de pagina




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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 12:15.