Comunidad de diseño web y desarrollo en internet online

Maquetación a dos columnas con "pie" en una de ellas

Citar            
MensajeEscrito el 13 Feb 2008 01:30 pm
Buenas,

estoy intentando realizar la maquetación a dos columnas, pero teniendo en una de ellas como "pie" una imagen.

El problema es que cuando una de las dos columnas se estira la de la imagen se queda coja.

Aqui os dejo, el problema en si...



El texto de la columna derecha debe llegar hasta el tope y en funcion de ello la capa de la izquierda autoajustarse. Pero no doy con la solución.

Codigo HTML:

Código :

<body>
<div id="contenedor">
<div id="cabecera"><img src="Images/benafgora_web_r1_c1.jpg" width="766" height="284" /></div> 
<div id="latizq">
<div id="textoizq">
  <p>escribiendo cosas por aqui</p>
  <p>por rellenasr,kmk</p>
  <p>fgdfg</p>
  <p>&nbsp;</p>
  <p>fdg</p>
  <p>dfg</p>
  <p>dfg vbcc</p>
  <p>&nbsp;</p>
  <p>v</p>
  <p>cb</p>
  <p>&nbsp;</p>
</div>
<div id="dibujoizq"></div>
</div>
<div id="latder">
<div id="textoder">
  <p>y aqui unas poquitas mascfsdf</p>
  <p>&nbsp;</p>
  </div>
<div id="textoder2">
  <p>y por aqui lo que quedadfsf</p>
  <p>dsfsd</p>
  <p>f</p>
  <p>sdfsdfc</p>
  <p>xv</p>
  <p>vcx</p>
  <p>vc</p>
  <p>xcv</p>
  <p>dsf</p>
  <p>dsfsd</p>
  <p>&nbsp;</p>
  <p>sd</p>
  <p>dfsfdsf</p>
  <p>dsfdsffds</p>
</div>
</div>
<div id="pie">
  <p><br />
    <span class="menupie">Inicio | Empresa | Vending | Servicios | Contacto</span></p>
  <p>Copyright &copy; <strong>Bethora</strong>, 2008. Todos los derechos reservados.<br />   
  <br />
  </p>
  </div>
</div>
</body>


Codigo CSS:

Código :

@charset "utf-8";
/* CSS Document */

BODY {
font : 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin : 20px 0px 20px 0px;
text-align: center;
} 

#contenedor{
text-align: left;
width: 766px;
margin: auto;
} 

#cabecera{
height : 284px;
width: 766px;
} 

#contenido{
height:100%;
}

#textoizq{
width:398px;
padding-left: 5px;
height: auto;
background-color : #ffffff;
} 

#dibujoizq{
width:398px;
height: 89px;
padding-left: 5px;
background-image: url(Images/begora_web_r4_c1.jpg);
background-color : #ffffff;
} 

#textoder{
width:357px;
padding-right: 5px;
background-color : #ffffff;
} 

.menupie{
font-weight:bold;
text-transform: uppercase;
}

#pie{
font : 7pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
clear:both;
background-image:url(Images/fondopie.gif)
}

#textoder2{
width:357px;
padding-right: 5px;
background-color : #ffffff;
}

#latder{
float: right;
}

#latizq{
float:left;
}


Espero que me puedan echar una mano :)

Gracias por anticipado!

BOFH: Usa code en lugar de quote para citar el código.

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Feb 2008 02:03 pm
Busca layouts en google.
La WEB, está llena de plantillas tipo que hacen esto.
(de hecho, en el buscador de Cristalab, encontrarás lo menos seis post similares.)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 13 Feb 2008 02:19 pm
Ok,

sin embargo debo anotar, que no me tomo la molestia de escribir para recibir como respuesta un "busca en google", eso, simplemente, lo hace cualquiera.

De hecho el motivo por el que escribo era para encontrar ayuda y no para buscarla (de hecho ya estaba harto de buscar sin exito). Solo encontre la tipica maquetación a dos columnas.

Y si en este mismo foro hay información relacionada, tampoco he conseguido dar con el termino exacto para encontrarla.

