Probleme coins arrondis en css

Bonjour, je suis entrain de coder un site en xhtml et css et je suis maintenant bloqué sur les coins arrondis en css.

mes deux images qui montrent bien mon probléme mon probleme sont en dessous du topic:

Voila mon code:

*xhtml:

<div id="conteneur"> 

<div id="hautdroit"></div><div id="hautgauche"></div> 

<div id="haut"> 
</div 

contenu 

<div id="basdroit"></div><div id="basgauche"></div> 

</div>

*CSS:

body 
{ 
background-color: #F9F9F9; 
} 

#conteneur 
{ 
width: 783px; 
margin: auto; 
margin-top: 15px; 
margin-bottom: 25px; 
background: url(fond.gif) center repeat-y; 
position: relative auto; 
} 

#haut 
{ 
HEIGHT: 130px; 
width: 781px; 
background-image: url(logo21.png); 
background-repeat: no-repeat; 
background-position: 20px 74%; 
background-color: #FFFFFF; 
border: 1px solid #C9C6B3; 
} 


#bas 
{ 
CLEAR: both; 
width: 781px; 
border: 1px solid #C9C6B3; 
font: 0.7em Tahoma,sans-serif; 
height: 40px; 
text-align: center; 
padding: 0px; 
padding-top: 10px; 
background-color: #EFEDED; 
} 


#hautgauche, #hautdroit, #basgauche, #basdroit 
{ 
height: 19px; 
width: 19px; 
background-repeat: no-repeat; 
font-size: 1px; /* correction d'un bug IE */ 
position: relative; 
} 

#hautgauche 
{ 
background: url(hautgauche.gif); 
} 
#hautdroit 
{ 
float: right; 
background: url(hautdroit.gif); 
} 
#basgauche { 
background: url(basgauche.gif); 
} 
#basdroit 
{ 
float: right; 
background: url(basdroit.gif); 
}

nb: j'ai travaillé avec le tuto d'alsacrations

http://www.alsacreations.com/articles/cadre/ (2éme cas)

et merci d'avance les amis




Modifié par 1younes (03 Feb 2008 - 19:29)

Bonjour 1younes et bienvenue sur ce forum,

Malheureusement, tu ne pars pas très bien pour ton premier message sur ce forum:

1. Tu n'as pas mis en forme correctement le code posté avec les balises [ code] et [ /code] (sans espace après le crochet ouvrant). Ce serait bien de le faire -- non, il t'es demandé de le faire --, car ça rend le forum beaucoup plus lisible... et ton message plus attractif.
Tu peux corriger ton message en utilisant la fonction «Editer» (bouton en haut à droite). Merci d'avance.

2. Le problème que tu exposes est plutôt flou. À voir les captures d'écran, j'ai du mal à comprendre quel est le problème exactement. Quel est le résultat que tu vises? De plus, tu mentionnes un tutoriel d'Alsacréations. Comme toutes les personnes qui lisent ce forum et qui seraient susceptibles de t'aider ne connaissent pas par coeur tous les tutoriels d'Alsacréations, il serait bien d'indiquer de quel tutoriel il s'agit (en donnant son URL).

3. C'est bien de poster ton code HTML et CSS, mais sans l'accès aux images il va être difficile pour les personnes qui souhaiteraient t'aider de reproduire en local ton problème. Donne l'adresse d'une page de test en ligne aurait été beaucoup plus efficace.

Voilà. En l'état, je pense que tu auras du mal à obtenir une réponse. Mais tu peux toujours y remédier.

bonjour

point de vue positionnement, ça semble correct, c'est juste un problème de couleurs de l'image de coin elle-même, il me semble.

la partie, actuellement blanche du coin doit être de la couleur de ton fond de page, quant à la partie gris foncé c'est à toi de voir en fonction de l'effet que tu veux.

s'il qq peut m'aider
Modifié par 1younes (03 Feb 2008 - 21:00)

Ah ben voilà, c'est beaucoup plus compréhensible ainsi. Bravo pour les modifications apportées à ton premier message.

Le problème que tu rencontres, c'est que -- sauf erreur de ma part -- le tutoriel que tu as suivi ne prévoit pas l'usage que tu veux faire des coins arrondis.

