Ayuda con Divs!

[sioke]

Bueno pues he maquetado una pagina con el siguiente CSS:

Código HTML:

body {
	background-color:#666666;
	font-family: "Century Gothic", Verdana, Arial, Helvetica, sans-serif;

	
}

#cabecera {
	position:absolute;
    top:0;
    left:0;
	width:100%;
	height:20%;
	background:#666666;
}
	
#menuizq { 
	position:absolute;
	top:20%;
	left:0px;
	width:15%;
	height:60%;
	background:#666666;
}
	
#contenido { 
	position:absolute;
	top:20%;
	left:15%;
	width:70%;
	height:60%;
	background:#666666;
}

#menuder { 
	position:absolute;
	top:20%;
	left:85%;
	width:15%;
	height:60%;
	background:#666666;
	
}

#piepag { 
	position:absolute;
	top:80%;
	left:0;
	width:100%;
	height:20%;
	background:#666666;
}

El problema es que al meterle una imagen en la cabecera del ancho del div contenido, con IE se me ve bien, pero con Firefox el div "contenido" sobresale un poco (1 o 2 pixeles) de la imagen de la cabecera. ¿Como puedo solucionarlo?

[Null_]

Muerte a IE.

[kseso?]

Hola Sioke
Bienvenido a FdW
¿Y cómo calculas con tanta precisión el ancho necesario de la imagen teniendo como tienes definido:

#cabecera {
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
background:#666666;
}

?
Posiblemente sea porque tú calculas el 100% sobre una medida de la pantalla de un ordenador (800px, 1280px, etc), que no tiene que ser necesariamente la anchura de la ventana del navegador, y menos si aparece el scroll (sí, ya veo que las alturas también son en %)

Opera me deja unos bordes laterales en su interfaz, con lo que el espacio para mostrar la página es ligeramente menor que en FF, que no los deja, y de ie no se, me da una pereza abrirlo...

Un saludo

[Null_]

claro kseso... no habia visto el codigo.
no te recomiendo que uses porcentajes sioke... un efecto de usar porcentajes es lo que te esta sucediendo... usa pixeles y/o divs sin width, ya que los divs ocupan toda la anchura disponible en el navegador.
Incluso no te recomiendo que uses height, pues todo el contenido de tu web le irá dando la altura al documento... entonces height es innecesario.

Suerte :D

[sioke]

Iniciado por Null_

claro kseso... no habia visto el codigo.
no te recomiendo que uses porcentajes sioke... un efecto de usar porcentajes es lo que te esta sucediendo... usa pixeles y/o divs sin width, ya que los divs ocupan toda la anchura disponible en el navegador.
Incluso no te recomiendo que uses height, pues todo el contenido de tu web le irá dando la altura al documento... entonces height es innecesario.

Suerte :D

Gracias por contestar, pero eso de que el div ocupa automaticamente el ancho de la pantalla no lo veo.

Si yo pretendo una cabecera que ocupe todo el ancho de la pantalla:

Código HTML:

#cabecera {
	position:absolute;
	top:0px;
	left:0px;
	background:#FFFFFF;
}

Entiendo lo que me explicas de no ponerle width ni height pero con el codigo que te pongo no me ocupa el ancho del navegador, queda alineado a la izquierda pero no llega al margen derecho (un poco mas de la mitad...)

[kseso?]

Hola Sioke
Lo que pretendía resaltar es que con un div cuya anchura está definida en % nunca sabes qué medida en px va a tener en todos y cada uno de los visitantes.
Si quieres colocar una imagen en dicho div, creo que lo oportuno es crear un contendor donde alojar toda la página y definirle un min-width
Así ya puedes crear una imagen para tu header de ese tamaño mínimo (una entera o esa misma segmentada en varias).
Dicha imagen ha de estar realizada sobre un patron repetitivo (un degradado por ejemplo) para poder colocarlo como background del header para rellenarlo al 100%. Y sobre ese fondo posicionar el logo o las distintas imágenes que lo conformen.

De esa forma, la imagen del header ocupará siempre y sin sobresalir el espacio reservado para el.

Espero haberme explicado, si no lo he hecho, coméntalo y te lo detallo más, imagenes incluidas.

Un saludo

