Entrar

Problema con div barra de desplazamiento

sereisa · · Solicitar retirada
Hola peña:
Estoy haciendo un div con una barra de desplazamiento horizontal para meter ahí unas imágenes y algo falla pero no es del código en cuestión sino del código de fuera de ese div ya que lo he probado en una página en blanco y funciona perfectamente:
Bien, el código que tengo en las dos pruebas es el siguiente:
<div style="width:550px; height:117px; background-color:#ccc; white-space: nowrap; overflow:auto ;overflow-y:hidden;">

<img height=100px width=150px src="eltarotdeladama.com/objetos/Astromaya.jpg" />
<img height=100px width=150px src="eltarotdeladama.com/objetos/Astromaya5.jpg" />
<img height=100px width=150px src="eltarotdeladama.com/objetos/Calendariomaya2009.jpg" />
<img height=100px width=150px src="eltarotdeladama.com/objetos/egiptopag7.jpg" />
<img height=100px width=150px src="eltarotdeladama.com/objetos/cc2.jpg" />
</div>
Como he comentado, en la página en blanco funciona perfectamente, las imágenes se ven con el tamaño que les he asignado, pero en la otra prueba las imágenes se presentan mucho más anchas de lo que les he asignado (unos 550px, lo que mide el div). Lo que creo es que hay algo en el código de esta prueba que falla, pero se que es. Este es el código de la prueba en la que falla el div:

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=iso-8859-1" />
<link rel="StyleSheet" href="desdecerocss.css" media="screen" type="text/css">
<title>Desde cero patatero</title>
</head>

<body bgcolor="#845E73">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab…" width="2100" height="320">
<param name="movie" value="eltarotdeladama2.com/flashindexlimpiof.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="eltarotdeladama2.com/flashindexlimpiof.swf" width="2100" height="320" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
<DIV id="global">


<div id="bartolo">capa bartolo es la primera capa
</div>
<div id="perico"><img height=100px width=100px src="eltarotdeladama.com/objetos/arcoirismar.jpg" />

<marquee HEIGHT="490px" onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="50" direction="up" loop="infinite" behavior="scroll" >
<center><img height=200px width=200px src="eltarotdeladama.com/objetos/ardilla.jpg" /> </center>
<center><img height=200px width=200px src="eltarotdeladama.com/objetos/Astros.jpg" /></center>
<center><img height=200px width=200px src="eltarotdeladama.com/objetos/cc33.jpg" /></center>
<center><img height=200px width=200px src="eltarotdeladama.com/objetos/egiptopag7.jpg" /></center>
<center><img height=200px width=200px src="eltarotdeladama.com/objetos/dalailama.jpg" /></center>
</marquee>
</div>
<div id="catalina"><p>esta es la capa central donde irá la bienvenida y la explicación de todo lo que hacemos, lo que hay en la página, videos, documentales, tartamientos, limpiezas, etc..</p><br>

<div style="width:550px; height:117px; background-color:#ccc; white-space: nowrap; overflow:auto ;overflow-y:hidden;">

<img height=100px width=150px src="eltarotdeladama.com/objetos/Astromaya.jpg" />
<img height=100px width=150px src="eltarotdeladama.com/objetos/Astromaya5.jpg" />
<img height=100px width=150px src="eltarotdeladama.com/objetos/Calendariomaya2009.jpg" />
<img height=100px width=150px src="eltarotdeladama.com/objetos/egiptopag7.jpg" />
<img height=100px width=150px src="eltarotdeladama.com/objetos/cc2.jpg" />
</div>

</div>
</DIV>
<div id="globaldos">
<div id="bartolodos"><p>esta ya es la segunda capa</p></div>
<div id="pericodos"></div>
<div id="catalinados">
</div>
</div>
<div id="globaltres">
<div id="bartolotres"><p>esta ya es la tercera capa</p></div>
<div id="pericotres" style="position:absolute;width:100px;height:100px;margin:0px 0px;">

</div>
<div id="catalinatres"><p>la capa de los comentarios y últimos artículos</p></div>
</div>
<div id="piedepagina">pie de página</div>
</body>
</html>

Css:
* {width: 100% }
body {width: 100%}
body{margin:0}
#global {background-color:; BORDER: #000 1px solid ; MARGIN: 4px 4px 4px 4px ;PADDING: 2px 2px 2px 2px ;WIDTH: 1100px ;height:600px}


#bartolo{background-color:#006699 ; BORDER: #000 1px solid ;MARGIN: 5px 5px 0px 5px ;WIDTH: 200px ;height:590px ;FLOAT: left ;}
#catalina{background-color:#FF9900 ; BORDER: #000 1px solid ;MARGIN: 5px 30px 0px 0px ;FLOAT: right ;width:650px; height:590px}
#perico{background-color:#660099 ; border:#000 1px solid ; MARGIN: 5px 5px 0px 0px ; float: right ; width: 190px ; height: 590px}

#globaldos {background-color:#000099 ; border: #000 1px solid ; margin: 4px 4px 4px 4px ; padding: 2px 2px 2px 2px ; width: 1100px ; height:600px}

#bartolodos{background-color:#66CCCC ; BORDER: #000 1px solid ; margin: 5px 5px 0px 5px ; width: 175px ; height:590px; float:left}
#catalinados{background-color:#FF9900 ; BORDER: #000 1px solid ;MARGIN: 5px 10px 0px 0px ;FLOAT: right ; width:700px; height:590px}
#pericodos{background-color:#660099 ; border:#000 1px solid ; MARGIN: 5px 5px 0px 0px ; float: right ; width: 190px ; height: 590px}

#globaltres {background-color:#330000 ; border: #000 1px solid ; margin: 4px 4px 4px 4px ; padding: 2px 2px 2px 2px ; width: 1100px ; height:600px}

#bartolotres {background-color:#33FF00 ; BORDER: #000 1px solid ; margin: 5px 5px 0px 5px ; width: 175px ; height:590px; float:left}
#catalinatres {background-color:#FFFF66 ; BORDER: #000 1px solid ;MARGIN: 5px 10px 0px 0px ;FLOAT: right ; width:700px; height:590px}
#pericotres {background-color:#333333 ; border:#000 1px solid ; MARGIN: 5px 5px 0px 0px ; float: right ; width: 190px ; height: 590px}

#piedepagina {background-color:#FF0000 ; border: #000 1px solid ; margin: 4px 4px 4px 4px ; padding: 2px 2px 2px 2px ; width: 1100px ; height:40px}

Bueno, a ver si vemos el fallo porque funcionar funciona.
Un saludo.
sereisa · · Solicitar retirada
Ok, encontré el problema. Está en los estilos css. Éste es: * {width: 100% }
Cuando lo quito va estupendo pero me desorganiza la página. Como puedo hacer para o bien no tener que quitarlo o que no influya en el div?.
Un saludo.
sereisa · · Solicitar retirada
Bueno. Ya está. Si tenéis esto en css: * {width: 100% } todas las imágenes que tenéis, aunque le especifiquéis la anchura, os las pondrá 100 del ancho del div donde se encuentra.
Tema solucionado.