Hola amigos de Ovillo,

Tengo una duda que quisiera plantear,

Estoy maquetando una página y estoy usando márgenes negativos para posicionar 
unos objetos afuera del div que los contiene.  Sin embargo el div que los 
contiene tiene un fondo con un .png y por alguna razón no logro que se 
despliegue en firefox.

(En Explorer)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ie7.jpg

(En Firefox)
http://www.desarrollo.org.gt/ferias/tmp/ferias_ffox.png

(Página de prueba de la web en desarrollo)
http://www.desarrollo.org.gt/ferias/plantilla.html

También estoy tratando de usar márgenes negativos con el área que quiero usar 
de menú pero  se me destroza todo más, en firefox me funciona y en 7 no. 
(http://www.desarrollo.org.gt/ferias/plantilla.html)

Bueno, les dejo el código del html y del css y sí alguno tiene algunas ideas o 
sugerencias (incluso cambio de método para resolver el problema lo agradeceré 
muchísimo).

HTML:

<!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=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Plantilla - Ferias en Guatemala V3</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="contenido_arriba"></div>
<div id="contenido">

<div id="col_izquierda">
<div id="logo_feria">
                <img src="imagenes/logo_feria.png" alt="Logotipo: Feria del 
Comercio 2008" />
</div>
</div>

<div id="col_derecha">

    <div id="navegacion_superior_arriba"></div>
    <div id="navegacion_superior">
        <p>Esto es una prueba de los menus</p>
    </div>
    <div id="navegacion_superior_abajo"></div>

<div id="mega_imagen">
</div>

<div class="articulo">
  <p>Aliquam rhoncus auctor sapien? Suspendisse purus. Sed non mauris. In arcu 
leo, ullamcorper nec, egestas in, luctus nec, ante. Mauris sollicitudin 
eleifend nibh. Donec a eros quis dolor faucibus molestie. Vivamus mollis. Duis 
vel mi interdum justo rhoncus vulputate. Pellentesque quam turpis, bibendum 
sed, dictum et; imperdiet sodales, quam. Integer suscipit orci sit amet ante. 
In in quam id tortor porta dictum! Duis sed nulla! Fusce velit. Aliquam eu 
augue! Curabitur odio nulla, feugiat in, pulvinar nec, semper a, purus. Nulla 
pede. Fusce risus tellus, malesuada a, egestas in, dictum et, erat. 
Pellentesque semper. Ut imperdiet urna nec odio.</p>
  <p>Duis cursus justo nec nulla. Nunc mi sem, ornare vel, suscipit et, mollis 
quis, mi. Donec sed leo sed quam scelerisque pretium. Duis euismod nisl non 
odio. Aenean at massa id elit aliquet feugiat? Quisque tortor. Integer ipsum. 
Vivamus euismod lobortis quam. Proin sollicitudin interdum lorem! Mauris 
bibendum gravida urna. Morbi semper. Aliquam tincidunt porttitor justo.</p>
  <p>Phasellus velit magna, viverra at, auctor vel, congue sit amet; augue. 
Duis mattis congue nibh. In hac habitasse platea dictumst. Nulla sit amet eros. 
Maecenas consequat varius mauris. Aenean laoreet diam at purus. Aenean in nibh. 
Duis sapien? Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam 
iaculis iaculis metus. Vestibulum id quam. Mauris nibh nibh, tempus eget, 
venenatis at, suscipit et, nisl. Integer non lectus eu nisi eleifend tempus! 
Maecenas eleifend. Vestibulum orci sapien, fermentum ac, porttitor tincidunt, 
vestibulum in, quam. Cras diam. Maecenas non nisl? Duis sed eros. Phasellus 
semper turpis quis dolor.<br />
  </p>
</div>

</div>

</div>
<div id="contenido_abajo"></div>

<div class="limpiar"></div>
<div id="pie">
</div>

</body>
</html>

--

CSS

@charset "utf-8";
/* CSS Document */
* {margin:0; padding:0;}

#contenido, #pie {margin:auto; width:760px;}
#contenido_arriba, #contenido_abajo {width:760px; height:15px; margin:auto;}
#contenido_arriba {margin-top:5em;}
#contenido {overflow: inherit;}

#navegacion_superior_arriba, #navegacion_superior_abajo {height:20px;}
#navegacion_superior_arriba {margin-top:-3em;}

#col_izquierda {width:200px; float:left;}
#col_derecha {width:560px; float:left;}
#logo_feria {width:200px; height:214px; margin-top:-5em; margin-left:-5em; 
z-index:1000;}

body {background-image:url(imagenes/fondo_feria.gif);}
#contenido {background-image:url(imagenes/fondo_contenido.png); 
background-repeat:repeat-y;}
#contenido_arriba {background-image:url(imagenes/barra_amarilla_top.png);}
#contenido_abajo {background-image:url(imagenes/bara_amarilla_down.png);}

#navegacion_superior {background-image:url(imagenes/fondo_menu.png); 
background-repeat:repeat-y;}
#navegacion_superior_arriba {background-image:url(imagenes/barra_menu_top.png);}
#navegacion_superior_abajo {background-image:url(imagenes/barra_menu_down.png);}

p {font-family:Calibri, Helvetica, Arial, sans-serif; padding:0 1em 1em 1em; 
text-align:justify;}

.limpiar {clear:both;}
.centrado {text-align:center;}


Muy agradecido con todos,

Vlad.

_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo

Reply via email to