Problème de positionnement d'une DIV par rapport aux autres

**garona** · 27/05/2011, 09h24

Bonjour

Je suis en train de créer un site, et j'ai un problème actuellement avec 2 div
La page est séparé en 2 colonnes
<--------100%--------->
<-----65%----><--35%->

là j'ai une div sur la gauche de l'écran donc sur 65% :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
div#bandeauHaut
{
height:auto;
width:64%;
color:black;
font-size:10pt;
margin-top:10px;
margin-left:0.5%;
background:url(../images/Bandeaux/BandeauPromo1.jpg);
border-radius:20px 0px 20px 0px;
border-right: 1px solid lightsteelblue;
border-top: 1px solid lightsteelblue;
border-left: 1px solid lightsteelblue;
border-bottom: 1px solid lightsteelblue;
}

et là une la div de droite :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
div#fluxrss
{
position:relative;
margin-top:-1467px;
height:auto;
width:35%;
background:white;
float:right;
}

Mon problème c'est que je suis obligé d'ajuster avec une marge négative ma deuxième div (flux rss), et si je rajoute du contenu et des sauts de ligne dans la div bandeauHaut l'ajustement n'est plus bon,
normal quoi,
Mais comment pourrais-je modifier ces div afin que le margin-top ne soit plus a modifier svp ?

Merci

**Bisûnûrs** · 27/05/2011, 10h29

Déjà, éviter de mélanger pourcentages et pixels. Ensuite mettre ton bandeauHaut en float:left.

Si ça ne fonctionne pas, le mieux serait que tu nous montres un exemple en ligne.

**fallais** · 27/05/2011, 10h56

Et en mettant un display: inline-block; sur le conteneur de droite ?

**garona** · 27/05/2011, 14h46

Rebonjour

j'ai fait un plan pour vous expliquer plus clairement mon problème :

le bandeau en haut doit être fixe, c'est actuellement le cas,
le body déroule grâce a une scrollbar,

mon problème c'est que dès que j'ajoute un <br /> (dans mon bandeau/BandeauHaut/Contenu)
ma div fluxrss se décale vers le bas
il se peut que le contenu change régulièrement et je ne veux pas avoir a réajuster la marge a chaque fois

j'ai essayer de mettre des float left et inline-block seulement les autres div passent au dessus de mon bandeau
Comment pourrai je donc résoudre ce problème svp ?

Merci

**Bisûnûrs** · 27/05/2011, 14h48

Envoyé par garona

Comment pourrai je donc résoudre ce problème svp ?

On ne va pas tout te faire non plus, montre-nous ce que tu as déjà fait (CSS + HTML).

**garona** · 27/05/2011, 14h58

ok voila donc le CSS

bannière

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
#header {
	text-align: left;
	visibility: visible;
	position:relative;
	height: 80px;
	margin-left:5px;
	margin-right:5px;
	min-width:800px;
}

le contenu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
#contenu {
	width:100%;
	height:100%;
	text-align: left;
	overflow:auto;
}

balise du bandeau haut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
div#bandeauHaut
{
height:auto;
width:64%;
color:black;
font-size:10pt;
margin-top:10px;
margin-left:0.5%;
background:url(../images/Bandeaux/BandeauPromo1.jpg);
border-radius:20px 0px 20px 0px;
border-right: 1px solid lightsteelblue;
border-top: 1px solid lightsteelblue;
border-left: 1px solid lightsteelblue;
border-bottom: 1px solid lightsteelblue;
}

le code de ma div flux rss (elle même composée de 4 div)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
div#fluxrss
{
position:relative;
margin-top:-1456px;
display:inline-block;
height:auto;
width:35%;
background:white;
float:right;
}

est ce vraiment utile de montrer le html ?
je n'ai mis dedans que du texte des <br /> et la déclaration des divs

**ornitho13** · 29/05/2011, 11h59

oui c'est utile de mettre le HTML pour voir comment sont déclarées les div

**function_Help** · 30/05/2011, 09h09

Hello,

L'une des solutions est "d'envelopper" tes DIV.
Tu postionnes ces 'wrapper' à l'aide de la propriété Float: (left/right);.
Tu peux positionner ensuite tes DIV de manière relative ou absolue.
Je te donne la structure HTML pour que ce soit plus clair.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<body>
<div id="wrapper"> <!-- ici l enveloppe générale -->
 
    <div id="header">
    </div>
 
    <div id="wrapperContenu"> <!-- Cette enveloppe va englober tes 2 div centrales / float: left;-->
        <div id="bandeauHaut"></div>
        <div id="contenu"></div>
    </div>
 
    <div id="RSS"> <!-- Puis le flux RSS / float: right;-->
    </div>
 
</div>
</body>

C'est un avis personnel mais, je pense que tu dois te servir dans ton cas de la notion d'héritage.
Ici, les 'wrapper' codent pour le positionnement et la taille des blocks,
les div se concentrent sur le contenu (liste, table, fonts, etc ...) et bénéficient des propriétés de leur parents en terme de taille.

Enfin j'ai parcouru ton code et j'ai remarqué quelques petites erreurs.
propriétés non compatibles IE, redondance des déclarations, ... je t'encourage à te documenter sur les CSS, à apprendre le language grâce à de la biblio.

Il y a de très bonnes explications sur la notion de "wrapper" sur le net. Je te laisse fouiller un peu si tu le souhaite.

Cdt.

**garona** · 30/05/2011, 09h40

Bonjour

Merci pour les réponses,
j'ai finalement trouvé,
j'ai déclarer ma div fluxrss après la div de contenu, en faisant l'inverse cela marche très bien

merci a vous en tout cas

Problème de positionnement d'une DIV par rapport aux autres

Positionnement en CSS

Discussions similaires

Partager

Partager