Problema de un usuario "pez" en CSS

[Lord_Doomy]

Buenas, para empezar, comentar que suelo hacer mis páginas web con photoshop y despues hacer tablas para trabajar con ello, pero he visto que el CSS es mucho mejor y mas claro, pero no consigo dar con la solución a mi problema, aparte de que estoy mas perdido que un pulpo en un garaje:

Tengo una web dividida en tres partes (creada con el photoshop y la opción de crear CSS,... es una mierda lo sé): cabecera, cuerpo y pié.
La cabecera se vé bien en cualquier sitio, con las imagenes puestas en modo background y demás.
Mi problema viene con el cuerpo y el pié.
El cuerpo tiene una altura de 600px y justo despues bien el fondo pegado a él.
Si lo que meta en el cuerpo pasa de esos 600px, sigue y pasa por detrás del pié, quedando este en el mismo sitio en el que estaba sin que el cuerpo le empuje hacia abajo. Quedando por encima totalmente anclado.
Me estoy armando un lio horrible con los margenes, absolutos y relativos. Y el problema es que no sé como hacerlo en el photoshop para que el css no me descoyunte nada...

[Mikmoro]

No me parece ninguna mala idea primero diseñar en photoshop y luego convertirlo a html y css. Lo mejor es que pongas el código html y el css para ver qué ocurre o cómo solucionarlo.

Mikel.

[bhagat]

Sin ver el codigo o un enlace es difícil diagnosticar, pero por lo que cuentas te esta faltando en pié es la declaración clear:both intenta incluyéndola en el DIV del pie, y luego nos cuentas que tal.

Me estoy armando un lío horrible con los margenes, absolutos y relativos

Eso nos pasa a todos al principio y no tan al principio bienvenido al club del acuario (por lo de pez)

[Lord_Doomy]

El problema es mas peliagudo de lo que parece por como lo transforma el Photoshop al CSS (como si fueran tablas vamos):

CSS:

body {
background-image:url(fondo.jpg);
}
p{margin:0 10px 10px}
#Tabla_01 {
position:relative;
border-bottom: 0;
border-top: 0;
margin: 0 auto;
text-align: left;
width:775px;
}

#index-02 {
position:absolute;
left:45px;
top:0px;
width:10px;
height:220px;
}

#inicio {
position:absolute;
left:55px;
top:0px;
width:67px;
height:57px;
}

#nosotros {
position:absolute;
left:122px;
top:0px;
width:86px;
height:57px;
}

#legal {
position:absolute;
left:208px;
top:0px;
width:83px;
height:57px;
}

#localizacion {
position:absolute;
left:291px;
top:0px;
width:98px;
height:57px;
}

#contacto {
position:absolute;
left:389px;
top:0px;
width:71px;
height:57px;
}

#index-08 {
position:absolute;
left:460px;
top:0px;
width:34px;
height:57px;
}

#main3 {
position:absolute;
left:494px;
top:0px;
width:229px;
height:220px;
}

#index-10 {
position:absolute;
left:723px;
top:0px;
width:7px;
height:220px;
}

#index-12 {
position:absolute;
left:55px;
top:57px;
width:439px;
height:55px;
}

#main2 {
position:absolute;
left:55px;
top:112px;
width:439px;
height:108px;
}

#index-14 {
position:absolute;
left:45px;
top:220px;
width:10px;
height:263px;
}

#index-15 {
background-color:#FFFFFF;
position:absolute;
left:55px;
top:220px;
width:668px;
height:263px;
margin:auto;
}

#index-16 {
position:absolute;
left:723px;
top:220px;
width:7px;
height:263px;
}

#index-17 {
position:absolute;
left:45px;
top:483px;
width:10px;
height:126px;
}

#ibm {
position:absolute;
left:55px;
top:483px;
width:106px;
height:62px;
}

#EVEN {
position:absolute;
left:161px;
top:483px;
width:149px;
height:62px;
}

