Foros del Web » Creando para Internet » CSS »

maquetar web con divs background-img

Estas en el tema de maquetar web con divs background-img en el foro de CSS en Foros del Web. Buenas, estoy haciendo una web para mi y queria saber si se podia hacer esto, ya que un amigo hace las imagenes y esta veo ...
  #1 (permalink)  
Antiguo 16/03/2010, 19:53
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
maquetar web con divs background-img

Buenas, estoy haciendo una web para mi y queria saber si se podia hacer esto, ya que un amigo hace las imagenes y esta veo que es la forma mas simple y rapida de juntar todo. El me pasa las imagenes de fondo y yo le agrego la info encima y pongo las imagenes en su posicion, pero se me esta complicando cuando el diseño es tiene demasiados cortes, les paso a mostrar, esta son las imagenes por separado que tengo:







y quiero llegar a formar algo asi.





Alguien me podria orientar con este problema?

Desde ya muchas gracias.!
  #2 (permalink)  
Antiguo 16/03/2010, 20:33
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: maquetar web con divs background-img

Supongo que la manera más simple sería divs anidados.

Lo primero que veo, es que son dos columnas (a y b). La primera tiene tres divs en su interior (aa, ab, y ac) con altura específica sin mayor problemas.

La segunda columna, tiene 3 divs (ba, bb, y bc), el cual los dos primeros son dos columnas, y el último es un "pie de columna". bb se subdivide a la vez en dos, un pequeño encabezado (bba) y su contenido (bbb).

Espero esto te sirva de guía. Asumo que ya sabes maquetar. Si necesitas más ayuda, solo avísame ;)
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #3 (permalink)  
Antiguo 16/03/2010, 21:47
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: maquetar web con divs background-img

no se mucho maquetar, pero me doy ideas y leo.

lo que me queres decir es que cree dos divs, izquierad y derecha, en la izquierda van a ir los 3 primeros cuadros (si A es el div de la izquierda, quedaria AA, AB, AC) y en la derecha hay 5 partes, pero como vos viste hay 2 que pueden ser 1 sola (Entonces, si C es el div de la derecha, quedaria anidado BA, BB, BC, BD) verdad?

ahora lo pruebo y te comento que pasa!
Un abrazo
  #4 (permalink)  
Antiguo 19/03/2010, 15:47
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: maquetar web con divs background-img

Hola, hice lo que me decis y me esta llendo mejor, solo tengo 1 problema pero es porq estoy nuevito en esto del css.....


mi codigo es este:

Código:
<body>
<div class="left">
<div class="arribaleft">
asd
</div>
<div class="abajoleft">
</div>
</div>
</div>
<div class="center">
<div class="centerarriba">
</div>
<div class="centerabajo">
</div>
</div>
<div class="right">
<div class="rightarriba">
</div>
<div class="rightabajo">
</div>
</div>
</body>
Mi Css es este:
Código:
@charset "utf-8";
/* CSS Document */

.left{
float:left;
}

.arribaleft{
background-image:url(principal/jeneski_01.png);
width:321px;
height:204px;

}

.abajoleft{
background-image:url(principal/jeneski_05.gif);
width:321px;
height:396px;
}

.center{
float:left;
}

.centerarriba{
background-image:url(principal/jeneski_04.gif);
width:123px;
height:413px;
}

.centerabajo{
background-image:url(principal/jeneski_02.gif);
width:479px;
height:187px;
}

.right{
float:left;
}

.rightarriba{
background-image:url(principal/jeneski_03.gif);
width:356px;
height:68px;
}

.rightabajo{
background-image:url(principal/jeneski_06.gif);
width:356px;
height:345px;
}

y obtengo esto:






pero si modifico y pongo de esta forma
codigo

Código:
<body>
<div class="left">
<div class="arribaleft">
asd
</div>
<div class="abajoleft">
</div>
</div>
</div>
<div class="center">
<div class="centerarriba">
</div>
<div class="centerabajo">
</div>
<div class="rightarriba">
</div>
<div class="rightabajo">

</div>


</div>
</body>

me da como resultado esto.




no se si deberia ponerlos como flotantes o que.... en verdad me perdi :P igualmente el mensaje anterior fue de mucha ayuda, para saber como se maquetan este tipo de cosas.

