div très large sous div flottant à droite

**Aquellito** · 06/04/2011, 17h58

Mon problème est le suivant, j'ai deux boite div dans mon body. La première se trouve en haut à droite de l'écran et représente le bouton "Tous les planning" (.float_right). La seconde boite se trouve 100px plus bas et contient un tableau TRES TRES large (#contenu).
Le problème est que lorsque je bouge mon scroll horizontal pour parcourir mon tableau, la div du haut n'est plus collée à droite de l'écran et garde la distance initiale entre le bord gauche de l'écran et la div (j'espère qu'il n'y a pas que moi qui me comprend lol).
Pour illustrer mon problème ci-joint deux captures d'écran. La première lorsque qu'on ne bouge pas le scroll et la deuxième après lorsqu'on l'a bougé.
Comment garder cette div collée à droite de l'écran quoi qu'il se passe ?
Merci à tous !

ps : j'ai flouté les données perso de mes captures

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
body
{
	padding:0 0 0 0;
	margin:0 0 0 0;
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background:url(/e-tonnage/images/banniere_planning.gif);
	background-attachment:fixed;
	background-repeat:no-repeat;
}
 
.float_right
{
	float:right;
}
 
#contenu
{
	margin-top:100px;
	background:#FFF;
}

**Aquellito** · 07/04/2011, 11h01

Bon je me rend compte que j'ai écrit beaucoup de choses pour rien dans mo premier post. J'aurais pu juste poser cette question :

Comment avoir un élément TOUJOURS collé à droite de l'écran quelque soit la largeur de ma page ?

**vodiem** · 07/04/2011, 11h04

salut Aquellito,
p'tit recherche sur css position:fixed
si tu as un soucis revient poster.

**Aquellito** · 07/04/2011, 11h31

Salut !
J'ai un soucis, je reviens poster

J'avais déjà essayé fixed mais bizarement le navigateur ne veut rien savoir. Il me laisse ma boite collé en haut à gauche de l'écran. En absolute ça marche tant qu'on a pas bougé le scroll horizontal. Mais bon je vais continué à chercher même si je ne vois pas quoi faire d'autre pour le moment....

Code :

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

1
2
3
4
5
6
.fl_right
{
	position:fixed;
	right:0;
	top:0;
}

**ornitho13** · 07/04/2011, 11h41

utilise le position:absolute sur le bloc qui doit rester en haut à droite

**Aquellito** · 07/04/2011, 11h48

utilise le position:absolute sur le bloc qui doit rester en haut à droite

Comme je le disais juste avant:

En absolute ça marche tant qu'on a pas bougé le scroll horizontal

**ornitho13** · 07/04/2011, 11h49

même en rajoutant un

Code :

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

left:auto

?

**Aquellito** · 07/04/2011, 12h02

J'ai simplifier un peu la chose (au cas où vous vouliez tester en réel).
Voici les trois exemple qui me donnent les même problèmes avec le bloc 1 :

ABSOLUTE :

Code :

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

1
2
3
4
5
6
7
8
9
<html
<head>
<title>ABSOLUTE</title>
</head>
<body>
    <div style="position:absolute; right:0; top:0;">BLOC 1</div>
    <div id="contenu" style="width:5000px;">BLOC 2</div>
</body>
</html>

FIXED :

Code :

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

1
2
3
4
5
6
7
8
9
<html
<head>
<title>FIXED</title>
</head>
<body>
    <div style="position:fixed; right:0; top:0;">BLOC 1</div>
    <div id="contenu" style="width:5000px;">BLOC 2</div>
</body>
</html>

FLOAT :

Code :

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

1
2
3
4
5
6
7
8
9
<html
<head>
<title>FLOAT</title>
</head>
<body>
    <div style="float:right">BLOC 1</div>
    <div id="contenu" style="width:5000px;">BLOC 2</div>
</body>
</html>

**Aquellito** · 07/04/2011, 12h05

même en rajoutant un left:auto

oui malheureusement

**vodiem** · 07/04/2011, 12h19

ton ex avec fixed marche très bien chez moi.

**Aquellito** · 07/04/2011, 14h41

En effet.... la bonne solution est bien 'fixed'. Cependant malgré mes refresh de page, le css ne se rechargeais apparemment pas

