Top articles
-
Design élastique mais pas trop - 4
Le point de départ Même chose que dans l'article précédent mais, négligence ou imprudence, on ajoute quelque chose à la description de #ln_1 : #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px;overflow:hidden} #cl_1_0 {width:200px;...
-
Ligne de modules - 5
Le point de départ Nous étions arrivés là : #global {width:1000px} #cl_1_0 {float:none;width:auto} #cl_1_0 .box {float:left;width:190px} #cl_1_1 {width:800px} #cl_1_2 {width:200px} Nous étions là et "c'était tout cassé", pourtant 800+200=1000. Alors ?...
-
Échangiste - 2
Une application directe des (longues) explications de cet article. Cette fois les deux colonnes de modules sont à droite, toujours sans toucher à la mise en page du blog ! Le bout de CSS miraculeux : #cl_1_0 {float:right} Explications Cette fois la 1ère...
-
Design élastique mais pas trop...
Ce design est élastique en ce sens que tout est rigide (!) sauf la colonne des articles (et les bannières). Faites varier cette fenêtre en largeur, vous verrez que les marges gris foncé ne changent pas ni les colonnes de modules. Seuls les articles suivent...
-
Texte libre à volonté - 7 Récapitulation
Créer un seul module de texte libre, lui donner un identifiant XHTML ("stock" ou autre). Dans l'éditeur de texte, coller en mode source ce genre de code
Titre de petit module
...Design élastique mais pas trop - 6
Le point de départ Là, il faut récapituler un peu pour trouver la suite, reconstruire ce qui est affiché en commençant par l'élément qui emballe tous les autres : body (hé oui, il faut remonter jusque là) est élastique par défaut et occupe toute la fenêtre....
Design élastique mais pas trop - 1
Le point de départ On commence en douceur : #global {padding: 0px; margin: 0px 50px; width: auto} #cl_1_0 {width:200px;} #cl_1_2 {width:200px;} #cl_1_1 {margin:0 10px; width:530px;} Et on observe déjà des choses intéressantes en changeant la largeur de...
Design élastique mais pas trop - 10
Le point de départ On pourrait penser traiter la colonne de droite comme celle de gauche : #cl_1_2 {width:200px; margin-right:-210px} Mais çe ne suffit pas, elle reste collée au bloc des articles. Qu'à cela ne tienne, rajoutons une marge gauche : #cl_1_2...
Ligne de modules - 2
Le point de départ Nous en sommes là : #cl_1_0 {float:none;width:auto} Maintenant que la colonne est devenue ligne, il faut que les modules s'y rangent de gauche à droite plutôt que de haut en bas. On fait comment, mmmh, on fait comment ? Mais oui, on...
Texte libre à volonté - 3 Créer le module
Le texte du module Copiez (avec Ctl-C) le code que voici :
Sha...
GA
......dok
Texte libre à volonté - 4 Nettoyer le grand module : marges et padding
La première chose à faire pour rendre ce grand module un peu plus discret est de mettre à zéro ses "margin", "padding" et "border" : #stock {margin:0; padding:0; border:0} Tant qu'on y est, autant lui donner aussi un fond transparent : #stock {margin:0;...
Texte libre à volonté - 2 Anatomie d'un module
Regardez le code source d'une page de blog et cherchez-y un de vos modules. Ou alors faites-moi confiance et lisez ce qui suit. Un peu de HTML Un module de texte libre se présente à peu près ainsi :
Texte...
Ligne de modules - 3
Le point de départ Nous en sommes là : #cl_1_0 {float:none;width:auto} #cl_1_0 .box {float:left;width:190px} Le plus intelligent est fait, reste à aligner tout ça "bien propre en ordre". Je décide, démocratiquement à moi tout seul, de marcher par multiples...
Design élastique mais pas trop - 2
Le point de départ Passons aux choses sérieuses : #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px} #cl_1_0 {width:200px;} #cl_1_2 {width:200px;} #cl_1_1 {margin:0 10px; width:530px;} #ln_1 (la ligne articles et modules) reçoit...
Texte libre à volonté - 1 Faire joujou avec HTML
Si vous n'avez jamais utilisé l'onglet "édition avancée" de l'éditeur OB, c'est le moment de vous y mettre ! Sinon vous pouvez passer à l'article suivant. Vous êtes toujours dans l'admin de votre blog, avec le module sous les yeux ? Cliquez sur l'onglet...
Texte libre à volonté - 5 Nettoyer le grand module : titre et pied de module
État des lieux Voilà où en est notre CSS : #stock {display:block; margin:0; padding:0; border:0; background:transparent} #stock .box-titre {display:none} /* veut cacher le titre de stock */ et le résultat est un peu surprenant : le titre du grand module...
Ligne de modules - 1
Le point de départ On commence par le vif du sujet : faire que la 1ère colonne de modules ne soit plus une colonne – en tout cas plus une colonne voisine des deux autres. Plus simplement dit : on veut qu'elle se comporte comme, mettons, la bannière du...
Ligne de modules
Mignon, non ? Pour obtenir ça il n'y pas besoin de cocher quinze cases enfouies au fond des menus. Il faut seulement se rappeler un fait souvent perdu de vue : les lignes et les colonnes d'un blog ne sont que des 'div' du modèle le plus banal, écrites...
Texte libre à volonté
Un blog OB comporte au plus 8 modules de texte libre. Comme ce total inclut l'en-tête, le pied de page et l'éventuel article d'accueil, il se limite en pratique à 5 modules dans les colonnes. Cela ne suffit pas toujours mais un peu d'ingéniosité permet...
Ligne de modules - 4
Le point de départ Nous étions là : #global {width:1000px} #cl_1_0 {float:none;width:auto} #cl_1_0 .box {float:left;width:190px} Donnons maintenant 200 pixels de large à la deuxième colonne de modules et 800 à celle des articles : #cl_1_1 {width:800px}...
Design élastique mais pas trop - 5
Le point de départ Maintenant on pousse le principe jusqu'au bout, jusqu'à 200 pixels : #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px} #cl_1_0 {width:200px; margin-left:-200px} #cl_1_2 {width:200px; margin-right:-200px} #cl_1_1...
Texte libre à volonté - 6 Nettoyer le grand module : l'intérieur
Le CSS du moment, tel qu'appliqué à cet article : #stock {display:block; margin:0; padding:0; border:0; background:transparent} #stock .box-titre {display:none} #stock .box-content .box-titre {display:block} On y est presque : le titre et l'éventuel pied...
Échangiste - 1
Hihi.. le titre aguichera-t-il Gogol ? Ce design n'en est pas vraiment un, plutôt un exercice de style : vous avez remarqué que les deux colonnes de modules sont permutées ? Et cela sans toucher à la configuration du blog. Le bout de CSS miraculeux :...
Design élastique mais pas trop - 7
Le point de départ #global {padding: 0px; margin: 0px 50px; width: auto} #ln_1 {margin:0 200px} #cl_1_0 {width:200px; margin-left:-200px} #cl_1_2 {width:200px; margin-right:-200px} #cl_1_1 {margin:0; width:100%;} Je vous redonne le CSS obtenu à l'étape...
Échangiste - morale
Décidément ce titre m'inspire… Brrhhumm, revenons au CSS. En voyant ces trois exemples de jeu avec la structure du blog, vous avez peut-être eu l'impression qu'on pouvait placer n'importe quelle colonne n'importe où, sans tenir vraiment compte de la configuration...