Problema acomodando <DIV>

enridp · #1 (**permalink**) 11/02/2007, 09:27

Hola a todos !
Estoy teniendo como dice el asunto, unos problemitas para acomodar algunos <DIV>
Es decir, si voy al dreamweaver y armo mis capas, con tamaños fijos y posiciones fijas todo anda bien. Pero si por alguna razón necesito cambiar el tamaño de UN <div> tengo que cambiar el de todos...
Hay alguna forma de hacer relativos a algo en particular los tamaños y posiciones de las capas?
Las capas son 3, que forman una columna, la superior contiene el header, la del medio el cuerpo, la capa de más abajo el pie... las 3 capas anteriores están contenidas en una capa "madre".
Hay alguna forma de hacer que siempre esté el cuerpo (la capa del medio) entre el header y el pie? sin importar el tamaño del cuerpo... que siempre se coloque debajo del header, y que siempre coloque justo debajo de el al pie?

Espero haberme explicado bien.
Saludos !
enrique.

Mikmoro · #2 (**permalink**) 11/02/2007, 18:29

Hola, enridp.
Supongo que buscas algo así:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Tres capas</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-15" />
  <style type="text/css">
html, body { margin: 0pt;
padding: 0pt;
height: 100%;
background-color: rgb(51, 102, 102);
}
#capaMadre { width: 790px;
background-color: rgb(102, 204, 204);
margin: 0 auto;
position: relative;
height: auto!important;
min-height: 100%;
height: 100%;
}
#cabecera { background-color: rgb(204, 153, 51);
text-align: center;
height: 80px;
}
#cuerpo { position: relative;
display: block;
margin: 20px;
}
#pie { position: absolute;
bottom: 0pt;
height: 40px;
background-color: rgb(51, 51, 51);
color: rgb(255, 255, 255);
text-align: center;
width: 100%;
clear: both;
}
  </style>
</head>
<body>
<div id="capaMadre">
<div id="cabecera">Header</div>
<div id="cuerpo">
Cuerpo
</div>
<div id="pie">Pie</div>
</div>
</body>
</html>

Si añades texto al cuerpo, éste crecerá y el pie siempre estará en su sitio, que me parece que es lo que preguntabas.

Espero que te sirva de modelo para hacer lo que quieres.

Mikel.

enridp · #3 (**permalink**) 12/02/2007, 08:15

Si !!! gracias ! era eso lo que trataba de hacer...
Voy a revisar bien tu código para aprender a ver en que le erraba. De todas formas lo solucioné de otra manera, en vez de capas usé una tabla, de una columna y 3 filas. Anda bastante bien. Pero sigo teniendo problemas con las capas...
Te muestro lo que hice:

usuarios.arnet.com.ar/enridp/OV/indexAux.html

Ese anda bien creo, estuve muchísimo tiempo tratando de acomodarlo. el problema era que si andaba en Firefox seguro no andaba en IE... ahora al menos a mi me anda bien en los dos. Si te fijas tiene un menú y el logo de la casita se prende al pasar el mouse.
Lo hice así (probé de mil maneras y es lo único que me anduvo).
Una tabla de 3 filas 1 columna
En la fila de abajo una imagen (la del pasto)
En la del medio el cuerpo (en realidad la dividí en 3 celdas a esta porque quería agregarle "bordes" al cuerpo pero no me anduvo como esperaba).
En la fila de arriba el Header, con el menú y el efecto sobre el logo.
Para hacer el Header tuve que ponerlo como imagen de fondo (y no solo en <td> sino tambien en <tr> porque sino el IE no lo tomaba...). Luego fui acomodando los DIVs del menú y del logo a la fuerza, es decir, en la vista diseño del Dreamweaver no me encajan, pero cuando los visualizo con los navegadores si... fui moviendo pixel por pixel la posición hasta que quedó bien. Y por suerte quedó en los dos exploradores (IE y firefox), pero quedó en los dos sólo porque puse al header como fondo y no como una imagen dentro de la celda (estuve horas tratando de esta forma y no pude acomodar los DIVs del menu y la casita).
Ahora ya anda todo creo, pero me interesa mucho saber tu opinión (o la de alguien más). No se, por ahí se puede hacer mucho más simple, o estoy haciendo algo muy mal...

