28221 sujets

CSS et mise en forme, CSS3

Besoin de conseils positionnement de div- toujours....

Bonjour,

je viens chercher de l'aide ou plutot des conseils concernant la mise en page du site que j'ai réalisé. J'avais décidé d'utiliser le positionnement absolute car ce site (div "Conteneur") devait avoir une largeur et une hauteur fixe, ainsi que tous les div inclus dans celui-ci.

Voici le css et l'apercu simplifié:

body{	
background-color: #CCCCCC;
}
.conteneurBlanc{
position:absolute;
left: 50%; 
top: 50%;
width: 778px;
height:460px;
margin-left: -389px; /* moitié de la largeur */
margin-top: -230px; /* moitié de la hauteur */
padding:0;
background-color:#FFFFFF;
border:1px solid #000000;
}
.headerBleu{
position:absolute;
width:778px;
height:91px;
margin:0;
padding:0;
left:0;
top:0;
background-color:#0099CC;
}
.menuRouge{
position:absolute;
width:173px;
height:186px;
margin:0;
padding:0;
left:0;
top:91px;
background-color:#FF0033;
}
.videJaune{
position:absolute;
width:173px;
height:183px;
margin:0;
padding:0;
left:0;
top:277px;
background-color:#FFCC00;
}
.centreVert{ 
position:absolute;
width:594px; /* border + padding + width = 1 + 10 + 594 = 605*/
height:348px; /* border + padding + height + padding = 1 + 10 + 348 + 10 = 369 */
margin:0;
padding: 10px 0 10px 10px;
left:173px;
top:91px;
border:0;
border-top:1px solid #009933; 
border-left:1px solid #009933;
overflow:auto;
background-color:#99FF00;
}


upload/750-test.jpg

Recement je me suis rendu compte que le div "Centre" (actuelement en overflow) devait sur certaines pages s'étirer et donc entrainer l'étirement du div "Conteneur" et du div "Vide".
Ce qui n'est pas possible avec la mise en page que j'ai fais......

Je souhaiterais donc modifier ma page css afin de pouvoir utliser le mise en page actuelle et la mise en page avec le centre étirer..... Smiley sweatdrop .

Toutes vos remarques concernant mon code m'interressent!!
Merci d'avance.
Modifié par nata (26 Feb 2005 - 18:10)
tu veux dire que sur certaines pages tu as un étirement en largeur ?

pourquoi n'essais-tu pas d'adapter la largeur de ta page à celle de #centre ?
Non sur certaines pages il va y avoir un etirement en hauteur du centre, le Conteneur et Bas Gauche doivent également s'étirer en hauteur....
nata a écrit :
Non sur certaines pages il va y avoir un etirement en hauteur du centre, le Conteneur et Bas Gauche doivent également s'étirer en hauteur....

mais... si #centre est en overflow auto, pourquoi s'étirerait-il en hauteur ?
c'est justement le changement sur certaines pages il ne sera pas en overflow mais étiré... Désolée de ne pas avoir été plus clair!!
Je ne sais pas quel type de positionnement utilisé pour le Conteneur , Vide et Centre sachant qu'il doivent s'adapter à la hauteur de Centre.... Smiley sweatdrop
Pour etre un peu plus clair je voudrais savoir :

- comment mon conteneur doit il etre créé pour qu'il s'étire en fonction du div "centre".

- comment le div "vide" doit il etre créé pour qu'il s'étire en fonction du div "centre".

