Elena Vera

Bloc personal de la webmaster de BalearWeb

Provant alguns estils definits al full d'estil CSS

elenavera | 17 Juliol, 2004 01:13 | del.icio.us latafanera.cat meneame.net technorati.com

Marjada amb roselles

Estic fent unes proves per veure si funcionen bé els estils que he definit al full d'estil CSS. He penjat les instruccions per canviar l'aspecte dels articles a la secció de Preguntes més freqüents del Bloc de BalearWeb.

Primer crearé un paràgraf amb una imatge flotant a la dreta. Afegiré un poc més de text perquè la imatge és bastant grossa. Per alinear la imatge a la dreta afegeixo la classe "floatright" a l'etiqueta de la imatge. Així, dins el marcador img incorporo class="floatright". Ara veuré si funciona.

Marjada amb roselles

Sembla que ha anat bé, així que ara provaré el mateix però flotant la imatge a l'esquerra. Per això, utilitzaré la classe "floatleft". És a dir que al codi de la imatge li afegiré class="floatleft".

Afegeixo un poc més de text, dins d'un altre paràgraf, perquè si no se m'ajuntarà tot i no quedarà bé, ja que la imatge és molt grossa. Si es vol jugar amb motles imatges, convé posar molt de text o posar les imatges petites. Afegeixo un poc més de text per compensar... i un poc més. Com que estem utilitzant un disseny líquid, flexible, que s'adapta a la resolució de pantalla del visitant, els diferents elements (text i imatges) agafen tot l'espai que poden i sovint s'ha de compensar entre text i imatges.

Ara vull provar de posar un subtítol centradet

El que he fet és emprar el marcador h3, amb les corresponents etiquetes d'obertura i tancament, i he afegit afegit al marcador la classe "center". Ara veurem què tal va això.

Ara provaré de destacar un fragment de text amb negreta utilitzant la classe "bold" i el marcador span i després un un fragment subratllat utilitzant la classe "underline" i finalment un fragment en cursiva emprant la classe "italic".

Blocs, weblogs i bitàcoles | Següent | Anterior | Comentaris (7) | Retroenllaços (0)

Comentaris

 

Gracias!

Jander | 17/07/2004, 11:59

Es justo lo que preguntaba hace un tiempecillo y no tenía ni idea de como hacer :-) Que los div align="center" por lo visto no son parte del estándar XHTML. En fin, ahora ya se como hacerlo, mil gracias. Voy a ir retocando cosillas del weblog ;-)
 

Re: Gracias!

Jander | 17/07/2004, 12:34

He estado probando con las imágenes y añadirles el class="floatleft" pero si se combina con un ul y los li's, no se ve del todo bien. Por ejemplo en: http://bloc.balearweb.net/post/18/224 (Al menos con mi navegador: Mozilla Firefox)
 

Complicado

Elena | 17/07/2004, 13:05

Combinar bloques flotantes y listas es complicado. Para opciones tan avanzadas, posiblemente lo más práctico es que mantengas tu propia hoja de estilo. De todas formas, haré algunas consultas y algunas pruebas más para ver si encuentro una solución práctica.
 

Tal vez mejora si pones la foto al otro lado

Elena | 17/07/2004, 13:20

Tal vez mejora si pones la foto al otro lado
 

Cierto

Jander | 17/07/2004, 13:44

Si, poniendole un class="floatright" se ve perfecto. Era tan solo que me llamó la atención que con los ul / li no se alinease bien el texto. En fin, así se queda. Muchas gracias :-)
 

Xulu!

gimbo | 13/08/2004, 08:18

Hola, navegant, navegant, he vingut a petar en aquest blog, la veritat es que és molt xulo i força accessible. A més no s'assembla en res a la majoria de blogs que hi ha per internet. Ànims i a seguir fent coses maques! Si trobo una mica de temps potser me'n faig un per mi! :)
Afegeix un comentari
Amb suport per a Gravatars
 
Accessible and Valid XHTML 1.0 Strict and CSS
Powered by LifeType - Design by BalearWeb