Saludos !
enrique.

Mikmoro · #4 (**permalink**) 12/02/2007, 11:59

Hola, Enrique.
Lo que tu has hecho, si a ti te vale está bien.
Sí que es cierto que como dices, por problemas al posicionar, hay algunas cosas raras: repites el gráfico de cabecera en la fila (tr) y luego en la celda (td), pones gráficos como la casa o el fondo del menu sobre gráficos que ya tienes en la imagen de fondo, etc., pero como te digo, si te apaña, adelante.

Por si te apetece aprender un poco a usar CSS, te pongo como sería tu código basado en la plantilla que te mandé de 3 columnas. Así, aunque no lo cambies, si tienes ganas lo estudias un poco y ves lo eficiente que puede ser usar hojas de estilo en lugar de tablas para maquetar.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Tres capas</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
  <style type="text/css">
html, body { margin: 0pt;
padding: 0pt;
height: 100%;
background-image: url(Fondo.gif);
}
#capaMadre { margin: 0pt auto;
position: relative;
height: auto ! important;
min-height: 100%;
height: 100%;
width: 802px;
background-color: rgb(255, 255, 255);
}
#cabecera { background-image: url(HeaderCompleto.jpg);
height: 170px;
text-align: left;
}
#cuerpo { margin: 20px;
position: relative;
display: block;
background-color: rgb(255, 255, 255);
}
#pie { position: absolute;
bottom: 0pt;
color: rgb(255, 255, 255);
text-align: center;
width: 100%;
clear: both;
background: url(Cesped.jpg) no-repeat center bottom;
height: 77px;
}
#casita {
display: block;
height: 60px;
position: relative;
top: 27px;
left: 131px;
width: 60px;
}
#casita:hover { background: url(LogoCasitaOn.gif) no-repeat;
}
ul { list-style-type: none;
float: right;
position: relative;
top: 16px;
}
li { float: left;
}
li a { background: url(menu_02.png) no-repeat;
display: block;
width: 60px;
height: 46px;
position: relative;
left: -7px;
}
li a:hover { background: url(menu_02.png) left bottom;
}
  </style>
<!--[if IE]><style>ul {top: 32px;}</style><![endif]-->
</head>
<body>
<div id="capaMadre">
<div id="cabecera"><a id="casita" href="#"></a>
<ul>
  <li><a class="homeActive" href="http://cssvault.com"></a></li>
  <li><a class="gallery" href="/gallery.php"></a></li>
  <li><a class="resources" href="/resources.php"></a></li>
  <li><a class="submit" href="/submit_link.php"></a></li>
</ul>
</div>
<div id="cuerpo"></div>
<div id="pie"></div>
</div>
</body>
</html>

Ya contarás. Un saludo.

Mikel.

enridp · #5 (**permalink**) 12/02/2007, 14:20

Hola Mikel !
Realmente estoy sorprendido, ya me estaba convenciendo que no era todo tan "personalizable". Queda muy bien y más elegante con tu código. Usás Dreamweaver? porque no se como hiciste para acomodar tantos DIVs justo en el lugar que deben ir... a mi me está volviendo loco el DW, lo que me muestra en Diseño es totalmente distinto a lo que veo en el navegador...
Lo de poner el fondo 2 veces, en tr y td lo tuve que hacer porque el Internet Explorer sino no me ponía el fond (Firefox si, ni idea porque...).
Lo de superponer las imagenes de la casita y el menu con el fondo es simplemente para saber bien donde ponerlos, es decir, como guia...
Puedo hacerte unas preguntas sobre tu código?