Supongo que hubiese sido más efectivo enviarme directamente a alguno de dichos posts y así no habriamos perdido ambos el tiempo...

Un saludo.

PD: ¿Esto es un foro de ayuda? o de... ¿manda al novato al google?

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Feb 2008 02:24 pm
Hola Scytale, parace que necesitas usar la propiedad clear, prueba usando esto

En tu CSS crear una clase como esta

Código :

.breakIt
{
   clear:both;
}


y en tu html pon antes del div del pie

Código :

<div class="breakIt"></div>


Scytale escribió:

PD: ¿Esto es un foro de ayuda? o de... ¿manda al novato al google?


Es un foro de ayuda, solo que algunas veces se envía a la persona al google por sino se le había ocurrido, tomalo con calma.

Por Aoyama

BOFH

6224 de clabLevel

6 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Bastard Operators From Hell

Webdesigner & Developer, en mis ratos libres bebo café por litros.

firefox
Citar            
MensajeEscrito el 13 Feb 2008 04:32 pm
Gracias por tu respuesta Aoyama,

he utilizado el clear:both y tal como presentía no funciona. El mismo pie de pagina ya tenia designada esa propiedad y las columnas siguen funcionando de la misma forma (cada una tiene su propio tamaño y la que más se alarga es la que "gana").

He probado ademas en dejar el height de la columna como "auto" o 100% y tampoco he obtenido resultados. Empiezo a sospechar que igual se necesite echar mano de lenguajes de programación como javascript pero, ¿alguien lo ha probado?

En teoria tendria que sacar por javascript el tamaño de la capa y calcular el de la otra columna mediante la resta del alto del dibujo. Sin embargo no tengo muy claro, si es posible de realizar.

Entiendo que es un poco complicado entenderme a traves de tantas palabras, he realizado 3 imagenes de ejemplo:



Se supone que intento lograr algo asi, el problema viene cuando la columna derecha (con los divs rosa y verde) se extiende provocando lo siguiente:



El bloque cian es un dibujo parte del diseño de la página y por tanto se supone que siempre deberia ir pegado junto al bloque violeta (el pie de página).

Sin embargo si el bloque marron aumenta, y entre el cian y el marron superamos la columna derecha ocurriria algo asi...



Que también me sería aceptable...
Ahora si, ¿hay alguna forma posible de relacionar las alturas de los divs rosa y verde para conseguir la altura correcta del bloque marron? ¿o existe alguna otra forma de enfocar la maquetación para evitar este problema?

Espero que me podais ayudar, estoy llegando a pensar de que pido un imposible.

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Feb 2008 05:16 pm
De hecho, no mando a google "sin más consideración"
De hecho, te doy las pautas para buscar, y encontrar.
Es más, te enseño algo más práctico que una respuesta, te doy un abanico entero de posibilidades y combinaciones que hasta ahora, no tenías (o muestras no tener)

rizome escribió:

Busca layouts en google.
En el link, el primer resultado en castellano, es un estupendo generador de plantillas.
Buscando en la web (todos los idiomas), el primero, y el segundo resultado, ofrecen otra amplísima gama de posibilidades con plantillas CSS.

Aún así, hay más gente que se pasa por aquí (en este caso, Aoyama), que completa la información si lo considera apropiado, con lo que considero exagerada la PstData (y el post)

Scytale escribió:

PD: ¿Esto es un foro de ayuda? o de... ¿manda al novato al google?




PD: ¿has probado el style"bottom:0px;"? para el cuadrado cyan (no recuerdo si era compatible xa todos los IE)
Intenta poner un esquema en HTML del problema, para que podamos trabajar más fácilmente sobre él.


(y revisa lo indicado arriba.)

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 13 Feb 2008 05:47 pm
Definitivamente hay una cosa que debes tomar en cuenta, estas usando demasiados divs, nolo hagas. usalos para definir las regiones pero no para enmarcar texto, si es un mero parrafo usa la etiqueta creada para eso, y si le quieres dar un estilo particular al texto usa clases que puedas asignar mas adelante.

Saludos!

Por Prozac

SWAT Team

