Capa que se queda mas pequeña que su contenido

**Begoña** · 01/01/2010, 13:40

Hola todos y Feliz Año!!!

Antes de nada felicitaros por vuestra web. Llevaba siglos queriendo crear mi propia pagina y por mas que buscaba todo me sonaba a chino y se me hacia complicadisimo hasta que descubri vuestro curso paso a paso y que deciros...se me abrio todo un mundo! por fin me voy enterando y ya estaba yo toda emocionada creando mi propia plantilla y sintiendome toda una webmaster xDD cuando se me revelo una de las capas ¬¬

Es una capa que esta dentro de otra, la capa que la contiene si crece segun lo que le voy metiendo pero esta debe tener algo asi como complejo de Peter Pan porque no crece ni a tiros. Probe con con float left y right y viendo que no cambiaba la deje como left, tambien he probado con height:100%, overflow y con nada se me soluciona y empiezo a desesperarme. Se que si le definiera una altura concreta en px quedaria todo perfecto pero es que esa capa va a ser el verdadero contenido de la web en las distintas paginas que le ponga y seria un rollo andar calculando los px que debo poner en cada pagina porque si consigo que todo salga como quiero no van a ser pocas paginas precisamente :S

Bueno me dejo ya de enrollarme y os pongo lo que llevo hecho a ver si podeis ayudarme. Por cierto que aun no lo subi a ninguna parte pero si hace falta me lo decis y me pongo manos a la obra.

En rojo mi problema, ya veis que ni siquiera me muestra la imagen de fondo que le meti
Muchas gracias si podeis ayudarme y si no por dedicarme vuestro tiempo :)

Iniciado por html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Sims-Extremos</title>
<link rel="stylesheet" href="estiloindiceweb.css" type="text/css"
media="all">
</head>

<body>
<div id="global">

<div id="cabecera">
<div id="logotipo">logotipo
</div>
<div id="nav-lateral">
<ul>[*]Afiliados[*]Colaboradores[*]FAQ[*]Contacto[/list] </div>
</div>

<div id="navegacion">
<ul>[*]Inicio[*]Noticias[*]Foro[*]Enlace1[*]Enlace2[*]Enlace3[/list] </div>

<div id="contenido">
<div id="menu">
<div id="historia">

[img]imagenes/a.gif[/img]</p></div>
<div id="tutorial">

[img]imagenes/b.gif[/img]</p></div>
<div id="reto">

[img]imagenes/c.gif[/img]</p></div>
<div id="publicidad">[img]imagenes/publicidad.gif[/img]
</div>
</div>
<div id="descargas">

</div>
</div>

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

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

Iniciado por css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
li {list-style:none}
a {text-decoration:none}
h1 {font-size: 1.3em}
h2 {font-size: 1.0em}
body {background-color: blue ; height:100% ;
text-align: center}
#global {width:1024px ; margin:4px auto }
#cabecera {width:1024px }
#logotipo {background-color: green ;
float:left ; width:768px ; height:200px}
#nav-lateral {background-color: yellow ; float: right ;
width:256px ; height:200px }
#nav-lateral ul {padding-top:20px}
#nav-lateral li {margin:0 0 15px 0 ; font-size:25px}
#navegacion {background-color: pink ; height:80px ;
background-image: url(imagenes/curva-inferior.gif) ;
background-repeat: no-repeat ; background-position: center center}
#navegacion ul { margin-left: 140px ; padding-top:20px}
#navegacion li {float:left ; margin: 0px 40px 0px 10px ;
font-size:2em}
#contenido {width:1024px ; float:left ; background-color: orange}
#menu {float:left ; width:264px ; }
#historia {width:256px ; height:75px; margin:10px 0 0 5px}
#tutorial {width:256px ; height:75px; margin:0 0 0 5px}
#reto {width:256px ; height:75px; margin:0 0 5px 5px}
#publicidad-interna {width:256px ; margin:0 0 5px 5px;}
#descargas {background-color: red ; width:760px ; float:right;
background-image: url(imagenes/descargas.gif) ;
background-repeat: no-repeat ;
background-position:center center}

#pie {background-color: brown ; }

**wolfmoon** · 01/01/2010, 19:39

Ponle un height: auto;

**Begoña** · 01/01/2010, 19:55

