02-04-2007

COMMENT ARRONDIR LES ANGLES DE "CONTENT"

A la demande de Bycrispy, voici comment "Arrondir les angles" de votre page des messages, autrement dit de "content".

Capture2

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 page de message (content) fait "500px" vous devez laisser "Width: 450px"
si, elle est plus grande, augmentez la valeur de "Width"

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

Maintenant vous pouvez "validez" et ouvrir la "page d'accueil"

Repérez <div id="content"><div class="blogbody"> et collez le code suivant comme sur la capture.

<div class="fullsample">

</div>

Capture5
Agrandir l'image

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

Avant le commencement de la colonne de droite qui est juste en dessous
<div id="rightbar"><div class="navlinks">

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

Si vous voulez l'appliquer aussi à "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

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

Capture7
Agrandir l'image

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 le :

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

dans la page d'accueil comme pour "rightbar".

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

Posté par Demolite - Commentaires [19] - Rétroliens [0] - Permalien [#]

Waooo pffff arfff... Comment te remercier? Toutes ces recherches que tu as fais ajoutés au temps passé à tester ma demande, t'es vraiment extra toi!!!

Je garde cela bien au chaud car il va me falloir un peu de temps pour le mettre en place et essayer de bien tout comprendre sans faire de grosses boulettes!!! T'inquiète si j'ai besoin je viendrai sonner;-) 1000 mercis de plus!

Posté par ByCrispy 02-04-2007 à 17:24

[merci]merci merci...ça me fait bien plaisir de te faire autant plaisir [corne]
Si tu galères trop, tu peux m'envoyer ta "page d'accueil" et ta "feuille de style" comme ça je te mets les codes et tu n'as plus qu'à remplacer tes pages par les nouvelles...[cogiter]
Je pars en vacances samedi matin [sapin]
[Salut]

Posté par Demolite 02-04-2007 à 17:33

Vais essayer toute seule;-) mais compte sur moi si je galère j'ai reçu le message 5/5!

Posté par ByCrispy 03-04-2007 à 17:23

Ca marche pao[casse tete]

Posté par ByCrispy 04-04-2007 à 16:25

Ca marche!
Petite question: si l'on veut que l'arrondi se fonde avec la couleur des colonnes gauche et droite, comment faire pour que la couleur de la colonne du milieu de la page du message ne soit pas la même que celle des colonnes droite et gauche? Dans mon cas verte alors que je voudrai qu'elle reste blanche...
[heu]
Merci [Clin d oeil]

Posté par Nadaiya 06-04-2007 à 09:21

Salut Nadaiya [Salut]je viens d'aller voir ton blog, et ta page des messages est blanche ? alors je crois que j'ai pas trop compris ce que tu veux faire [Clin d oeil] sinon il faut changer le code couleur # dans "content"

Posté par Demolite 06-04-2007 à 09:34

Bonjour Demolite , je suis en train de bidouillée donc je te remets cela et tu comprendras mieux

Posté par Nadaiya 06-04-2007 à 09:47

Voilà c'est fait, si tu cliques sur "commentaires" tu verras, je voudrai que la colonne centrale d'une page reste blanche

Posté par Nadaiya 06-04-2007 à 09:52

[Rire moqueur] c'est normal chérie, tu dois répétez l'opération "angles arrondis" sur la "page d'un message" et tu mets le background-color de "fullsample" à #FFFFFF ...[cogiter]
t'as pigé ?
[Salut]

Posté par Demolite 06-04-2007 à 10:48

Pas blonde je le jure :P
Bonnes vacances
[Salut]

Posté par Nadaiya 06-04-2007 à 11:47

Et bein moi j'ai reussi mais suis plus certaine que cela me plaise!!! Non non pas chiante, je vais juste esayé d'arrondir les angles dans les 3 colonnes sur le blog test, on verra... J'ai visité vite fait le blog de Nadaiya ça donne bien!!!

Posté par ByCrispy 06-04-2007 à 17:44

Aaaah Ma Bible :D Depuis deux jours.
Nouvelle bible qui fait tomber les cheveux.
Les n'étoiles qui courent apres le curseur, impec, mais alors laaaa.

Impossible [ x5 ]

[jap]

Posté par citizenklo 20-06-2007 à 15:40

aie ![heu]
j'aurai du préciser que ça ne marche pas avec Internet explorer mais avec Firefox !
j'ai une autre solution mais j'ai pas encore fait le post...[sapin]

Posté par Demolite 20-06-2007 à 16:18

Pas urgent, j'attendrais ;)Et puis c'est pas essentiel nan plus !
Merki pour tous ces tutos qui doivent demander beaucoup de temps. Ils sont vraiment bien fait ;)

Ps : Ai vu un blog canalblog aux angles arrondis en étant sur IE7. Je ne peux que les voir ? Bizarre.

Posté par citizenklo 20-06-2007 à 16:25

Hum. Ça sera la deuxième fois que je test un de tes tuto et qu'il y a quelque chose qui cloche... Avec la barre d'outils, j'ai du me référer à la personne qui l'avait fait pour savoir où ça bloquait (sans jamais avoir su c'était où, probablement un codage mal retranscrit). Bref. Et là, celui-ci.
J'ai fait exactement comme tu l'as dit. J'ai même changer mes dimensions de Content comme ceux de l'exemple pour ne pas être trop "perdue". Les codes sont placés aux bons endroit dans le CSS ainsi que les autres pages, mais les coins arrondis n'affichent toujour pas. S'il y a une erreur dans le codage, peut pas venir de moi, j'utilise la bonne vieille méthode de copier-coller lorsqu'un code est donner.

Alors voilà, je pige vraiment pas il est où le problème si je suis sous Mozilla Firefox et que j'ai copié les codes donné aux bons endroits O_o.

Posté par p o i s o n e d* 29-07-2007 à 03:24

ça marche !

Impecc, merci beaucoup, cette fois tout est bien qui finit bien !!
je me demande quelle sera la prochaine étape de relookage !

Bizzzzes !

Posté par roserousse 13-08-2007 à 09:15

ca cafouille!!

salut
d'abord merci pour tout ce que tu fait ca m'aide bien pour mon tout nouveau blog en mode avancé!
par contre g un probleme c'est que g bien essayé de faire l'arrondi des angles seulement ca a complètement raté
maisntenant les colone m'écrase le texte
CA ME SAOULE QUAND JE COMPREND PAS!!!!
si tu pouvais m'aider ca serait bien sympatique
merki
gégé

Posté par gégé 16-09-2007 à 10:32

Bonjour Demolite !
J'ai créé un modèle en mode avancé et je bidouille avant de faire le grand saut...
Je suis sous IE : as-tu trouvé un moyen de faire des angles arrondis autrement que sous Firefox ?

Posté par Audinette 19-10-2007 à 17:22

[Salut]Audinette...

Oui mais il faut que je trouve le courage et le temps de faire un post...[je cherche]

[Salut]patience, patience...[Filp]

Posté par Demolite 19-10-2007 à 22:12

Si vous posez une question, merci de laisser l'adresse de votre blog...










URL pour faire un rétrolien vers ce message :
http://www.canalblog.com/cf/fe/tb/?bid=251752&pid=4503010

Liens vers des weblogs qui référencent ce message :

Haut de Page