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

[Mikmoro]

Hola a todos.

He hecho la segunda parte de la pequeña guía de migración, esta vez como un ejemplo práctico de transformación del código con un caso concreto.

A ver qué os parece y si tiene gazapos, cosas que no se entiendan, mal esctructuradas o lo que os parezca. Espero vuestros comentarios y sugerencias.

http://www.araudi.net/migracion/migr..._parte_II.html

[pao01]

Gracias mik!!!!!

[Triby]

Muy bueno, si señor!

[DoPeY-BBS]

En hora buena Mikmoro ahora le doy un vistazo y luego te digo que tal pero desde ahora se que es excelente.


Esto cae perfecto para la competencia de css

[Aresillo]

Mi enhorabuena!!
Esperando la parte III!!! que ganas!

Aresillo!!
Cuando quieras nos ponemos con lo otro...

[jomaruro]

Hola Mikmoro:

Esto es una obra de arte (no lo pongo en mayúsculas para no parecer descortés) pero las mereces.

Una guía breve, concisa y clara, pero que muy clara.

¡¡¡Muchas gracias!!!



Un saludo!!

[kseso?]

Ya sólo te queda empaquetar toda "Araudi" en un .rar y hacer spam con él.

Gracias

[Mikmoro]

Iniciado por jomaruro

Una guía breve, concisa y clara, pero que muy clara.

Gracias, me alegro de que te guste. Espero que sirva para algo

Iniciado por kseso?

Ya sólo te queda empaquetar toda "Araudi" en un .rar y hacer spam con él.

¿No te ha llegado el correo ya?

[DoPeY-BBS]

El manual es muy bueno la verdad es que no hay de que quejarse.

Una observación en cuanto a los atributos de la imágenes

title Esto hace que al pasar el mouse (raton) por una imagen se vea un texto ya que, Alt muestra el texto cuando una imagen esta desactivada.

Hay otra cosa que la tengo dudosa. yo uso firefox y entre la imagen de la cabecera hay un pequeño margen y me vi obligado a quitarle el borde al menu para que no se vea esa linea.. no se ¿que me puedes decir de eso?

Tengo entendido tambien que los objetos inline no admiten anchura (display block)

[Mikmoro]

Ya sabes que agradezco todas las observaciones, pero no sé si has sido muy explícito:

Iniciado por DoPeY-BBS

Una observación en cuanto a los atributos de la imágenes

title Esto hace que al pasar el mouse (raton) por una imagen se vea un texto ya que, Alt muestra el texto cuando una imagen esta desactivada.

No sé qué quieres decir: todas las imágenes que he insertado llevan tanto la propiedad title como alt:
"<img class="captura" src="imagenes/captura6.jpg" alt="Imagen final de la web" title="Imagen final de la web" longdesc="descripciones.html#final" />"

Iniciado por DoPeY-BBS

Hay otra cosa que la tengo dudosa. yo uso firefox y entre la imagen de la cabecera hay un pequeño margen y me vi obligado a quitarle el borde al menu para que no se vea esa linea.. no se ¿que me puedes decir de eso?

Tampoco sé a qué te refieres: en el diseño con tablas, que nombre como "original", existe un espacio, que fue justo lo que motivó la consulta del usuario (tal y como relato); en la final hecha sin tablas, no. No sé a qué te refieres. Además en mi código final el menú no tiene ningún borde.

Iniciado por DoPeY-BBS

Tengo entendido tambien que los objetos inline no admiten anchura (display block)

Y con esto menos sé qué quieres decir. Así lo afirmo yo mismo en la primera parte de la guía, pero, en este caso, ¿a qué te refieres? ¿hay algún gazapo, o es que hay algo que crees que falta, o algo así?

De verdad, no he entendido en absoluto ninguno de los 3 comentarios

[jafp_pe]

Gracias Mikmoro te pasaste !!!! te regalo a mi hermana!1 XD!

[DoPeY-BBS]

No sé qué quieres decir: todas las imágenes que he insertado llevan tanto la propiedad title como alt:
"<img class="captura" src="imagenes/captura6.jpg" alt="Imagen final de la web" title="Imagen final de la web" longdesc="descripciones.html#final" />"

La verdad yo tengo que tener mas cuidado para que mis mensaje no se presten a confusión, cuando me refiero a la observación, lo hago con la intención para cuando una persona (lector) sin conocimiento a css sepa el porque de las cosas.

Tampoco sé a qué te refieres: en el diseño con tablas, que nombre como "original", existe un espacio, que fue justo lo que motivó la consulta del usuario (tal y como relato); en la final hecha sin tablas, no. No sé a qué te refieres. Además en mi código final el menú no tiene ningún borde.

