Author Topic: cómo hacer cabecera, tres columnas y pie  (Read 12766 times)

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5466
  • Karma: 12
    • View Profile
    • Apuntes de programación
cómo hacer cabecera, tres columnas y pie
« on: Febrero 04, 2007, 05:52:36 pm »
Hola:

Estoy jugando con CSS y pretendo hacer una página que tenga una cabecera, tres columnas y un pie de página.

Las tres columnas pretendo que sean dos de ancho fijo una a izquierda y otra a derecha. La tercera, central y que se estire con el tamaño del navegador.

Poniendo posiciones más o menos fijas y márgenes, el pie no queda en su sitio, sino que se sube.

He estado investigando con los float:left y float:right y en esta página dicen cómo se hace http://blog.html.it/layoutgala/LayoutGala13.html, pero veo que hay cosas extrañas como margin-left:-100%

Code: [Select]
div#navigation{float:left;width:200px;margin-left:-100%}
El comportamiento no es igual además en Internet Explorer que en Firefox. Si hacemos el navegado muy estrecho, en Internet Explorer la columna izquierda se descoloca.

¿No hay una forma más simple de hacer eso?


chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5466
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: cómo hacer cabecera, tres columnas y pie
« Reply #1 on: Febrero 05, 2007, 02:38:23 pm »
Hola:

Ya me han respondido en otro foro. Basta hacer algo como esto

Code: [Select]
#columna_izquierda { width:100px; float:left; }
#columna_derecha { width:100px; float:left; }
#columna_central { margin-left:120px; margin-right: 120px; }

y no hacen falta complicaciones de margin-left:-100%

Sed buenos.

rfilgueiras

  • Jr. Member
  • **
  • Posts: 79
  • Karma: 0
    • View Profile
    • Blog de programación
Re: cómo hacer cabecera, tres columnas y pie
« Reply #2 on: Febrero 05, 2007, 03:55:11 pm »
Tienes aqui un buen tutorial

http://css.maxdesign.com.au/floatutorial/

oropeza

  • Guest
Re: cómo hacer cabecera, tres columnas y pie
« Reply #3 on: Abril 25, 2007, 01:32:30 pm »
Hola, esta pagina me gusta por que tiene varios layouts de css que se adaptan a muchas necesidades.

http://intensivstation.ch/templates/

Alhendin

  • Newbie
  • *
  • Posts: 2
  • Karma: 0
    • View Profile
Re: cómo hacer cabecera, tres columnas y pie
« Reply #4 on: Abril 25, 2009, 12:06:10 am »
En primer lugar un saludo, y gracias por tu web y el foro.

Después darles las gracias a oropeza y rfilgueiras, por esas dos páginas que recomiendan, no he llegado a dedicarles un minuto, pero tienen muy buena pinta. En un tema que me esta costando la vida, como es este del posicionamiento con CSS.

Y ahora el problema, he seguido tu manual al dedillo, y he conseguido centrar la puñetera página, mi web personal, vamos un curriculum vitae agrandado que estoy haciendo como práctica, que me estaba costando la vida. Tu manual es claro y sencillo, facil de seguir.

Lo que ocurre es que le he dado una pequeña vuelta de tuerca más, en la que el Explorer deja de funcionar.

El tema es el siguiente lo he introducido todo dentro de otro div, llamado contenedor, con estas caracteristicas.

#contenedor   {

   background-color: yellowGreen;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   }

Para centrar la página, y controlar un ancho y que por cada lado sobre lo mismo, no se si me explico.

Bueno pues en Firefox, Opera, y Safari, aparece centrada, pero en el Explorer no.

¿Conoces algún truco? para que tambien aparezca centrada en este maldito navegador. Quiza en las páginas que recomienda estos dos colegas este la respuesta, pero llevo ya tanto tiempo luchando con ello, que me esta desfondando.

Un saludo y gracias.

chuidiang

  • Administrator
  • Hero Member
  • *****
  • Posts: 5466
  • Karma: 12
    • View Profile
    • Apuntes de programación
Re: cómo hacer cabecera, tres columnas y pie
« Reply #5 on: Abril 25, 2009, 03:26:05 am »
Hola:

Pues así, de memoria, no sé el truco, pero también depende de la versión de explorer. Posiblemente, en las versiones más nuevas funcione bien y sólo se vea mal en la versión 5 o 6.

Se bueno.

Alhendin

  • Newbie
  • *
  • Posts: 2
  • Karma: 0
    • View Profile
Re: cómo hacer cabecera, tres columnas y pie
« Reply #6 on: Abril 29, 2009, 07:08:13 pm »
Gracias por tu respuesta.

Intentaré ser todo lo bueno posible.

Pero en la versión que lo he probado es la última del Explorer, aunque no importa seguiremos en el camino.

Saludos.

rfilgueiras

  • Jr. Member
  • **
  • Posts: 79
  • Karma: 0
    • View Profile
    • Blog de programación
Re: cómo hacer cabecera, tres columnas y pie
« Reply #7 on: Mayo 08, 2009, 12:10:54 am »
Prueba con estos estilos

* {
margin:0;
padding:0;
}

body {
background:#EFEFEF;
font-family:"Trebuchet MS", Arial, sans-serif;
font-size:0.9em;
color:#000;
text-align:justify;
padding: 10px 0 0 0;
}


#contenedor {
background:url('../img/fondo.gif') repeat-y top left;
top:0;
width:785px;
min-height:450px;
margin:0 auto

}

Creo que es el tex-align pero no lo recuerdo exactamente.

 

ey