Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Aporte: Guía de Migración a XHTML+CSS - Parte II en el foro de CSS en Foros del Web. Excelente Mik, muchísimas gracias por tu labor para quienes aun no realizan la migración Un pequeño añadido a tu gran trabajo: No todos los equipos ...

  #31 (permalink)  
Antiguo 25/06/2009, 13:34
Avatar de arthpix  
Fecha de Ingreso: diciembre-2003
Ubicación: Cancún
Mensajes: 2.340
Antigüedad: 14 años
Puntos: 93
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Excelente Mik, muchísimas gracias por tu labor para quienes aun no realizan la migración

Un pequeño añadido a tu gran trabajo: No todos los equipos tienen disponibles las mismas fuentes. Si utlizamos tipos de letras específicos en vez de familias tipográficas "básicas" el diseño se puede arruinar en otros equipos.

como ejemplo, yo utilizo Linux y no dispongo de las fuentes "Palatino Linotype" y "Century Gothic" lo que ocasiona que el diseño se descuadre completamente en mi navegador (Firefox 3.0):


En este ejemplo, cambié el estilo css para que los links utilizarán "Times" y solucionó el problema:


En este otro, eliminé la fuente de los mismos, permitiendo que heredaran el tipo:


Compatibilidad de fuentes, un punto tal vez pequeño pero importante a recordar.


Saludos
__________________
Antes de hacer rabietas infórmate: Linux != Windows
  #32 (permalink)  
Antiguo 25/06/2009, 16:34
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
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola arthpix. Me alegro de que te guste.
Por supuesto que estoy de acuerdo, pero como ya comentaba en el propio texto, por un lado intentaba imitar la fuente original creada por quien hizo la página inicialmente, y por otro, como también decía, al no ser un "manual de buenas prácticas" del diseño web, hay montones de cosas que he obviado como las fuentes, compatibilidades, resoluciones, medidas relativas, accesibilidad, etcétera.

En ningún caso es la fuente que yo elegiría (creo), o en su caso, como suelo hacer (yo también soy usuario de linux aunque debo trabajar con Windows), usaría como sustitución alguna parecida para otros sistemas.

Como digo, hay muchas cosas no tratadas en estas guías que algún día me animaré a introducir en la parte III: el citado manual de buenas prácticas

Se agradece que te hayas tomado la molestia de mirarlo como para hacer esa observación. Espero contar contigo si me animo con esa difícil tercera parte.
__________________
Visita mi nueva web idplus.org
  #33 (permalink)  
Antiguo 25/06/2009, 22:55
Avatar de arthpix  
Fecha de Ingreso: diciembre-2003
Ubicación: Cancún
Mensajes: 2.340
Antigüedad: 14 años
Puntos: 93
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Tienes mucha razón. Y celebro que planees extender tu manual que con tus conocimientos seguro que se podría convertir en un excelente libro muy completo y útil.

Por supuesto que puedes contar conmigo para lo que planeas, será un placer enorme contribuir aun que sea un poquito con un master como tu, siempre dispuesto a compartir su experiencia.

Saludos
__________________
Antes de hacer rabietas infórmate: Linux != Windows
  #34 (permalink)  
Antiguo 16/07/2009, 05:33
 
Fecha de Ingreso: julio-2009
Mensajes: 74
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Mikmoro. ¡Gracias! por tu segunda parte de la guía.

- No sólo con dolor estoy haciendo la migración sino con rabia al haber participado en un curso en el que el hombre que lo impartía estaba al margen de esta situación y nos recomendaba encarecidamente las tablas. No sólo libertad sino sugerencia hacia las tablas. A él le daba igual que un elemento fuera inline o block, ¡qué más da!.

- En fin, me voy a centrar en las gracias que te debo y ya está, Mikmoro.

- Y desde ahora intentaré migrar todas mis webs. Cuesta un poco como cuesta cuando te has habituado a algo, aunque sea malo.

- De todos modos, me pongo en el lugar en donde siempre he estado yo. Cogerte un FP o un Dreamweaver es relativamente más cómodo que pensar. Esto es así.

Gracias y hasta luego.
Caminantejm.
  #35 (permalink)  
Antiguo 22/07/2009, 20:07
 
