Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

dimanche 23 novembre 2008

Encadrer ses textes


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).

Boîte de texte


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.

Les coins arrondis - CornerShop

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.

Coins arrondis - boîte de texte


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


Le bloc div ci-contre est flottant à gauche. Il suffit d'ajouter dans le style du bloc style="float:left;". La marge entre le bloc flottant et le texte (marge de droite pour un bloc flottant à gauche) se définit dans le style du bloc flottant.
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


21 commentaires:

Anonyme a dit…

Sympa comme tutoriel, je suis sur que sa pourrait aider plusieurs bloggeurs . Par contre il faut trouver l'information lorsque nous en avons besoin.

Anonyme a dit…

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.

Prac a dit…

Bonsoir

Paramètres / Elements de la page

Modifier en-tete

Dans la popup qui s ouvre clic sur supprimer image !!

Anonyme a dit…

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.

POUSSINCRI a dit…

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

Anonyme a dit…

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 !

Prac a dit…

Bonsoir Anonyme

Donnez moi l adresse de votre blog, ou un exemple de ce que vous voulez realiser

Anonyme a dit…

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 !

Anonyme a dit…

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 !

Prac a dit…

Bonsoir

J ai vu le resultat, bravo Cookies.

Unknown a dit…

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.

Unknown a dit…

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.

セフレ a dit…
Ce commentaire a été supprimé par un administrateur du blog.
ayoub a dit…

ohlala !!!!!!! quel blog c la meilleur !

Bij Nok a dit…

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

Prac a dit…

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

Bij Nok a dit…

Merci ! je vais tester ça, je reviens ici si j'ai un soucis ;)

Encore merci !

Bij Nok a dit…

Ok , juste rapide et efficace comme réponse; et ça marche du tonnerre !

Merci merci merci

Claire a dit…

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!!!

marianne a dit…

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

Prac a dit…

Bonsoir

@marianne

Voir

le Forum Blogger