Positionnement fixed

**anthrax** · 08/06/2013, 20h44

bonjour

je suis entrain de coder un site pour un exercice perso, une fois la structure de mise en page faite, je voudrais placé un élément div en position:fixed top:240px; left:233px,

mais le problème est que quand je réduit la fenêtre, la div en question ce décale.

voici la portion HTML de ma div en question

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="lien">
<small>aide au web</small>
 
<ul>
	<li><a href="http://www.lesite.com/"><img alt="" src="img/alsaicon.png"> lesite</a></li>
	<li><a href="http://www.lesite.com/"><img alt="" src="img/sdzicon.png" > lesiteo</a></li>
	<li><a href="http://www.lesite.com/"><img alt="" src="img/cssicon.png" > lesite</a></li>
</ul>
 
</div>

le code CSS

Code :

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

#lien{background: #fff; width:180px; position: fixed;top:420px; left:233px; box-sizing: border-box; }

les infos CSS de mon div global la ou y a tout le code html

Code :

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

#global{margin:0px auto; padding:0px; position:relative; min-width:800px; max-width:1200px; background:black;}

voici une capture de ma page en plein écran ces le div sur fond blanc
http://imageshack.us/photo/my-images/560/plein.png/

une capture de la même page réduite
http://imageshack.us/photo/my-images/194/reduit2.png/

je voudrais que la div reste fixe à gauche et qu"elle descende quand on scroll, quelle que soit la taille de l'écran.

merci d'être indulgent, car je débute dans le code HTML et CSS et j'apprend seul à la maison

bon week-end

**rodolphebrd** · 08/06/2013, 21h21

Bonjour et bienvenue,

si vous voulez que votre élément s'adapte à des tailles différentes d'écran, vous pouvez définir des valeurs en pourcentage, comme par exemple:

Code css :

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

1
2
3
4
5
6
7
8
#lien {
	background: #fff;
	width: 180px;
	position: fixed;
	top: 33%;
	left: 20%;
	box-sizing: border-box;
}

Envoyé par anthrax

merci d'être indulgent, car je débute dans le code HTML et CSS et j'apprend seul à la maison

On est quasiment tous passé par là, sans embuche...

**anthrax** · 09/06/2013, 15h16

slt

même avec le pourcentage le problème est toujours là.

code CSS

Code css :

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

1
2
3
4
5
6
7
#lien{
	background: #fff; 
	width:180px;
	position:fixed; 
	top:65%; 	left:14%; 
	box-sizing: border-box; 
}

code HTML du div

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="lien">
<small>aide au web</small>
 
<ul>
	<li><a href="http://www.lesite.com/"><img alt="" src="img/alsaicon.png"> le site</a></li>
	<li><a href="http://www.lesite.com/"><img alt="" src="img/sdzicon.png" > lesite</a></li>
	<li><a href="http://www.lesite.com/"><img alt="" src="img/cssicon.png" > lesite</a></li>
</ul>
 
</div>

page en plein écran

http://imageshack.us/photo/my-images/832/pleins.png/

ma page réduite

http://imageshack.us/photo/my-images/521/reduit.png/

je trouve ça bizarre car si j'ai bien compris le positionnent fixed y a juste à mettre l'élément en position:fixed; et ensuite le placer par rapport au top, left, bottom, right de la fenêtre.

On est quasiment tous passé par là, sans embuche

merci

**rodolphebrd** · 09/06/2013, 16h38

Pour l'instant je ne vois pas précisément où se situe votre problème...

Je vous mets un exemple en ligne sur lequel vous pouvez à loisir intervenir.

**anthrax** · 09/06/2013, 19h24

Pour l'instant je ne vois pas précisément où se situe votre problème...

mon problème ce situ quand je réduit la fenêtre du navigateur les dimensions changes et du coup mon div ce décale, je voudrais faire en sorte qu'il reste toujours à la même place qu'elle que soit la taille de la fenêtre.