#msg {
position:absolute;
left:310px;
top:483px;
width:131px;
height:62px;
}

#sup1 {
position:absolute;
left:441px;
top:483px;
width:282px;
height:62px;
}

#index-22 {
position:absolute;
left:723px;
top:483px;
width:7px;
height:126px;
}

#down {
position:absolute;
left:55px;
top:545px;
width:668px;
height:13px;
}

#b-links {
position:absolute;
left:55px;
top:558px;
width:668px;
height:51px;
}

[bhagat]

Pues si que complica la cosa el Photoshop, es lo que ocurre cuando se meten a hacer cosas para la que no están pensadas ni mucho menos optimizadas, de entrada todo son posiciones absolutas, yo por probar incluiría el clear:both en el div del pie, parece que es el down, pero asi sin ver el web es dificil.

[Lord_Doomy]

(va con relleno)
y el HTML:

<html>
<head>
<title>nuevo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--

userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function findElement(n,ly) {
if (browserVers < 4) return document[n];
var curDoc = ly ? ly.document : document;
var elem = curDoc[n];
if (!elem) {
for (var i=0;i<curDoc.layers.length;i++) {
elem = findElement(n,curDoc.layers[i]);
if (elem) return elem;
}
}
return elem;
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
var img;
for (var i=0; i<changeImages.arguments.length; i+=2) {
img = null;
if (document.layers) {
img = findElement(changeImages.arguments[i],0);
}
else {
img = document.images[changeImages.arguments[i]];
}
if (img) {
img.src = changeImages.arguments[i+1];
}
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
inicio_over = newImage("Images/inicio-over.gif");
nosotros_over = newImage("Images/nosotros-over.gif");
legal_over = newImage("Images/legal-over.gif");
localizacion_over = newImage("Images/localizacion-over.gif");
contacto_over = newImage("Images/contacto-over.gif");
preloadFlag = true;
}
}

