Encadrer ses textes

Encadrer ses textes

Encadrer ses textes

source


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

 

No ratings yet - be the first to rate this.

إضافة تعليق

You're using an AdBlock like software. Disable it to allow submit.