Fecha de Ingreso: octubre-2007
Mensajes: 89
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola, Mik. Quizás me recuerdes. El 13 de mayo pasado hice una consulta sobre problemas que tenía con CSS e Internet Explorer. Apliqué los cambios que me sugeriste (aquellos más sencillos) y pude solucionarlo. Sigo trabajando en el sitio (lo tenía aparcado) y me encontré con nuevos inconvenientes, de nuevo con Internet Explorer (Firefox y Chrome me van de coña)
El problema es que me desplaza el texto, y no tengo la menor idea de como solucionarlo.
El link sería mandrin.es/mandrinman.html y el CSS es el siguiente (ara hacerte más fácil la búsqueda, el div involucrado es #Mainbodyret):

Cita:
/* CSS Document */

body {
margin: 0;
font-family: "Century Gothic","Trebuchet MS", Arial, Verdana, sans-serif;
font-size: 14px;
color:#666666;
}
/* LINKS */

a:link {
color:#666666;
text-decoration: none;
}
a:visited {
color:#666666;
text-decoration: none;
}
a:hover {
color: #F7941E;
text-decoration: none;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}

#Wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 100%;
/* border: 1px dotted #f00; */
}

#Navbar {
margin: 10px 0px 0px 0px;
padding-top:0px;
top: 0px;
width:100%;
height:132px;
/* border: 1px dotted #000; */
background-image:url(../img/logo.gif);
background-repeat: no-repeat;
background-position: top left;

}
#Text{
font-size: 13px;
margin: 20px 0px 0px 45px;
width: 236px;
line-height: 1.2em;
padding: 0px 0px 0px 0px;
/* border: 1px dotted #00f; */
text-align: justify;
}
#Mainbody {
position:relative;
float: right;
margin: 0;
/* border: 1px dotted #00f; */
}
#Textret{
font-size: 13px;
margin: 20px 0px 0px 45px;
width: 236px;
line-height: 1.2em;
padding: 0px 0px 0px 0px;
/* border: 1px dotted #00f; */
text-align: justify;
}
#Mainbodyret {
position:absolute;
float: right;
line-height: 1.6em;
margin: 20px 10px 0px 300px;
/* border: 1px dotted #00f; */
text-align: right;
}
#Mainbodyret img {
float: left;
}
/* Objetos de menu */
.menu {
margin-left: 45px;
}
.menueng {
margin-left: 52px;
}
.iniciomenu {
margin-left: 340px;
color: #F7941E;
}
.destacadoeng {
margin-left: 52px;
color: #F7941E;
}
.margen {
margin-left: 340px;
}
/* Cambio de idioma */
.idioma {
margin-left: 680px;
font-size: 12px;
text-align: rigth;
}
.idioma a {
color:#666666;
text-decoration: none;
}
/* Submenu Retail */
.iniciosubmenu {
font-size: 11px;
margin-left: 340px;
}
.iniciosubcolor {
font-size: 11px;
margin-left: 340px;
color: #F7941E;
} /*este es para el mandrinman en color */
.submenu {
font-size: 11px;
margin-left: 35px;
}
.destacado {
font-size: 11px;
margin-left: 35px;
color: #F7941E;
}
.destmenu {
margin-left: 45px;
color: #F7941E;
}

.textpicbike {
font-size: 12px;
font-style: italic;
}

.propiedades {
font-size: 12px;
text-align: left;
line-height: 1.1em;
}
Te agradecería que me puedas echar una mano

En cuanto a lo de migración sin dolor... cómo dueeele!!!
Saludos
  #36 (permalink)  
Antiguo 23/07/2009, 04:14
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola Kike
Tu enlace no funciona (errror 404) y si el html no se puede ni ver ni reproducir el error.
¿Qué tipo de desplazamiento es el que tienes con el texto?.
De momento, y hasta que matices ese detalle, te comento sobre el div involucrado:
Cita:
#Mainbodyret {
position:absolute;
float: right;
}
una de las dos está de más.

Un saludo.

P.D.: me he atrevido a comentarte, pese a que la consulta es a Mikmoro, porque debe de estar de descanso
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #37 (permalink)  
Antiguo 24/07/2009, 09:30
 
