ARRONDIR LES ANGLES 2

17 novembre 2007

A la demande d'Audinette et Oummourym

Mieux vaut tard que jamais comme on dit...
Mais comme ce tuto est plutôt galère à expliquer et que je ne l'ai plus trop en tête...

Il va falloir que je me concentre...

Alors, cet fois ça marche avec Firefox et Internet explorer, par contre vous ne pouvez pas cumuler les smileys dans les commentaires et les angles arrondis...ça bloque sur la page d'un message.

Ouvrez votre feuille de style et coller le code ci-dessous :

.relsample { width: 490px; position: relative; background-color: #FFFFFF; }
.relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right { height: 19px; width: 19px; background-repeat: no-repeat; position: absolute; background-color: #0e1a4d; }
.relsample .top_left { top: 0px; left: 0px; background-image: url("Adresse angle haut gauche"); z-index: 0; }
.relsample .top_right { top: 0px; right: 0px; background-image: url("Adresse angle haut droit"); z-index: 1; }
.relsample .bottom_left { bottom: 0px; left: 0px; background-image: url("Adresse angle bas gauche"); z-index: 2; }
.relsample .bottom_right { bottom: 0px; right: 0px; background-image: url("Adresse angle bas droit"); z-index: 3; }
.relsample .content { position: relative; padding: 12px; z-index: 4;
}

La première ligne de ce code correspond à la largeur du "nouveau content" et sa couleur #FFFFFF.

Dans cet exemple, le content d'origine (page centrale) fait 500px de large et son code couleur est #0e1a4d (ligne en dessous) pour que les angles apparaissent correctement le nouveau content doit faire 490px.

Les lignes suivantes correspondent aux angles...chaque angle est représenté par une image.

Vous devez coller l'adresse de vos images sur la ligne de code qui correspond au bon angle.

Faites un clic droit sur les 4 angles puis enregistrer l'image sous :

Maintenant que vous avez vos 4 angles, il faut leur donner la couleur que vous désirez.
Ouvrez vos images dans Photofiltre et changez la couleur.

Importez vos images dans un Nouveau message et récupérez l'adresse de vos angles.

Ensuite ouvrez votre page d'accueil et descendez sur la ligne de code qui annonce le début de Content :

</div></div><div id="content"><div class="blogbody">

Vous devez coller le code suivant à la ligne, juste en dessous.

<div class="relsample">
	<div class="top_left"></div>
	<div class="top_right"></div>
	<div class="content">

Descendez ensuite et repérez la ligne de code qui annonce la fin de Content :

<$CBControlNavLinks$></div></div><div id="rightbar"><div class="navlinks">

Puis collez juste au dessus le code suivant :

</div>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</div>

Le contenu de Content se trouve entre ces 2 codes et va permettre de rendre ses angles arrondis !
Voir le résultat ici.

Voilà...c'est pas facile à expliquer, j'espère que c'est assez clair.
Si vous avez des questions...n'hésitez pas ;-)

Posté par Demolite à 21:54 - Commentaires […] - Permalien [#]

Partager cet article

Vous aimez ?

0 vote

CHANGER DE CURSEUR

DIRIGIREZ VOS VISITEURS VERS UNE AUTRE PAGE

Commentaires

oummourym

27/01/2008 22:28

Bonsoir,<br /> <br /> Merci beaucoup Ma chère Démolite pour ce tuto, je vais essayer de potasser le truc afin de pouvoir l'utiliser comme il faut !<br /> <br /> T'es trop forte et merci aussi pour le petit mail, trop sympa !<br /> <br /> Biz

Ludwiginnocent

27/11/2007 15:15

Merci pour ces réponses rapides... :)<br /> <br /> Alors je m'y suis replongé (pour l'instant seulement sur la page d'accueil tant que je ne suis pas au point).<br /> <br /> Je pense avoir trouvé les zones concernées mais... vas savoir pourquoi je n'ai qu'un coin arrondi sur les 4, et ce pour la colonne de gauche et celle de droite... j'ai dû légèrement me planter quelque part :lol:<br /> <br /> Je continue à chercher ;)<br /> <br /> A bientôt madame !

Demolite !

27/11/2007 08:18

Hello [Salut]<br /> <br /> Je suis absente pour la journée, mais je me penche sur ton cas dés que j'ai 5 minutes...<br /> <br /> En attendant :<br /> <br /> Pour rendre les colonnes arrondies c'est la même manip que pour #content...<br /> <br /> Tu dois placer "les codes" dans "la page d'accueil" et les mettre en "début" et en "fin" de colonnes (par rapport aux codes qui correspondent aux colonnes...)<br /> <br /> puis créer un nouveau bloc de codes comme pour #content dans la "feuille de style" en changeant la valeur de "width: 490px;" dans la première ligne et en ajoutant un "1" à .relsample :<br /> <br /> <br /> .relsample1 { width: 190px; position: relative; background-color: #FFFFFF; }<br /> <br /> <br /> et un "2" pour l'autre colonne :<br /> <br /> .relsample2 { width: 190px; position: relative; background-color: #FFFFFF; }<br /> <br /> <br /> avec les angles de la bonne couleurs ;-)<br /> amuses toi bien...[Chesse]<br /> <br /> A+

Ludwiginnocent

26/11/2007 19:58

Re-bonsoir !<br /> <br /> J'ai réussi à régler le problème de centrage en remplaçant 490 par 480 sur la première ligne du code que tu donnes:<br /> <br /> .relsample { width: 480px; position: relative; background-color: #FFFFFF; }<br /> <br /> Et ça passe :)<br /> Par contre je me demande encore comment l'appliquer aux blocs de gauche et de droite, et les descendre un peu (les éloigner de la bannière).<br /> <br /> Merci encore pour tes précieux tutos !

Ludwiginnocent

26/11/2007 17:20

Bonjour !<br /> <br /> Voici deux jours que je bosse un peu sur la page de notre groupe et je dois dire que ton blog m'a bien dépanné... Bravo pour ce côté "pédagogie pour les nuls" très efficace.<br /> <br /> Bon j'ai réussi à mettre mes coins arrondis sur la partie centrale (pas sur les panneaux de droite et de gauche) mais j'ai un souci de centrage du contenant. J'imagine que la manip' est simple mais suis vraiment débutant de chez débutant!