Foros del Web » Creando para Internet » CSS »

diseño complicado

Estas en el tema de diseño complicado en el foro de CSS en Foros del Web. buenas a todos. tengo una consulta. recurro a ustedes si me pueden ayudar u orientar si existe una solucion para este diseño. les explico. tengo ...
  #1 (permalink)  
Antiguo 22/01/2010, 15:31
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Pregunta diseño complicado

buenas a todos. tengo una consulta. recurro a ustedes si me pueden ayudar u orientar si existe una solucion para este diseño.

les explico. tengo este diseño de 2 columnas. les mostrare el diseño.



de la maquetacion de las 2 columnas eso ya lo hice. como he mostrado el diseño de las 2 columnas separandolos, la primera columna (quees para el buscador) tiene bordes redondeados, la segunda columna (que es un banner), el lado derecho tiene forma ovalada, es decir, curvilinea.

aqui les muestro las 2 imagenes separadas

primera imagen



segunda imagen (del banner)



mi consulta es la siguiente. hay alguna posibilidad de hacer la maquetacion para la primera imagen que publicado.



como dije antes, de la maquetacion de las 2 columnas eso ya lo hice.

y otra consulta. la segunda imagen (del banner), se puede sobreponer por encima de la primera imagen del buscador, es decir, tapar solo la parte de la imagen de la curva ?.

este es el css para las 2 columnas.

Código CSS:
Ver original
  1. #cuerpo{
  2.     width:960px;
  3.     height:328px;
  4.     margin:0px auto;
  5.     border:#666666 1px solid;
  6. }
  7.  
  8. #cuerpo_izquierda {
  9.     width:292px;
  10.     height:327px;
  11.     float:left;
  12. }
  13. #cuerpo_derecha {
  14.     width:665px;
  15.     height:327px;
  16.     float:right;
  17. }
  18.  
  19. #banner{
  20.     position:absolute;
  21.     width:665px;
  22.     height:327px;
  23.     float:right;
  24.     top:167px;
  25.     left:354px !important;
  26. }

intente cortar las imagenes en 3 partes con la herramienta division, puse el estilo para las 3 columnas, pero aun asi no me sale bien como el del boceto.

me podran ayudar en ello o cual es la posible solucion que puedo dar ?
  #2 (permalink)  
Antiguo 22/01/2010, 17:30
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: diseño complicado

Saludos!

Yo lo haria de la siguiente forma:

Hago dos divs, uno izquierdo y uno derecho, y las imagenes las pongo como fondo cortando la imagen asi:



Obviamente, dejo lo que es de fondo como fondo, y el resto (botones y esas cosas) las hago normal.

Espero que eso te ayude.

Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 22/01/2010, 17:44
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: diseño complicado

gracias por responder CaLiZzZ. hice eso desde un principio, pero la segunda imagen que mencione (que es el banner)



va ser un flash, es decir, tiene que ser igual que la imagen que estoy mostrando.



porque la segunda columna, que le puse de id banner, esta de esa manera :

Código CSS:
Ver original
  1. #banner{
  2.     position:absolute;
  3.     width:665px;
  4.     height:327px;
  5.     float:right;
  6.     top:167px;
  7.     left:354px !important;
  8. }

al momento de mostrarlo en el ie7, se muestra bien pero en el firefox no se acomoda a la posicion de la imagen.

se puede hacer eso al igual que la primera imagen que he mostrado ?.

saludos.
  #4 (permalink)  
Antiguo 23/01/2010, 13:28
 
Fecha de Ingreso: marzo-2009
Ubicación: Uruguay
Mensajes: 128
Antigüedad: 8 años, 9 meses
Puntos: 8
Respuesta: diseño complicado

Lo que se me ocurre es colocar "buscador" con imagen de fondo un PNG, convirtiendo en transparencia la parte que queda por fuera de la curva blanca (la que no se verá), y luego colocar la capa del flash. Y revisar la función z-index de modo que el buscador (que está puesto por debajo del flash) quede por arriba.

No se si me he explicado bien.

Y lo de superponer el flash, no estoy seguro...

Edito, ahora que veo los float de tu css, los dos deberían tener float:left.
  #5 (permalink)  
Antiguo 24/01/2010, 09:23
(Desactivado)
 
Fecha de Ingreso: abril-2008
Mensajes: 787
Antigüedad: 9 años, 7 meses
Puntos: 7
Respuesta: diseño complicado

gracias por responder Kisquian. aunque creo que el div banner, deberia ser float: left.

alguna otra sugerencia ?.

saludos.

Edito: corregi el div del banner y aun asi no me sale.

Última edición por esaenz22; 26/01/2010 a las 10:46 Razón: correccion.

Etiquetas: diseño
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 09:50.