Fecha de Ingreso: octubre-2007
Mensajes: 89
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Que tal, kseso?
Probaré hacer los cambios que me dices.
En cuanto al desplazamiento del texto sólo podrás verlo claro como dices, viendo el link.
Que raro, yo lo probé y funciona (el link). probablemente sea algo temporal.
Si entras en madrin.es y haces click en venta podrás verlo. Con todas las páginas de venta tengo el mismo problema. No puedo poner el link completo ya que no tengo posts suficientes.
Como te comenté, funciona en Chrome y Mozilla, pero no en explorer.
AH! y una duda... dónde queda Ramajero Argonauta?
Saludos y Gracias
  #38 (permalink)  
Antiguo 24/07/2009, 12:38
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Realiza estos cambios/añadidos a tu css
Código css:
Ver original
  1. #Wrapper {
  2. margin:0 auto;
  3. position:relative;
  4. width:800px;
  5. }
  6. #Textret {
  7. float:left;
  8. font-size:13px;
  9. line-height:1.2em;
  10. margin:20px 0 0 45px;
  11. padding:0;
  12. text-align:justify;
  13. width:236px;
  14. }
  15. .textpicbike {
  16. font-size: 12px;
  17. font-style: italic;
  18. margin-left:290px;
  19. padding-top:25px;
  20. }
  21. .textpicbike img {
  22. float: left;
  23. }    
  24. .propiedades {
  25. clear:both;
  26. font-size:12px;
  27. text-align:left;
  28. float: left;
  29. }

Y en el html remodela para que quede así:
Código html:
Ver original
  1. <div id="Wrapper">
  2. <div id="Navbar"><!-- su contenido no varía, aunque estarían mejor los enlaces en una lista, no en span
  3. </div>
  4. <div id="Textret">
  5.      <p>Tenemos sorprendentes ofertas si quieres comprar una bici. Si después de un tiempo estás aburrido de ella, te la volvemos a comprar!<br />
  6.      Si has decidido comprar una de nuestras bicicletas, has tomado una buena decisión. Disfrútala durante un año y luego tráela; te daremos 100? si está en un estado decente. Esto significa que la estás pagando a mitad de precio.<br />
  7.      También puedes salir por la puerta con una nueva MANDRIN si lo deseas.</p>
  8.  </div>
  9.    <div class="textpicbike">
  10. <img src="mandrinman_files/mandrinman.jpg" alt="MANDRINLADY" />
  11.    <p>Para aquellos hombres que prefieran la sobriedad a lo chafardero tenemos la bici perfecta. Esta bicicleta es fuerte, sólida y duradera.
  12.        Con su caja de 3 velocidades podrás ir de un lado al otro de la ciudad, y por qué no, también llevar a la parienta. </p>
  13.    <ul class="propiedades">
  14.        <li>Armazón de acero</li>
  15.        <li>Luz de dínamo frontal</li>
  16.        <li>Sillín grande y cómodo</li>
  17.        <li>Cubrecadena de acero pintado</li>
  18.        <li>Guardabarro trasero. Aleación de llantas tradicional</li>
  19.        <li>Rear one piece carrier with full stand</li>
  20.        <li>Freno trasero contrapedal con 3 velocidades internas</li>
  21.        </ul>
  22.  </div>
  23. </div> <!-- cierre de wrapper -->
Por cierto, la imagen de la bici la tenías sin cerrar.
Ahora al menos yo lo veo correcto y razonablemente parecido en FF 3.5, ie7, safari, opera.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #39 (permalink)  
Antiguo 26/07/2009, 18:12
 
Fecha de Ingreso: octubre-2007
Mensajes: 89
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Genial! Funcionó. Ahora cambiaré el resto. No te contesté antes porque había reventado el sistema intentando limpiar el registro con el reg Seeker. Como verás, me encanta meter la mano donde no tengo idea. Menos mal que existen ustedes!
En fin, trataré de comprender los cambios que me haz hecho hacerle al CSS. Cualquier cosita vuelvo al consultorio, je. Saludos
  #40 (permalink)  
Antiguo 27/07/2009, 11:55
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
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola, kike2lucas.
No he podido responder antes. Me alegro de que esté solucionado, no obstante, no sé qué me da que este no era el mejor sitio para hacer esta consulta, ¿no?. Creo que es mejor abrir otro hilo para eso, si no la gente que esté leyendo este hilo por su temática y asuntos sobre la guía se aburrirá viendo que se cambia de tema sin mucho fundamento.

