Un cadre pour ses textes
Avec un peu de CSS (Cascading Style Sheets) il est possible d'encadrer ses textes avec des blocs div
Une boîte de texte
Nous allons créer une boîte de texte, avec un bloc div comprenant 3 blocs encastrés (le titre, le contenu et le pied).
Le code html
<div class="textbox">
<div class="textboxtop">Le titre</div>
<div class="textboxcontent">Le contenu</div>
<div class="textboxbottom">Le pied</div>
</div>
Le style CSS
A configurer selon l'aspect que l'on veut donner à sa boîte de texte. L'ordre border: style size color définit le cadre de la boîte. Les autres instructions se comprennent d'elles-mêmes.
.textbox
{
background-color: #f5e39e;
font-weight: bold;
width: 360px;
color: #000;
text-align: center;
border: solid 2px #de7008;
}
.textboxcontent
{
font-size: 0.75em;
padding: 10px;
}
.textboxtop
{
padding: 5px;
background-color: #f2e9ca;
}
.textboxbottom
{
padding: 5px;
background-color: #f2e9ca;
}
Le résultat
pour centrer la boîte l'encadrer par <div style="text-align: center;"> ... </div>
Viti-Vino *** Liens du Vin ***
Le Blog des Liens du Vin. Le site pour apprécier les vins suisses et découvrir les vins du monde. L'historique du site réalisé avec Google Page Creator (GPC). Les outils Google et le cybermarketing
Des coins arrondis
L'arrondi est réalisé par une image. Le site Cornershop permet de les réaliser en ligne. Définir la couleur de la boîte ainsi que la couleur de la page. Choisir un arrondi de 10 pixels et Transparent = None.
Sauvergarder les 4 images *.gif obtenues. Elles peuvent être hébergées sur Picasa.
La structure des blocs
Le bloc principal comprend 3 blocs div encastrés. Le contenu viendra dans les blocs marqués en jaune.
Le code html
<div class="box">
<div class="boxtop"><div>Le titre</div></div>
<div class="boxcontent">Le contenu</div>
<div class="boxbottom"><div>Le pied</div></div>
</div>
Le style CSS
Il faut reporter dans les classes CSS boxtop, boxtop div, boxbottom et boxbottom div les 4 images *.gif des coins arrondis.
.box
{
background-color: #f5e39e;
font-weight: bold;
width: 360px;
color: #000;
text-align: center;
}
.boxtop
{
background: url(URL/ne.gif) no-repeat right top;
}
.boxtop div
{
background: url(URL/nw.gif) no-repeat left top;
height: 10px;
padding: 5px;
}
.boxbottom
{
background: url(URL/se.gif) no-repeat right bottom;
}
.boxbottom div
{
background: url(URL/sw.gif) no-repeat left bottom;
height: 10px;
padding: 5px;
}
.boxcontent
{
font-size: 0.75em;
padding: 10px;
}
Le résultat
Annuaire du Vin
Annuaire du Vin avec Google Sites. Les outils Google et le cybermarketing duVin.
Faire flotter sa boîte de texte
Une boîte de texte flottante est un bloc div affiché à gauche ou à droite d'un bloc de texte qui s'enroule autour du bloc.
Un exemple
*** Flux Media RSS ***
Des gadgets pour afficher un Diaporama à partir du Flux Media RSS de Picasa, Photobucket, Flickr et Yahoo News. Incorporer ces diaporamas dans le corps du message - l'article du blog d'aide pour Blogger
Pour stopper le flottement, créer un paragraphe avec style="clear:both;".
Si le texte en regard du bloc flottant est plus long que la hauteur du bloc, il s'écoule sous le bloc. Le bloc encadré donne ainsi l'impression de flotter sur le texte.
Modifier le style du blog
Pour incorporer ces nouvelles clauses de style dans le blog, 3 façons
1. Créer une feuille de style externe, qu'il faut héberger ailleurs que chez Blogger, et insérer l'appel de cette feuille entre les tags <head> et </head> (Paramètres / Mise en Page / Modifier le code HTML)
<link href="URL/mon_style.css" type="text/css" rel="stylesheet">
2. Modifier le style du blog et créer une clause style entre les tags <head> et </head> (Paramètres / Mise en Page / Modifier le code HTML)
<style type="text/css">
les clauses de style
</style>
3. Si le style ne s'applique qu'à un seul message, il est possible d'appliquer la clause de style en utilisant un petit code javascript qui va charger le style lors de l'affichage du message. C'est la méthode retenue pour ce billet, j'ai chargé la feuille de style externe avec ce petit javascript :
<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'URL/mon_style.css';
cssNode.media = 'screen';
cssNode.title = 'une feuille de style pour 1 post';
document.getElementsByTagName("head")[0].appendChild(cssNode);
</script>
Ce script peut être placé au debut du message. Il faut saisir le code sans retour à la ligne (sinon Blogger incorpore la balise <br/> )
Plus d'informations
Créer ses coins arrondis en ligne avec CornerShop
Arrondir ses Photos en ligne avec RoundPic
Les codes couleurs en ligne avec ColorSchemer
Un style pour un seul message, une explication sur le Blog Viti-Vino
Encadrer ses photos, quelques astuces sur le Blog d'Aide pour Blogger
Articles
21 commentaires:
Sympa comme tutoriel, je suis sur que sa pourrait aider plusieurs bloggeurs . Par contre il faut trouver l'information lorsque nous en avons besoin.
Bonjour,
Je tape un peu au hasard une question sans savoir si je suis dans la bonne rubrique. Ce que je ne pense pas d'ailleurs. :-(
Alors voilà. Dans l'encart de mise en page de Blogger il est proposé pour le titre de blog d'ajouter une image ce que j'ai fait sous l'option : depuis mon pc. Seulement voilà je voudrais la supprimer mais c'est impossible.
Que dois-je faire? Y a-t-il un moyen par le code HTML de la page?
Merci d'avance pour votre réponse.
Bonsoir
Paramètres / Elements de la page
Modifier en-tete
Dans la popup qui s ouvre clic sur supprimer image !!
Bonjour,
Merci beaucoup pour votre réponse mais justement quand je fais tout ça et que la fenêtre popup s'ouvre impossible de supprimer l'image. Je dois préciser que c'est un .gif. Est-ce que j'ai bloqué quelque chose par le poids de l'image? Je ne le sais pas.
Mais j'ai fait autrement, j'ai repéré dans le modèle de la page, dans l'html, l'écriture pour cette image et j'ai mis "no" je ne sais plus où mais ça marche.
Je me suis un "gadget" et j'ai placé mon image là.
Bonne journée et encore merci.
Au secours ! j'ai un problème avec mon blog http://poussincri.blogspot.com . En fait sur Mozilla Firefox il s'affiche correctement mais sur Internet Explorer c'est la castasptrophe: la colonne de droite est en bas droite au lieu d'être à 'hauteur normal'... J'ai changé de modèle, viré des trucs de la colonne etc, rien y fait! S'il vous plait aidez moi j'ai besoin de vous, Merci
Bonjour !
J'ai une question et je n'arrive pas a trouver des tutos qui expliquent ce que je veux ! C'est en rapport avec celui-ci, car il s'agit d'un remplissage. En effet, est ce possible de remplir le cadre de notre colonne de texte tout en gardant un fond personnalisé ? J'ai essayé avec plusieur truc comme padding ...mais cela ne marche pas !!
Merci d'avance !
Bonsoir Anonyme
Donnez moi l adresse de votre blog, ou un exemple de ce que vous voulez realiser
Alors je vais vous donner cet exemple simple d'un blog comme j'aimerais faire avec le remplissage de fond !
http://c00kies-est-une-cuillere-a-absinthe.blogspot.com/ voila le lien !
Merci !
C'est encore moi, je voulais dire que j'ai enfin trouvé, il suffisait d'ajouter un background là où je le voulais !!!
Merci qd même !
Bonsoir
J ai vu le resultat, bravo Cookies.
Bonjour à tous,
--> 出張ホスト : Bien dit ! pas entièrement d'accord sur tout mais c'est bien envoyé, ça ! :-)
Trève de plaisanteries. Franchement, quel intérêt de poster un truc pareil ici ? (y'a même pas de lien dedans !)
a+
BB.
Re,
J'ai traduit ça avec les outils linguistiques de Google et voilà le résultat :
« Augmentation pour les femmes membres, est le manque de Voyage du site d'accueil. Femmes出向KI domicile ou à l'hôtel, donc je suis à la recherche d'un emploi à temps partiel pour vous aider à rencontrer des hommes qui ont le désir, Si vous êtes intéressé, je vous remercie une inscription gratuite à partir de la page TOP »
C'est pas intéressant, ça ? :-)
a+
BB.
ohlala !!!!!!! quel blog c la meilleur !
Bonjour,
j'essaie de faire des textbox mais rien n'y fait (mon blog : http://bijnok-wheezes.blogspot.com/p/firefox-4.html) ; je voudrais les bouts de codes dans des encadrés avec fond blanc translucide mais rien qu'un simple encadré ne passe pas...
Merci de m'aider (est-ce que le style du blog ne prend pas priorité sur le style que j'attribut au texte?)
Bijnok"at"gmail.com
Bonsoir
@Bijnok
Mettez votre style pour la classe .boxcontent, par presentation / Outils de creation de modele / avance / ajoutez CSS
par exemple
.boxcontent
{
background: infobackground;
border: solid 3px #c00;
padding: 4px;
font-family: Arial, sans-serif;
font-size: .9em;
}
Cdt
Merci ! je vais tester ça, je reviens ici si j'ai un soucis ;)
Encore merci !
Ok , juste rapide et efficace comme réponse; et ça marche du tonnerre !
Merci merci merci
Super blog, incroyable ce que les gens savent faire à partir de codes html ou css!
Moi je n'y arrive jamais et rien ne fonctionne, mais je ne désespère pas arriver à encadrer ce que je veux un jour!!!
bonjour,depuis des mois(!!) je cherche a intégrer des boutons d'achat paypal, mais dès que je fait autre chose que d'inscrire le code html dans un environnement vierge, ça ne fonctionne plus. je ne peut donc mettre de photos ni d'ailleurs faire quoique ce soit!! paypal me renvoie vers blogger; y'en a marre au secours
Bonsoir
@marianne
Voir
le Forum Blogger
Enregistrer un commentaire