[résolu] Aide positionnement en css

[medium69]

Je souhaite avoir mon code html dans cet ordre mais avec l'affichage dans l'ordre indiqué :

Code: Tout sélectionner

<div id=corps>le texte principal du site doit s'afficher entre la pub et les liens du bas de page</div>
<div id=bas>les liens du bas de page s'affiche en bas</div>
<div id=pub>la publicité s'affiche en haut de page</div>

J'ai consulté Alsacréation, mais je ne trouve pas de solutions à mon problème

[mr_go]

Pas bien!

il faudrait utiliser les positions dites absolues.
Ce que je n'aime pas forcément pour ma part.

[medium69]

Mais encore ...

[FlorentP]

Par exemple pour le dernier div, tu lui fixe 50px de hauteur et tu le force en haut avec un positionnement absolu.
Puis sinon tu gère tes deux autres div normalement, mais en mettant une marge haute de 50px pour ton div principal, histoire qu'il ne se fasse pas recouvrir par la pub.
Enfin c'est l'idée

[mr_go]

Untruc de ce genre

Code: Tout sélectionner

.pub{
position : absolute;
display:block;
top : 20px;

background-color:red;
}

.corps{
position : absolute;
display:block;
top : 200px;
background-color:blue;
}

..bas{
position : absolute;
display:block;
top : 300px;
}




[FlorentP]

bof, non, pas besoin de s'embeter avec une positionnement spécifique pour corps & bas.

#pub{
position : absolute;
top : 20px;
background-color:red;
}

#corps{
margin-top : 200px;
background-color:blue;
}

ça devrait suffir a positionner correctement le machin

[medium69]

Merci à vous tous ; avec vos conseil j'ai pu gaire un affichage comme je le souhaitais :

Code: Tout sélectionner

#header {
   background-color: #00ccff;
}
#menu {
   width: 20%;
   background-color: #99cccc;
}
#pub {
   height: 60px;
   width: 80%;
   position: absolute;
   top: 0px;
   background-color: #99aacc
}
#contenu {
   margin-left: 20%;
   position: absolute;
   widht: 80%;
}
#corps {
   margin-top: 60px;
   width: 80%;
   background-color: #22aacc;
}
#bas {
   width: 80%;
   height: 60px;
   background-color: #aaddee;
}
.float {
   background-color: #99aacc;
   float: left;
   width: 25%;
   margin: 1em 0;
}
.floatbis {
   background-color: #ff66cc;
   float: left;
   width: 25%;
   margin: 1em 0;
}
.both {
  clear: both;
}

Code: Tout sélectionner

<div id=header align="center">
   Du texte à afficher avant le menu et le contenu en haut de page par exemple.<br>
   Ce dernier pousse l'ensemble vers le bas.
</div>
<div id=conteneur>
   <div id=contenu>
      <div id=corps>
         <p>le texte principal du site s'affiche avant les colonnes éventuelles <br>
         en prenant toute la hauteur disponible comme ci-après.
         <div class="float">
            1ere colonne à s'afficher dans le texte principal du site.
         </div>
         <div class="floatbis">
            La deuxième vient parès la première et est acollé eontre
         </div>
         <div class="float">
            La troisième colonnes...
         </div>
         <div class="floatbis">
            Et la quatrième...
         </div>
         <div class="both">
            La fin du contenu principal peut s'afficher en dessous des colonnes.
         </div>
      </div>
      <div id=bas>
         les liens éventuel en bas de page
      </div>
      <div id=pub>
         la publicité s'affiche<br>
         en haut de page avec 60 pixels de hauteur
      </div>
   </div>
   <div id=menu>Le menu de gauche<br>
   s'affiche ici
   </div>
</div>

Mon code s'affiche dans l'ordre que je souhaites.

Merci encore [/url]

[Pikooz]

le display:block; il sert a quoi au passage ?

[FlorentP]

A rien sur un div non floattant, vu que le display est par défaut égal à block

[Pikooz]

Mais encore, ca sert a quoi ? :D:D

[FlorentP]

display:block ou inline
En gros l'élément est soit un bloc (tu peux lui attribuer une largeur, hauteur, bordure, position, ... il y a systématiquement un passsage à la ligne avant et un après), soit un élément en ligne, c'est à dire qu'il suit le texte (cas typique d'un <span>) : il ne va servir qu'à baliser le texte pour dire de mettre en gras, de souligner, de préciser une couleur, une font...

Dans un cas (block) tu manipules un élément "palpable", dans l'autre (inline) tu as juste la main sur la mise en forme de texte. En gros.

[mr_go]

Effectivement, j'ai tendance à déclarer les attributs en block, même si ceux-ci le sont par défaut. Cela peut éviter les problèmes lors de des déclarations de DIV imbriquées.