exacto, a mi me aparece con el borde no se porque si lo que hago es un copy/paste, adamas en el dreamwaver no me aparece el espacio que te digo ¿que puede ser?

Y con esto menos sé qué quieres decir. Así lo afirmo yo mismo en la primera parte de la guía, pero, en este caso, ¿a qué te refieres? ¿hay algún gazapo, o es que hay algo que crees que falta, o algo así?

Edito:

Entiendo mas o menos lo del display block lo que no logro entender es porque les da un with de 99% si eso no afecta en nada o no se si me estoy equivocando

[Mikmoro]

Ahhhh, pues nada, es que creía que te estabas refiriendo a errores o cosas dudosas del texto publicado, no a otras cosas.

Iniciado por DoPeY-BBS

Entiendo mas o menos lo del display block lo que no logro entender es porque les da un with de 99% si eso no afecta en nada o no se si me estoy equivocando

Sí, sí afecta y mucho. Si lo miras en IE6, verás que en caso de no decirle lo que debe medir de ancho (99% porque si pusiera 100% al pasar el ratón todo se descuadraría debido al borde que aparece al hacerlo), el enlace sólo se resaltará al pasar por encima de la palabra, pero no al pasar por cualquier parte del área que debería ocupar el enlace, como ocurre en FF por ejemplo. Al decirle que ocupe todo el ancho del enlace, en IE6 se comporta igual que en el resto y al pasar el ratón por cualquier parte el enlace reacciona :hover.

[Mikmoro]

Iniciado por jafp_pe

Gracias Mikmoro te pasaste !!!! te regalo a mi hermana!1 XD!

¿Cóme mucho?

[DoPeY-BBS]

Iniciado por Mikmoro

Ahhhh, pues nada, es que creía que te estabas refiriendo a errores o cosas dudosas del texto publicado, no a otras cosas.


Sí, sí afecta y mucho. Si lo miras en IE6, verás que en caso de no decirle lo que debe medir de ancho (99% porque si pusiera 100% al pasar el ratón todo se descuadraría debido al borde que aparece al hacerlo), el enlace sólo se resaltará al pasar por encima de la palabra, pero no al pasar por cualquier parte del área que debería ocupar el enlace, como ocurre en FF por ejemplo. Al decirle que ocupe todo el ancho del enlace, en IE6 se comporta igual que en el resto y al pasar el ratón por cualquier parte el enlace reacciona :hover.

Pues que raro, ya que, al pasar el hover en i6 y quitandole la propiedad me funciona perfectamente, lo que yo pienso es lo siguiente

La propiedad display block esta heredando la altura 34px de la capa menu y la anchura del 25% pero yo no se mucho de esto.

A lo mejor es magia que me pasa

#menu {background-color: #333;
height: 34px;
}
#menu ul {text-align: center;
}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #FFF;
line-height: 34px;
font-family: "Century Gothic";
font-weight: bold;
text-decoration: none;
display: block;
}

#menu a:hover {background-color: #e9eada;
color: #333;
line-height: 32px;
}

[Mikmoro]

Si pones ese código (sin width), la opción del menú por ejemplo "Inicio" no cambia el fondo hasta que te acercas a la palabra en sí, pero si dejas el width, cambia en el momento que entras el el recuadro por cualquier parte, por ejemplo la esquina izquierda.

Hablo en IE6. Si no te ocurre eso puede que estés usando el Múltiple IE, que tienes errores de dibujado como ese en IE6.

Otra cosa:

#menu a:hover {background-color: #e9eada;
color: #333;
line-height: 32px;
}

Has quitado el borde del original. La reducción del line-height a 32px es debido al borde.

[DoPeY-BBS]

Ahora entiendo a lo que te refieres...La duda queda resuelta.

La verdad es que eres un guru en esto de css y estoy siguiendo tu camino

No sabia que el Múltiple IE tuviese errores aunque yo lo pruebo directamente del navegador también..

Gracias

[Mikmoro]

Iniciado por DoPeY-BBS

No sabia que el Múltiple IE tuviese errores aunque yo lo pruebo directamente del navegador también.

Yo no lo he usado nunca, pero en alguna consulta hemos detectado que el IE6 del Múltiple IE no se comporta exactamente igual que el IE6 por separado.

Me alegro de que haya quedado resuelto.

[DoPeY-BBS]

Hay otra cosa que la tengo dudosa. yo uso firefox y entre la imagen de la cabecera hay un pequeño margen y me vi obligado a quitarle el borde al menu para que no se vea esa linea.. no se ¿que me puedes decir de eso?

Sabes yo no me habia fijado en el css completo (al pie de la pagina) y pude ver el margin de la imagen, aun asi resuelto el caso veo que el borde es se sale un poco en "inicio" tanto en FF como IE6 (el browser).