(si le div "Centre" ne s'etire pas Vide Centre et Conteneur garde leur taille actuelle.................. Smiley bawling )

J'espere que je ne suis pas trop confuse.....................
Hello,

Bon, j'ai une suggestion mais bye bye le centrage :

upload/412-ScreenShot00.jpg

J'ai mis des paddings pour mieux voir et le conteneur gris est normalement transparent.

Vos réactions ? Smiley rolleyes
Et après recherche de consolidation, la règle dit :

a écrit :
Les boîtes en position absolue se situent hors du flux normal. Elles n'ont ainsi aucune influence sur la mise en forme des autres éléments de même degré de parenté.


Si cela peut aider ...
Bonjour,

Merci pour vos réponses je viens de les voir. Nilpohc ta solution m'interresse (tant pis pour le centrage c pas le plus important!!), si tu peux m'aider un peu..... Smiley confused . J'ai fais plusieurs essai et j'arrive a peu pres au resultat en enlevant le height de Conteneur et en enlevant position:absolute de Centre mais la boite Centre reste décalé et le resultat n'est pas aussi bien que chez toi (plusieurs espaces...).
Si peux m'aider j'attent ta réponse.
Merci d'avance Smiley cligne
Modifié par nata (27 Feb 2005 - 09:33)
Et oui c encore moi, j'ai une solution qui fonctionne mais elle ne me plait pas trop (pas tres "propre")

je garde exactement la meme feuille de style je change uniquement Conteneur et Centre:

.conteneurBlanc{ 
position:absolute;
left: 50%; 
top:50px;
width: 778px;
margin-left: -389px; /* moitié de la largeur */
background-color:#FFCC00;
border:1px solid #000000;
}
.centreVert{ 
width:594px;
height:auto;
min-height:348px;
_height:348px;
/*margin-top:91px;*/
margin-left:173px;
padding:10px 0 10px 10px;
border:0;
border-top:1px solid #FF0033; 
border-left:1px solid #FF0033;
background-color: #99FF00;
}


Seulement margin-top ne marche pas sous IE (pourquoi?) je suis donc obligée de contourner le probleme en ajoutant un div qui va forcer mon div Centre à se positionner à 91px du haut:

.espace{
height:91px;}


dans ma page:

<div class="conteneurBlanc">
	<div class="headerBleu">Header</div>
	<div class="menuRouge">Menu</div>
	<div class="videJaune">Vide</div>
	<div class="espace"></div>
	<div class="centreVert"></div>
</div>


C'est sur ca marche mais c'est pas tres correct si vous avez une meilleur solution.
(je prefere conserver tous mes div en position absolute, sauf le Centre qui etitre le conteneur, car il contiennent des menus dynamiques et c'est un peu compliqué autrement)
Modifié par nata (27 Feb 2005 - 19:10)
Salut,

J'arrive un peu tard, mais voilà ce que je te propose :

CSS

body{
background-color: #CCCCCC;
padding:30px;
}
#conteneurVert{
position:absolute;
width:1%;
width: auto;
height:auto;
margin: 0;
padding:0;
background-color:#99FF00;
border:1px solid #000000;
}
#headerBleu{
width:auto;
height:91px;
margin:0;
padding:0;
background-color:#0099CC;
}
#zoneMenu{
float:left;
width:173px;
height:auto;
padding:0;
margin:0;
background-color:transparent;
border-right:1px solid #009933;
}
#menuRouge{
width:173px;
height:186px;
margin:0;
padding:0;
background-color:#FF0033;
}
#videJaune{
width:173px;
height:200px;
margin:0;
padding:0;
background-color:#FFCC00;
}
#centreVert{
float:left;
width:auto;
min-width:549px;
height:auto;
min-height:348px;
padding: 10px 0 10px 10px;
border:0;
border-top:1px solid #009933;
background-color:#99FF00;
}


HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  <head>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
  @import url("style.css");
  </style>
  </head>
  
  <body>
    <div id="conteneurVert">
      <div id="headerBleu"></div>
      <div id="zoneMenu">
          <div id="menuRouge"></div>
          <div id="videJaune"></div>
      </div>
      <div id="centreVert">
      blablablablablablablablablablablablablablablabla<br>
      blablablablablablablablablablablablablablablabla<br>
      blablablablablablablablablablablablablablablabla<br>
      blablablablablablablabla<br>
      blablablablablablablabla<br>
      blablablablablablablabla<br>
      blablablablablablablabla<br> 
      </div>
    </div>  
  </body>
</html>


Comme tu peux voir j'ai un peu changé mon fusil d'épaule, j'avais été un peu vite et certains soucis se posaient.

En espérant que ça t'inspire... Smiley lol
Nilpohc Merci pour ta solution je vais essayer!!!
Est-ce que quelqu'un sait pourquoi margin-top ne marche pas sous IE dans le div non positionné, c'est la solution que j'ai mis juste au dessus.... Smiley confus
Sujet clos
Aller à