Problème de positionnement des blocs

ganjah · 3 Novembre 2004

je comprends pas j'ai pris du code sur le site et ca ne marche pas quelqu'un pourrait m'éclairer ??

div#centre {
  width:50%;
}
div#gauche {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18%;
}
div#droite {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 18%;
}

.flottante {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}
.conteneur {
width: 100%;
}
.spacer {
clear: both;
}

<html>
<head>
<link ref="stylesheet" type="text/css" href="un.css" />
</head>

<body>

<div class="conteneur">
<p class="flottante">boîte verte 1</p>
<p class="flottante">boîte verte 2</p>
<p class="flottante">boîte verte 3</p>
...etc...
<div class="spacer"> </div>
</div>

  <div id="centre">
    COUCOU MENU 1
  </div>
  <div id="gauche">
    COUCOU1 PAGE PRINCIPALE
  </div>
  <div id="droite">
    COUCOU2 MENU 2
  </div>
  
</body>

</html>

et voilà le resultat que j'obtiens

boîte verte 1

boîte verte 2

boîte verte 3

...etc... 

COUCOU MENU 1 
COUCOU1 PAGE PRINCIPALE 
COUCOU2 MENU 2

SVP aidez moi :wacko:

A+

Ganjah

pierredureau · 3 Novembre 2004

Sur quelle page du site as-tu pris ce code ?

ganjah · 3 Novembre 2004

Ici pour la page

Il faut aller tout en bas.

Sinon en fait, tout ce que j'aimerais pouvoir faire c'est :

* un div a gauche

* un div a droite

* un div au centre

* dans div centre :

* Un div contenant une image

* Un div prenant toute la place restante et s'agrandissant le cas echeant.

le tout qui se redimensionne et qui se centre en fonction de la taille de l'écran de l'utilisateur

A+

ganjah

<edit Jan>j'ai modifié le titre de la discussion pour qu'il soit plus explicite</edit>

LaurentDenis · 3 Novembre 2004

Point de départ, à affiner à partir des articles de la rubrique CSS d'Openweb:

#centre {
margin: 0 25%;
}
#gauche {
position: absolute;
left: 0;
top: 0;
width: 23%; /* laisser du jeu pour éviter les conflits de modèle de boîte*/
}
#droite {
position: absolute;
right: 0;
top: 0;
width: 23%; /* laisser du jeu pour éviter les conflits de modèle de boîte*/
}
#gauche img {
float: left; /* pas de largeur spécifiée : c'est une image qui a une largeur propre*/
}

<body>
<div id="centre">
   <img scr="..." width="..." height="..." alt="..."/>
   Centre
</div>
<div id="gauche">Gauche</div>
<div id="droite">Droite</div>
</body>

Connexion

Problème de positionnement des blocs

Sujets conseillés

ganjah

pierredureau

ganjah

LaurentDenis

Veuillez vous connecter pour commenter

Parcourir

Activité