(d'habitude ça se recharge automatiquement à chaque rafraichissement non?)

Merci à tous pour votre aide !

**Aquellito** · 07/04/2011, 17h43

Après ce que vous allez lire, vous allez vous dire : Cet homme est fou ^^...

Cependant, je disais un peu plus haut que la position fixed ne marchais pas sur mon site déjà en production. Je viens de trouver l'origine du problème mais alors là POURQUOI ?

En haut de ma page J'avais un ensemble de fichier à inclure dans ma page. A côté de chaque include, un commentaire. Et ce sont ces fameux commentaire qui posaient problème. Illustration :

Code qui marche :

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
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%> 
<!-- #include file='redirection.asp' --> 		
<!-- #include file='connect_indus.asp' -->
<!-- #include file='connect_annuaire.asp' -->
<!-- #include file='connect_tonnage.asp' -->
<!-- #include file='recup_profil.asp' -->
<!-- #include file='fonctions_jour.asp' --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST 1</title>
</head>
<body>
	<div style="position:fixed;top:0;right:0;">TEST</div>
    <div style="position:absolute;top:100px; width:5000px;">TEST 2</div>
</body>
</html>

Code qui ne marche pas :

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
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%> 
<!-- #include file='redirection.asp' --> 		<!--REDIRECTION //////////////// default.asp -->
<!-- #include file='connect_indus.asp' --> 		<!--INDUS PORTAIL_CIDFN //////////////// conn_indus -->
<!-- #include file='connect_annuaire.asp' --> 	<!--ANNUAIRE //////////////////////// conn_annuaire -->
<!-- #include file='connect_tonnage.asp' --> 	<!--E_TONNAGE //////////////////////// conn_tonnage-->
<!-- #include file='recup_profil.asp' --> 		<!--RECUPERATION DES INFOS DU PROFIL ////////////////  -->
<!-- #include file='fonctions.asp' --> 			<!--TOUTES LES FONCTIONS ASP //////////////////////// -->
<!-- #include file='fonctions_jour.asp' --> 	<!--FONCTION DATE //////////////////////// annee // NumSemine // jj_sem // jj // mm // + FONCTION ADD-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST 1</title>
</head>
<body>
	<div style="position:fixed;top:0;right:0;">TEST</div>
    <div style="position:absolute;top:100px; width:5000px;">TEST 2</div>
</body>
</html>

En gros le truc qui bloquait c'était bien les COMMENTAIRES html :

Code :

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

1
2
3
4
5
6
7
<!--REDIRECTION //////////////// default.asp -->
<!--INDUS PORTAIL_CIDFN //////////////// conn_indus -->
<!--ANNUAIRE //////////////////////// conn_annuaire -->
<!--E_TONNAGE //////////////////////// conn_tonnage-->
<!--RECUPERATION DES INFOS DU PROFIL ////////////////  -->
<!--TOUTES LES FONCTIONS ASP //////////////////////// -->
<!--FONCTION DATE //////////////////////// annee // NumSemine // jj_sem // jj // mm // + FONCTION ADD-->

Ya de la magie derrière tout ça, on m'a jeté un sort

ou alors vous avez déjà rencontré le problème ?

**vodiem** · 07/04/2011, 18h44

Envoyé par Aquellito

Ya de la magie derrière tout ça

oui c'est ca l'informatique: face à l'ignorance tout parait magique... ^^

sous ff ca marche, sous ie effectivement ca marche pas:
ton doctype doit être déclaré en première ligne pour que l'ensemble des balises soit reconnu:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%> 
<!-- #include file='redirection.asp' --> 		<!--REDIRECTION //////////////// default.asp -->
<!-- #include file='connect_indus.asp' --> 		<!--INDUS PORTAIL_CIDFN //////////////// conn_indus -->
<!-- #include file='connect_annuaire.asp' --> 	<!--ANNUAIRE //////////////////////// conn_annuaire -->
<!-- #include file='connect_tonnage.asp' --> 	<!--E_TONNAGE //////////////////////// conn_tonnage-->
<!-- #include file='recup_profil.asp' --> 		<!--RECUPERATION DES INFOS DU PROFIL ////////////////  -->
<!-- #include file='fonctions.asp' --> 			<!--TOUTES LES FONCTIONS ASP //////////////////////// -->
<!-- #include file='fonctions_jour.asp' --> 	<!--FONCTION DATE //////////////////////// annee // NumSemine // jj_sem // jj // mm // + FONCTION ADD-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST 1</title>
</head>
<body>
	<div style="position:fixed;top:0;right:0;">TEST</div>
    <div style="position:absolute;top:100px; width:5000px;">TEST 2</div>
</body>
</html>

j'espère ne pas avoir brisé la magie... ^^

**Aquellito** · 07/04/2011, 19h26

T'as pas l'air d'aimer la magie toi ^^
C'est vrai que maintenant que tu le dis, ça paraît logique. Cependant, c'est la première fois que ça me pose problème pour une balise (même sur IE).

Merci vodiem

div très large sous div flottant à droite

CSS

Discussions similaires

Partager

Partager