Foros del Web » Creando para Internet » Diseño web »

como maquetar para que sea bien una web en el explorer y en el mozilla?

Estas en el tema de como maquetar para que sea bien una web en el explorer y en el mozilla? en el foro de Diseño web en Foros del Web. por ejemplo en una web ke estoy haciendo unas fotos que tienen estos valores: Código: <div id="img1"><a href="imagenes/img/1.jpg"rel="lightbox"><img src="imagenes/img/1.jpg" title="lightbox" width="80" height="80"></a></div> <div id="img2"><a href="imagenes/img/2.jpg" ...
  #1 (permalink)  
Antiguo 14/08/2009, 05:24
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 8 años, 7 meses
Puntos: 1
como maquetar para que sea bien una web en el explorer y en el mozilla?

por ejemplo en una web ke estoy haciendo unas fotos que tienen estos valores:

Código:
<div id="img1"><a href="imagenes/img/1.jpg"rel="lightbox"><img src="imagenes/img/1.jpg"  title="lightbox" width="80" height="80"></a></div>
<div id="img2"><a href="imagenes/img/2.jpg" rel="lightbox"><img src="imagenes/img/2.jpg"  width="80" height="80"></a></div>
<div id="img3"><a href="imagenes/img/3.jpg"rel="lightbox"><img src="imagenes/img/3.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img4"><a href="imagenes/img/4.jpg"rel="lightbox"><img src="imagenes/img/4.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img5"><a href="imagenes/img/5.jpg"rel="lightbox"><img src="imagenes/img/5.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img6"><a href="imagenes/img/6.jpg"rel="lightbox"><img src="imagenes/img/6.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img7"><a href="imagenes/img/7.jpg"rel="lightbox"><img src="imagenes/img/7.jpg" rel="lightbox" width="80" height="80" /></a></div>
<div id="img8"><a href="imagenes/img/8.jpg"rel="lightbox"><img src="imagenes/img/8.jpg" rel="lightbox" width="80" height="80" /></a></div>
css:

Código:
/*css de los cuadros donde van las imagenes ke seran ejecutadas por el lightbox*/

#img1{width:80px; height:80px;float:left; margin-left:40px; margin-top:20px;}
#img2{width:80px; height:80px;float:left;margin-top:20px;}
#img3{width:80px; height:80px;float:left;margin-top:20px;}
#img4{width:80px; height:80px;float:left;margin-top:20px;}
#img5{width:80px; height:80px;float:left;margin-top:20px;}
#img6{width:80px; height:80px;float:left;margin-top:20px;}
#img7{width:80px; height:80px;float:left;margin-top:20px;}
#img8{width:80px; height:80px;float:left; margin-left:40px;margin-top:20px;}

en el mozilla se me ve una manera toda esta galeria de fotos mas a la izquierda de la celda ke las contiene pero en el internet explorer 7 se me ven como unos 15 px mas a la derecha!!!

como tengo que modificar el codigo para que se me vean lo mas parecido posible en ambos navegadores?

otra pregunta a la hora de maquetar texto e imagenes que tengo que tener en cuenta a la hora de utilizar medidas como pixeles o uso "em" o que tengo que usar que entiendan bien los dos navegadores???
  #2 (permalink)  
Antiguo 14/08/2009, 08:29
Avatar de XLogus  
Fecha de Ingreso: noviembre-2008
Ubicación: AQP
Mensajes: 495
Antigüedad: 9 años
Puntos: 19
Respuesta: como maquetar para que sea bien una web en el explorer y en el mozilla?

hola
Bueno habria que ver el css de la celda que las contiene, aunque siempre es recomendable resetear el css primero, eso ayuda a hacer paginas crossbrowser

No entiendo xq le diste un ID a cada imagen y luego les aplicaste CSS, con ponerles una clase y una sola linea de css no era suficiente?
  #3 (permalink)  
Antiguo 14/08/2009, 10:11
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: como maquetar para que sea bien una web en el explorer y en el mozilla?

Más sencillo:
Código css:
Ver original
  1. #contiene_img {/*lo que necesites*/}
  2. a img {{width:80px; height:80px;float:left;margin-top:20px;}
  3. .izquierda {margin-left:40px;}
  4. .derecha { margin-left:40px;}

Código html:
Ver original
  1. <div id="contiene_img">
  2. <a href="http://www.forosdelweb.com/f91/como-maquetar-para-que-sea-bien-web-explorer-mozilla-727246/imagenes/img/...."><img class="izquierda" src="http://www.forosdelweb.com/f91/como-maquetar-para-que-sea-bien-web-explorer-mozilla-727246/imagenes.... /></a>
  3. <a href="imagenes/img/...."><img src="http://www.forosdelweb.com/f91/como-maquetar-para-que-sea-bien-web-explorer-mozilla-727246/imagenes.../></a>
  4. ......
  5. <a href="imagenes/img/...."><img class="derecha" src="http://www.forosdelweb.com/f91/como-maquetar-para-que-sea-bien-web-explorer-mozilla-727246/imagenes.... /></a>
  6. </div>
El texto mejor siempre en unidades relativas (em, %...) y otros elementos depende de sus particularidades o de lo que pretendas lograr.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 15/08/2009, 02:43
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: como maquetar para que sea bien una web en el explorer y en el mozilla?

yo te recomiendo usar los condicionales css

<--[if IE]>

aqui tu codigo

<[endif]-->

y tambien te recomiendo identificar las fotos con id o class, es mas eficinte y rapido, usa los atributos margin, padding, display, float, position, width, height

ojala y te ayude
  #5 (permalink)  
Antiguo 15/08/2009, 08:39
 
Fecha de Ingreso: agosto-2009
Mensajes: 2
Antigüedad: 8 años, 4 meses
Puntos: 0
Respuesta: como maquetar para que sea bien una web en el explorer y en el mozilla?

Creo que siempre es mejor hacer las paginas usando un explorer para ir comprobando el resultado del CSS....

PERO ....

si lo haces con firefox o con otro, te recomiendo hacer todo el CSS para el navegador que uses. Luego con explorer compruebas la pagina, y todo lo que se tenga que adaptar lo anades en el CSS con un # delante, algo que hara que la declaracion solo sea leida por IE y no por firefox y otros. Es un poco engorroso, porque tienes cosas declaradas 2 veces de distintas formas, pero funciona. Ten en cuenta tambien que CSS va de arriba a abajo, con lo que las declaraciones para IE (precedidas por #) deberian ir al final, porque si despues de una de ellas aparece una sin # , digamos que sobre escribira la anterior declaracion que si llevaba # para ser leida por IE, dado que IE tambien leera las que no lleven #.
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 13:45.