Foros del Web - Aporte: Guía de Migración a XHTML+CSS

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Aporte: Guía de Migración a XHTML+CSS - Parte II (http://www.forosdelweb.com/f53/aporte-guia-migracion-xhtml-css-parte-ii-657814/)

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola:

Cita:

Iniciado por Caminantejm (Mensaje 3295115)

Y una pregunta para Mikmoro si puede contestar. Le estaría muy agradecido. En la primera de la guía (Migración...) parte presentas un ejemplo de layout en dos columnas laterales (derecha e izquierda). El centro es líquido. ¿Por qué colocar primero en el HTML primero la derecha, luego la izquierda y posteriormente la central? ¿Hay algún motivo especial? Parece que la lógica dice primero va en el código la que te encuentras antes -izquierda-, después la central y al final la derecha.

Lógicamente no soy Mikmoro. Pero, en parte porque hace tiempo que está desaparecido y en parte porque creo que me sé la respuesta, me atrevo a darte una respuesta.

Vamos a ver, el orden en que los pongas es como se situan en la página, como tu dices, primero la izquierda, después el centro y al final la derecha. Bien, en el caso de tu código no tienes definido el ancho del centro. Entonces, al posicionarlo antes del div de la derecha ocupa todo el espacio disponible en el navegador. Sin embargo, si colocas antes el div de la derecha el centro ocupa el hueco libre del centro.

Saludos.

:adios:

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:

Iniciado por jomaruro (Mensaje 3295275)

Hola:

Vamos a ver, el orden en que los pongas es como se situan en la página, como tu dices, primero la izquierda, después el centro y al final la derecha. Bien, en el caso de tu código no tienes definido el ancho del centro. Entonces, al posicionarlo antes del div de la derecha ocupa todo el espacio disponible en el navegador. Sin embargo, si colocas antes el div de la derecha el centro ocupa el hueco libre del centro.
Saludos.
:adios:

Gracias jomauro.

1.- Sigue sin funcionar aunque le ponga width tal como se ve. El div de la derecha no sube.

Código CSS:

Ver originaldiv#pagina {
  border: 1px solid #CCC;
  background-color: salmon;
  padding: 10px;
}
 
.derecha {border: 1px solid crimson; 
width: 100px; 
height: 140px;
  float: right;
}
 
.izquierda {border: 1px solid saddlebrown; 
width: 100px; 
height: 140px;
  float: left;
}
 
.centro {background:aqua;
        width:600px;
        margin-left: 110px;} 
 
div.clear {
  clear: both;
}

Código HTML:

Ver original<div id="pagina"> 
 
    <div class="izquierda">Izquierda</div>
 
    <p class="centro">
  Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable.</p>
  
        <div class="derecha">Derecha</div>
  
  Texto anterior al clear.
  <div class="clear"></div>Texto posterior al clear.
</div>

http://www.clientesred.com/~esparte/3.jpg
2.- Luego confirmamos que no es radicalmente exacto que se "los float se salgan del flujo". Se salen pero al tiempo hay que colocarlos estratégicamente para que ello se cumpla. Ahora, ¿cuál es el orden? Es cuestión de acertar.
3.- En el ejemplo de Mikmoro no declara width a la columna del centro y se queda líquida, adaptada a lo que le queda entre las dos de los lados. Está en la parte primera de Migración...

Gracias. A ver si alguien tiene otras experiencias.
Saludos.
Caminantejm.

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola:

Vamos por partes:

Cita:

Iniciado por Caminantejm (Mensaje 3295357)

1.- Sigue sin funcionar aunque le ponga width tal como se ve. El div de la derecha no sube.

Tienes razón, en principio podrías flotarlo a la izquierda, pero en este caso y dependiendo de la resolución de la pantalla el texto anterior al clear se ta va a posicionar en el hueco que queda entre centro y derecha. Defecto que puedes solucionar flotando el div de la derecha tambian a la izquierda.

Cita:

Iniciado por Caminantejm (Mensaje 3295357)

