AccueilCSS dans Blog4ever
Arrondir les bords en CSS
Hardware

30 messages
0 appréciations
Hors-ligne
0 | | 7 septembre 2008
Bonsoir papy,
J'aimerais arrondir les bords de mon menu

(celui de mon menu droite).

Voici le code de mon menu :

div#contenu h2 {
padding-left : 30px;
line-height : 30px;
font-size : 1.4em;
background : url(http://nsm01.casimages.com/img/2008/08/11//080811123530372882368331.png) repeat 0% 100%;
color : #333;
border-top : 1px solid #333;
border-bottom : 1px solid #333;
border-left : 1px solid #333;
border-right : 1px solid #333;
}


Bon, border-top, border-bottom ... ce sont les 4 bordures qui entourent mon menu


Maintenant grâce à ça, peut-tu me dire comment arrondir les bords de mon menu



@+

PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 7 septembre 2008
:b1: Harware

Pas mal les bords arrondis, mais pas simples!!!

Je ne connais pas ton modèle il faudrait que je regarde, la règle, que tu mets, est celle du corps des articles, je pense???.
Pour le menu, il doit y avoir une règle...
ex: #menu_vertcal h2

Les bords arrondis sont une image que j'ai fait avec un utilitaire et mise comme background dans la règle #menu_gauche h2.

Il faut faire du sur mesure pour cette image en plus moi j'ai fait du transparent, je suis entrain de mettre au point le système comme j'ai fait pour la colonne de droite. Des blocs avec des arrondis en haut et en bas, plusieurs DIV avec des backgrounds.

As-tu vu mon menu en haut à doite, Menu DizTest? Il se développe et se réduit en cliquant sur les titres.

J'ai bien reçu ta Newsletter, quel boulot bravo.

Je vais regarder ton blog pour le titre des modules.

@+
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 7 septembre 2008

re :b1:

La règle à modifier :
div#vertical h2 {
padding-left : 1px;
line-height : 25px;
font-size : 1.2em;
background : url(http://nsm01.casimages.com/img/2008/08/11//080811123530372882368331.png) repeat 0% 100%;
color : #333;
border-top : 2px solid #c0c0c0;
border-bottom : 2px solid #c0c0c0;
border-left : 2px solid #c0c0c0;
border-right : 2px solid #c0c0c0;
text-align: center;
}

Je vais voir si je peux faire quelquechose.

@+
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 7 septembre 2008
re :b1:
J'ai fait un essai, tu verras si ça te convient, tu télécharges l'image en cliquant sur ce lien :
[lien]

Tu héberges cette image où tu as l'habitude, je la laisse un moment sur mon espace pour que tu essaies, après je la supprimerai. Tu pourrais peut-être ouvrir un compte chez Rapidechange.com, c'est un site d'hébergement de KL, actuellement ça fonctionne très bien et rapide.

Dans la règle citée, dans mon post précédent, en mettant :
:flech: no-repeat

et les bordures à 0px sauf celle du bas si tu le souhaites.





Tiens moi au courant.
Bon courage pour demain.

Bonne nuit


:note: Quand tu ouvres le lien ou quand tu cliques sur l'image, peux-tu me prendre une capture de la fenêtre qui va s'ouvrir... SVP ... merci

Derni?re modification le 08-09-2008 ? 18:08:28
Hardware

30 messages
0 appréciations
Hors-ligne
0 | | 8 septembre 2008
:b1:
Super, c'est bon. En tout cas merci, c'est exactement ce que je voulait faire !
J'ai mis toute les bordures à 0px.

Je t'ai fait un screen du lien à cette adresse : [lien]

Je me suis inscrit sur Rapidechange, qui en passant est très bien, rapide et gratuit !
Avant j'était sur casimage, très bon site aussi !

@+ bonne soirée ! et encore... :b2:


Derni?re modification le 08-09-2008 ? 19:21:17
PapyClic

271 messages
1 appréciations
Hors-ligne
0 | | 8 septembre 2008
:b1: Hardware

vu sur ton blog

Pour les bords arrondis, ce qui est difficile c'est pour faire des blocs fluides selon leur contenu, qui s'agrandissent en largeur et en hauteur automatiquement, plusieurs DIVs les uns dans les autres, 8 ou 9.

:b2: pour la capture je voulais savoir ce qui était vu dans la fenêtre de Rapidechange.

Bonne nuit

Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie CSS dans Blog4ever.
⨯

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 142 autres membres