Discussion :

[anthrax]

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]

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

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]

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]

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]

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]

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.