Problema: espacio en capas div

zeros-cool

Saludos a todos. Como vale mas una imagen k mil palabras os mostrare primero el codigo css y html y luego les comentare lo k m pasa

Codigo css

#fondo{
position:relative;
}

#encabezado{
position:relative;
z-index:1;
left: 25mm;
top: -248mm;
width:10%;
height:10%;
}

#cuadro_degradado{
position:relative;
z-index:1;
width:10%;
height:10%;
top: -221mm;
left: 30mm;
}

La capa fondo es la capa contenedora

codigo html

<table align="center" border="0" height="100">
<tr>
<td>
	<div id="fondo"><img src="images/fondo.jpg" width="884" height="1012">
		<div id="encabezado"><img src="images/encabezado_pricipal.jpg" width="686" height="118"></div>
		<div id="cuadro_degradado"><img src="images/cuadro_degradado.jpg" width="281" height="505"></div>
  </div>
</td>
</tr>
</table>

Vale, lo k tngo es una capa contenedora(fondo) dentro d una tabla alineada al centro. dentro de la capa fondo tngo otros dos div k son encabezado y cuadro_degradado. lo tngo todo bien maketado para todos los navegadores y para k s vea en todas las resoluciones. pero mi problema es el siguiente: mientras mas div anido dentro de el div fondo, se va aciendo mas larga la capa fondo, es decir, se va quedando cada vez mas espacio vacio en la pagina hacia abajo. alguien sabria dcirme como solucionarlo? muxas gracias!!

shako

quitalo de la tabla... o busca otra maquetacion... x que asi siempre te va a pasar eso

intenta hacerlo todo con capas y no con tablas

Dod-Evers

tablas + div = mal.

zeros-cool

el tema es k la tabla solo la utilizo para poder centrar el div contenedor, xk lo e intentado todo y no ai manera, las resoluciones pueden cnmigo xDDD. en este caso, podria alguien aconsejarme para poder centrar mi div contenedor en todas las resoluciones?

bLaKnI

1a) Los DIVs estan para BORRAR DEL MAPA a las tables para maquetado. Mezclarlos? Es que no tiene perdon! xD

2o) Para evitar crecimientos indeseados, el contenedor le añades overflow:hidden, por ejemplo. Y quizas quieras añadirle un height: XX

3o) la manera correcta de hacerlo es:

body{
text-align: center; /esto es para IE/
}

contenedor{
margin: 0 auto; /firefox y otros/
padding: 0;
text-align: left;
}

4o) Dejate de z-index. Usalos solo cuando sean REALMENTE necesarios, que son pocas veces por lo general.

5o) Para que usar TOPS i LEFT? Si las posiciones son relatives, es un coñazo. Estan pensados para posicionar absolutamente. Si quieres diseño Liquido, usa los MARGIN, y en algunos casos, los respectivos PADDING.

6o) http://www.w3schools.com/css/css_examples.asp
Empieza por el primero, y acaba con el ultimo, y creeme: no volverás a preguntar en tu vida!
Entender y usar correctamente CSS, es lo mejor que podrás hacer.
No inventeis, que las chapuzas luego se pagan caras.

Saludos. :)

zeros-cool

xDDD se nota muxo k soy novato??? yo kreo k si xDDDD pues #5 muxas gracias, m lo empollare y ya t comentare. un saludo!

zeros-cool

Hola a todos. vuelvo d pesado otra vez. xDDD e estado mirando e intentado cosas, le e kitado las tablas pero no logor por nada centrar la capa contenedora. este es el codigo:

css

body{
background-color:#000000;
text-align:center;/Para IE/
}

#fondo{
margin:0 auto;
padding:0;
text-align:left;
}

y en html

	<div id="fondo"><img src="images/fondo.jpg" width="884" height="1012">
		<div id="encabezado"><img src="images/encabezado_pricipal.jpg" width="686" height="118"></div>
  	</div>

no m aparece el contenedor centrado, sino k m aparece a la izkierda d la pantalla. alguien k m exe una mano x favor?gracias!

Usuarios habituales

  • zeros-cool
  • bLaKnI
  • Dod-Evers
  • shako