En fin, lo dicho, que me alegro de que el amigo kseso? te haya ayudado a solucionarlo en mi ausencia

Saludos.
__________________
Visita mi nueva web idplus.org
  #41 (permalink)  
Antiguo 28/07/2009, 17:00
 
Fecha de Ingreso: octubre-2007
Mensajes: 89
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Es cierto. Me equivoqué porque había posteado una duda en la parte II de la guía y quería retomar el tema. Ahora tengo dudas con el CSS en las tablas (qué doloroso que es esto) y posteé en un lugar más propicio.
Volviendo al hilo, excelente guía; no se pierdan la II parte. Y ya espero una tercera acerca de CSS y tablas, je.
Saludos
  #42 (permalink)  
Antiguo 19/08/2009, 19:45
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias milkmoro, su generosidad nos educa. Los foreros valoramos su trabajo y esperamos ansioso su tercera publicación.
  #43 (permalink)  
Antiguo 20/08/2009, 02:09
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
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola, Cristian. No es para tanto pero me alegro de que te guste. Lo hago encantado. A ver si me meto con la tercera parte alguna vez.

Saludos.
__________________
Visita mi nueva web idplus.org
  #44 (permalink)  
Antiguo 22/08/2009, 05:08
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola:

Cita:
Iniciado por Mikmoro Ver Mensaje
A ver si me meto con la tercera parte alguna vez.
Y ¿Sobre que va a tratar la tercera parte?

Saludos.

  #45 (permalink)  
Antiguo 22/08/2009, 05:25
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
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:
Iniciado por jomaruro Ver Mensaje
Y ¿Sobre que va a tratar la tercera parte?
Buenas prácticas para comenzar una web.

Tema extenso y complicado, la verdad.
__________________
Visita mi nueva web idplus.org
  #46 (permalink)  
Antiguo 22/08/2009, 08:48
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola:

Interesante.

Saludos.

  #47 (permalink)  
Antiguo 19/12/2009, 04:46
 
Fecha de Ingreso: julio-2009
Mensajes: 74
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias Mikmoro por tu ayuda y dedicación. Soy un "migrador" y verdaderamente he de ser sincero y reconocer que es un esfuerzo grande. No es tan fácil como parece. Es un esfuerzo grande el que hay que hacer. No obstante, más grande que el esfuerzo es la gratitud a que hayas dedicado tanto tiempo a ayudarnos.

- Mis mayores problemas están en el problema del flujo de contenidos. Llega a veces a ser enloquecedor porque no sabes por dónde va cada cosa. La teoría me la sé muy bien porque la he leído y releído muchas veces pero luego viene la práctica.

- Mi sugerencia, por tanto, es si nos puedes ayudar por aquí.

+++ ¿Cuáles son las cuatro cosas que tú llevas en la cabeza cuando comienzas? Me explico:
1.- Por ejemplo: ¿Unidades en píxeles para width y height o en porcentaje? Si uso porcentaje, ¿qué precauciones debo llevar siempre? Si uso px o em, ¿cuáles?. LO digo porque he editado con porcentaje y se me destartala mucho todo. ¿Es tan util trabajar las dimensiones de las cajas con porcentaje?

2.- ¿Siempre indicar la position de las cajas o sólo cuando sea necesario? El problema es que, cuando queremos posicionar podemos traer cajas sin posicionar.

3.- ¿Qué elementos importantes se nos salen del flujo y nos deorientan más?

4.- A la hora de meter contenido, ¿mejor div's o span's aunque sean de varias líneas?

5.- ¿Qué pistas llevas tú en la cabeza para que no se te salga del flujo el contenido?

6.- A veces, marco un border para saber cuál es el contenedor principal y veo que tengo más de la mitad de contenidos fuera del contenedor principal. Esto me desanima y me hace tirar por tierra todo el trabajo.

Bueno, estos son los aspectos que más me están problematizando el trabajo y que te aporto por si te ayudan a concretar tu ayuda.

Un saludo Mikmoro. Gracias de nuevo.
Caminantejm.
  #48 (permalink)  