1-
height: auto ! important;
min-height: 100%;
height: 100%;
-------------------------
En #capaMadre se declaran 3 height, es necesario esto? no me queda claro...

2-
#casita:hover { background: url(LogoCasitaOn.gif) no-repeat;
-------------------------
Lo de arriba es para el efecto OnMouseOver de la casita, pero al hacerlo así no hay posibilidad de que cargue mal LogoCasitaOn.gif y no se vea?. Es decir, esa imagen se va a cargar solo si se pasa el mouse por encima no?

3-

-------------------------
Esto supongo que es algo para el Internet Explorer pero ni idea que hace...

4-
<a id="casita" href="#"></a>
-------------------------
Este es para poner la casita, yo le había metido un div... es más complicado de esa forma o da igual?

5-
#cuerpo { margin: 20px;
-------------------------
El margen es necesario?
La verdad ya probé tantas cosas y me sorprendió tantas veces el resultado que perdí el hilo de la "coherencia" al trabajar con capas.
Para hacer los 3 DIVs que reemplazan a mi tabla cual es la idea básica? es decir, primero declarar uno madre que sea Si o Si de altura "auto", y que sea si o si de posición relativa? donde le decimos que debe estar centrado?
Luego una cabecera, que no tiene nada especial, ni la posicion? (relativa, absoluta...). Como sabe que debe ir arriba de todo la cabecera?.
Es que, como ya dije, lei varios tutoriales de CSS y crei que entendía, pero al agarrar algunos estilos y jugar un poquito el DreamWeaver me hacía cualquier cosa. Asique ya no me queda claro nada, cuando usar posición relativa, absoluta, definirle tamaños...

Saludos !
y gracias de nuevo.
enrique.

Mikmoro · #6 (**permalink**) 12/02/2007, 15:57

Cita:

Iniciado por enridp

Hola Mikel !
Usás Dreamweaver? porque no se como hiciste para acomodar tantos DIVs justo en el lugar que deben ir... a mi me está volviendo loco el DW, lo que me muestra en Diseño es totalmente distinto a lo que veo en el navegador...
Puedo hacerte unas preguntas sobre tu código?

Sí claro, como no. Antes de nada te diré que en general uso un editor de texto o NUV (no me gusta DW). Yo te recomiendo que instales NVU; es software libre, gratuito y para mi más eficiente que otros, pero como para gustos están los colores, pruébalo y a ver qué pasa.

Cita:

1-
height: auto ! important;
min-height: 100%;
height: 100%;
-------------------------
En #capaMadre se declaran 3 height, es necesario esto? no me queda claro...

Es correcto. ! important se usa para que esa propiedad tome privilegio sobre cualquier otra igual que ella. De esta manera, si no pusiera important, cualquier navegador interpretaría la última propiedad que encuentre del mismo tipo, pero para los navegadores inteligentes, important quiere decir important, es decir, más importante que otra del mismo tipo. Como IE no la entiende, interpreta la segunda, y por eso tienen medidas distintas, una para IE (la segunda) y la otra para el resto.

Cita:

2-
#casita:hover { background: url(LogoCasitaOn.gif) no-repeat;
-------------------------
Lo de arriba es para el efecto OnMouseOver de la casita, pero al hacerlo así no hay posibilidad de que cargue mal LogoCasitaOn.gif y no se vea?. Es decir, esa imagen se va a cargar solo si se pasa el mouse por encima no?

Así es, se cargará sólo cuando pase el ratón, y como la imagen original ya la tienes, no es necesario ponerla, solo la sustituta. Es tan pequeña (3k) que no te tienes que preocupar porque tarde en cargarse. Y no debería dar problemas de carga.

Cita:

3-

-------------------------
Esto supongo que es algo para el Internet Explorer pero ni idea que hace...

Esto se llaman "comentarios condicionales", de lo que puedes encontrar mucha información en la red. Se usa para poner código que sólo explorer entenderá, de manera que sirve para corregir "sus errores".

