Aller au contenu

Problème de positionnement des blocs


ganjah

Sujets conseillés

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

Lien vers le commentaire
Partager sur d’autres sites

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>

Lien vers le commentaire
Partager sur d’autres sites

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>

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...