Foros del Web » Creando para Internet » CSS »

Ayuda con maquetación CSS

Estas en el tema de Ayuda con maquetación CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/01/2011, 22:50
 
Fecha de Ingreso: diciembre-2007
Mensajes: 135
Antigüedad: 10 años
Puntos: 1
Ayuda con maquetación CSS

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
  #2 (permalink)  
Antiguo 29/01/2011, 02:14
 
Fecha de Ingreso: noviembre-2009
Ubicación: Colombía
Mensajes: 311
Antigüedad: 8 años
Puntos: 17
Respuesta: Ayuda con maquetación CSS

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!
  #3 (permalink)  
Antiguo 29/01/2011, 03:41
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con maquetación CSS

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:
Ver original
  1. <div id="all">
  2.     <div id="cont_cabecera">Esto es la cabecera</div>
  3.     <div id="centro">
  4.         <div id="cont_lat_der">La barra lateral derecha</div>
  5.         <div id="cont_lat_izq">La barra lateral izquierda</div>
  6.         <div id="cont_contenido">El contenido<br></div>
  7.         <div class="corte"><br>
  8.             <div id="pie_div">Esto es el pie</div>
  9.         </div>
  10.     </div>
  11.     <div class="corte"></div>
  12. </div>

Saludos.

  #4 (permalink)  
Antiguo 29/01/2011, 15:06
 
Fecha de Ingreso: diciembre-2007
Mensajes: 135
Antigüedad: 10 años
Puntos: 1
Respuesta: Ayuda con maquetación CSS

Cita:
Iniciado por PrendekZ Ver Mensaje
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 %.

Cita:
Iniciado por jomaruro Ver Mensaje
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:
Ver original
  1. <div id="all">
  2.     <div id="cont_cabecera">Esto es la cabecera</div>
  3.     <div id="centro">
  4.         <div id="cont_lat_der">La barra lateral derecha</div>
  5.         <div id="cont_lat_izq">La barra lateral izquierda</div>
  6.         <div id="cont_contenido">El contenido<br></div>
  7.         <div class="corte"><br>
  8.             <div id="pie_div">Esto es el pie</div>
  9.         </div>
  10.     </div>
  11.     <div class="corte"></div>
  12. </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
  #5 (permalink)  
Antiguo 29/01/2011, 15:35
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Ayuda con maquetación CSS

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!
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>

Etiquetas: Ninguno
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 17:53.