1546 de clabLevel

1 tutorial

Genero:Masculino   SWAT

donde se regresa el viento

firefox
Citar            
MensajeEscrito el 13 Feb 2008 06:10 pm

Por matiasnicolas

58 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Feb 2008 06:26 pm
buscando mas aca esta la solucion es muy sencilla, solo hay que poner
overflow: hidden en el contenedor de as columnas y a las columnas darle el un padding-bottom muy grande y un margin-bottom muy grnade pero en negativo. Por ultimo se debe pooner de nuevo overflow: hidden; al pie para que se vea. saludos!!!

fuente de aca

http://www.positioniseverything.net/articles/onetruelayout/equalheight

Por matiasnicolas

58 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Feb 2008 06:33 pm
Bueno vamos punto por punto:

Si por fuerza tengo que usar los clasicos diseños de 2 o 3 columnas no habria posteado. Las paginas que se linkan y mencionan, tienen diseños curiosos si, pero ninguno coincide con lo que pretendo hacer.

Y el generador si, es muy bueno, pero para más de lo mismo. No me permite salirme mas allá de las 2 o 3 columnas. El tipo de maquetación que busco es muy similar, pero es que debo añadirle 2 REGIONES MÁS (cian y verde). Lo divido porque no tengo más opciones.

Me voy a las páginas veo el generador, veo los diseños de 2 columnas... ¿y? No me da solución a mi necesidad.

En cuanto a si uso demasiado divs, igual si, igual exista otra forma de enfocar el maquetado, y esa era la ayuda que quizas pedía (igual existe otra forma, no lo se)

Y por probar, he probado hasta esto:

Código :

<script languaje="JavaScript">
function cambiar(){
   var textoizq = document.getElementById("textoizq");
   var dibujoizq = document.getElementById("dibujoizq");
   var textoder = document.getElementById("textoder");
   var textoder2 = document.getElementById("textoder2");
   var comp1 = textoizq.offsetHeight + dibujoizq.offsetHeight;
   var comp2 = textoder.offsetHeight + textoder2.offsetHeight;
   
   if(comp1 < comp2)
     {
       textoizq.offsetHeight = textoder.offsetHeight + textoder2.offsetHeight - dibujoizq.offsetHeight;
      }
}
</script>


con tal de conseguir cambiar los tamaños de las capas...
Y sigo sin tener éxito... vamos si fuera por ganas de buscar y probar...
Será que no me empano, no se...

Y bueno, lo del esquema no lo entendí bien, antes deje tanto el codigo html como el css (me equivoque y lo encerre con cita, pido perdon). No entiendo bien a que se refiere.

Buenom gracias a todos por vuestro tiempo e interes
PD: Bottom:0px tampoco va, seguire probando.

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Feb 2008 06:59 pm
no es algo asi lo que quieres hacer??
las dos columnas son iguales y coinciden con el pie saludos!!

Ejemplo

Por matiasnicolas

58 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 13 Feb 2008 08:16 pm
Este funciona en los navegadores modernos:
    Firefox 2+
    Opera 9+
    Internet Explorer 7+
Desgraciadamente, no consigo que funcione en IE6, lo cual es un gran fallo.
¿La culpa?
style="bottom:0px;", que no lo reconoce si no se fija un alto.
(quizá haya algún hack por ahí...)

Código :

