div très large sous div flottant à droite [Résolu]

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

Citation:

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

Comme je le disais juste avant:

Citation:

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

Citation:

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

Citation:

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

07/04/2011, 11h49	#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	même en rajoutant un Code : Sélectionner tout - Visualiser dans une fenêtre à part left:auto ?
	00

07/04/2011, 11h01	#2
Aquellito Membre du Club Axel Développeur informatique Inscription : juin 2008 Messages : 192 Détails du profil Informations personnelles : Nom : Axel Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : juin 2008 Messages : 192 Points : 58 Points : 58	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 ?
	00

07/04/2011, 11h04	#3
vodiem Expert Confirmé Diem VO Vivre Inscription : avril 2006 Messages : 2 644 Détails du profil Informations personnelles : Nom : Diem VO Âge : 40 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Vivre Secteur : Conseil Informations forums : Inscription : avril 2006 Messages : 2 644 Points : 3 895 Points : 3 895	salut Aquellito, p'tit recherche sur css position:fixed si tu as un soucis revient poster.
	00

07/04/2011, 11h41	#5
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	utilise le position:absolute sur le bloc qui doit rester en haut à droite
	00

07/04/2011, 12h19	#10
vodiem Expert Confirmé Diem VO Vivre Inscription : avril 2006 Messages : 2 644 Détails du profil Informations personnelles : Nom : Diem VO Âge : 40 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Vivre Secteur : Conseil Informations forums : Inscription : avril 2006 Messages : 2 644 Points : 3 895 Points : 3 895	ton ex avec fixed marche très bien chez moi.
	00

07/04/2011, 14h41	#11
Aquellito Membre du Club Axel Développeur informatique Inscription : juin 2008 Messages : 192 Détails du profil Informations personnelles : Nom : Axel Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : juin 2008 Messages : 192 Points : 58 Points : 58	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 !
	00

07/04/2011, 19h26	#14
Aquellito Membre du Club Axel Développeur informatique Inscription : juin 2008 Messages : 192 Détails du profil Informations personnelles : Nom : Axel Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : juin 2008 Messages : 192 Points : 58 Points : 58	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
	00

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