// -->
</script>
<style type="text/css" media="all">
@import "estilo.css";
</style>
</head>
<body onload="preloadImages();" style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (nuevo.psd - Slices: 02, 08, 10, 12, 14, 15, 16, 17, 22, EVEN, b_links, contacto, down, ibm, inicio, legal, localizacion, main2, main3, msg, nosotros, sup1) -->
<div id="Tabla_01">
<div id="index-02">
<img src="Images/index_02.gif" width="10" height="220" alt="">
</div>
<div id="inicio">
<a href="index.html"
onmouseover="window.status='home'; changeImages('inicio', 'Images/inicio-over.gif'); return true;"
onmouseout="window.status=''; changeImages('inicio', 'Images/inicio.gif'); return true;"
onmousedown="changeImages('inicio', 'Images/inicio-over.gif'); return true;"
onmouseup="changeImages('inicio', 'Images/inicio-over.gif'); return true;">
<img name="inicio" src="Images/inicio.gif" width="67" height="57" border="0" alt="inicio"></a>
</div>
<div id="nosotros">
<a href="nosotros.html"
onmouseover="window.status='about us'; changeImages('nosotros', 'Images/nosotros-over.gif'); return true;"
onmouseout="window.status=''; changeImages('nosotros', 'Images/nosotros.gif'); return true;"
onmousedown="changeImages('nosotros', 'Images/nosotros-over.gif'); return true;"
onmouseup="changeImages('nosotros', 'Images/nosotros-over.gif'); return true;">
<img name="nosotros" src="Images/nosotros.gif" width="86" height="57" border="0" alt="nosotros"></a>
</div>
<div id="legal">
<a href="avisolegal.html"
onmouseover="window.status='services'; changeImages('legal', 'Images/legal-over.gif'); return true;"
onmouseout="window.status=''; changeImages('legal', 'Images/legal.gif'); return true;"
onmousedown="changeImages('legal', 'Images/legal-over.gif'); return true;"
onmouseup="changeImages('legal', 'Images/legal-over.gif'); return true;">
<img name="legal" src="Images/legal.gif" width="83" height="57" border="0" alt="legal"></a>
</div>
<div id="localizacion">
<a href="localizacion.html"
onmouseover="window.status='partners'; changeImages('localizacion', 'Images/localizacion-over.gif'); return true;"
onmouseout="window.status=''; changeImages('localizacion', 'Images/localizacion.gif'); return true;"
onmousedown="changeImages('localizacion', 'Images/localizacion-over.gif'); return true;"
onmouseup="changeImages('localizacion', 'Images/localizacion-over.gif'); return true;">
<img name="localizacion" src="Images/localizacion.gif" width="98" height="57" border="0" alt="localizacion"></a>
</div>
<div id="contacto">
<a href="contactar.html"
onmouseover="window.status='clients'; changeImages('contacto', 'Images/contacto-over.gif'); return true;"
onmouseout="window.status=''; changeImages('contacto', 'Images/contacto.gif'); return true;"
onmousedown="changeImages('contacto', 'Images/contacto-over.gif'); return true;"
onmouseup="changeImages('contacto', 'Images/contacto-over.gif'); return true;">
<img name="contacto" src="Images/contacto.gif" width="71" height="57" border="0" alt="contacto"></a>
</div>
<div id="index-08">
<img src="Images/index_08.gif" width="34" height="57" alt="">
</div>
<div id="main3">
<img src="Images/main3.gif" width="229" height="220" alt="">
</div>
<div id="index-10">
<img src="Images/index_10.gif" width="7" height="220" alt="">
</div>
<div id="index-12">
<img src="Images/index_12.gif" width="439" height="55" alt="">
</div>
<div id="main2">
<img src="Images/main2.gif" width="439" height="108" alt="">
</div>
<div id="index-14">
<img src="Images/index_14.gif" width="10" height="263" alt="">
</div>
<div id="index-15">
<div>En un lugar de la mancha En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha<
En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha<
En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha<
En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha<
En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha<
En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha<
En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha<
En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< En un lugar de la mancha< </div>
</div>
<div id="index-16">
<img src="Images/index_16.gif" width="7" height="263" alt="">
</div>
<div id="index-17">
<img src="Images/index_17.gif" width="10" height="126" alt="">
</div>
<div id="ibm">
<img src="Images/ibm.gif" width="106" height="62" alt="">
</div>
<div id="EVEN">
<img src="Images/EVEN.gif" width="149" height="62" border="0" alt="EVEN"></a>
</div>
<div id="msg">
<img src="Images/msg.gif" width="131" height="62" alt="">
</div>
<div id="sup1">
<img src="Images/sup1.gif" width="282" height="62" alt="">
</div>
<div id="index-22">
<img src="Images/index_22.gif" width="7" height="126" alt="">
</div>
<div id="down">
<img src="Images/down.gif" width="668" height="13" alt="">
</div>
<div id="b-links">
<img src="Images/b_links.gif" width="668" height="51" alt="">
</div>
</div>
</body>
</html>

[Mikmoro]

Bueno, cuando he dicho que no parecía mala idea empezar diseñando en photoshop, no me refería a permitir que sea photoshop quien te convierta y cree tanto el html como la css, que eso sí me parece una malísima idea. Me refería a que es buena idea hacer un diseño visual de qué quieres hacer e incluso dibujar cada elemento primero, y luego separar los elementos de la composición e intentar componer tú lo mismo con html y css.

Yo no me siento capaz de leer el código generado por esos programas. Intenta separar cada elemento gráfico y maquetarlo poco a poco a mano y creo que todos estaremos encantados de ayudarte.

Mikel.

[bhagat]

El motivo de usar CSS entre otros es Simplificar el código, pero Photoshop, lo que hace es generar un código para que dé dolor de cabeza al analizarlo.

se me acabaron las aspirinas, así que hasta que de momento no me meto a intentar solucionar este código.

pero cuando las tenga de vuelta le hecho un vistazo

Así ni un tiburón puede, je je