Problème de positionnement d'une DIV par rapport aux autres [Résolu]

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.

Elwyn · 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

Citation:

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

27/05/2011, 10h56	#3
Elwyn Membre chevronné Ingénieur systèmes et réseaux Inscription : juillet 2006 Messages : 836 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Ingénieur systèmes et réseaux Informations forums : Inscription : juillet 2006 Messages : 836 Points : 712 Points : 712	Et en mettant un display: inline-block; sur le conteneur de droite ? __________________ Dire Straits, Bob Dylan, Led Zeppelin, the Who, Pink Floyd, AC/DC, Guns & Roses, the Doors, ...
	00

27/05/2011, 10h29	#2
Bisûnûrs Modérateur Josselin Développeur Web Inscription : janvier 2004 Messages : 9 050 Détails du profil Informations personnelles : Nom : Josselin Âge : 29 Localisation : France, Rhône (Rhône Alpes) Informations professionnelles : Activité : Développeur Web Informations forums : Inscription : janvier 2004 Messages : 9 050 Points : 12 181 Points : 12 181	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.
	10

27/05/2011, 14h46	#4
garona Candidat au titre de Membre du Club Étudiant Inscription : mai 2011 Messages : 20 Détails du profil Informations personnelles : Sexe : Localisation : France, Drôme (Rhône Alpes) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2011 Messages : 20 Points : 11 Points : 11	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
	00

29/05/2011, 11h59	#7
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	oui c'est utile de mettre le HTML pour voir comment sont déclarées les div
	10

30/05/2011, 09h40	#9
garona Candidat au titre de Membre du Club Étudiant Inscription : mai 2011 Messages : 20 Détails du profil Informations personnelles : Sexe : Localisation : France, Drôme (Rhône Alpes) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : mai 2011 Messages : 20 Points : 11 Points : 11	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
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email