Foros del Web » Creando para Internet » CSS »

Como tener una imagen paralela a otra en vertical y que queden las dos ajustadas

Estas en el tema de Como tener una imagen paralela a otra en vertical y que queden las dos ajustadas en el foro de CSS en Foros del Web. Hola , el problema es que tengo un fondo, encima del fondo hay un grupo de imagenes que he montado como un puzle, pero llegado ...
  #1 (permalink)  
Antiguo 25/04/2012, 15:51
 
Fecha de Ingreso: abril-2009
Mensajes: 10
Antigüedad: 15 años, 6 meses
Puntos: 0
Como tener una imagen paralela a otra en vertical y que queden las dos ajustadas

Hola , el problema es que tengo un fondo, encima del fondo hay un grupo de imagenes que he montado como un puzle, pero llegado a un punto a dos imagenes que tienen que ir una al lado de la otra.

Encima de estas imagenes hay fotos, texto, listas con enlaces, pero me encuentro que mientras la imagen de fondo de la izquierda esta bien centrada, la de la derecha dependiendo del navegador y la pantalla se ve mas arriba o mas abajo, por ejemplo en mi pantalla que es cuadrada , en firefox e internet explorer 7, se ve matizado, pero si lo mira mi novia con el apple con safari, se me ve la imagen unos 10 px arriba tapando casi dos enlaces de texto, y si lo mira la persona que me encargo hacerle la web en su portatil que es la pantalla rectangular, en firefox se ve casi como en el safari de mi novia,pero tapando totalemente los enlaces, pero si lo mira con el internet explorer 8 se ve por debajo de donde deberia de quedar..... no se que solucion darle,porque lo normal es que si los tres tenemos la misma version de firefox deberiamos verlo igual creo , no??? .

Claro que si lo adapto para que en safari se vea bien, con los demas fatal, alguien sabria decirme que solucion darme???, He visto en un manual que hay unos hacks que te permite poner un poco de codigo para que si el navegador es IE xversion, pues actue de una forma determinada, pero claro que seguire teniendo el problema del safari.

os pongo la web que estoy haciendo para que podais comprobarlo vosotros mismos, para que lo podais ver mejor.

www.countryroates.com/webmarc.html

Gracias
  #2 (permalink)  
Antiguo 25/04/2012, 23:49
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Como tener una imagen paralela a otra en vertical y que queden las dos aju

La estructura no es correcta, te diría que intentes de nuevo.
Un posible Ejemplo, usando float, donde las columnas son hermanas y no como tienes en este momento, una hija de la otra (una dentro de la otra).
Código HTML:
Ver original
  1. ...
  2. <div id="cabecera">Logo + menu</div>
  3. <div id="central">
  4.    <div id="colum_izq"></div>
  5.   <div id="colum_der"></div>
  6. </div>
  7. ...

Código CSS:
Ver original
  1. #colum_izq {float:left;}
  2. #colum_der{float:right;}

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 25/04/2012, 23:57
 
Fecha de Ingreso: abril-2009
Mensajes: 10
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Como tener una imagen paralela a otra en vertical y que queden las dos aju

Muchas gracias, esta tarde lo pruebo , creo que puede funcionar, por otro lado no entiendo lo de <div id="cabecera">Logo + menu</div> , como esta ahora no esta bien? Ya que esto no me esta dando problemas, y tengo miedo de tocarlo y que la pagina se vuelva inestable, agradeceria que me lo explicaras, para entenderlo mejor. Un saludo

Gracias
  #4 (permalink)  
Antiguo 26/04/2012, 00:03
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Como tener una imagen paralela a otra en vertical y que queden las dos aju

Ah, solo lo puse para ubicarte que va debajo del menu.

Si pruebas con float, debes ponerle al div central
Código CSS:
Ver original
  1. #central{overlfow:hidden;
  2. }
Para "limpiar los float"

Manuales. www.librosweb.es

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 26/04/2012, 16:42
 
Fecha de Ingreso: abril-2009
Mensajes: 10
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Como tener una imagen paralela a otra en vertical y que queden las dos aju

Hola
Muchas Gracias C2am, por lo visto ahora se ve bien en mi ordenador, y creo que en el resto tambien , de todas formas vuelvo a poner el enlace por si lo quereis probar con otros navegadores y tamaños de pantalla. www.countryroates.com/webmarc.html , quisiera hacerte otra pregunta... puedes explicarme cual es la funcion de float realmente??? , perdona ser tan pesado pero me gusta saber el porque de las cosas, asi no preguntare lo mismo muchas veces...

Gracias de nuevo.

Akinsay
  #6 (permalink)  
Antiguo 26/04/2012, 20:50
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 9 meses
Puntos: 306
Respuesta: Como tener una imagen paralela a otra en vertical y que queden las dos aju

Nada mejor que un poco de lectura para comprender las cosas:

http://www.librosweb.es/css/capitulo...nto_float.html
Aunque te recomiendo que leas todo el capitulo 5. En realidad no es mucho, pero es muy didáctico.

http://www.librosweb.es/css_avanzado...ar_floats.html


Volviendo a tu web, te comento que uso una resolución de 1024 * 768, lo que hace que no se vea bien, que aparezca el scroll horizontal. Así que un punto a tener en cuenta es cual será la resolución minima para visualizar correctamente tu página.

También aparece desplazada del top, etc.
Mira:


Ah, como verás es Chrome.

Ese margen blanco que rodea a tu página, tal vez se solucione con algún "reset css". (busca en google lo de reset)

saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 27/04/2012, 16:07
 
Fecha de Ingreso: abril-2009
Mensajes: 10
Antigüedad: 15 años, 6 meses
Puntos: 0
Respuesta: Como tener una imagen paralela a otra en vertical y que queden las dos aju

Hola de nuevo,

Muchas gracias por tu ayuda, tu aportacion me ha ido genial, tanto para aprender a maquetar un css, como a abrirme mas ideas con el diseño.

Te estoy muy agradecido, ya me he leido lo del float, y perfecto.

Un abrazo

Etiquetas: explorer, firefox, html, tener, vertical
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:21.