28172 sujets

CSS et mise en forme, CSS3

Lier des divs ensembles

Bonjour,

Je suis en train de faire un design en CSS et j'aimerais faire en sorte que mes divs soient liées entre elles.

http://img251.imageshack.us/img251/2557/cssl.jpg

Lorsque la première div s'agrandi en hauteur parce qu'elle contient du texte, je voudrais que la div placée à coté d'elle prenne la même hauteur.

Existe t'il une astuce ?

Merci
Modifié par Khleo (10 Apr 2010 - 00:45)
Le problème c'est que cette technique utilise des images pour afficher les couleurs, je voudrais pouvoir modifier ces couleurs depuis la feuille de style.
Bonjour,

Pour obtenir des fausses colonnes sans image c'est assez simple mais ça demande deux conteneurs supplémentaires (des div) qui ne servent qu'à la décoration. Le principe est de placer deux div (nommées #fausse_gauche et #fausse_droite dans cet exemple) en arrière-plan avant le conteneur qui englobe la page (nommé #global). Ces deux div sont en position "fixed" et font 100% de la hauteur du "body" (lui même défini à 100%)… Le #global est écrit après mais à tout de même besoin d'un z-index: 3 pour repasser au premier plan.
Ensuite, dans #global les div #vraie_gauche et #vraie_droite ont les même largeurs et marges que leurs fausses apparences situées en arrière plan.

Plan du HTML :
<div id="fausse_gauche"></div>
<div id="fausse_droite"></div>

<div id="global">
   <div id="vraie_gauche">
      <p class="gris_typo">Contenu de l'élément de gauche…</p>
   </div>
   <div id="vraie_droite">
      <p class="gris_typo">Contenu de l'élément de droite</p>
   </div>   
</div><!--/global-->


Et le style qui va avec…
      <style type="text/css">
      html, body {margin: 0;padding: 0;
      font-family: verdana, arial, sans-serif;}
      
      body, #fausse_gauche, #fausse_droite {
         height: 100%;
      }
      #fausse_gauche {
         position: fixed;
         width: 35%;
         top: 0;
         margin-left: 0;
         background: #9C0;
      }
      #fausse_droite {
         position: fixed;
         width: 65%;
         top: 0;
         margin-left: 35%;
         background: #960;
      }
      #global {
         position: absolute;
         width: 100%;
         top: 0;
         z-index: 3;         
      }
      #vraie_gauche {
         float: left;
         width: 35%;
         margin-left: 0;
      }
      #vraie_droite {
         width: 65%;
         margin-left: 35%;
      }
      .gris_typo {
         padding: 0 20%;
      }
      </style>


Voir cet exemple en ligne : fausses colonnes sans images avec CSS.

<édit
Au cas ou les 2 colonnes prennent toute la largeur, ou peut en supprimer une des 2 et profiter à sa place du background du body…
/>
Modifié par Aureance (10 Apr 2010 - 18:42)
Le problème maintenant c'est qu'il cache mon Header et mon footer Smiley decu même si je place les div dans une div déjà existante.
<body>
<div class="CadreHaut">
  <div class="DivLogo" style="float:left;"><img src="img/logo.png" width="350" height="70"></img></div>
  <div class="DivMenuHaut" style="float:left;">
    <div style="margin-top:22px; width:415px; line-height:33px; background-color:#FFF; text-align:center; vertical-align:middle; margin-left:140px;">hgfh</div>
  </div>
</div>
<div style="width:955px; margin-left: auto; margin-right: auto; min-height:500px; position:relative;"></div>
</body>


Et j'aimerai obtenir le résultat suivant :

http://img576.imageshack.us/img576/2152/css2.png

Et je bloque au niveau des 3 bandes.

Merci
Je ne vois pas la présence des deux conteneurs d'arrière-plan sensés cacher tes header et footer dans ce code.

Mais, je vois des classes attribuées à certains éléments qui laissent supposer l'existence de déclarations de style faites ailleurs et en même temps des indications en ligne… il faudrait partir d'un meilleur pied et pour cela je te propose dans un premier temps de faire une structure solide : Ça c'est du coté HTML que ça se passe.

Et en second : réunir les styles en ligne sur une liste de déclarations "normale" (interne ou externe ; mais pas dans l'attribut style des éléments). Pour que tu comprennes la difficulté à t'aider : div class="CadreHaut"… ben c'est cool. On ne sait pas ce qui la stylise… et class="DivLogo", il y a des styles en ligne mais, que nous cachent ceux qui se rapportent aussi à la classe DivLogo indiqués ailleurs et que tu ne montres pas ?
Au debut j'utilisais une feuille de style

@charset "utf-8";
/* CSS Document */
body
{
	background-image: url(img/bg/default.png);
	background-repeat:no-repeat;
	background-color:#C0DEED;
	background-position:top;
	background-attachment:fixed;
	margin-top:0px;
}
.CadreHaut
{
	margin-left: auto;
	margin-right: auto;
	height:78px;
	width:955px;
}
.DivLogo
{
	height:78px;
	width:400px;
}
.DivMenuHaut
{
	height:78px;
	width:555px;
	text-align:right;
}


Puis a force de modifier j'ai préféré modifier directement dans le style, mais je compte tout mettre dans ma feuille de style à la fin.

a écrit :
Je ne vois pas la présence des deux conteneurs d'arrière-plan sensés cacher tes header et footer dans ce code.


Je comprends pas ce que tu veux dire.
<div style="width:955px; margin-left: auto; margin-right: auto; min-height:500px; position:relative;">Les DIV étaient placé ici</div>
Le code ne peut se plier à toi. C'est toi qui doit te plier au code car tel est ainsi.

Il me semble que tu ne veux pas écouter les réponses qui te sont données.
Sujet clos
Aller à