Foros del Web » Creando para Internet » CSS »

Problema de un usuario "pez" en CSS

Estas en el tema de Problema de un usuario "pez" en CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/01/2007, 17:24
 
Fecha de Ingreso: enero-2007
Mensajes: 8
Antigüedad: 10 años, 11 meses
Puntos: 0
Problema de un usuario "pez" en CSS

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...
  #2 (permalink)  
Antiguo 11/01/2007, 06:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema de un usuario "pez" en CSS

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.
  #3 (permalink)  
Antiguo 11/01/2007, 12:05
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 5 meses
Puntos: 7
Re: Problema de un usuario "pez" en CSS

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.


Cita:
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)
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com

Última edición por bhagat; 11/01/2007 a las 12:12
  #4 (permalink)  
Antiguo 11/01/2007, 12:55
 
Fecha de Ingreso: enero-2007
Mensajes: 8
Antigüedad: 10 años, 11 meses
Puntos: 0
Re: Problema de un usuario "pez" en CSS

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

CSS:
Cita:
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;
}
  #5 (permalink)  
Antiguo 11/01/2007, 13:02
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 5 meses
Puntos: 7
Re: Problema de un usuario "pez" en CSS

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.
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
  #6 (permalink)  
Antiguo 11/01/2007, 13:02
 
Fecha de Ingreso: enero-2007
Mensajes: 8
Antigüedad: 10 años, 11 meses
Puntos: 0
Re: Problema de un usuario "pez" en CSS

(va con relleno)
y el HTML:

Cita:
<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>
  #7 (permalink)  
Antiguo 11/01/2007, 13:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Problema de un usuario "pez" en CSS

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.
  #8 (permalink)  
Antiguo 11/01/2007, 13:14
Avatar de bhagat  
Fecha de Ingreso: julio-2002
Ubicación: Granada
Mensajes: 469
Antigüedad: 15 años, 5 meses
Puntos: 7
Re: Problema de un usuario "pez" en CSS

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
__________________
Por prudencia, la palabra SIEMPRE,
no la deberiamos usar NUNCA

Bhagat Dominguez
www.percusioncreativa.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:00.