Pb cadre arrondi

01 juil. 2005, 23:30

Bonjour,
J'ai regardé plusieurs tuto sur ce sujet et donc j'ai choisi d'utiliser 4 images et de les placer aux 4 coins de mon cadre.
Avec mozilla je n'ai aucun soucis mais avec IE lorque mon cadre s'allonge les soucis commence.
Je vous mets mon code. Si quelqu'un a une idée pour me permettre d'avancer, je suis preneuse.
Merci
ps: j'ai pu voir qu'avec css3 on pouvait faire un bord arrondi avec une propriété mais le hic c'est que ca ne fonctionne pas avec tous les navigateurs.
Pouvez vous me conseiller dans le choix à faire?

html :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>Accueil</title>
		<link rel="stylesheet" type="text/css" href="test.css"/>
	</head>
	<body>
		<div id="content">
			<div class="feature">
				<h2>Accueil	</h2>
			</div>
			
			<div class="feature">
				<h3>Zone erreur</h3>
			</div>
			<div class="feature">
				<div id="hautgauche"></div><div id="hautdroit"></div>
				<div id="contenu">
					Test. <br />
					Test. <br />
					Test. <br />
					Test. <br />
					Test. <br />
					Test. <br />
					Test. <br />
					Test. <br />
					Test. <br />
					Test. <br />
				</div>
				<div id="basgauche"></div><div id="basdroit"></div>
			</div>
		</div>
	</body>
</html>

css:

Code : Tout sélectionner

body{
	font-family: Arial, sans-serif;
	margin: 0em;
	padding-bottom: 0em;
	font-size: 62.5%;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

h2{
	font-size:1.5em;
	letter-spacing: 1px;
}

h3{
	font-size:1.25em;
	letter-spacing: 1px;
	font-weight: normal;
	color: #E90000;
}

#content{
	float: left;
	width: 80%;
	margin-bottom: 13px;
	margin-top: 0px;
	padding-top: 0.5em;
	padding-left: 3px;
	padding-right: 3px;
	margin-right: 0px;
	margin-left: 0px;
	font-size:1.2em;
	position: absolute; 
	top: 4.6em;
	left: 10em;
	background-color: #eff0fb;
}

.feature{
	border: 1px solid #a4a4e7;
	background-color: #F5F8FF;
	text-align: justify;
	padding-left: 7px;
	margin-bottom: 7px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	padding-top: 3px;
	padding-right: 7px;
	padding-bottom: 3px;
}

.feature #contenu{
	margin-top: -0.5em;
	margin-bottom: 1em;
}


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

#hautgauche {
	background: url(haut-gauche.gif);
	background-position: left top;
	position: relative;
	left: -9px;
	top: -9px;
}

#basgauche {
	background: url(bas-gauche.gif);
	position: relative;
	left: -10px;
	bottom: -5px;
}

#hautdroit {
	background: url(haut-droit.gif);
	float: right;
	position: relative;
	top: -26px;
	right: -8px;
}

#basdroit {
	background: url(bas-droit.gif);
	float: right;
	position: relative;
	right: -11px;
	bottom: 13px;
}

01 juil. 2005, 23:43

Quelque chose comme ça ?

01 juil. 2005, 23:58

Oui c'est ça.
Seulement comme j'ai du faire des position relative bien sous IE ça me chamboule tout

02 juil. 2005, 00:02

BOn, perso, j'en ai fait un, mais en trois images, un peu comme le premier modèle sur le lien que je t'ai mis: avec quatre images, je sais pas trop ce que ça donne: si tu es pas à la minute, je vais ramasser les images et ton bout de code et faire des tests, j'aurai une réponse demain, parce que ce soir je suis mort

02 juil. 2005, 00:07

Ok merci beaucoup.
Par contre qd tu parles de trois images, tu prends une image qui fera le haut de ton cadre une autre pour le bas et une pour le milieu c ca?

02 juil. 2005, 00:43

c'est ça, une le haut, une le bas et la troisième en repeat-y : repeat;

02 juil. 2005, 00:59

Humm,
C'est un peu embettant cette methode car tu fixes la largeur de ton cadre.

02 juil. 2005, 09:52

Bon, j'ai eu un peu de mal mais je l'ai eu, ça marche avec Firefox, IE6 et même Opera: Je te mets le conde complet, tu compareras avec ton propre code pour noter les ajouts/modification/suppressions. Note également que ce qui ne facilite pas le positionnement de chaque coin, c'est le découpage de tes images de coins, mais c'est secondaire:

Le code HTML, j'y ai rajouté un id dans le div de contenu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Accueil
    </title>
    <link rel="stylesheet" type="text/css" href="test.css" />
  </head>
  <body>
    <div id="content">
      <div class="feature">
        <h2>
          Accueil
        </h2>
      </div>
      <div class="feature">
        <h3>
          Zone erreur
        </h3>
      </div>
      <div class="feature" id="cadre">
	    <div id="hautdroit"></div><div id="hautgauche"></div>
        	<div id="contenu">
	          Test.<br />
	          Test.<br />
	          Test.<br />
	          Test.<br />
	          Test.<br />
	          Test.<br />
	          Test.<br />
	          Test.<br />
	          Test.<br />
	          Test.<br />
	        </div>
		<div id="basdroit"></div><div id="basgauche"></div>
      </div>
    </div>
  </body>
</html>

La feuille de style CSS :

Code : Tout sélectionner

body{
   font-family: Arial, sans-serif;
   margin: 0em;
   padding-bottom: 0em;
   font-size: 62.5%;
}

h1, h2, h3, h4, h5, h6 {
   font-family: Arial,sans-serif;
   margin: 0px;
   padding: 0px;
}

h2{
   font-size:1.5em;
   letter-spacing: 1px;
}

h3{
   font-size:1.25em;
   letter-spacing: 1px;
   font-weight: normal;
   color: #E90000;
}

#content{
   float: left;
   width: 80%;
   margin-bottom: 13px;
   margin-top: 0px;
   padding-top: 0.5em;
   padding-left: 3px;
   padding-right: 3px;
   margin-right: 0px;
   margin-left: 0px;
   font-size:1.2em;
   position: absolute;
   top: 4.6em;
   left: 10em;
   background-color: #eff0fb;
}

.feature{
   border: 1px solid #a4a4e7;
   background-color: #F5F8FF;
   text-align: justify;
   padding-left: 7px;
   margin-bottom: 7px;
   margin-top: 0px;
   margin-right: 0px;
   margin-left: 0px;
   padding-top: 3px;
   padding-right: 7px;
   padding-bottom: 3px;
}

.feature #contenu{
   margin-left: 1.5em;
}

#cadre {
	padding: 0;
}

/* propriétés communes à l'ensemble des 4 coins */
#hautgauche, #hautdroit, #basgauche, #basdroit {
   height: 20px; width: 20px;
   background-repeat: no-repeat;
   margin: 0;
   font-size:1px; /* correction d'un bug IE */
}

/* propriétés spécifiques à chaque coin */
#hautgauche {
	background-image: url(haut-gauche.gif);
	position: relative;
	top: -6px;
	left: -2px
}
#hautdroit {
	float: right;
	background-image: url(haut-droit.gif);
	position: relative;
	top: -3px;
	right: -1px
}
#basgauche {
	background-image: url(bas-gauche.gif);
	position: relative;
	bottom: -2px;
	left: -3px
}
#basdroit {
	float: right;
	background-image: url(bas-droit.gif);
	position: relative;
	bottom: -4px;
	right: -4px
}

03 juil. 2005, 02:24

Génial merci beaucoup

Pb cadre arrondi

Qui est en ligne