j'ais deux écran relier a mon pc, un avec une résolution de 1680 sur 1050 22 pouce et le 2èm il fait 1366 sur 768 17pouce, quand je passe la fenêtre de l'écrans 22pouce sur celui a 17 pouces le div ce déplace (voir les photos)

écran 22 pouces le div et comme je veut et suit la page lors du scroll
http://img823.imageshack.us/img823/4307/22pouce.png

écran 17 pouces le div ce décale vers la droite car la fenêtre google réduit en dimension
http://img703.imageshack.us/img703/9277/17pouce.png

les deux captures sont prise lors ce que la page et en haut.

le code CSS

Code :

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

#lien{background: #fff; width:180px;height: 200px; box-sizing: border-box; position:fixed; top:45%; left:14%;}

merci pour les liens

**rodolphebrd** · 09/06/2013, 20h17

Si vous pouviez poster l'ensemble de votre code pour y voir plus clair...

Le problème provient certainement du positionnement du parent du DIV positionné en fixed.

**NoSmoking** · 09/06/2013, 20h49

Bonjour,
la position:fixed à pour référent le BODY (viewport), donc reporte ton min-width:800px; max-width:1200px; sur le BODY.

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

**anthrax** · 09/06/2013, 21h25

ligne 80 pour la div en question

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
	<link rel="stylesheet" type="text/css"  href="css/style.css"	/>
 
	<title>Mon site travail</title>	
</head>
 
<body>
 
<div id="global">
 
<header>
 
<h1>
	<img alt="" src="img/font-icon.png"/>
		<span id="po">Les polices </span>
</h1>
	<p class="sous-titre">
		"faire un menu en cercle et travaillé sur le positionnement"
	</p>			
</header>
 
	<nav>
		<ul>
		    <li><a href="#">accueil</a></li>
		   <li><a href="#">news</a></li>
		   <li><a href="#">vidéos</a></li>
		   <li><a href="#">photos</a></li>
		</ul>
	</nav>
 
	<section id="contenu">
 
<article id="un">
	<h2>faire une police dans chaque article !</h2>
		<h3>article n°1 faire un float avec une image</h3>
			<img id="float" alt="" src="img/crocus.jpg" />
 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis, diam eget suscipit egestas, dolor velit imperdiet sapien, eu volutpat urna massa in dui. Fusce viverra faucibus purus eget aliquam. Quisque et aliquam mi. Maecenas elit magna, consectetur in tempus nec, 
fermentum ac libero. Sed id neque odio, ultrices dignissim libero. <a href="#">Fusce arcu libero, interdum sed convallis nec</a>, mattis tempor sem. Donec luctus dictum magna, a venenatis massa feugiat et. Morbi augue orci, vulputate at fermentum ac, euismod sit amet est. Nulla elementum augue nec lorem ultrices aliquam.</p> 
 
			<p>Duis congue, ligula eget luctus luctus, tortor lectus consequat arcu, sit amet porttitor nisl turpis non elit. Phasellus facilisis dolor non purus molestie non mattis libero tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis ornare tincidunt. Praesent vel eros odio. Praesent vitae <a href="#">nisi</a> nisi. Aenean scelerisque, nulla nec facilisis tempor, sem neque molestie odio, quis pulvinar lorem ligula id tortor. Vestibulum condimentum, ipsum sed convallis scelerisque, lorem libero vestibulum purus, sit amet vehicula leo nibh a lacus. Nam aliquet mi vel turpis lobortis vehicula. Maecenas at libero augue. Aliquam at condimentum purus. Vestibulum in orci tellus. Aliquam at mi massa, sit amet dignissim velit. Nunc sit amet urna a massa lobortis varius at non sapien. In aliquet leo ac diam blandit tempus. Etiam vitae odio ac sem consequat venenatis.</p> 	
			<samp>fin</samp>
</article><!-- article id="un" -->
 