P.D.: acabo de darme cuenta que el ejemplo lo tienes en esta misma página de Forosdelweb, mira cómo está realizada la cabecera. Lo puedes hacer con firefox + web developer ó +firebug.

[sioke]

Iniciado por kseso?

Hola Sioke
Lo que pretendía resaltar es que con un div cuya anchura está definida en % nunca sabes qué medida en px va a tener en todos y cada uno de los visitantes.
Si quieres colocar una imagen en dicho div, creo que lo oportuno es crear un contendor donde alojar toda la página y definirle un min-width
Así ya puedes crear una imagen para tu header de ese tamaño mínimo (una entera o esa misma segmentada en varias).
Dicha imagen ha de estar realizada sobre un patron repetitivo (un degradado por ejemplo) para poder colocarlo como background del header para rellenarlo al 100%. Y sobre ese fondo posicionar el logo o las distintas imágenes que lo conformen.

De esa forma, la imagen del header ocupará siempre y sin sobresalir el espacio reservado para el.

Espero haberme explicado, si no lo he hecho, coméntalo y te lo detallo más, imagenes incluidas.

Un saludo

P.D.: acabo de darme cuenta que el ejemplo lo tienes en esta misma página de Forosdelweb, mira cómo está realizada la cabecera. Lo puedes hacer con firefox + web developer ó +firebug.

Muchas gracias por contestar, pero estoy perdidisimo, el caso es que yo tengo un div de todo el ancho para la cabecera, y luego la imagen que quiero poner en la cabecera a modo de titulo quiero que sea el ancho del div central de contenido, por lo tanto le pongo a la imagen 70% de ancho que es lo que mide el div principal, que esta centrado entre dos columnas a ambos lados de 15% del ancho cada una...

Uff que lio me monte, no creo que se entienda muy bien lo que he puesto...

Saludos y gracias.

[Null_]

Iniciado por sioke

Gracias por contestar, pero eso de que el div ocupa automaticamente el ancho de la pantalla no lo veo.

Si yo pretendo una cabecera que ocupe todo el ancho de la pantalla:

Código HTML:

#cabecera {
	position:absolute;
	top:0px;
	left:0px;
	background:#FFFFFF;
}

Entiendo lo que me explicas de no ponerle width ni height pero con el codigo que te pongo no me ocupa el ancho del navegador, queda alineado a la izquierda pero no llega al margen derecho (un poco mas de la mitad...)

ahahahahahha
esque tienes definido position:absolute; , cuando usas esa propiedad no sirve align :P

[kseso?]

10-4 Sioke
Te coloco el código que te decía de este foro:

Código HTML:

<body>
<div id="gwrapper">
<!-- logo -->
<div id="header">
<h1><a href="http://www.forosdelweb.com/" title="Foros del Web"><span class="logo">Foros del web, para los que viven de bits</span></a></h1>
&nbsp;
</div>
<!-- /logo -->
<div id="google">
<!-- Google CSE Search Box Begins -->
<!-- he borrado lo relativo "buscar" con google-->
<!-- Google CSE Search Box Ends -->
<div class="vb-news"><a href="http://www.forosdelweb.com/f74/120-mejores-mensajes-buena-ortografia-634340/">HOYGAN!! ia bieron el nuebo 120segundos???</a></div>
</div> 

Y el css de cada elemento:

body {
-x-system-font:none;
background:#FFFFFF url(http://static.forosdelweb.com/fdwtheme/back-header.png) repeat-x scroll left top;/*esta es la imagen que se repite en la cabecera colocada como fondo y sobre la que se colocan el resto de elementos*/

color:#000000;
/*etc*/
}

#gwrapper {
min-width:900px;
width:100%;
}
#header {
height:102px;
margin-bottom:-20px;
margin-top:-16px;
width:335px;
}
#header h1 a {/*esta es la imagen de la izquierda con el reflejo, que es a su vez un enlace al index*/

background:transparent url(http://static.forosdelweb.com/fdwtheme/logo-reflejo.png) no-repeat scroll left top;
display:inline;
height:90px;
position:absolute;
top:0pt;
width:361px;
}
#google {
margin:-68px 0pt 0pt 475px;
position:absolute;
width:375px;}

Espero que ahora te quede algo más claro.
Un saludo