Encajar dos imagenes. Imposible

jariscano · #1 (**permalink**) 11/11/2006, 00:47

Soy un cabezota y como ayer hice la critica de CSS y seguia aun intentando encajar las imagenes mediante capas y decir que hoy no he dormido bien nada mas que pensando que se debe de poder hacer pero que me resulta imposible. Entonces sino quereis que me de algo por favor ayudarme. En FireFox se ve de perfecto pero en explorer no hay forma, quito un pixel se me mueve uno delante, sumo uno se me va detras.

Mirar este es el codigo en css:

Cita:

html {
padding:0px;
margin:0px;
}
body {
background-color: #bcbcbc;
font-size: 12px;
color:#564b47;
text-align:center;
margin:0px;
padding:0px;
}
#box {
width:750px;
margin: 0px auto;
padding:0px;
text-align:left;
}
.arriba {
width: 750px;
clear: both;
margin: auto;
padding: 0px;
}
.cuerpo {
width: 748px;
background-color: #FFFFFF;
margin: auto;
clear:both;
padding: 0px;
height: 300px;
}
.logo {
float: left;
width:200px;
margin-left: 15px;
margin-top: 20px;
padding: 0px;
}
.menusup {
padding: 0px;
float: right;
margin: auto;
margin-right: 9px;
_margin-right: 5px;
}

Y ahora os pongo el codigo en html:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<link href="parro.css" rel="stylesheet" type="text/css" />
</style>
</head>

<body><br /><br />
<div class="box">
<div class="arriba"><img src="top.gif" width="748" height="19" border="0" /></div>
<div class="cuerpo">
<div class="logo"><img src="logo.gif" alt="logotipo" /></div>
<div class="menusup"><img src="menusup.gif" alt="menu parroquia" width="259" height="72" /></div>
</div>
</div> 
</body>
</html>

El problema está con la imagen menusup.gif que no hay manera que en el explorer se encaje.

Os pongo tambien el enlace para que lo veais y podais descargaros los dos.

Para ver la web

Bajar todos los archivos

webosiris · #2 (**permalink**) 11/11/2006, 08:08

independientemente de los problemas que tengas con el IE, creo que te estás equivocando en el concepto del menú. No es para nada necesaria una imagen, al contrario.. hay muchos ejemplos de menus hechos con html y css, sin usar imágenes.

Además, las imágenes que estas usando las estás poniendo directamente en el html (con <img), cuando las deberías poner como fondo de las capas (con css) ya que son simples decoraciones.

PD: te sobra el </style> en tu header.. y no son necesarios los <br/>, simplemente podés darle un margin-top a la capa BOX

jariscano · #3 (**permalink**) 11/11/2006, 14:17

Pero vale webosiris ves un poco mas alla. Yo quiero hacerlo tal y como lo ves o como te digo por el motivo que sea debe de ser una imagen en este caso se podria resolver de esa forma como tu dices pero esto es una explicacion para el futuro porque en otro momento me puede surgir el problema.

¿Tu podrias resolverlo en css y encajar ambas imagenes?.

Yo si te puedo decir que con tablas yo las encaje en 3 minutos y ademas que lo tengo en tablas pero me da curiosidad cual es el problema de porque me falla en css.

Alguien es capaz de darme una solucion a esto y encajarlas?

jariscano · #4 (**permalink**) 12/11/2006, 01:49

nadie lo sabe ni me puede ayudar?

jariscano · #5 (**permalink**) 12/11/2006, 02:17

Bueno he probado lo que me dijo webosiris de poner las imagenes en el background de la capa y me ha funcionado a la perfeccion aunque he tenido que diferencias ambas con diferentes etiquetas en el margin.

Pero..... ¿Porque hay que hacerlo de esta forma?. Hay alguna explicacion?

Saludos.