Antiguo 19/12/2009, 17:55
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 9 meses
Puntos: 1314
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Bueno yo no soy Mikmorro ni tampoco soy un Master del CSS pero te contesto algunas cosas (si te interesa claro):
Cita:
Iniciado por Caminantejm Ver Mensaje
1.- Por ejemplo: ¿Unidades en píxeles para width y height o en porcentaje? Si uso porcentaje, ¿qué precauciones debo llevar siempre? Si uso px o em, ¿cuáles?. LO digo porque he editado con porcentaje y se me destartala mucho todo. ¿Es tan util trabajar las dimensiones de las cajas con porcentaje?
Depende, quieres un layout liquido o estático?? Por lo general manejar un layout estático es la forma más fácil (en especial si apenas estás comenzando con esto) Sobre los em están mas orientados a los textos, ya que mejoran la accesibilidad de un sitio.


Cita:
Iniciado por Caminantejm Ver Mensaje
4.- A la hora de meter contenido, ¿mejor div's o span's aunque sean de varias líneas?
los DIV´s son para elementos de bloque y los span para los elementos en linea, siempre deberás seguir esas reglas. Tampoco puede meter elementos de bloque dentro de elementos en linea (por ejemplo un <div> dentro de un <a>).

Cita:
Iniciado por Caminantejm Ver Mensaje
6.- A veces, marco un border para saber cuál es el contenedor principal y veo que tengo más de la mitad de contenidos fuera del contenedor principal. Esto me desanima y me hace tirar por tierra todo el trabajo.
Mira sobre las propiedades overflow, esta propiedad es la responsable de que el bloque crezca conforme el contenido.

Saludos
__________________
Grupo Telegram Docker en Español
  #49 (permalink)  
Antiguo 19/12/2009, 19:37
 
Fecha de Ingreso: julio-2009
Mensajes: 74
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

De acuerdo, gracias Carlangueitor. Toda ayuda es buena.
En el punto 6 quizás me refería al terrible asunto de las position absolute y relative. Ahora estoy con ello.
Gracias y saludos.
Caminantejm.
  #50 (permalink)  
Antiguo 23/02/2010, 13:57
 
Fecha de Ingreso: julio-2009
Mensajes: 74
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Buenas.
Estoy en esta tarea de la Migración y ciertamente sigue siendo dura a veces. Pero gracias de nuevo a la gente que estáis ayudando.
+ ¿Contradicciones en el funcionamiento de los float?
Esta cuestión parece fácil a simple vista.
1.- Expongo este estilo:
Código CSS:
Ver original
  1. div#pagina {
  2.   border: 1px solid #CCC;
  3.   background-color: salmon;
  4.   padding: 10px;
  5. }
  6.  
  7. .derecha {border: 1px solid crimson;
  8. width: 100px;
  9. height: 140px;
  10.   float: right;
  11. }
  12.  
  13. .izquierda {border: 1px solid saddlebrown;
  14. width: 100px;
  15. height: 140px;
  16.   float: left;
  17. }
  18.  
  19. div.clear {
  20.   clear: both;
  21. }

En este código.
Código HTML:
Ver original
  1. <div id="pagina">
  2.    
  3.     <div class="izquierda">Izquierda</div>
  4.    
  5.   <span style="background:aqua;">
  6.   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é
  7.   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é
  8.   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é
  9.   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é
  10.   generar una línea gigante que tenga que sobrepasar el ancho razonable.</span>
  11.  
  12.     <div class="derecha">Derecha</div>
  13.  
  14.   Texto anterior al clear.
  15.   <div class="clear"></div>Texto posterior al clear.
  16. </div>


Resultado (Opera, Mozilla e IE):



---> En teoría, he leído en las recomendaciones de W3C "Un elemento flotante a la izquierda debe ser colocado lo más a la izquierda posible, y un elemento flotante a la derecha lo más a la derecha posible. Tiene preferencia una posición más alta que una que esté más a la izquierda/derecha".
Pues bien, aquí no se cumple.
---> Luego no parece tan estricto que se salgan del flujo los float. Se salen parcialmente y se van a la parte que encuentran más alta. Si hay un "p" que les impide o un "span" como en este caso no salen totalmente del flujo.


---> Sin embargo, si coloco en el HTML la izquierda y derecha juntas sí se cumple. Yo siempre he entendido que los float se salen del flujo y se van a la parte más alta. Pero aquí veo claramente que no. ¿Me falta algún detalle?