Gracias Wolfmoon pero estuve probando esta tarde con eso y tampoco me funciono :S aunque creo que el problema era al poner esa imagen como fondo sin mas o algo asi debia ser. Al final como soy una impaciente y estoy deseando ver la web terminada hice una tercera capa a la que si di una altura definida y dentro de ella mas capas con las cosas que queria meter para la portada asi luego como eso no ira en el resto de las paginas lo quito sin problemas. Ya se que es un lio tremendo pero parece que va funcionando

Ya os contare si todo se mantiene en su sitio cuando por fin suba la web

a ver si termino para esta noche que ando peor que una cria con zapatos nuevos dale que te pego al Html-Kit, habeis creado un mostruo jajaja!!

**wolfmoon** · 01/01/2010, 19:59

Ya pero que te pase eso no es normal, deberias por lo menos intentar saber porque ocurre.

Has probado asi:

height:auto;
overflow: auto;

**Begoña** · 01/01/2010, 20:24

Pues si que aumenta pero con eso no consigo colocar la imagen de fondo donde queria. Me queda asi

Le puse background-position:center center, lo intente con margin y hasta probe con background-margin que no se ni si exste esa opcion pero se me ocurrio sobre la marcha -^U pero queda el fondo descentrado de todas

Asi es como lo quiero y hasta ahora solo lo consegui con el lio ese de capas que comente antes

**wolfmoon** · 01/01/2010, 21:24

No entiendo muy bien, osea, el recuadro ese blanco es el fondo al que te refieres? es decir la capa "descargas".... y dentro de esa capa quieres poner las imagenes de los sims centradas no?

**Begoña** · 01/01/2010, 21:36

Si el recuadro deberia ir en la capa descargas y centrados en otras capas los logos de los juegos para ir a las diferentes secciones pero se descentra. El codigo seria

Iniciado por Esto se descentra

<div id="contenido">
<div id="menu">
<div id="historias">

[img]imagenes/historias.gif[/img]</p></div>
<div id="tutoriales">

[img]imagenes/tutoriales.gif[/img]</p></div>
<div id="retos">

[img]imagenes/retos.gif[/img]</p></div>
<div id="publicidad">[img]imagenes/publicidad.gif[/img]
</div>
</div>
<div id="descargas">
<div id="logo-sims1">[img]imagenes/logo-sim1.jpg[/img]
</div>
<div id="logo-sims2">[img]imagenes/logo-sim2.jpg[/img]
</div>
<div id="logo-sims3">[img]imagenes/logo-sim3.jpg[/img]
</div>
</div>

Entonces cree una capa intermedia (box) a la que di altura para poder centrar el fondo con los 3 logos. Asi cuando ya en cada seccion no necesite para nada los logos porque ahi iran las descargas como tal pues quito la capa box y las de los 3 logos y asi puedo poner todas las fotos de descargas sin tener la altura de la capa descargas predefinida. No se si me explique o la lie mas

Iniciado por Asi consigo lo que quiero

<div id="contenido">
<div id="menu">
<div id="historias">

[img]imagenes/historias.gif[/img]</p></div>
<div id="tutoriales">

[img]imagenes/tutoriales.gif[/img]</p></div>
<div id="retos">

[img]imagenes/retos.gif[/img]</p></div>
<div id="publicidad">[img]imagenes/publicidad.gif[/img]
</div>
</div>
<div id="descargas">
<div id="box">
<div id="logo-sims1">[img]imagenes/logo-sim1.jpg[/img]
</div>
<div id="logo-sims2">[img]imagenes/logo-sim2.jpg[/img]
</div>
<div id="logo-sims3">[img]imagenes/logo-sim3.jpg[/img]
</div>
</div>
</div>

**Barracuda** · 02/01/2010, 00:10

el recuadro blanco es una imegen dentro del box? voy un poco a tientas pero si el recuadro blanco es una imegen dentro del div box, sacale las medidads fijas al al box y si la imagen la tienes como backgroun la pones como una imagen normal, le pones align center al div del box y las imagenes de los sims quedaran en medio

bueno esta respuesta vale en el supuesto de que mis deducciones iniciales sean correctas, pero sin saber como es el box poco mas puedo hacer :P

**Barracuda** · 02/01/2010, 00:13

hago doble post porque no puedo editar, me he fijado que tienes los divs con imagenes con etiquetas, no se para que, si es para el tamaño ten en cuenta que los dis sin tamaño fijo se adaptan al contenido

**Begoña** · 02/01/2010, 01:02

Iniciado por Barracuda