<article id="deux">
 
	<h3>article n°2</h3>
		<img id="right" alt="" src="img/crocus.jpg" />
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis, diam eget suscipit egestas, dolor velit imperdiet sapien, eu volutpat urna massa in dui. Fusce viverra faucibus purus eget aliquam. Quisque et aliquam mi. Maecenas elit magna, consectetur in <a href="#">tempus nec</a>, fermentum ac libero. Sed id neque odio, ultrices dignissim libero. Fusce arcu libero, interdum sed convallis nec, mattis tempor sem. Donec luctus dictum magna, a venenatis massa feugiat et. Morbi augue orci, vulputate at fermentum ac, euismod sit amet est. Nulla elementum augue nec lorem ultrices aliquam.</p> 
 
		<p>Duis congue, ligula eget luctus luctus, tortor lectus consequat arcu, sit amet porttitor nisl turpis non elit. Phasellus facilisis dolor non purus molestie non mattis libero tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sagittis ornare tincidunt. Praesent vel eros odio. Praesent <a href="#">vitae</a> nisi nisi. Aenean scelerisque, nulla nec facilisis tempor, sem neque molestie odio, quis pulvinar lorem ligula id tortor. Vestibulum condimentum, ipsum sed convallis scelerisque, lorem libero vestibulum purus, sit amet vehicula leo nibh a lacus. Nam aliquet mi vel turpis lobortis vehicula. Maecenas at libero augue. Aliquam at condimentum purus. Vestibulum in orci tellus. Aliquam at mi massa, sit amet dignissim velit. Nunc sit amet urna a massa lobortis varius at non sapien. In aliquet leo ac diam blandit tempus. Etiam vitae odio ac sem consequat venenatis.</p> 	
	<samp>fin</samp>
</article><!-- article id="deux" -->
 
<article id="trois">
 
	<h3>article n°3</h3>
		<img id="right" alt="" src="img/crocus.jpg" />
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lobortis, diam eget suscipit egestas, dolor velit imperdiet sapien, eu volutpat urna massa in dui. Fusce viverra faucibus purus eget aliquam. Quisque et aliquam mi. Maecenas elit magna, consectetur in tempusnec, fermentum ac libero. Sed id neque odio, ultrices dignissim libero. <a href="#" title="voir le liens pour plus de renseignements !">Fusce arcu libero, interdum sed convallis nec</a>, mattis tempor sem. Donec luctus dictum magna, a venenatis massa feugiat et. Morbi augue orci, vulputate at fermentum ac, euismod sit amet est. Nulla elementum augue nec lorem ultrices aliquam.</p> 
 
	<p>Duis congue, ligula eget luctus luctus, tortor lectus consequat arcu, sit amet porttitor nisl turpis non elit. Phasellus facilisis dolor non purus molestie non mattis libero tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis <a href="#" title="Indigence, pauvreté.">egestas</a>. Cras sagittis ornare tincidunt. Praesent vel eros odio. Praesent vitae nisi nisi. Aenean scelerisque, nulla nec facilisis tempor, sem neque molestie odio, quis pulvinar lorem ligula id tortor. Vestibulum condimentum, ipsum sed convallis scelerisque, <a href="#" title=" faux-texte">lorem</a> libero vestibulum purus, sit amet vehicula leo nibh a lacus. Nam aliquet mi vel turpis lobortis vehicula. Maecenas at libero augue. Aliquam at condimentum purus. Vestibulum in orci tellus. Aliquam at mi massa, sit amet dignissim velit. Nunc sit amet <a href="#">urna</a> a massa lobortis varius at non sapien. In aliquet leo ac diam blandit tempus. Etiam vitae odio ac sem consequat venenatis.</p> 	
	<samp>fin</samp>
</article><!-- article id="trois" -->
 
</section>
 
<footer>
	<div id="réseaux">
		<small>réseaux sociaux</small>
			rejoignez nous sur facbook & twitter				
	</div>
 