Cita:

4-
<a id="casita" href="#"></a>
-------------------------
Este es para poner la casita, yo le había metido un div... es más complicado de esa forma o da igual?

Como es un vínculo, en realidad no necesitas el div para meterlo dentro. Puede que por alguna razón alguna vez fuera mejor meterlo dentro, pero en general, estando tan sólo ahí sin molestarse con nadie, creo que no hace falta. Para mi las dos formas son igual de válidas, pero esta es más simple.

Cita:

5-
#cuerpo { margin: 20px;
-------------------------
El margen es necesario?

No, no es necesario. Se lo he dado para que cuando empieces a escribir texto o lo que sea en el cuerpo, no quede pegado a los bordes, porque si no tiene margen, quedará absolutamente pegado.

Cita:

Para hacer los 3 DIVs que reemplazan a mi tabla cual es la idea básica? es decir, primero declarar uno madre que sea Si o Si de altura "auto", y que sea si o si de posición relativa? donde le decimos que debe estar centrado?

Eso depende del diseño que quieres conseguir. Para tu caso concreto, te vendrá bien el primer esquema que te puse de tres cajas. Está limpio y sencillo, y si te fijas bien en lo que hace cada cosa, te podrá servir para orientarte cuando hagas otros diseños diferentes.
El centrado se le da con "margin: 0pt auto;"

Cita:

Luego una cabecera, que no tiene nada especial, ni la posicion? (relativa, absoluta...). Como sabe que debe ir arriba de todo la cabecera?.

Sencillamente porque es lo primero que aparece en el flujo del documento, y si nada dice lo contrario, ocupará la primera línea vertical disponible, es decir, pegado arriba.

Cita:

Es que, como ya dije, lei varios tutoriales de CSS y crei que entendía, pero al agarrar algunos estilos y jugar un poquito el DreamWeaver me hacía cualquier cosa. Asique ya no me queda claro nada, cuando usar posición relativa, absoluta, definirle tamaños...

Creo que lo más recomendable es que te vuelvas a echar un vistazo a algún buen tutorial (en la cabecera de este foro tienes muchos), o incluso que te eches un vistazo a esta estupenda traducción de la recomendación de la W3C.

http://www.sidar.org/recur/desdi/tra...css/intro.html

Mikel.

enridp · #7 (**permalink**) 13/02/2007, 17:21

Gracias de nuevo Mikel !
Voy a seguir viendo bien el tema, pero realmente no entiendo porque no existem simplemente un buen editor que muestre REALMENTE lo que luego se ve en el navegador, arrastrando y soltando sería todo más fácil... la verdad que me sigue pareciendo muy engorrosa la forma en que trabaja todo esto, me quedo con C++...
Ahi estuve viendo algo de los comentarios condicionales, pero no me queda claro por qué pusiste esa modificación para el IE... es decir, es algo así como un estándar que el IE siempre le erra en esa parte o en este caso particular viste que para que quede bien en el IE también había que agregarle 32 pixeles?

Saludos !
enri.

Mikmoro · #8 (**permalink**) 13/02/2007, 18:00

Era para corregir un error concreto.

Y no te quejes: si te manejas bien con C++ esto te tiene que parecer de risa, aunque más abiguo, pero sencillo de aprender

Hasta la vista.

Mikel.

enridp · #9 (**permalink**) 14/02/2007, 12:51

Si, eso creí, pero la verdad que cuando se acostumbra a lo, por así decirlo, estricto, cuando ve lenguajes tan liberales es complicado leerlos bien. Me pasa lo mismo con JavaScript o ActionScript, las declaraciones de las variables donde se quiera, sin ningún tipo particular, la omisión de puntos y coma, etc. etc. de a ratos parece cómodo y de a ratos es un desorden enorme...
Gracias de nuevo mikel ! ya veremos como evoluciona esto.
Saludos !
enrique.