[Résolu] Min height et float

Bonjour à tous,

Avec mes quasi inexistantes compétences de graphiste, je modernise un peu le site que j'ai fait pour un ami.

J'ai mis des bords ronds sur le conteneur principal, avec la structure suivante :

<div id="corps">
  <div id="tr"/><!-- top right-->
  <div id="tl"/><!-- top left-->
     Le contenu ici 
  <div id="br"/><!-- bottom right-->
  <div id="bl"/><!-- bottom left-->
</div>

La css se charge du reste pour mettre des arrondis dans les divs tr, tl, br et bl depuis une image.

Si vous allez sur le site à cette adresse : http://www.setechnic.com/collection.html vous pouvez voir le résultat.
Toujours sur cette page, cliquez sur "Introduction", vous verrez le bloc principal se réduire.
On obtient l'effet disgracieux suivant :

Le menu n'est plus attaché à grand chose.
Pour éviter cela, j'ai pensé à la propriété "min-height" (qui est, j'en suis conscient, mal interprétée par ie6).
Sauf que lorsque je met un min-height, mes coins inférieurs remontent, comme cela :

Ils sont juste en dessous de "Modèles star wars"

Voici la css des éléments concernés :

#tl, #tr, #bl, #br{
width:8px;
height:8px;
background-image:url(../Images/Site/corner.gif);
}

#tr{
float:right;
background-position:8px 0px;
margin-top:-8px;
}
#tl{
float:left;
background-position:0px 0px;
margin-top:-8px;
}
#bl{
float:left;
background-position:0px 8px;
}
#br{
float:right;
background-position:8px 8px;
}
#corps{
	margin:0 0 0 152px;
	padding-bottom:8px;
	padding-top:8px;
        /*min-height:400px*/
}

Merci d'avance à ceux qui prendront le temps de regarder mon problème.
Si celui-ci a déjà été abordé ailleurs, n'hésitez pas à me rediriger. En fait, j'ai pas vraiment réussi à exprimer mon problème en deux trois mots pour faire une recherche efficace.
Modifié par Oxycrest (16 Sep 2009 - 20:21)

Bonjour,

1. Par souci de compatibilité, écrire <div></div> et jamais <div/>.
2. On utilisera plutôt le positionnement absolu pour placer ces quatre coins. Pour que le positionnement se face par rapport au parent (#corps) et pas par rapport à la zone de visualisation du navigateur, il faudra que ce parent soit lui-même positionné. Tu peux par exemple le positionner en relatif sans pour autant le décaler (utiliser position:relative mais pas les propriétés top, right, bottom et left).

Bonjour Florent, merci pour ta réponse.

Florent V. a écrit :
1. Par souci de compatibilité, écrire <div></div> et jamais <div/>.

J'ai copié le code du navigateur, en fait, j'ai bien écrit comme tu me le conseilles. Ceci dit, merci du conseil, je ne savais pas qu'il y a un impact sur la compatibilité avec cette syntaxe.

Florent V. a écrit :

2. On utilisera plutôt le positionnement absolu pour placer ces quatre coins. Pour que le positionnement se face par rapport au parent (#corps) et pas par rapport à la zone de visualisation du navigateur, il faudra que ce parent soit lui-même positionné. Tu peux par exemple le positionner en relatif sans pour autant le décaler (utiliser position:relative mais pas les propriétés top, right, bottom et left).

Alors là, je n'ai pas tout compris.
comment puis-je utiliser un positionnement absolu pour les éléments de droite, alors que je ne connais pas les dimensions du navigateur.
Aussi, sur quel élément dois-je utiliser un positionnement relatif ?

En fait, je n'ai pas vraiment compris ta réponse (je suis plus à l'aise pour parler php )
Modifié par Oxycrest (13 Sep 2009 - 19:04)

Oxycrest a écrit :
comment puis-je utiliser un positionnement absolu pour les éléments de droite, alors que je ne connais pas les dimensions du navigateur.

La réponse est dans mon message:

Florent V. a écrit :
Pour que le positionnement se face par rapport au parent (#corps) et pas par rapport à la zone de visualisation du navigateur, il faudra que...

On y apprend que le positionnement d'un élément positionné en absolu peut se faire par rapport à son parent, et pas par rapport à la page. Il faut juste respecter une condition...

Oxycrest a écrit :
Aussi, sur quel élément dois-je utiliser un positionnement relatif ?

La réponse est dans mon message:

Florent V. a écrit :
il faudra que ce parent soit lui-même positionné. Tu peux par exemple le positionner en relatif

En code ça donne ça:

#corps {
  position: relative;
  min-height: 500px;
}
#coin-haut-droit {
  position: absolute;
  top: 0;
  right: 0;
}
...

Modifié par Florent V. (13 Sep 2009 - 22:50)

Bonsoir,

Merci pour tes réponses, je n'ai pas eu le temps d'essayer plus tôt.

Tout fonctionne, comme tu me l'as expliqué.

Ces histoires de positionnement relatif / absolu ne sont pas très clair, mais tant que cela fonctionne.

Merci encore !