[CircuitoX]

Mikmoro gracias por compartir estas experiencias
se agradece de todo carazon..
salu2

Pd: Muy interesante la migración

[Mikmoro]

Gracias, me alegro de que te guste.

Saludos.

[McPinkY18]

Iniciado por Mikmoro

Gracias, me alegro de que te guste.

Saludos.

Tremenda Guia.. Mas wenaa!!

mikmoro gracias nuevamente no olvides que si en algo te puedo ayudar no dudes en enviarme un mensaje privado

[Jamati]

Muy bien explicado, como siempre: felicitaciones Mikmoro !!

[MBurton]

Muchas gracias por "perder el tiempo" y ayudarnos a entender el maravilloso mundo de los divs, etc...

Yo soy como muchos de los que agradecen estos tutoriales, un HTML/tablero que lleva toda la vida luchando con las tablas, etc... Desde hace tiempo quería dar el paso y comenzar a diseñar las páginas como se lleva haciendo desde hace un tiempo, pero como siempre ocurre, no se saca el tiempo suficiente para hacerlo.

Espero que esta "migración" no sea muy dura. Ánimos a todos y suerte que la vida esta muy dura en estos tiempos. Y como decía alguno: reciclarse o morir.

Saludos desde BCN!

[kike2lucas]

Hola, Mik.
Soy uno de los tantos que está tratando de hacer esa "Migración sin dolor" a CSS, aunque por el momento viene siendo bastante dolorosa (!). Leí ambas partes de la Guía (Felicitaciones y Muchas Gracias!), y anteriormente había consultado bibliografía; aunque sigo teniendo unas cuantas dudas.
Pensé en poner mis conocimientos en práctica en un nuevo sitio que en teoría es bastante sencillo, solo cabecera y un cuerpo. Abajo iría cerrado solo con una línea de copyright. Es una web de venta y alquiler de bicicletas.
El link a la página es mandrin.es/object/index.html
Y éste el CSS:

/* CSS Document */

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

a:link {
color:#666666;
text-decoration: none;
}
a:visited {
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%;
text-align: center;
border: 1px dotted #f00;
}

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

}
#Text{
font-size: 13px;
margin: 10px 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;
}
.menu {
margin-top: 50px;
margin-left: 45px;
}
.activa {
margin-left: 100px;
color: #F7941E;
}
.idioma {
margin-left: 440px;
font-size: 12px;
text-align: rigth;
}

Bueno; empiezo a largarte mis dudas:
1) Para tener una referencia tablera del diseño le puse un borde punteado a los bloques, que después tengo pensado quitar. A la cabecera, que incluye la barra de navegación, le puse un width: 100%; sin embargo veo que el bloque se extiende fuera de los límites del bloque contenedor. Por qué ocurre eso?
2) Había empezado a diseñar habiendo leído sólo la guía 1. Al leer la segunda parte intenté cambiar los elementos del menú a lista, tal cual recomienda, pero me encuentro que me antepone un circulito a cada elemento. Cómo puedo evitarlo?
3) Tampoco me funciona el margin-top que le asigno a la clase "menu", lo cual en principio pensé que podía ser la ausencia de un display:block; Estoy en lo cierto? De estarlo, por qué sí me acepta el margin-left que le asigno? Para poder marginarlo hacia abajo tuve que decidirme por poner etiquetas <br>. Espero vuestros comentarios
4) Mi querido Internet Explorer me ha desplazado el texto principal a la derecha. El mismo está pensado para ocupar el ancho de las letras del logo. En MozFF y el resto se visualiza correctamente. Tiene solución esto?
5) Tuve muchos problemas para poner un div junto a otro flotado. Finalmente lo conseguí, empezando en el HTML con el elemento posicionado a la derecha. Esto siempre funciona así? De derecha a izquierda? O primero el elemento `flotado´ y después el `flotante´? Un comentario; también, para conseguirlo debí resignar el padding cosa que no hubiese podido hacer si el fondo del bloque hubiese sido de un color diferente al fondo de la página.
6) Una última duda. En la guía (parte 2), en la cabecera le dan "un poco de margin superior y padding inferior". Podrías explicar que hay que tener en cuenta para decidirse por el selector correcto?
En fin, unas cuántas dudas. Tengo decidida hacer la migración, y sin la guía ni siquiera podría haberlo intentado. Pero que eso de sin dolor... está por verse ;)
Gracias

[Mikmoro]

Buf, vaya consultita, kike2lucas. Una cosa es hacer una guía y otra abrir un consultorio particular

Veré qué puedo responderte:

Iniciado por kike2lucas

