[html - CSS] - Coins arrondis

Version imprimable

03/10/2006, 15h07
lhpp

[html - CSS] - Coins arrondis

Bonjour,

Je développe actuellement un site internet avec deux parties :
- Une entete avec le logo de la société
- Le corps du site avec des onglets et le texte du site.

J'ai donc créé deux div placées l'une au dessus de l'autre pour contenir ces deux parties. Les bords sont actuellment carrés.

Voulant arrondir les angles du haut (ceux de l'entete), j'ai créé deux images comme il le fallait.
Je me retrouve donc avec une entete dont les bords gauche et droit sont réalisés avec des images (aux coins arrondis), et aussitot en dessous, le corps du site dont les bords sont faits avec l'attribut "border".

Il me reste un problème, les images étant insérées à l'intérieur du div de l'entete, elles sont légerement en retrait (vers l'intérieur) par rapport au border du corps du site.

Je pense que l'attribut "border" créé un bord qui s'étend à l'extérieur du div alors que mes images restent à l'intérieur. On peut donc constater un décalage comme sur la photo suivante.

http://www.hiboox.com/image.php?img=b8062e7b.gif

Avez vous une idée de la manière dont je pourrais procéder ?
Merci d'avance.
03/10/2006, 16h51
trotters213

:salut:
diminue ta largeur de quelques pixels à peine pour que ta bordure qui est extérieur soit plus vers l'intérieur;)
03/10/2006, 16h51
Sheriff

salut !
tu peux jouer avec l'attribut hspace ou le style margin-left/right...
@+
03/10/2006, 21h49
lhpp

Merci de vos réponses,

trotters213: Comme je souhaite que mon site s'adapte lors de redimensionnement de fenetres ou de config différentes, la largeur de l'entete et celle du corps du site sont définies en pourcentage. Mon entete prends 90% de l'écran en largeur. Si je réduis légerement mon corps de site (89% au lieu des 90%) alors c'est trop petit. Pour jouer avec les largeurs, il faudrait donner des tailles en pixels. Mais cela ne s'adapterait plus automatiquement en cas.

Sheriff: peux tu m'en dire plus sur tes methodes ? car le hspace sert a définir un espace entre une image et le texte. Je ne vois pas bien ce que cela m'apporte.
Concernant le margin-left/right, je l'ai mis à "auto" afin que mes cadres soient centrés.

Tes images sont direcetement dans le html ou en image de fond ? Typiquement j'essaierais de mettre ses images purement décoratives en image de fond...

Je pense que je procéderais comme suit:

- Je créerais un conteneur de 90% avec une de mes images en image de fond
- Dedans je mettrais l'en-tête avec l'autre image de fond puis le corps à la suite

Ex:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div id="main"> <div id="header"></div> <div id="content"></div> </div> #main { width:90%; background: url(gauche.png) no-repeat top left; } #header { background: url(droite.png) no-repeat top right; height:50px; } #content { border:1px solid orange; }
Autrement si tu veux garder ta structure actuelle et mettre tes images dans le html, tu peux les positionner en absolute ou relatif avec un left de -1px par exemple.

04/10/2006, 06h49
Sheriff

salut !
recherche la valeur dumargin pour la quelle tes images sont alignées et ça résoud le pb. Tu peux commencer par 0 pour voir. ensuite tu adaptes. je ne pense pas que le redimensionnement de la fenêtre aura une incidence dessus.
@+
04/10/2006, 08h11
trotters213

Citation:

Envoyé par Candygirl

Autrement si tu veux garder ta structure actuelle et mettre tes images dans le html, tu peux les positionner en absolute ou relatif avec un left de -1px par exemple.

Simple et efficace, c'est un peu ce à quoi je pensais mais en mieux :D

Merci de vos réponses !

Candygirl: voici comment j'ai fait pour créer ma structure de site:

Coté Css: J'ai créé deux divs que je mets l'une au dessus de l'autre. Une div "entete"et une div "conteneur" (corps du site).
Code:

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 42 43 44 45 .entete { width: 90% ; height: 110px; margin: auto auto ; } .conteneur { width: 90% ; height: 100%; margin: auto auto ; border: 2px solid #ffb515 ; color: #919090; background: #fffdbc ; } .table_entete { height: 90px; width: 100%; margin: auto auto; vertical-align: middle; border: none; border-collapse: collapse; } td.entete_gauche { vertical-align: middle; padding: 0; margin: 0; width: 40px; } td.entete_droite { vertical-align: middle; padding: 0; margin: 0; width: 60px; }
Coté html: J'ai découpé l'entete en trois parties (à l'aide d'un tabelau) afin de placer mon coin arrondi gauche, le coin arrondi droite et au milieu, ce que je veux (en l'occurence, un logo).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <body> <div class="entete"> <table class="table_entete" border="0"> <tr> <td class="entete_gauche" border="0"> <img src="arrondi_gauche.jpg" align="left"> </td> <td class="entete_milieu" border="0"> <img src="mon_logo.jpg" border="0"> </td> <td class="entete_droite" border="0"> <img src="arrondi_droite.jpg" align="right"> </td> </tr> </table> </div> <div class="conteneur"> ......... </div> </body>
J'ai bien noté ton astuce de "left" pour décaler la position du corps du site. Je l'avais déja essayé en fait. Mais cela ne fonctionne pas car il existe exactement le même décalage entre l'entete et le corps du site coté droit. Donc si on décale à gauche pour que ca soit aligné, on augmente le décalage à droite ! Ce qu'il faudrait, c'est donner une taille (90%) aux deux parties et diminuer apres coup et de facon relative de 2 pixels la largeur du corps du site.

Cela peut se faire ?

04/10/2006, 10h50
trotters213

tu peux faire ça avec du javascript en donnant une valeur à left et à right en fonction de la taille de la fenêtre.
04/10/2006, 10h54
lhpp

Du fait que certains navigateurs l'interdisent, pas de javascript sur mon site. Désolé.
04/10/2006, 11h26
trotters213

Citation:

Envoyé par lhpp

Du fait que certains navigateurs l'interdisent, pas de javascript sur mon site. Désolé.

Mouè, si tu vas dans ce sens, tu vas pas t'en sortir sachant déjà qu'il n'y a pas 2 navigateurs qui interprètent les balises de la même façon. Puis des navigateurs qui interdisent le javascript ça cours pas les rues tout de même, c'est pour les marginaux ça :mrgreen:

PS : une liste (vrai pas exhaustive) de navigateurs Web... accroche-toi pour avoir le même rendu sur tous en même temps (en utilisant une seule feuille de style bien sur vu que tu ne peux pas détecter le navigateur (vu que tu ne veux pas de Javascript;) )). ça peut être un challenge remarque :D
04/10/2006, 11h56
lhpp

Je suis assez d'accord qu'il ne faut pas trop en faire non plus, mais je pense qu'il est possible de contourner le javascript, particulièrement pour ce qui est de la mise en forme !

Après lecture de ton code je maintiens clairement ma proposition de code ;) Tu n'as pas besoin d'un tableau pour ce montage et tes images de déco ont plus leur place dans le css que dans le html (par contre ton logo y a sa place).

ça donnerait donc ça:
Code:

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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Document sans nom</title> <style type="text/css">  </style> </head> <body> <div id="main"> <div id="entete"><img src="mon_logo.jpg" alt="société truc" width="200px" height="110px" /></div> <div id="conteneur">.................</div> </div> </body> </html>
Remarques:

- Le conteneur principal te permet de rajouter des border, padding, à ton en-tête, contenu ou pied de page, sans te soucier d'un éventuel décalage
- j'ai remplacé tes class par des id vu que ce sont des éléments uniques dans ta page
- Je ne sais pas quel positionnement tu comptes donner à ton logo; j'ai donc juste attribué un padding de la largeur de ton image déco pour éviter que celui-ci ne vienne par-dessus
- Le height de 100% à ton contenu ne sert à rien si tu n'as pas aussi le html et le body à 100% de haut et suivant ta construction peut-être s'agira-t-il en fait d'un min-height?

Maintenant si tu persistes dans ton montage (mauvaise idée d'après moi parce qu'un tableau n'est pas fait pour monter un design et une solution en css beaucoup plus légère), quand je parlais de position relative ou absolue c'est directement pour tes images, pas pour tout ton contenu:
Code:

1 2 3 4 5 <img src="arrondi_gauche.jpg" align="left" id="imgleft"> <img src="mon_logo.jpg" border="0" id="imgright"> #imgleft {position:relative; left:-2px;} #imgright{position:relative; left:2px;}

04/10/2006, 16h04
lhpp

Merci beaucoup Candygirl d'avoir pris le temps de m'expliquer la solution à mon problème. Désormais ca marche impeccable. J'ai pris note de tes remarques. J'ai viré la mise en forme par tableau (qui ne me plaisait guère) et je suis passé entièrement par des div, les images des bords arrondis étant placés dans le css. Ton exemple était très bien fait.
Bravo.