Código HTML:
Ver original
  1. <div id="pagina">
  2.     <div class="derecha">Derecha</div>
  3.     <div class="izquierda">Izquierda</div>
  4.    
  5.   <span style="background:aqua;">
  6.   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é
  7.   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é
  8.   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é
  9.   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é
  10.   generar una línea gigante que tenga que sobrepasar el ancho razonable.</span>
  11.  
  12.   Texto anterior al clear.
  13.   <div class="clear"></div>Texto posterior al clear.
  14. </div>
Resultado ahora.


-------> 2.- 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.

Espero alguien me confirme esto.
Gracias de antemano.
Caminantejm.
  #51 (permalink)  
Antiguo 23/02/2010, 15:22
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola:

Cita:
Iniciado por Caminantejm Ver Mensaje
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.

  #52 (permalink)  
Antiguo 23/02/2010, 16:00
 
Fecha de Ingreso: julio-2009
Mensajes: 74
Antigüedad: 8 años, 5 meses
Puntos: 2
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:
Iniciado por jomaruro Ver Mensaje
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.
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 original
  1. div#pagina {
  2.   border: 1px solid #CCC;
  3.   background-color: salmon;
  4.   padding: 10px;
  5. }
  6.  
  7. .derecha {border: 1px solid crimson;
  8. width: 100px;
  9. height: 140px;
  10.   float: right;
  11. }
  12.  
  13. .izquierda {border: 1px solid saddlebrown;
  14. width: 100px;
  15. height: 140px;
  16.   float: left;
  17. }
  18.  
  19. .centro {background:aqua;
  20.         width:600px;
  21.         margin-left: 110px;}
  22.  
  23. div.clear {
  24.   clear: both;
  25. }

Código HTML:
Ver original
  1. <div id="pagina">
  2.  
  3.     <div class="izquierda">Izquierda</div>
  4.  
  5.     <p class="centro">
  6.   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é
  7.   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é
  8.   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é
  9.   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é
  10.   generar una línea gigante que tenga que sobrepasar el ancho razonable.</p>
  11.  
  12.         <div class="derecha">Derecha</div>
  13.  
  14.   Texto anterior al clear.
  15.   <div class="clear"></div>Texto posterior al clear.
  16. </div>


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.
  #53 (permalink)  
Antiguo 25/02/2010, 14:02
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Hola:

Vamos por partes:

Cita:
Iniciado por Caminantejm Ver Mensaje
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 Ver Mensaje
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 Ver Mensaje
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.

  #54 (permalink)  
Antiguo 01/03/2010, 04:09
 
Fecha de Ingreso: julio-2009
Mensajes: 74
Antigüedad: 8 años, 5 meses
Puntos: 2
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.
  #55 (permalink)  
Antiguo 17/03/2010, 11:38
 
Fecha de Ingreso: mayo-2008
Mensajes: 53
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Expléndida la guía. Mis más sinceras felicitaciones.
  #56 (permalink)  
Antiguo 18/03/2010, 16:51
 
Fecha de Ingreso: marzo-2010
Mensajes: 1
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias, voy a verlo y cualquier duda te cuento.

Última edición por webosiris; 11/10/2010 a las 17:17
  #57 (permalink)  
Antiguo 27/07/2010, 14:18
Avatar de giovanicas1  
Fecha de Ingreso: julio-2010
Mensajes: 2
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Está muy bueno, muchas gracias
  #58 (permalink)  
Antiguo 29/08/2010, 16:22
Avatar de emilianocepa  
Fecha de Ingreso: mayo-2007
Mensajes: 45
Antigüedad: 10 años, 6 meses
Puntos: 2
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

muy buenoooo
  #59 (permalink)  
Antiguo 13/11/2010, 03:26
Avatar de PedroDesing  
Fecha de Ingreso: octubre-2007
Ubicación: Barcelona, España
Mensajes: 202
Antigüedad: 10 años, 1 mes
Puntos: 18
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:




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 &ntilde; y &aacute; 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!!
__________________
pedrorodas.com próximamente! Permanezcan atentos
  #60 (permalink)  
Antiguo 22/04/2011, 07:24
 
Fecha de Ingreso: abril-2011
Mensajes: 1
Antigüedad: 6 años, 7 meses
Puntos: 0
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?
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

SíEste tema le ha gustado a 14 personas




La zona horaria es GMT -6. Ahora son las 03:14.