Ayuda con maquetación CSS

[y0mism0]

Buenas, necesitos ayuda para hacer unas maquetaciones.

1. ¿como consigo que el footer quede justo asi, sin sobresalir ni nada? Aunque calcule las alturas y pixeles y las ponga justo para que cuadre no funciona, sobresale un poco el footer.



2. Si quisiera que el header me quedara abajo del todo, ¿como lo consigo hacer sin modificar mi documento html? Solo modificando el css como digo, sin cambiar el orden en el html.

3. ¿como consigo hacer que mi pagina tenga un diseño liquido, es decir, que cambie de tamaño conforme voy cambiando el tamaño de mi ventana del navegador? Como lo tengo ahora no se adapta a la anchura de la pantalla del navegador, tiene un diseño fijo.


Gracias,

Un saludo

[PrendekZ]

Haz parte del código, recuerda estos foros son de ayuda no para realizar su trabajo.

Si necesita guías sobre xHTML y CSS ingresa a: www.librosweb.es

Saludos!

[jomaruro]

Hola:

En la página de Mikmoro tienes este ejemplo, no es exactamente lo que tu quieres pero puedes cambiar el HTML por este otro.

Código HTML:

<div id="all">
    <div id="cont_cabecera">Esto es la cabecera</div>
    <div id="centro">
        <div id="cont_lat_der">La barra lateral derecha</div>
        <div id="cont_lat_izq">La barra lateral izquierda</div>
        <div id="cont_contenido">El contenido<br></div>
        <div class="corte"><br>
            <div id="pie_div">Esto es el pie</div>
        </div>
    </div>
    <div class="corte"></div>
</div>
 

Saludos.

[y0mism0]

Iniciado por PrendekZ

Haz parte del código, recuerda estos foros son de ayuda no para realizar su trabajo.

Si necesita guías sobre xHTML y CSS ingresa a: www.librosweb.es

Saludos!

no pretendia que me escribieran el codigo, sino que me dieran alguna idea de como hacerlo, por ejemplo, para la pregunta 2. parece que lo puede hacer poniendo la propiedad position:asolute. Con position:relative me deja el hueco en blanco del header no se porque. Y en la pregunta 3 creo que es utilizando %.

Iniciado por jomaruro

Hola:

En la página de Mikmoro tienes este ejemplo, no es exactamente lo que tu quieres pero puedes cambiar el HTML por este otro.

Código HTML:

<div id="all">
    <div id="cont_cabecera">Esto es la cabecera</div>
    <div id="centro">
        <div id="cont_lat_der">La barra lateral derecha</div>
        <div id="cont_lat_izq">La barra lateral izquierda</div>
        <div id="cont_contenido">El contenido<br></div>
        <div class="corte"><br>
            <div id="pie_div">Esto es el pie</div>
        </div>
    </div>
    <div class="corte"></div>
</div>
 

Saludos.

gracias, aunque lo veo un poco diferente, porque yo no tengo tantos div, y se supone que no puedo modificar el html. Ademas el footer no tiene nada a los lados. Gracias de todas formas

[GAST0N]

asi quedaria perfecto mira: (obviamente las medidas que yo puse son de ejemplo)

HTML

Código PHP:

  <div id="wrapper">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="linklist"></div>
<div id="footer"></div>
</div> 
   

CSS

Código:

#wrapper{
width:960px;
height:auto;
margin: 0 auto;
}

#header{
width:960px;
height:200px;
background-color:red;
float:red;

}
#navigation{
width:200px;
height:500px;
background-color:green;
float:left;
}
#content{
width:560px;
height:400px;
background-color:grey;
float:left;
}
#linklist{
width:200px;
height:500px;
background-color:green;
float:left;
}
#footer{
width:560px;
height:100px;
background-color:pink;
float:left;
margin-left:200px;
margin-top:-100px;
}

saludos ! exitos!