Mi primer trabajo en CSS + XHTML 1.0

A ver si es verdad
;)

Gracias Borja un saludo

P.D.: Cuando baje a Madrid no voy a tener pasta pa pagarte la garn ronda de cañas que te debo jajajaa

Sip

Por esto entiendo que el zoom: 1 se puede usar en la css secundaria y sería apto para un AA no?

Gracias Borja

demssite

Gracias Borja, lo había solucionado con:

<code>zoom: 1;
display: inline-block;</code>

Pero he leído que eso no valida ¿no? por lo menos el zoom

Sí, era otro de los pasos lógicos, eso vale para darle haslayout a Explorer en elementos flotados (que tenía pinta tu pete de que fuera algo de eso).

Lo que pasa es que si tienes declarado un width o height (o flotado) el elemento padre a veces no hace falta recurrir al apaño.

Zoom no valida, pero para ser AA debes validar... y ahora ya sabes por qué hay que sacar todos los hacks y apaños a una CSS específica para Explorer 6 (además de asegurarte de que cuando salga Explorer 9 no tenga un bug que afecte al zoom y te de problemas con una propiedad que nunca debería haber llegado a la CSS principal).

Gracias Borja, lo había solucionado con:

<code>zoom: 1;
display: inline-block;</code>

Pero he leído que eso no valida ¿no? por lo menos el zoom

¿cuál es la forma más correcta/adecuada de hacerlo?

Prueba a ponerle esto de primeras dadas en la CSS para Explorer 6:

fieldset, ol, ul, li, dt, dd, a
{
height: 1%;
}

Y a leerte esto cuando tengas un rato relajado: http://www.satzansatz.de/cssd/onhavinglayout.html

Y cuando lo hayas hecho vemos de nuevo donde falla

demssite

PD: Borja, posiblemente al igual que antes lo de /* 1EM=10px */ haya partes del cñodigo que te suenen bastante ....jejeje, espero que no te parezca mal y no te lo tomes como "plagio"(que mal suena) sino como ¡referencia!.

Ya veo ya, jajaja, no te preocupes hombre, el código es público y yo he aprendido mucho de ver cosas de otra gente por ahí.

Hola gentes, sigo aquí haciendo pruebas y pegándome con el css y el fu**ing crossbrowsing q me trae loco (supongo que será hasta que le pille el truco).

He subido el index con los css aqui no se que pasa en FF se ve bien (la cabecera q es con lo que estoy) en ie7 casi bien, pero en ie6win es un desastre me sale todo hecho un kaos, he estado mirando por ahí los bugs de ie6 y no encuentro que puede ser, así que cualquier sugerencia se agradece.

PD: Borja, posiblemente al igual que antes lo de /* 1EM=10px */ haya partes del cñodigo que te suenen bastante ....jejeje, espero que no te parezca mal y no te lo tomes como "plagio"(que mal suena) sino como ¡referencia!.

Un saludo y muchas gracias chicos, me estáis siendo de gran ayuda.

Diego

txuma

<div class="quote">
orange

<blockquote>Txuma tiene un rehen que me impide decirle lo que se merece...</blockquote>
</div>

xD
¿que te compras esta vez? :)

orange

Txuma tiene un rehen que me impide decirle lo que se merece...

xD

Txuma tiene un rehen que me impide decirle lo que se merece...

zigotica

por cierto, ya puedes meterte con el txuma, sacrílego donde los haya

Chivato!

orange

Arroz a JSBanda he tomado hoy...
no esperaba menos :)

por cierto, ya puedes meterte con el txuma, sacrílego donde los haya

demssite

/* 1EM=10px */

jajaja... este comentario me suena. Pero la cosa queda redonda ya cuando metes esto otro en la hoja de estilos para Explorer 6 e inferiores

<code>body {
font-size: xx-small; /* Explorer 5.x */
fon\t-size: x-small; /* Explorer 6 */
}</code>

demssite

He definido el texto por defecto x-small, es decir lo que equivale a 10px para que sea más cómodo hacer cuentas, pèro si la mayoría del texto del cuerpo es de 12 px sigue compensando ponerlo a x-small por defecto y poner en el del cuerpo a 1.2em, o por el contrario es mejor definir el el body el tamaño por defecto a small (12 px aprox)?

El body SIEMPRE, repito SIEMPRE hay que definirlo con una palabra clave, la que elijas ya es cosa tuya (lo digo porque small son 12px si asumimos que no se han cambado los tamaños por defecto).

Mi recomendación personal es que mantengas la base 10 en todo lo que puedas, te va a facilitar bastante la vida. A no ser que sepas perfectamente lo que haces y controles muy bien las herencias.

PD: Arroz a JSBanda he tomado hoy...

ya, dice que está fuera por trabajo, pero pa mi que es una excusa para ir a comer un arroz a banda...

Sé de buena tinta que hoy esta ocupado, así que lo mismo se le pasa por alto mi comentario :P

uy como te oiga el naranjo... :)

demssite

He definido el texto por defecto x-small, es decir lo que equivale a 10px para que sea más cómodo hacer cuentas, pèro si la mayoría del texto del cuerpo es de 12 px sigue compensando ponerlo a x-small por defecto y poner en el del cuerpo a 1.2em, o por el contrario es mejor definir el el body el tamaño por defecto a small (12 px aprox)?

Yo voto por ponerlo siempre como x-small. Facilita las cuentas, no sólo para tamaños tipográficos, sino también para poder utilizar medidas relativas en los tamaños de las 'cajas'.

Aunque si os soy sincero (y sé que me voy a ganar alguna crítica), cada vez estoy volviendo más a la teoría de utilizar pixels para definir todos los tamaños.... pero ya lo hablaremos, que hoy no estoy para discutir :)

