Problema acomodando <DIV>

[Mikmoro]

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.

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.

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.

3-
<!--[if IE]><style>ul {top: 32px;}</style><![endif]-->
-------------------------
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".

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.

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.

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;"

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.

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.