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

  #1 (permalink)  
Antiguo 29/12/2008, 18:12
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
Aporte: Guía de Migración a XHTML+CSS - Parte II

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
__________________
Visita mi nueva web idplus.org
  #2 (permalink)  
Antiguo 29/12/2008, 18:22
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias mik!!!!!
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #3 (permalink)  
Antiguo 29/12/2008, 18:37
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 3 meses
Puntos: 2113
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Muy bueno, si señor!
__________________
- León, Guanajuato
- GV-Foto
  #4 (permalink)  
Antiguo 29/12/2008, 18:39
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #5 (permalink)  
Antiguo 30/12/2008, 08:48
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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

Aresillo!!
Cuando quieras nos ponemos con lo otro...
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #6 (permalink)  
Antiguo 30/12/2008, 17:39
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 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!!
  #7 (permalink)  
Antiguo 30/12/2008, 17:52
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

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

Gracias
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 30/12/2008, 18:22
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
Una guía breve, concisa y clara, pero que muy clara.
Gracias, me alegro de que te guste. Espero que sirva para algo

Cita:
Iniciado por kseso? Ver Mensaje
Ya sólo te queda empaquetar toda "Araudi" en un .rar y hacer spam con él.
¿No te ha llegado el correo ya?
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 31/12/2008, 11:59
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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)
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #10 (permalink)  
Antiguo 31/12/2008, 12:10
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

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

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
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" />"

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

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
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
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 31/12/2008, 13:44
 
Fecha de Ingreso: noviembre-2008
Mensajes: 371
Antigüedad: 9 años
Puntos: 3
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Gracias Mikmoro te pasaste !!!! te regalo a mi hermana!1 XD!
  #12 (permalink)  
Antiguo 31/12/2008, 14:39
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:
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.

Cita:
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?

Cita:
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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos

Última edición por DoPeY-BBS; 31/12/2008 a las 21:41
  #13 (permalink)  
Antiguo 01/01/2009, 17:45
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

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

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 01/01/2009, 17:47
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 jafp_pe Ver Mensaje
Gracias Mikmoro te pasaste !!!! te regalo a mi hermana!1 XD!
¿Cóme mucho?
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 01/01/2009, 18:16
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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

Cita:
#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;
}
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos

Última edición por DoPeY-BBS; 01/01/2009 a las 18:26
  #16 (permalink)  
Antiguo 01/01/2009, 18: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

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:
Cita:
#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.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 01/01/2009, 18:49
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #18 (permalink)  
Antiguo 01/01/2009, 18:53
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 DoPeY-BBS Ver Mensaje
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.
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 01/01/2009, 19:14
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:
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).
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #20 (permalink)  
Antiguo 04/01/2009, 11:25
Avatar de CircuitoX  
Fecha de Ingreso: julio-2008
Mensajes: 756
Antigüedad: 9 años, 4 meses
Puntos: 21
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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

Pd: Muy interesante la migración
  #21 (permalink)  
Antiguo 05/01/2009, 00:16
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

Gracias, me alegro de que te guste.

Saludos.
__________________
Visita mi nueva web idplus.org
  #22 (permalink)  
Antiguo 16/01/2009, 19:01
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 9 años
Puntos: 17
De acuerdo Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Cita:
Iniciado por Mikmoro Ver Mensaje
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
  #23 (permalink)  
Antiguo 16/01/2009, 22:09
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

Muy bien explicado, como siempre: felicitaciones Mikmoro !!
  #24 (permalink)  
Antiguo 13/04/2009, 14:49
Avatar de MBurton  
Fecha de Ingreso: abril-2009
Mensajes: 1
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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!
  #25 (permalink)  
Antiguo 12/05/2009, 04:39
 
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.
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:
Cita:
/* 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
  #26 (permalink)  
Antiguo 12/05/2009, 17:04
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

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

Veré qué puedo responderte:
Cita:
Iniciado por kike2lucas Ver Mensaje
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.

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

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

Cita:
Iniciado por kike2lucas Ver Mensaje
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
Cita:
#Wrapper {
margin-left: auto;
margin-right: auto;
position: relative;
width: 800px;
height: 100%;
text-align: center;
border: 1px dotted #f00;
}
Cita:
Iniciado por kike2lucas Ver Mensaje
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.
Cita:
Iniciado por kike2lucas Ver Mensaje
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.
Cita:
Iniciado por kike2lucas Ver Mensaje
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.
  #27 (permalink)  
Antiguo 18/05/2009, 09:58
 
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

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
  #28 (permalink)  
Antiguo 20/05/2009, 04:39
Avatar de CopperDavid  
Fecha de Ingreso: mayo-2009
Ubicación: Madrid
Mensajes: 40
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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
  #29 (permalink)  
Antiguo 20/05/2009, 04:45
Avatar de CopperDavid  
Fecha de Ingreso: mayo-2009
Ubicación: Madrid
Mensajes: 40
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Aporte: Guía de Migración a XHTML+CSS - Parte II

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

Muchas gracias.

SALU2
  #30 (permalink)  
Antiguo 20/05/2009, 05:32
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 CopperDavid Ver Mensaje
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.

Cita:
Iniciado por CopperDavid Ver Mensaje
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.
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 22:53.