Bueno; empiezo a largarte mis dudas:
1) Para tener una referencia tablera del diseño le puse un borde punteado a los bloques, que después tengo pensado quitar. A la cabecera, que incluye la barra de navegación, le puse un width: 100%; sin embargo veo que el bloque se extiende fuera de los límites del bloque contenedor. Por qué ocurre eso?

Porque ese contenedor (#Navbar) también tiene un padding-left de 100px. Quítalo y verás.

Iniciado por kike2lucas

2) Había empezado a diseñar habiendo leído sólo la guía 1. Al leer la segunda parte intenté cambiar los elementos del menú a lista, tal cual recomienda, pero me encuentro que me antepone un circulito a cada elemento. Cómo puedo evitarlo?

Con list-style-type: none; donde declares el elemento UL en la CSS. Esto es bastante básico, así que te recomiendo que aparte de las guías empieces a estudiar CSS desde el principio.

Iniciado por kike2lucas

3) Tampoco me funciona el margin-top que le asigno a la clase "menu", lo cual en principio pensé que podía ser la ausencia de un display:block; Estoy en lo cierto? De estarlo, por qué sí me acepta el margin-left que le asigno? Para poder marginarlo hacia abajo tuve que decidirme por poner etiquetas <br>. Espero vuestros comentarios

Así es. Span es un elemento de línea y se ubica en su lugar correspondiente del flujo del documento, mientas que sí acepta márgenes laterales..

Iniciado por kike2lucas

4) Mi querido Internet Explorer me ha desplazado el texto principal a la derecha. El mismo está pensado para ocupar el ancho de las letras del logo. En MozFF y el resto se visualiza correctamente. Tiene solución esto?

Sí: elimina el text-align: center de #Wrapper

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

Iniciado por kike2lucas

5) Tuve muchos problemas para poner un div junto a otro flotado. Finalmente lo conseguí, empezando en el HTML con el elemento posicionado a la derecha. Esto siempre funciona así? De derecha a izquierda? O primero el elemento `flotado´ y después el `flotante´? Un comentario; también, para conseguirlo debí resignar el padding cosa que no hubiese podido hacer si el fondo del bloque hubiese sido de un color diferente al fondo de la página.

No funciona siempre así pero muchas veces es conveniente. Si ambas columnas tienen ancho fijo no es necesario en absoluto.

Iniciado por kike2lucas

6) Una última duda. En la guía (parte 2), en la cabecera le dan "un poco de margin superior y padding inferior". Podrías explicar que hay que tener en cuenta para decidirse por el selector correcto?

Pues no recuerdo a qué te refieres, pero margen es distancia de la caja hasta su adyacente, y padding es relleno dentro de la caja.

Iniciado por kike2lucas

En fin, unas cuántas dudas. Tengo decidida hacer la migración, y sin la guía ni siquiera podría haberlo intentado. Pero que eso de sin dolor... está por verse ;)
Gracias

Al final era mentira, pero de no haberlo puesto así ni siquiera te hubieras animado a leerlo

Lo dicho: si ya te has pinchado el veneno, empieza a estudiar CSS que te va a encantar.

[kike2lucas]

Muchas gracias por responder. Voy a hacer los cambios que me sugeriste. La idea es migrar, aunque duela un poquito. Me parece que vas a tener que abrir la consultoría, je.
Saludos

[CopperDavid]

Muy buen manual y sobretodo bien estructurado, al menos servirá de mucho a gente que crea sus páginas web con Dreamweaver. Es lo que tiene trabajar con una herramienta automatica.

Y por favor, como recomendación, quien utilice el Dreamweaver para crear sus páginas web, que no deje los estilos con los nombres automaticos. La verdad es que duelen los ojos cuando ves codigo (class="estilo18"), no queda nada profesional.

Animo a la gente a trabajar con css porque la maquetación es perfecta y configurable para todos los navegadores.

FELICIDADES POR TU 2ª Parte del manual, lo explicas fenomenal.

SALU2

[CopperDavid]

Así da gusto, con gente que se explica de maravilla y ayuda a los compis mas necesitados.

Muchas gracias.

SALU2

[Mikmoro]

Iniciado por CopperDavid

Y por favor, como recomendación, quien utilice el Dreamweaver para crear sus páginas web, que no deje los estilos con los nombres automaticos. La verdad es que duelen los ojos cuando ves codigo (class="estilo18"), no queda nada profesional.

No, la verdad: muy descriptiva no es la clase "estilo18" Quedan horribles.

Iniciado por CopperDavid

FELICIDADES POR TU 2ª Parte del manual, lo explicas fenomenal.

Gracias, es un bonito piropo. Me alegro de que haya gustado y/o servido.

Saludos.