Heureusement, on peut l'adapter très simplement. On peut garder le même code HTML, et utiliser le code CSS suivant:

#cadre {
	position: relative; /* Important pour le positionnement des coins */
}
#hautgauche, #hautdroit, #basgauche, #basdroit {
	position: absolute;
}
#hautgauche {top: 0; left: 0;}
#hautdroit {top: 0; right: 0;}
#basgauche {bottom: 0; left: 0;}
#basdroit {bottom: 0; right: 0;}

Voilà pour l'essentiel du positionnement des coins. Le principe: les coins sont tout simplement positionnés en absolu, mais pas par rapport à la page, par rapport au conteneur div#cadre qui est lui-même positionné (position: relative). Le reste est cosmétique (dimensions des coins, images de fond...).

Limite de cette méthode: les coins seront superposés à tout contenu se trouvant directement en dessous d'eux. Pour pouvoir afficher un contenu par dessus les coins, il faudra utiliser une méthode différente.
Mais au vu de tes captures d'écran, ça n'a pas l'air de poser problème ici.
Modifié par Florent V. (03 Feb 2008 - 21:58)

Bonjour 1younes,

J'ai bien reçu ton message privé, j'y répondrai publiquement si cela ne te dérange pas, pour les raisons que j'évoque ci-après :
Lorsque tu lances un sujet, le mieux reste de lire les propositions qui te sont faites (notamment celle de Florent), de relancer au besoin si ton problème n'est pas résolu ou si tu n'as pas compris les solutions qui te sont proposées, d'une part parce qu'il n'est pas réellement souhaitable (ni réellement souhaité me semble-t-il) de traiter de manière privée les problèmes rencontrés par chacun des visiteurs (...), parce que ce n'est pas le but de ce forum, mais aussi parce que le problème que tu rencontres (et éventuellement sa résolution) pourrait intéresser quelqu'un qui se trouverait dans la même situation et puis sans doute, aussi, un peu, parce les réponses qui te sont bénévolement données aimeraient trouvées un écho favorable (ou non), c'est "gratifiant" de recevoir un petit merci lorsque l'on a passé un peu de temps sur le problème d'un visiteur (que ce problème soit résolu ou non d'ailleurs), non ?

Revenons au sujet qui te préoccupe
Sur les fichiers que tu m'as fourni et que tu aurais sans aucun doute dû poster (via un lien vers ta page de test) dans ton sujet en lieu et place des "screens" (beaucoup moins parlants ) tu as oublié de refermer ton commentaire conditionnel adressé à IE6 :

<!--[if lte IE 6]>
<style type="text/css">
Les styles réservés à IE6...
</style>
[#blue]<![ endif]-->[/#] -> [#blue]Sans espace avant le endif  [/#][cligne] 

Le résultat sous IE7 devient donc pour le moins "problèmatique"

Pour la suite, si l'on s'attache à la proposition de Florent et que l'on décide que ton id conteneur sera le cadre où viendront se positionner tes coins arrondis cela pourra nous donner :

#conteneur 
{ 
   width: 783px; 
   margin: auto;
   margin-top: 15px;
   margin-bottom: 30px;
   margin-left: 105px;
   background: url(fond.gif) center repeat-y; 
   position: [#red]relative[/#];
} 

Et pour tes coins arrondis :

#hautgauche, #hautdroit, #basgauche, #basdroit {
position: absolute;
height: 9px;
width: 9px;
background-repeat: no-repeat;
font-size:1px;
}
#hautgauche {
top: 0; left: 0;
background: url(hautgauche.gif);
}
#hautdroit {
top: 0; right: 0;
background: url(hautdroit.gif);
}
#basgauche {
bottom: 0; left: 0;
background: url(basgauche.gif);
}
#basdroit {
bottom: 0; right: 0;
background: url(basdroit.gif);
}

Il me semble que cela te conduit au résultat escompté et donne un résultat similaire sous IE7 et Firefox (et sous IE6 via le CC)

Il y a d'autres méthodes, d'autres moyens de parvenir à tes fins, n'hésites pas à nous dire si celle que Florent te propose te convient

Très cordialement,
Sylvain