<style type="text/css">
* {margin:0px; padding:0px;}
body {height:100%;}
.top {z-index:10; position:absolute; top:0px; left:0px; height:50px; width:100%; background-color:red;}
.left{z-index:30; position:absolute; top:0px; bottom:25px; left:0px; width:200px; background-color:blue;}
.right{z-index:20; position:relative; top:50px; left:0px; background-color:green; padding-left:210px; padding-bottom:25px;}
.bottom{z-index:40; position:absolute; top:auto; bottom:0px; left:0px; height:25px; width:100%; background-color:brown;}
.d1 {position:absolute; top:0px; bottom:25px; left:0px; width:100%; background-color:purple;}
.d2 {position:absolute; top:auto; bottom:0px; left:0px; width:100%; height:25px; background-color:yellow;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="right">
Right<br />c<br />c<br />c<br />c<br />c<br />c<br />c
<div class="left"><div class="d1">left</div><div class="d2">&nbsp;</div></div>
<div class="bottom">bottom</div>
</div>

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 13 Feb 2008 09:53 pm
no es algo asi lo que quieres hacer??
las dos columnas son iguales y coinciden con el pie saludos!!

Ejemplo


Pues sería precisamente lo que ha intentado rizome. Ls gran putada que IE como siempre va pifiandola, porque simplemente quedaría genial :cool:

Al final me estoy pensando lo irremediable, que esta probado y efectivamente funciona... aunque sea una aberración. Dividir en 4 secciones iguales mediante una tabla (dentro del div contenedor, la parte central), darle el valign a la celda del dibujo a bottom y el resto distribuir en cada celda. De esta forma si se comporta correctamente como quiero. El problema el de siempre... que tanto se complique algo tan simple en CSS no lo veo normal, cuando precisamente lo que queremos es dominar el diseño.

PD: Seguire intentandolo para diseños posteriores, porque por desgracia para este me meten prisas.

Gracias de nuevo a todos :wink:

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Feb 2008 10:04 pm
Efectivamente, estoy contigo.
¿porqué en ocasiones nos empeñamos en hacer las cosas por el camino difícil?

Está claro, que el CSS aún no está preparado para ser usado fácil y cómodamente por culpa de los navegadores más antiguos...

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 13 Feb 2008 10:37 pm
No me ha dado tiempo de leer todo el problema y los comentarios pero propongo una solución a primera vista:
Crea tres divs horizontales, y los bloques de marron, rosa y verde introducelos en el div central (elimina el bloque de la imagen).
Ahora, al nuevo div contenedor ponle la imagen de fondo:

Código :

background: url(Images/fondopie.gif) left bottom;

supongo que funcionaría, si no es lo que pides, pedónenme por no haber leído todo.

Si eso no te sirve, recuerdo tres soluciones para columnas de alto al 100%, ya no recuerdo el link, ya que lo encuentre de nuevo lo posteo, mientras si quieres buscarlo tu mismo, este es el sitio:
http://www.infectedfx.net.
Saludos.

Por Darel

725 de clabLevel

5 tutoriales

 

I'm a human

firefox
Citar            
MensajeEscrito el 13 Feb 2008 11:47 pm
Buenas Darel,

He realizado tu recomendacion, claro que desglosando un poco:

Código :

#central{
width: 766px;
height:auto;
background-image:url(mircom_logo.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left bottom; 
}


Creando la tercera horizontal y eliminando algunas etiquetas que englobaban a otras (latizq, latder)

La imagen "parece" posicionarse correctamente bajo Internet Explorer, ahora al que no le da la gana es al Firefox... :?

Pero la idea era también muy buena y muy lógica :wink:

Los tiros quizas vayan por ahi...

Muchas gracias ^^

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Feb 2008 11:50 pm
Perdon... en el desglose anterior height: auto; no aporta nada nuevo, y el nombre de la imagen lo he cambiado (aunque es lo de menos). En firefox el problema es que simplemente dicha imagen no aparece, cosa que en IE si :S

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 13 Feb 2008 11:59 pm
Me causa ruido esto:

Scytale escribió:


Código :

#central{
...
background-attachment:fixed;
...
}


¿De verdad lo necesitas?.

Por Darel

725 de clabLevel

5 tutoriales

 

I'm a human

firefox
Citar            
MensajeEscrito el 14 Feb 2008 12:05 am

Darel escribió:

¿De verdad lo necesitas?.


Pues no :oops:, pero aun limpiándolo Firefox sigue en huelga :cry:

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Feb 2008 12:33 am
Experimentalmente agrega bordes a todos tus divs, y veras que el div central aparece como una linea, (1px aproximandamente, en FF), arréglalo agregagando un div "fantasma" dentro de tu div central pero bajo los divs flotantes:

Código :

#fantasma{
clear:both;
heigh:1px;
widht:100%;
}

