Problema con divs y css

sarjentocuch · #1 (**permalink**) 28/03/2013, 14:59

Hola buenas, nuevamente recurro a este foro , ha ver si hay suerte :)

bueno, de vez en cuando, hago themes para un cms llamado dedalus, y hasta ahora, he aprendido a hacerlos con tablas.
me he encabezo-nado en hacer mi siguiente theme solamente usando divs y css, y como era logico, voy a tener muchos problemas, por que no es lo mio, pero weno, con paciencia y tiempo, espero conseguirlo.

la cosa, es que tengo este theme en localhost, y no tengo una URL donde podais ver el error en directo,,,,, no se si me podreis ayudar.

a lo que voy, el dedalus, basa la estructura de la index, en una PLantilla.html y en esta plantilla, he metido mi codigo en divs de lo que es el header.
Luego, en otro archivos llamado theme.css meto los codigos para que todo encaje bien.

la cuestion es que consigo que este header, se visualice bien en el theme, pero lo que pasa, es que el header se sale del cuerpo y se va totalmente a la izquerida,,, y lo que es el cuerpo, sube y queda por debajo del header escondido.

pongo esta captura para que lo veais bien.

la estructura HTML de los divs, es esta,, es muy normal, no tiene nada especial.

Código HTML:

 <div id="Tacha_01">
	<div id="header-01">
		<div align="center"><img src="./themes/$mostrar[theme]/images_header/header_01.png" width="17" height="258" alt="">
	    </div>
	</div>
	<div id="header-02">
		<img src="./themes/$mostrar[theme]/images_header/header_02.png" width="47" height="50" alt="">
	</div>
	<div id="header-03">
		<img src="./themes/$mostrar[theme]/images_header/header_03.png" width="29" height="20" alt="">
	</div>
	<div id="header-04">
		<img src="./themes/$mostrar[theme]/images_header/header_04.png" width="20" height="50" alt="">
	</div>
	<div id="header-05">
		<img src="./themes/$mostrar[theme]/images_header/header_05.png" width="872" height="7" alt="">
	</div>
	<div id="header-06">
		<img src="./themes/$mostrar[theme]/images_header/header_06.png" width="9" height="258" alt="">
	</div>
	<div id="header-07">
		<img src="./themes/$mostrar[theme]/images_header/header_07.png" width="872" height="24" alt="">
	</div>
	<div id="header-08">
		<img src="./themes/$mostrar[theme]/images_header/header_08.png" width="29" height="30" alt="">
	</div>
	<div id="header-09">
		<img src="./themes/$mostrar[theme]/images_header/header_09.png" width="45" height="163" alt="">
	</div>
	<div id="header-10">
		<img src="./themes/$mostrar[theme]/images_header/header_10.png" width="66" height="227" alt="">
	</div>
	<div id="header-11">
		<img src="./themes/$mostrar[theme]/images_header/header_11.png" width="186" height="39" alt="">
	</div>
	<div id="header-12">
		<img src="./themes/$mostrar[theme]/images_header/header_12.png" width="12" height="41" alt="">
	</div>
	<div id="header-13">
		<img src="./themes/$mostrar[theme]/images_header/header_13.png" width="563" height="7" alt="">
	</div>
	<div id="header-14">
		<img src="./themes/$mostrar[theme]/images_header/header_14.png" width="563" height="162" alt="">
	</div>
	<div id="header-15">
		<img src="./themes/$mostrar[theme]/images_header/header_15.png" width="96" height="33" alt="">
	</div>
	<div id="header-16">
		<img src="./themes/$mostrar[theme]/images_header/header_16.png" width="25" height="106" alt="">
	</div>
	<div id="header-17">
		<img src="./themes/$mostrar[theme]/images_header/header_17.png" width="161" height="106" alt="">
	</div>
	<div id="header-18">
		<img src="./themes/$mostrar[theme]/images_header/header_18.png" width="12" height="104" alt="">
	</div>
	<div id="header-19">
		<img src="./themes/$mostrar[theme]/images_header/header_19.png" width="53" height="111" alt="">
	</div>
	<div id="header-20">
		<img src="./themes/$mostrar[theme]/images_header/header_20.png" width="17" height="19" alt="">
	</div>
	<div id="header-21">
		<img src="./themes/$mostrar[theme]/images_header/header_21.png" width="26" height="111" alt="">
	</div>
	<div id="header-22">
		<img src="./themes/$mostrar[theme]/images_header/header_22.png" width="17" height="12" alt="">
	</div>
	<div id="header-23">
		<img src="./themes/$mostrar[theme]/images_header/header_23.png" width="17" height="17" alt="">
	</div>
	<div id="header-24">
		<img src="./themes/$mostrar[theme]/images_header/header_24.png" width="17" height="13" alt="">
	</div>
	<div id="header-25">
		<img src="./themes/$mostrar[theme]/images_header/header_25.png" width="17" height="16" alt="">
	</div>
	<div id="header-26">
		<img src="./themes/$mostrar[theme]/images_header/header_26.png" width="17" height="34" alt="">
	</div>
	<div id="header-27">
		<img src="./themes/$mostrar[theme]/images_header/header_27.png" width="198" height="24" alt="">
	</div>
	<div id="header-28">
		<img src="./themes/$mostrar[theme]/images_header/header_28.png" width="122" height="56" alt="">
	</div>
	<div id="header-29">
		<img src="./themes/$mostrar[theme]/images_header/header_29.png" width="19" height="64" alt="">
	</div>
	<div id="header-30">
		<img src="./themes/$mostrar[theme]/images_header/header_30.png" width="8" height="58" alt="">
	</div>
	<div id="header-31">
		<img src="./themes/$mostrar[theme]/images_header/header_31.png" width="736" height="5" alt="">
	</div>
	<div id="header-32">
		<img src="./themes/$mostrar[theme]/images_header/header_32.png" width="17" height="58" alt="">
	</div>
	<div id="header-33">
		<img src="./themes/$mostrar[theme]/images_header/header_33.png" width="101" height="34" alt="">
	</div>
	<div id="header-34">
		<img src="./themes/$mostrar[theme]/images_header/header_34.png" width="5" height="34" alt="">
	</div>
	<div id="header-35">
		<img src="./themes/$mostrar[theme]/images_header/header_35.png" width="101" height="34" alt="">
	</div>
	<div id="header-36">
		<img src="./themes/$mostrar[theme]/images_header/header_36.png" width="5" height="34" alt="">
	</div>
	<div id="header-37">
		<img src="./themes/$mostrar[theme]/images_header/header_37.png" width="101" height="34" alt="">
	</div>
	<div id="header-38">
		<img src="./themes/$mostrar[theme]/images_header/header_38.png" width="5" height="34" alt="">
	</div>
	<div id="header-39">
		<img src="./themes/$mostrar[theme]/images_header/header_39.png" width="101" height="34" alt="">
	</div>
	<div id="header-40">
		<img src="./themes/$mostrar[theme]/images_header/header_40.png" width="5" height="34" alt="">
	</div>
	<div id="header-41">
		<img src="./themes/$mostrar[theme]/images_header/header_41.png" width="101" height="34" alt="">
	</div>
	<div id="header-42">
		<img src="./themes/$mostrar[theme]/images_header/header_42.png" width="6" height="34" alt="">
	</div>
	<div id="header-43">
		<img src="./themes/$mostrar[theme]/images_header/header_43.png" width="101" height="34" alt="">
	</div>
	<div id="header-44">
		<img src="./themes/$mostrar[theme]/images_header/header_44.png" width="4" height="34" alt="">
	</div>
	<div id="header-45">
		<img src="./themes/$mostrar[theme]/images_header/header_45.png" width="100" height="34" alt="">
	</div>
	<div id="header-46">
		<img src="./themes/$mostrar[theme]/images_header/header_46.png" width="736" height="19" alt="">
	</div>
	<div id="header-47">
		<img src="./themes/$mostrar[theme]/images_header/header_47.png" width="122" height="8" alt="">
	</div>
