problema de maquetacion básico

[Ratus-BROWN]

Hola buenas a todos y todas,
tengo un problema basico de maquetación se trata de lo siguiente:

se trata de dos DIV:

<div id="vacio"></div><div id="titular"></div>

y sus reglas CSS:

#vacio {
width:208px;
height: 40px;
float:left;
}
#titular {
background-image:url(../img/phd.gif);
background-repeat:no-repeat;
width:700px;
height:40px;
}


el DIV con id "titular" tiene una imagen asociada en el fondo (background). Especifico el tamaño de los dos DIV en la hoja de estilos y le digo al DIV "vacio" que tenga la propiedad FLOAT a left. Cuando visualizo la pagina me coloca la imagen de fondo del segundo div en el sitio que no toca.........a ver si alguien me puede orientar

Gracias.
Ratus Brown.

[Triby]

Cuando quieras que un div respete las medidas que le estas aplicando es necesario especificar display:block;

[buzu]

no, no forzosamente, solo tiene que tener contenido. Si está vacío no las respeta, por lo que se da el problema. Sin embargo, el problema, creo yo, va más aya. Es poco (lease nada) semántico usar un div vacío. Cual es la función del ese div? por que no nos muestras una imagen de lo que quieres lograr y quizá se te pueda sugerir una mejor forma...

[Ratus-BROWN]

ya he comprobado que no puedo subir imágenes directamente.......intentare subir una mediante web

[Ratus-BROWN]

Bueno aqui os pongo el link con una imagen que puede orientar sobre lo que pregunto.....


ucvmastercd.com/aaronbellot/

a ver si alguien pudiera decirme donde estoy cometiendo el fallo

gracias

Ratus-Brown

[buzu]

simplemente dale un margen a tu div donde esta lo de bienvenido.

#titular {
background-image:url(../img/phd.gif);
background-repeat:no-repeat;
width:700px;
height:40px;
margin: auto auto auto 208px;
}

[Ratus-BROWN]

Muchas gracias buzu!!

Lo he solucionado de esta manera tambien, utilizando un solo DIV:

#titular {
background-image:url(../img/phd.gif);
background-repeat:no-repeat;
background-position: 208px;
width:908px;
height:40px;

}

le doy una posicion al background. Esto funciona correctamente, pero ¿es logico hacerlo como lo he hecho yo?..........por cierto ¿porque en tu regla pones tres veces auto ?


Gracias.
Ratus-Brown

[buzu]

Pues es una solución, aun que lo logico, ya que lo preguntas, es que usaras una imagen <img> en lugar de un div. Es más semántico. Con respecto a lo de los auto, es por que el margin-left (o como sea) no me gusta mucho, de modo que uso margin: auto auto auto 280px; Los valores corresponden al margen superior, derecho, inferior e izquierdo en ese orden.

[pzin]

También puedes unir todas esas reglas en una sola, por tenerlo un poco más limpio:

Código css:

#titular{
background:transparent url(../img/phd.gif) no-repeat 208px;
width:908px;
height:40px;
}
 

[buzu]

Si, es buena idea, aun que no se ve más limpio a mi parecer, pero si ahorra espacio y pesa menos. Se le conoce como shortland si no mal recuerdo.

Buena sugerencia Bonez.