Es la solucion que yo encuentro, no sé sea correcto hacerlo, pero te dejo el dato.

Por Darel

725 de clabLevel

5 tutoriales

 

I'm a human

firefox
Citar            
MensajeEscrito el 14 Feb 2008 12:48 am
Simplemente...

:o ¡FUNCIONA! :D

Al final añadiendo dicho div flotante se "cierra" el cuadro que engloba a los dos flotantes y se muestra también en Firefox.

Al final, todo se resume en no dedicarle un div a la imagen, quitar algunos divs que estaban de más y englobar las 3 capas restantes en 1 div contenedor cerrado por un div "fantasma".

Muchisimas gracias Darel por darme el planteamiento final y al resto por ayudarme con todas vuestras sugerencias.

Siento haberos hecho perder tanto tiempo :oops:

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Feb 2008 01:36 am
Me alegro mucho que te haya salido.

serias tan amable de pasarnos el código en limpio (html y css)?

saludos!! y gracias!!

Por matiasnicolas

58 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 14 Feb 2008 07:59 am

Scytale escribió:

[...] todo se resume en no dedicarle un div a la imagen [...]

Pero...
¿se puede con eso?
Entendía, que tenías imagen arriba, e imagen abajo (de la columna izq), y que por eso precisabas un div adicional.

En cualquier caso, siempre es util usar la alineación del background-image, con background-position, y su repetición, con "background-attachment", como has terminado haciendo.

Pero sí... pon por aquí si puedes, el esquema del código usado, a ver...

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 14 Feb 2008 10:15 am
Claro que si, os paso el resultado final (es dificil expresarse con tanta letra):

Codigo HTML:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilos.css" rel="stylesheet" type="text/css" />
<title>Benazahora Café</title>
</head>

<body>
<div id="contenedor"> 
   <div id="cabecera"><img src="Images/benazahora_web_r1_c1.jpg" width="766" height="284" /></div> 
   <div id="central">
       <div id="textoizq">
          <p>Texto de la izquierda</p>
       </div>
       <div id="textoder">
          <p>Texto de la derecha </p>
       </div>
       <div id="textoder2">
          <p>El segundo texto de la derecha (la capa de debajo)/p>
       </div>
       <div id="fantasma"></div> <!-- Este es el div que resetea el float y cierra la capa central --> 
       </div>
       <div id="pie"><br />
         <p> info del pie </p>
       </div>
</div>
</body>
</html>


CSS:

Código :

BODY {
font : 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
margin : 20px 0px 20px 0px;
text-align: center;
} 

#contenedor{
text-align: left;
width: 766px;
margin: auto;
} 

#cabecera{
height : 284px;
width: 766px;
} 


#fantasma{
clear: both;
height: 1px;
widht: 100%;
}

#textoizq{
width:398px;
padding-left: 5px;
margin-bottom: 89px; /* Este márgen coincide con la altura del dibujo que conforma el diseño, el que mostramos en central. Se lo he puesto para que la capa no se lo "comiera". */
height: auto;
float:left;
}
 

#central{
width: 766px;
background-image:url(Images/benmora_web_r4_c1.jpg);  /* Este es el polémico dibujo que me dificultaba el tipico diseño a 2 columnas */
background-repeat:no-repeat;
background-position:left bottom;
}

#textoder{
width:357px;
padding-right: 5px;
background-color : #ffffff;
float:right;
} 

#pie{
font : 7pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
clear:both;
background-image:url(Images/fondopie.gif)
}

#textoder2{
width:357px;
padding-right: 5px;
background-color : #ffffff;
float:right;
}


Igual puede seguir estando algo sucio el codigo pero ya me funcionas. Espero que le sirva a alguien en el futuro.

Saludos ^^

Por Scytale

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Feb 2008 05:01 pm
Si vas a crear un div, deberá ser con el objetivo de poner contenido en él, y el diseño lo integras con la propiedad del background.
Y en lo personal, evito lo más que puedo los div flotantes. porque no me agrada utilizar ancho y/o alto establecidos.

Por Darel

725 de clabLevel

5 tutoriales

 

I'm a human

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.