</footer>		
 
	</div><!-- global -->
 
	<div id="lien">
 
		<ul>aide au web
			<li><a href="http://www.lesite.com/">lesite</a></li>
			<li><a href="http://www.lesite.com/">lesite</a></li>
			<li><a href="http://www.lesite.com/">lesite</a></li>
			<li><a href="http://www.lesite.com/">lesite</a></li>
		</ul>
	</div>
 
</body>
</html>

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*======FICHIER CSS DU DOSSIER TRAVAIL =====*/
 
body{margin:0px; padding:0px;}
 
#global{margin:20px auto; padding:0px; position:relative; min-width:800px; max-width:1200px; background:black;}
 
header{margin:0px; padding:0px;}
 
 
 
header{background-color:rgb(230, 50, 50); padding:20px; height:100px; position:relative;}
 
h1 img{padding:0px;}
 
h1{ margin-top:0px;}
 
#po{font-family: "AlexBrushRegular"; font-size:1.8em; letter-spacing: 8px; color:#fff; position: absolute; top:14px; padding-left: 10px;}
 
.sous-titre{ position:absolute; top:78px; left:130px;  padding-left: 10px; font-size:20px;  font-weight:bold; color:#C9C6C6; font-style:italic;}	
 
/*/ ==== NAVIGATION ==== /*/
 
nav{ background: rgb(0, 50, 50); width:180px; float:left; margin-top:20px; box-sizing: border-box; border-radius:0 10px 10px 0;}
	nav ul{margin:0px; padding:20px 10px; list-style:none;}
		nav a{display:block; height:1%; padding:6px 6px 10px 10px; line-height:1.8; font-size: .9em; text-decoration:none; 	text-transform:uppercase;  color:rgb(230, 50, 50);	 font-weight:bold; letter-spacing: 2px;}
			nav a:hover{color:#fff; text-decoration:underline;}
 
/*/ ==== CONTENU ==== /*/
#contenu{background:#FFFCCC; width:70%; margin-left: 250px; padding: 0 10px; }
 
 h2{text-align: center; text-transform:uppercase; font-style:italic; text-decoration:underline; padding:20px;}
 
#un{font-family:'CantarellRegular'; line-height:1.3em; }
	#un a{font-style:italic; text-decoration:none;}
 
#float{float:right; padding:5px; border:1px solid rgb(230, 50, 50); margin:5px; }
 
#deux, #trois{font-family: "Exo-Regular"; line-height: 1.4em}
	#right{float:right; padding:5px; border:1px solid rgb(230, 50, 50); margin:5px;}
 
 
/*/ ==== block liens ==== /*/
 
#lien{background: #fff; width:180px;height: 200px; box-sizing: border-box; position:fixed;  left:50%; top:50%;}
 
#lien ul li:first-child{ list-style-image:url('../img/dev.png') ; }
	#lien ul li:nth-child(2){list-style-image:url('../img/alsaicon.png'); padding-left: 4px;}
	#lien ul li:nth-child(3){list-style-image:url('../img/sdzicon.png');padding-left: 4px;}
	#lien ul li:nth-child(4){list-style-image:url('../img/cssicon.png');padding-left: 4px;}
 
#lien a{text-decoration: none; color:rgb(230, 50, 50); line-height:1.5em; text-align: center; margin-left: 6px;}	
 
 #aide{padding-left:25px; margin:0px; text-transform:uppercase; margin: 0px;  line-height: 2em;}

merci de votre aide.

**rodolphebrd** · 09/06/2013, 22h15

L'élément en position fixed se positionne par rapport à l'élément Body.
Il faut pour cela redéfinir votre fenêtre principale ou voir une solution en javascript en faisant des recherches sur Google avec une requête du type "sticky menu" du style:http://webdesigntutsplus.s3.amazonaw...emo/index.html

**anthrax** · 10/06/2013, 16h22

voir une solution en javascript

donc ça vient pas de mon code CSS / HTML, ces qu'il faut que mette un au autre langage en place.

donc reporte ton min-width:800px; max-width:1200px; sur le BODY.

ça fait toujours le même problème.

**rodolphebrd** · 10/06/2013, 17h05

En général quand la solution en pur CSS est adoptée un élément un position fixed est soit centré, soit calé sur un bord de la page puisqu'il se réfère à l'élément ~~body~~.
Il faut faire en sorte qu'il n'est pas soit pas positionné entre 2 éléments.
Dans cet exemple l'élément est bien positionné

Voici un lien avec du Jquery

**anthrax** · 10/06/2013, 18h20

pour palier à mon problème, il faut que je me mette a étudier le jQuery et JavaScript

bon ben au boulot

dernière question

je dois aussi apprendre le PHP / MYSQL, vous me conseillerez de commencé par les quels le jQuery et JavaScript ou le PHP / MYSQL ?

je vous remercie de votre suivi et votre patience

**rodolphebrd** · 10/06/2013, 18h30

C'est pas un peu beaucoup d'un coup juste pour une position fixed, qui de surcroit n'est pas trop utilisée.

Mettre la priorité dans l'apprentissage de jQuery et JavaScript ou de PHP / MYSQL dépendra de vos besoins mais l'idéal serait de tout apprendre..

Vous avez sur ce site tout ce qu'il vous faut pour vous combler.

Bon courage

**anthrax** · 10/06/2013, 18h47

Mettre la priorité dans l'apprentissage de jQuery et JavaScript ou de PHP / MYSQL dépendra de vos besoins mais l'idéal serait de tout apprendre..

ok je vais commencer par le PHP / MYSQL car il ce dit qu'il pas trop compliquer

et après je faire le jQuery / JavaScript.

Vous avez sur ce site tout ce qu'il vous faut pour vous combler.

ce site et déjà dans mes favoris

merci je met donc en résolu

**NoSmoking** · 10/06/2013, 20h15

Envoyé par anthrax

merci je met donc en résolu

Le bouton

est en bas, après le dernier message

**Candygirl** · 11/06/2013, 17h36

Les propriétés top, bottom, left et right d'un élément positionné en fixed se calculent à partir du viewport (fenêtre de visualisation) et non pas du body.

Sans utilisation de l'une ou plusieurs de ces popriétés, l'éléments est positionné logiquement selon sa place dans le html et le déroulement du flux.

En modifiant légèrement ton html:

- déplacement de tes liens à leur endroit logique dans le html
- encapsulage de ta partie de gauche dans un div

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
 <div id="left">
	<nav>
		<ul>
		    <li><a href="#">accueil</a></li>
		   <li><a href="#">news</a></li>
		   <li><a href="#">vidéos</a></li>
		   <li><a href="#">photos</a></li>
		</ul>
	</nav>
 
	<aside id="lien">
 
		<ul>aide au web
			<li><a href="http://www.lesite.com/">lesite</a></li>
			<li><a href="http://www.lesite.com/">lesite</a></li>
			<li><a href="http://www.lesite.com/">lesite</a></li>
			<li><a href="http://www.lesite.com/">lesite</a></li>
		</ul>
	</aside>
</div>

Et ton css:

- on fait flotter le #left et non plus la nav
- on supprime le float de nav
- on supprime les top et left de ton #lien

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
#left {
	float:left;
	margin-top:20px;
	width:180px;
} 
 
nav {
	background: rgb(0, 50, 50);
	border-radius:0 10px 10px 0;
}
 
#lien {
	background: #fff;
	width:180px;
	position:fixed;
}

Et ton #lien viendra se positionner à sa place, quelque soit la largeur de la fenêtre de visualisation.

Positionnement fixed

Positionnement en CSS

Discussions similaires

Partager

Partager