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