y quiero llegar a formar algo asi.
Alguien me podria orientar con este problema?
Desde ya muchas gracias.!
16/03/2010, 18:53
| |||
| |||
| 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.! |
|
16/03/2010, 19:33
| ||||
| ||||
| 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 ;) |
|
16/03/2010, 20:47
| |||
| |||
| 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 |
|
19/03/2010, 14:47
| |||
| |||
| 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:
Mi Css es este:<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>
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 |
|
19/03/2010, 22:12
| ||||
| ||||
| 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:
Quizá esté un poco más avanzado a lo que estás acostumbrado, pero confío que podrás comprenderlo. Suerte @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
}
 |
|
21/03/2010, 09:03
| |||
| |||
| 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! |
|
21/03/2010, 09:41
| ||||
| ||||
| 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  |
|
23/03/2010, 07:06
| |||
| |||
| 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 |
|
24/03/2010, 12:48
| ||||
| ||||
| 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 |
| Etiquetas: |
