position:relative et padding forcé [Résolu]

Pointfixe · 05/08/2011, 13h11

Bonjour

J'ai essayé un position:relative pour le bloc droit dans une disposition bloc gauche/bloc droit avec un float pour le bloc gauche et là je me retrouve avec un padding gauche (et peut-être droit) forcé pour le bloc droit, que je ne peux pas corriger avec un padding:0px.

Si j'utilise un position:absolute, là j'ai un padding forcé haut et bas.

Vous pouvez me dire pourquoi ? Merci beaucoup !

Voici mon code html:

Code html :

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
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
 
<title> poiu </title>
 
<body>
 
<div id="gauche">
gauche
</div>
 
<div id="droite">
droite
</div>
 
</body>
 
</htlm>

Et mon CSS:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#gauche
{
background-color:yellow;
float:left;
width:100px;
}
#droite
{
background-color:orange;
position:relative;
left:120px
}

Bisûnûrs · 06/08/2011, 11h33

Parce que tu n'as ni besoin du position:relative, ni du left:120px. Remplace ces deux propriétés par un simple margin-left:120px.

Pointfixe · 06/08/2011, 18h03

Certes, je suis d'accord avec toi mais en ce moment j'essaye de comprendre comment marchent html et css, donc je fais des esssais et à chaque fois qu'un truc inattendu se produit j'essaye de piger pourquoi.

Candygirl · 06/08/2011, 21h05

Hello,

Ton bloc se déplace bien de 120px sur la gauche, depuis sa position initiale, sans influencer les autres éléments de la page, ce qui laisse apparaître un espace de 120-100=>20 pixels entre tes 2 blocs et fait apparaître la scroll barre horizontale.

Ce qui te perturbe, vraisemblablement, c'est que le background du bloc de droite débute depuis le bord gauche de ta page et non depuis la fin du bloc gauche, ce qui explique la présence de ce qui ressemble à un padding de 100px.

Si ce comportement t'étonne, je ne peux que t'encourager à approfondir tes notions concernant les flottants ainsi que le flux.

Pointfixe · 07/08/2011, 01h48

merci pour vos réponses, j'ai compris ce qui se passait.
C'est que le texte de mon bloc droit est normalement poussé de 100px par le float gauche, comme si je n'avais pas mis de positionnement particulier pour le bloc droit, et qu'en plus j'ai le décalage normal de mon bloc droit spécifié dans mon position:relative. Alors que dans mon esprit mon position:relative rendait inutile le décalage du texte du bloc droit dû au float. Tout ça est très logique en fait.

06/08/2011, 21h05	#4
Candygirl Modératrice Inscription : juillet 2006 Messages : 1 529 Détails du profil Informations personnelles : Sexe : Âge : 40 Localisation : Suisse Informations forums : Inscription : juillet 2006 Messages : 1 529 Points : 1 869 Points : 1 869	Hello, Ton bloc se déplace bien de 120px sur la gauche, depuis sa position initiale, sans influencer les autres éléments de la page, ce qui laisse apparaître un espace de 120-100=>20 pixels entre tes 2 blocs et fait apparaître la scroll barre horizontale. Ce qui te perturbe, vraisemblablement, c'est que le background du bloc de droite débute depuis le bord gauche de ta page et non depuis la fin du bloc gauche, ce qui explique la présence de ce qui ressemble à un padding de 100px. Si ce comportement t'étonne, je ne peux que t'encourager à approfondir tes notions concernant les flottants ainsi que le flux. __________________ Les bons réflexes: avant de poser une question: règles \| faq \| tutoriels \| recherche clarté, politesse, vocabulaire et orthographe soignés = efficacité remercier ceux qui ont pris le temps d'aider et si c'est le cas
	00

06/08/2011, 11h33	#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	Parce que tu n'as ni besoin du position:relative, ni du left:120px. Remplace ces deux propriétés par un simple margin-left:120px.
	00

06/08/2011, 18h03	#3
Pointfixe Invité de passage Inscription : août 2011 Messages : 5 Détails du profil Informations forums : Inscription : août 2011 Messages : 5 Points : 2 Points : 2	Certes, je suis d'accord avec toi mais en ce moment j'essaye de comprendre comment marchent html et css, donc je fais des esssais et à chaque fois qu'un truc inattendu se produit j'essaye de piger pourquoi.
	00

07/08/2011, 01h48	#5
Pointfixe Invité de passage Inscription : août 2011 Messages : 5 Détails du profil Informations forums : Inscription : août 2011 Messages : 5 Points : 2 Points : 2	merci pour vos réponses, j'ai compris ce qui se passait. C'est que le texte de mon bloc droit est normalement poussé de 100px par le float gauche, comme si je n'avais pas mis de positionnement particulier pour le bloc droit, et qu'en plus j'ai le décalage normal de mon bloc droit spécifié dans mon position:relative. Alors que dans mon esprit mon position:relative rendait inutile le décalage du texte du bloc droit dû au float. Tout ça est très logique en fait.
	00

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