</div>

sarjentocuch · #2 (**permalink**) 28/03/2013, 14:59

perdonad el dobleposteo, no me dejaba escribirlo todo en uno por limite de caracteres.

y esta es la parte CSS.

y luego la parte CSS que lo estructura todo, es esto:

Código HTML:

#Tacha_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:994px;
	height:258px;
}

#header-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:17px;
	height:258px;
}

#header-02 {
	position:absolute;
	left:17px;
	top:0px;
	width:47px;
	height:50px;
}

#header-03 {
	position:absolute;
	left:64px;
	top:0px;
	width:29px;
	height:20px;
}

#header-04 {
	position:absolute;
	left:93px;
	top:0px;
	width:20px;
	height:50px;
}

#header-05 {
	position:absolute;
	left:113px;
	top:0px;
	width:872px;
	height:7px;
}

#header-06 {
	position:absolute;
	left:985px;
	top:0px;
	width:9px;
	height:258px;
}

#header-07 {
	position:absolute;
	left:113px;
	top:7px;
	width:872px;
	height:24px;
}

#header-08 {
	position:absolute;
	left:64px;
	top:20px;
	width:29px;
	height:30px;
}

#header-09 {
	position:absolute;
	left:113px;
	top:31px;
	width:45px;
	height:163px;
}

#header-10 {
	position:absolute;
	left:158px;
	top:31px;
	width:66px;
	height:227px;
}

#header-11 {
	position:absolute;
	left:224px;
	top:31px;
	width:186px;
	height:39px;
}

#header-12 {
	position:absolute;
	left:410px;
	top:31px;
	width:12px;
	height:41px;
}

#header-13 {
	position:absolute;
	left:422px;
	top:31px;
	width:563px;
	height:7px;
}