Estoy empezando con la hoja de estilos y tras leer varias referencias y mirar por posts del foro he llegado a lo que creo es lo mejor para empezar, sobre todo en cuanto al tema de medidas relativas y fuentes. Os pongo el codigo:

<code>/* ESTILOS GENERALES */

* { margin: 0; padding: 0; }

body {
font-size: x-small; /* 1EM=10px */
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #333333;
}

h1 {
font-size: 4em;
color: #d71c1a;
}

h2 {
font-size: 3em;
color: #000099;
}

h3 {
font-size: 1.4em;
font-weight: bold;
color: #000099;
}

h4 {
font-size: 1.2em;
font-weight: bold;
color: #000099;
}
</code>

He definido el texto por defecto x-small, es decir lo que equivale a 10px para que sea más cómodo hacer cuentas, pèro si la mayoría del texto del cuerpo es de 12 px sigue compensando ponerlo a x-small por defecto y poner en el del cuerpo a 1.2em, o por el contrario es mejor definir el el body el tamaño por defecto a small (12 px aprox)?

Un saludo y muchas gracias.

Diego

Una cosilla más, ahora que ya casi tengo el xhtml, a la hora de ponerse con el css, le estoy dando bastantes vueltas de como empezar. ¿Cómo soléis hacerlos vosotros?

Un saludo y gracias!!!!
Diego

A ver ahí reside mi duda. Están 2 artículos, en este caso el Ultimo Articulo y el Articulo Mejor Valorado que están destacados, luego dentro del Ultimo Articulo al pie de el salen Otros artículos recientes, y dentro de Articulo Mejor Valorado al pie salen Otros artículos valorados positivamente.

La cosa es que la importancia de estos dos ha de ser superior a la de los otros que son más antiguos en el primer caso o menos valorados en el segundo.

La cosa es que un h3 no se puede poner pòrque no tienen la misma importancia.

¿Quizá conmvendría poner un h4?

Otra duda que tengo es que bajo la cabecera y el menu principal, tengo una noticia destacadacon un banner y el cuadro de login que hacen un bloque, lo que llamo &lt;Sub&gt; porque no se me ocurre un nombre más semantico... o correcto, ¿cómo podría llamarse eso?

Gracias gentes
Un saludo.

Diego

Le he echado un vistazo muy por encima. Tiene muy buena pinta, pero hay algunas cosas sobre la estructura que no me parecen muy finas (o al menos no entiendo por qué son así).

¿Por qué 'Artículo 4' los marcas como un encabezado de tercer nivel (h3) y el resto de 'Artículo X' los marcas como párrafos?

Hola gentes, tras unos días pegándome y no sin vuestra ayuda he logrado preparar el xhtml de una plantilla, pero antes de ponerme a saco con el css me molaría que le echaséis un ojo y me comentáseis.

Aquí os dejo el enlace:
Enlace a xhtml

Ahh, debido a temas de confidencialidad he sustituido algun texto.

Un saludo y gracias de antemano.
Diego

txuma

<div class="quote">
orange

<blockquote>... y que nos la cogemos con papel de fumar</blockquote>
</div>

En eso sí que estoy de acuerdo al 100% xD
jaja, y yo también :P

orange

... y que nos la cogemos con papel de fumar

En eso sí que estoy de acuerdo al 100% xD

txuma

Lo que no tengo tan claro es meter un 'strong', que significa 'más fuerte', 'más destacado', donde no es necesario dar 'más fuerza'. Si por cuestiones de la maquetación necesitamos marcado extra, yo casi prefiero el que no aporta contenido semántico al código: span.

Efectivamente es por cuestiones de maquetación. Yo prefiero "destacarlo" porque las etiquetas de un formulario me parecen palabras a destacar dentro de una página, pero pasan 2 cosas: que eso va a gustos y que nos la cogemos con papel de fumar

XD

orange

jajaja

<div class="quote">
zigotica

<blockquote>[label for="nombre"][strong]Nombre[/strong]
[input type="text" id="nombre" name="nombre" value="Nombre" /][/label]</blockquote>
</div>

Esto es lo que utilizo yo. A mi modo de ver es la solución más semántica, práctica para maquetar por CSS y que cumple todos los puntos de accesibilidad.

Es la más accesible, en eso estoy de acuerdo. Siempre es mejor meter el input dentro de su correspondiente label. Lo que no tengo tan claro es meter un 'strong', que significa 'más fuerte', 'más destacado', donde no es necesario dar 'más fuerza'. Si por cuestiones de la maquetación necesitamos marcado extra, yo casi prefiero el que no aporta contenido semántico al código: span.

jajaja

zigotica

[label for="nombre"][strong]Nombre[/strong]
[input type="text" id="nombre" name="nombre" value="Nombre" /][/label]

Esto es lo que utilizo yo. A mi modo de ver es la solución más semántica, práctica para maquetar por CSS y que cumple todos los puntos de accesibilidad.

Pero siempre caben opiniones. En esto de la accesibilidad te verás muchas veces caminando por el filo de la navaja.

a mi lo que no me gusta es esto
[label for="nombre"][strong]Nombre[/strong]
[input type="text" id="nombre" name="nombre" value="Nombre" /][/label]
o
[label for="nombre"][span]Nombre[/span]
[input type="text" id="nombre" name="nombre" value="Nombre" /][/label]
pudiendo hacer esto otro:
[label for="nombre"]Nombre[/label]
[input type="text" id="nombre" name="nombre" value="Nombre" /]
:P

A Sergi le gusta la explícita, pero yo digo que utilizar la implícita nos aporta ventajas de accesibilidad y no cuesta nada
:x