Nota prèvia
Sovint, però, els clients afegeixen contingut a la web usant camps de text amb el suport d'editors visuals. Si la informació a introduir és senzilla i estandaritzable, simplement se'ls pot donar l'opció d'usar unes (poques" opcions de format (negretes, llistes d'elements, etc.), però de vegades els editors han de poder composar el text, adjuntant imatges, etc. En aquests casos, ens podem trobar que els editors trenquen els criteris dels dissenyadors / desenvolupadors.
Pas a pas...
1) L'etiqueta <div> serveix per delimitar bocs en HTML. La usarem en substitució de les cel·les de la taula... Per tant el que correspondria a una cel·la, anirà delimitat per <div>contingut de la cel·la</div>. Però com que es traqcta de fer-ho per usuaris sense coneixements de codi, des d'un editor visual, en aquest cas Ckeditor, i els blocs DIV no es visualitzen en ell, usarem un botó de l'editor que ens permetrà visualitzar-los:
Si no tenim cap DIV, el podem crear, al desplegable de format, canviant l'opció de "Normal" per "Normal (DIV)".
2) Llavors, en cada DIV (bloc) podem clicar amb el botó dret del ratolí, triar l'opció "edita DIV" i introduir-li els estils que volguem que tingui.
Perquè això funcioni els DIV han d'estar englobats dins d'algun altre element, per exemple un altre DIV (sembla un bug del Ckeditor). El més senzill és que cliqueu el botó de "Codi font" i escriviu aquest codi:
<div><div>text de prova</div></div>
Llavors ja podrem usar el botó dret per mostrar les propietats dels DIV.
3) A la finestreta que ens haurà sortit:
seleccionem la pestanya "avançat" i, a la línia d'estil, podem posar els estils (CSS) que ens facin el fet. En aquest cas, per tenir blocs de 400px d'ample, que s'apilin a l'esquerra, i quan no tinguin espai, baixin abaix (el que permet que en una finestra d'un mòbil els veiem un a sota de l'altre, sense necessitat d'usar la barra de desplaçament lateral, expressament prohibida pels manaments de la llei pastafari):
-
float: left;
ens apila (flota) els flocs a l'esquerra) -
width: 400px;
l'amplada dels blocs és de 400px -
border: solid 1px;
encerclarem els blocs amb una vora d'un pixel -
margin: 3px;
entre la vora i el següent element, hi deixarà 3 píxels d'espai -
padding: 2px;
usarem un acolxat de 2px, que és l'espai intern entre el contingut del bloc i la vora
Voleu veure com queda?
http://www.enginyerscivils.cat/ca/Area-Restringida