Una facilita..

monokote · #1 (**permalink**) 30/03/2008, 15:18

Estoy empezando una web para mi colegio y tengo el siguiente problema.

Tengo un div contenedor. Dentro de él otro div que contiene la imagen de la cabecera, y debajo de éste, otro div flotante a a izquierda en el que he introducido el menú. La cosa es que no consigo que el div flotante quede totalmente pegado a la cabecera en explorer. En firefox si sale junto, pero en explorer no. He probado a poner el margin top a 0 del div flotante, el margin bottom a 0 de la cabecera, lo he puesto en auto, quitando los bordes....etc etc, lo he hecho de todas las formas posibles creo. Alquien me puede echar una manilla?
gracias

caricatos · #2 (**permalink**) 30/03/2008, 15:24

Hola:

Muchas veces en explorer no se ven bien las páginas si no tienen el doctype... si no lo tiene, pon el adecuado y pruébalo, y si lo tiene, facilítanos el código para chequearlo... por cierto, si lo pruebas con opera también tiene una consola de errores que muestra errores de estilos... y la versión portable no requiere instalación...

Saludos

monokote · #3 (**permalink**) 30/03/2008, 15:26

pongo el código, ahora que todavía es pequeño, por si a alguien le ayuda:

<style type="text/css">
body{ font-family:Verdana, Arial, Helvetica, sans-serif;
}
#contenedor {
width:900px;
margin-left:auto;
margin-right:auto;
background-color:#FF0000;
}
#cabecera{
margin-bottom:0px;
}
#columnaIzq {
float: left;
width: 160px;
margin-left: 0px;
margin-top:0px;
padding-top: 0px;
}
#menu h5 {
display: none;
}

#menu {
font-size: 0.7em;
font-weight: bold;
width: 160px;
border-right: 1px solid #666;
padding: 0 0 0 0;
margin-bottom: 1em;
font-family: Verdana, Helvetica, Arial, sans-serif;

}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li {
margin: 0;
}

#menu ul li a:link {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #0c964e;
border-right: 1px solid #0c964e;
border-bottom: 1px solid #0c964e;
background-image:url(img/pruebalogo2.gif);
color:#FFFFFF;
text-decoration: none;
width: 100%;
}

html>body #menu ul li a {
width: auto;
}

#menu ul li a:hover {
border-left: 10px solid #0000ff;
border-right: 1px solid #0000ff;
border-bottom: 1px solid #0000ff;
background-color: #ffff99;
color: #0000ff;
}

</style>
</head>

<body>
<div id=contenedor>
<div id=cabecera><img src="img/pruebalogo2.gif" alt="cabecera" width=900px height=150px />
</div>
<div id=columnaIzq>
<div id=menu>
<h5>Site Navigation:</h5>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Enseñanzas</a></li>
<li><a href="">Secretaría</a></li>
<li><a href="">Planes y Proyectos</a></li>
<li><a href="">Calendario</a></li>
<li><a href="">Quiénes somos</a></li>
<li><a href="">Tablón de anuncios</a></li>
</ul>
</div>
</div>

</div>
</body>
</html>

Como eis todavía no domino el tema, gracias de antemano

Mikmoro · #4 (**permalink**) 30/03/2008, 17:27

Pues mira, es una cosa tan tonta que no te lo vas a poder creer:

en esta etiqueta
<div id=cabecera><img src="img/pruebalogo2.gif" alt="cabecera" width=900px height=150px />
</div>

desde que cierras la imagen height=150px /> hasta que cierras el div </div> hay un espacio en blanco.

Elimínalo y resuelto.

<div id=cabecera><img src="img/pruebalogo2.gif" alt="cabecera" width=900px height=150px /></div>

Mikel.

monokote · #5 (**permalink**) 30/03/2008, 18:14

Efectivamente, no me lo puedo creer, era eso, pero... ¿No se supone que en código los espacios no cuentan? lo tenía distribuido así para ir dejándolo todo ordenadito, en fin...tomo nota por supuesto.

Aprovecho para hacer otra preguntilla. Puesto que el div "columnaizq" lo he puesto flotante a la izquierda, ¿no se supone que al escribir cualquier texto en el body, me tiene que salir a la derecha de dicha columna? Pues nuevamente en firefox, es así, pero en explorer me coloca el texto debajo....este explorer....me lo voy a cargar...

Muchas gracias.....supongo que al final acabaré aprendiendo

Mikmoro · #6 (**permalink**) 30/03/2008, 18:27

Ten en cuenta una cosa muy importante: tienes varias etiquetas con su identificador sin las comillas

<div id=contenedor>
<div id=cabecera><img src="img/pruebalogo2.gif" alt="cabecera" width=900px height=150px />
</div>
<div id=columnaIzq>
<div id=menu>
<h5>Site Navigation:</h5>

Los id deben ir siempre entre comillas, y los parámetros también.

<div id="contenedor">
<div id="cabecera"><img src="img/pruebalogo2.gif" alt="cabecera" width="900px" height="150px" />
</div>
<div id="columnaIzq">
<div id="menu">
<h5>Site Navigation:</h5>

Revísalo porque esto te dará problemas siempre.

Mikel.

monokote · #7 (**permalink**) 30/03/2008, 18:29

Ohh!!! no me había dado cuenta, es cierto. Vaya fallo garrafal! Muchísimas gracias de nuevo

Mikmoro · #8 (**permalink**) 30/03/2008, 18:29

Y... ¿estás poniendo el texto en el sitio correcto? Porque si es así, el texto sale a la derecha, en FF y en IE. Mira a ver si lo estás poniendo aquí:

</ul>
</div>
</div>
<p>Texto</p>
</div>
</body>
</html>

Mikel.

monokote · #9 (**permalink**) 31/03/2008, 03:38

ok ok, ya me funciona todo. Gracias por la ayuda. a ver si ahora no me atasco.