Webmaster Hub > Problème de positionnement des blocs

Version complète: sur le forum Webmaster Hub : Problème de positionnement des blocs

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

ganjah

mercredi 3 novembre 2004 à 13:20

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

CODE

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;
}

CODE

<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

CODE

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

A+
Ganjah

pierredureau

mercredi 3 novembre 2004 à 14:00

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

ganjah

mercredi 3 novembre 2004 à 14:25

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

mercredi 3 novembre 2004 à 15:42

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

CODE

#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>

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.