el recuadro blanco es una imegen dentro del box? voy un poco a tientas pero si el recuadro blanco es una imegen dentro del div box, sacale las medidads fijas al al box y si la imagen la tienes como backgroun la pones como una imagen normal, le pones align center al div del box y las imagenes de los sims quedaran en medio

Creo que no te entendi :S
Lo que puse fue un background dentro del box. Ahora probe con lo que me cuentas pero creo que no te entendi :S
Hice este cambio

<div id="descargas">
<div id="box">[img]imagenes/descargas.gif[/img]
<div id="logo-sims1">[img]imagenes/logo-sim1.jpg[/img]
</div>
<div id="logo-sims2">[img]imagenes/logo-sim2.jpg[/img]
</div>
<div id="logo-sims3">[img]imagenes/logo-sim3.jpg[/img]
</div>
</div>
</div>

#descargas {background-color: red ; width:760px ; float:right;
vertical-align: center }
#box { float:left; align:center}
#logo-sims1 {float:left ; margin:220px 0 0 180px}
#logo-sims2 {float:left ; margin:220px 0 0 20px}
#logo-sims3 {float:left ; margin:220px 0 0 20px}

Y me queda asi

La verdad empiezo a sentirme un poco pesada

lo cierto es que me gustaria hacer bien las cosas y si tanto lio de capas va a ser malo para web pues prefiero solucionarlo pero si no va a afectar demasiado el apaño que hice tampoco es que pretenda marearos, aunque si me seguis ayudando yo encantada :)

Iniciado por Barracuda

hago doble post porque no puedo editar, me he fijado que tienes los divs con imagenes con etiquetas, no se para que, si es para el tamaño ten en cuenta que los dis sin tamaño fijo se adaptan al contenido

Te refieres a esto, por ejemplo?
#historia {width:256px ; height:75px; margin:10px 0 0 5px}

Lo dejaria asi, no?
#historias { margin:10px 0 5px 5px; }

**Barracuda** · 02/01/2010, 14:54

bueno si quieres que el recuadro blanco (que esta en el div box) te quede en medio de la zona roja restante, no puedes poner align: center; porque te quedara respecto el centro de la pagina, tendrias que poner un align en funcion del div donde quieres centrarlo.

bueno eso puede ser lioso, prueba a modificar y dejarlo asi.

Código:

#box	 { postion: absolute; float:left; align:right: margin-right: 20px; margin-top: 30px;}	
#logo-sims1 {float:left ; postion: absolute; align: center;}

Código:

<div id="descargas">
<div id="box">[img]imagenes/descargas.gif[/img]

<div id=logo-sims1>
[img]imagenes/logo-sim1.jpg[/img]
[img]imagenes/logo-sim2.jpg[/img] 
[img]imagenes/logo-sim3.jpg[/img] </div>

</div> 
</div>

Bueno, lo que dice el codigo ahora, (si no me he equivocado) es que el cudro blanco se situe a la derecha del cuadro rojo, pero a 20 px del borde(si te queda muy a la derecha le pones mas pixeles), y lueggo para que no quede pegado arriba le he dicho que se situe a 30px del margen superior(igual que antes puedes modificarlo si queda muy arriba o muy abajo).
Una vez tenemos el box en su sitio, les he dicho a las imagenes de los sims que se queden en medio, del cuadrado blanco(y las he puesto todas dentro del mismo div), si quieres separarlas mas pones mas espacios, que en codigo equivalen a lo de fijar los divs respecto otros divs se consigue poniendo position: absolute; esto ara que si le dices por ejemplo que se quede centrado, este div se centrara respecto al div que lo contiene, y no respecto a la web

**Begoña** · 05/01/2010, 16:45

Perdon por no contestar en dias estos dias estoy teniendo bastante curro y he dejado la web un poco de lado, el fin de semana me pondre de nuevo a ello y ya pondre en practica esto, ademas eso de los espacios con no lo sabia yo, esta bien el dato :)
Gracias por tanta paciencia

**Begoña** · 10/01/2010, 16:31

Nada, asi tampoco se queda :? pero me ha venido muy bien lo de los espacios para convertir 3 capas en 1. Al final he dejado la capa box como la tenia y he tomado la opcion de una sola capa de logo con las imagenes y los espacios añadiendole margenes para que se centren y creo que asi lo dejare, al menos de momento, porque me empiezo a volver loca y no quiero quedarme atascada ahi, voy a probar que tal se me da lo de los menus del otro tema (espero que mejor

)
Gracias por la ayuda y la paciencia