#header-14 {
	position:absolute;
	left:422px;
	top:38px;
	width:563px;
	height:162px;
}

#header-15 {
	position:absolute;
	left:17px;
	top:50px;
	width:96px;
	height:33px;
}

#header-16 {
	position:absolute;
	left:224px;
	top:70px;
	width:25px;
	height:106px;
}

#header-17 {
	position:absolute;
	left:249px;
	top:70px;
	width:161px;
	height:106px;
}

#header-18 {
	position:absolute;
	left:410px;
	top:72px;
	width:12px;
	height:104px;
}

#header-19 {
	position:absolute;
	left:17px;
	top:83px;
	width:53px;
	height:111px;
}

#header-20 {
	position:absolute;
	left:70px;
	top:83px;
	width:17px;
	height:19px;
}

#header-21 {
	position:absolute;
	left:87px;
	top:83px;
	width:26px;
	height:111px;
}

#header-22 {
	position:absolute;
	left:70px;
	top:102px;
	width:17px;
	height:12px;
}

#header-23 {
	position:absolute;
	left:70px;
	top:114px;
	width:17px;
	height:17px;
}

#header-24 {
	position:absolute;
	left:70px;
	top:131px;
	width:17px;
	height:13px;
}

#header-25 {
	position:absolute;
	left:70px;
	top:144px;
	width:17px;
	height:16px;
}

#header-26 {
	position:absolute;
	left:70px;
	top:160px;
	width:17px;
	height:34px;
}

#header-27 {
	position:absolute;
	left:224px;
	top:176px;
	width:198px;
	height:24px;
}

#header-28 {
	position:absolute;
	left:17px;
	top:194px;
	width:122px;
	height:56px;
}

#header-29 {
	position:absolute;
	left:139px;
	top:194px;
	width:19px;
	height:64px;
}

#header-30 {
	position:absolute;
	left:224px;
	top:200px;
	width:8px;
	height:58px;
}

#header-31 {
	position:absolute;
	left:232px;
	top:200px;
	width:736px;
	height:5px;
}

#header-32 {
	position:absolute;
	left:968px;
	top:200px;
	width:17px;
	height:58px;
}

#header-33 {
	position:absolute;
	left:232px;
	top:205px;
	width:101px;
	height:34px;
}

#header-34 {
	position:absolute;
	left:333px;
	top:205px;
	width:5px;
	height:34px;
}

#header-35 {
	position:absolute;
	left:338px;
	top:205px;
	width:101px;
	height:34px;
}

#header-36 {
	position:absolute;
	left:439px;
	top:205px;
	width:5px;
	height:34px;
}

#header-37 {
	position:absolute;
	left:444px;
	top:205px;
	width:101px;
	height:34px;
}

#header-38 {
	position:absolute;
	left:545px;
	top:205px;
	width:5px;
	height:34px;
}

#header-39 {
	position:absolute;
	left:550px;
	top:205px;
	width:101px;
	height:34px;
}

#header-40 {
	position:absolute;
	left:651px;
	top:205px;
	width:5px;
	height:34px;
}

#header-41 {
	position:absolute;
	left:656px;
	top:205px;
	width:101px;
	height:34px;
}

#header-42 {
	position:absolute;
	left:757px;
	top:205px;
	width:6px;
	height:34px;
}

#header-43 {
	position:absolute;
	left:763px;
	top:205px;
	width:101px;
	height:34px;
}

#header-44 {
	position:absolute;
	left:864px;
	top:205px;
	width:4px;
	height:34px;
}

#header-45 {
	position:absolute;
	left:868px;
	top:205px;
	width:100px;
	height:34px;
}

#header-46 {
	position:absolute;
	left:232px;
	top:239px;
	width:736px;
	height:19px;
}

#header-47 {
	position:absolute;
	left:17px;
	top:250px;
	width:122px;
	height:8px;
}

pzin · #3 (**permalink**) 28/03/2013, 15:10

Si estás empezando con CSS, lo peor que puedes hacer es maquetear un sitio usando posiciones absolutas. Cuando ya controles más CSS, verás que no es necesario. Mientras tanto, usarlas te darán muchos problemas.

Aparte de eso, creo que tienes la mente echa a la maquetación con tablas y a que cada elemento visual sea una imagen, y al final en vez de una página tengas unas grillas con imágenes pegadas una a la otra.

Tendrías que repasar un poco más algún tutorial de CSS.

Y aquello de "maquetear con div y CSS" habría que cambiarlo por "maquetear con CSS", porque hay muchas etiquetas en HTML, y ahora con HTML5 más aún, para usarlos aparte de los div.

sarjentocuch · #4 (**permalink**) 28/03/2013, 15:37

bueno, la cosa es que uso programas que generan codigo, y yo lo que hago es adaptarlo, nada mas. empezando con css? si, incluso menos jeje mis conocimientos son menos que basicos.
si es verdad que estoy acostumbrado a tablas, por que con tablas, la verdad es que hago lo que quiero.