2.- Luego confirmamos que no es radicalmente exacto que se "los float se salgan del flujo". Se salen pero al tiempo hay que colocarlos estratégicamente para que ello se cumpla. Ahora, ¿cuál es el orden? Es cuestión de acertar.

Si los tienes que colocar estratégicamente es porque no se colocan en su sitio ¿no?

Cita:

Iniciado por Caminantejm (Mensaje 3295357)

3.- En el ejemplo de Mikmoro no declara width a la columna del centro y se queda líquida, adaptada a lo que le queda entre las dos de los lados. Está en la parte primera de Migración...

Cierto también, pero si te fijas en el código, primero posiciona el div col_der, después el div col_izq, dejando el espacio que queda para el div col_cen, por eso queda líquido. Esto es lo que te comentaba en el punto 1 sobre el texto antes del div.

Saludos.

:adios:

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias jomaruro.

No entiendo bien la respuesta al punto 1 pero bien. Ya veo que es cuestión de probar y que los float no salen del flujo del documento con tanta exactitud como puede salir el position:absolute. Salen del flujo pero están también en el flujo con un criterio.

Gracias y saludos.
Caminantejm.

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Expléndida la guía. Mis más sinceras felicitaciones.

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias, voy a verlo y cualquier duda te cuento.

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Está muy bueno, muchas gracias

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola,

me parece genial tanto la iniciativa como el desarrollo del caso práctico.

Tengo un par de comentarios y dudas al repecto, voy a ello:

1.- Se te han "colao" dos tildes en la palabra situación en el texto que acompaña a la imagen del edificio.

Ahora las dudas

2.- En la primera parte de la guía dices que no hay que meter <div> dentro de <a> o cosas así. Esto es por ser "bloque" dentro de "línea"? Debo decir que que yo hago uso de esta práctica y si no me equivoco, es válida en w3c. Como podría entonces solucionar esto:

http://img571.imageshack.us/img571/3...ebapagina1.jpg

Es una caja div con padding una img dentro. El div tiene background gris de forma que al ponerle padding hace que la img insertada parezca tener un borde. Hago un enlace del div y le pongo que a:hover {background:#099ee0;} de forma que al pasar por encima me cambia el color del borde, en de todo el fondo pero solo se ve cambiar el borde que sobresale. Si le hago el enlace solo a la img no cambia al situarnos dentro del borde, solo cambia cuando llegamos a la img.
¿What can I do? Además es un recurso que uso continuamente para hacer grupos de elementos como un enlace.

3.- Uso Notepad++, en serio llevo un monton de tiempo escribiendo ñ y á por la cara??? Con el ISO... ya no es necesario??? Que tío mas tonto estoy hecho....

4.- Una ultima cosa: En este caso, es factible colocar la imagen de la cabecera como <img>. Si el texto estuviera integrado enla imagen esto ya no seria posible no? habria que ponerla de fondo y el texto encima, o bien hacer la img con el texto en el propio jgp. o me equivoco?? y si es así, cual es la mejor opción??

Muchas gracias, igual me he pasao...

Saludos!!:aplauso:

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Estimado amigo Mikmoro,
Gracias por tu ¡excelente guia!. Es una verdadera alegria "navegar por la red" y encontrar este tipo de contenido. Sin duda existen miles de documentos al respecto que pueden ser consultados pero es esa "sencilles" que aplicas a tu guia la que la hace "especial" para aquellos que buscamos "migrar sin dolor" desde las tablas al CSS.
¡Enhorabuena por tu trabajo!, que ademas veo que ha sido escrita hace algunos años y aun hoy es perfectamente aplicable.
Saludos
--maelva

PD: Me ha llamado la atencion que tienes comentarios mas recientes en la "parte I" de la guia, por lo que pienso que muchos lectores no han visto tu "parte II". ¿Sera por falta de algun enlace?

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

La verdad que me encantaron los tutoriales, no los termine de leer completos, pero en estos dias voy a ver de terminalos, la verdad, siempre que veo uno de tus aportes, me terminan encantando y por sobre todas las cosas, ayudando.

Saludos.

Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

hola, todavía es necesario poner todos los meta-name q salen en los tutoriales o eso ya paso de moda?