Si alguien me podria orientar le estaria muy agradecido.!
Un abrazo
  #5 (permalink)  
Antiguo 19/03/2010, 23:12
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: maquetar web con divs background-img

Prueba este diseño:

Código HTML:
<body>
<div class="a">
<div class="aa">asd</div>
<div class="ab"></div>
</div>

<div class="b">
<div class="bb">
 <div class="bba"></div>
 <div class="bbb"></div>
</div>
<div class="ba"></div>
<div class="bc"></div>
</div>
</body> 
Código:
@charset "utf-8";
/* CSS Document */

.a{float:left}

.aa{
background-image:url(principal/jeneski_01.jpg);
width:321px;
height:204px;
}

.ab{
background-image:url(principal/jeneski_05.jpg);
width:321px;
height:396px;
}

.b{float:left}

.ba{
background-image:url(principal/jeneski_04.jpg);
width:123px;
height:413px;
}

.bb{float:right}

.bba{
background-image:url(principal/jeneski_03.jpg);
width:356px;
height:68px;
}

.bbb{
background-image:url(principal/jeneski_06.jpg);
width:356px;
height:345px;
}

.bc{
background-image:url(principal/jeneski_02.jpg);
width:479px;
height:187px
}
Quizá esté un poco más avanzado a lo que estás acostumbrado, pero confío que podrás comprenderlo. Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #6 (permalink)  
Antiguo 21/03/2010, 10:03
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: maquetar web con divs background-img

daPhyre Muchas gracias por la ayuda, ahora si quedo, te hago ahora un pregunta nada mas tecnica, ya que estoy funciona perfectamente.

Vi en el css que armaste solo 2 diferencias, yo utilize erroneamente alineaciones center y right, y lo que vos me mandaste utilizas 2 left y el right. Por lo que entiendo lo que esto hace es alinear la parte de la izquierda y la del medio inmediatamente a la izquierda, y la de la derecha alineada right (corrijanme si no es asi), pero mi pregunta es porque alineando center no funciona igual? se que por ahi puede ser una pregunta mas del monton pero me interesa saber el porque.

Nuevamente te agradezco la ayuda que me diste!
  #7 (permalink)  
Antiguo 21/03/2010, 10:41
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: maquetar web con divs background-img

Bueno, lo que hacías, es crear tres columnas, cuando, por el pie (Que ocupa el ancho de las dos últimas columnas), en verdad se trata de dos columnas, la cual la segunda se subdivide en dos.

De lo contrario, saldrá la tercer columna fuera de la segunda, tal como ocurrió en el primer ejemplo que intentaste. Si no fuera por ese pie que ocupa el ancho de dos columnas, la técnica que utilizaste originalmente habría funcionado sin problemas

Espero mi explicación haya sido clara, suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #8 (permalink)  
Antiguo 21/03/2010, 13:47
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: maquetar web con divs background-img

la explicacion que me diste fue mas que clara!

Te lo agradezco mucho!
  #9 (permalink)  
Antiguo 23/03/2010, 08:06
 
Fecha de Ingreso: julio-2009
Ubicación: Argentina!
Mensajes: 324
Antigüedad: 8 años, 4 meses
Puntos: 4
Respuesta: maquetar web con divs background-img

ahora tengo 1 preguntita mas.

Tengo una cabecera, un centro de pagina que lo divido en dos columnas (Izquierda y derecha) y un pie, entonces, creo un div centro con float left y 100% despues, dentro del centro, creo el div izquierda con el 50% y float left, y luego creo tambien dentro del centro el div derecha con float right y 50%, pero me queda el div derecha debajo del izquierda pero alineado a la derecha.

¿que estoy haciendo mal?

Un abrazo
  #10 (permalink)  
Antiguo 24/03/2010, 13:48
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: maquetar web con divs background-img

Veamos... Mi experiencia me dice que usas Internet Explorer, donde 50% + 50% = 101%... Eso o hay otro problema que no estoy viendo... Quizá estés usando un margin, padding o border que aumente en por lo menos un pixel a ese 50%...

A falta de más datos, mi solución por ahora es que pongas un 49% en lugar de un 50%, y ver si eso lo soluciona. Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: maquetar
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 04:07.