Les tuto 2 Demolite

Blog tuto, aide à la création et au design des blogs et sites internet, Montage photo, trucs et astuces, logiciels gratuits...

01 décembre 2010

Arrondir les angles de #Content et des colonnes

Posté par Demolite - Dans la catégorie Canalblog
Tags : , , , , ,

Non compatible avec Explorer.

Voici comment Arrondir les angles de votre page centrale, autrement dit de Content.

Rendez-vous dans la feuille de style générale et collez le code suivant juste en dessous de content comme sur la capture.

.fullsample {
        width: 450px;
        border-radius: 10px 10px;
        -moz-border-radius: 10px;
        background-color: #CCCCCC;
        padding: 5px;
}

Capture4

Si votre Content fait 500px vous devez laisser Width: 450px
Si, il est plus grand, augmentez la valeur de Width.

Pour changer la couleur du fond modifiez : background-color: #CCCCCC;

Maintenant vous pouvez valider et ouvrir la page d'accueil

Repérez les balises suivantes : <div id="content"><div class="blogbody"> et collez la balise ci-dessous comme sur la capture.

<div class="fullsample">

</div>

http://p8.storage.canalblog.com/82/33/251752/11861228.jpg

<div class="fullsample"> doit être en tout début de content et le </div> tout à la fin.

Pour que toutes vos pages soient identiques, vous devez répéter l'opération sur  les autres pages.

Si vous voulez arrondir vos colonnes, vous devez créer un deuxième bloc, et ajouter un 2 pour le différencier du premier.
Vous le placez sous #rightbar comment sur la capture.

.fullsample2 {
        width: 450px;
        border-radius: 10px 10px;
        -moz-border-radius: 10px;
        background-color: #CCCCCC;
        padding: 5px;
}

Capture6

Vous ajoutez <div class="fullsample2"> dans la page d'accueil en tout début de rightbar et le </div> tout à la fin, comme pour Content.

http://p9.storage.canalblog.com/97/66/251752/11861825.jpg

Même chose pour la  colonne de gauche leftbar sauf que vous n'avez pas besoin de recréer un bloc dans la feuille de style, comme les colonnes sont de la même dimensions, il y a juste à placer la balise, dans la page d'accueil comme pour rightbar.

<div class="fullsample2"> et </div>

Voilà, j'espère que c'est assez clair...sinon n'hésitez pas à demander de l'aide.


Rappel : Avant de modifier vos pages html, faites une copie ! <---Tuto ici


« Accueil 1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41