IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[CSS]fixer une boite..flottante


Sujet :

CSS

  1. #1
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut [CSS]fixer une boite..flottante
    Bonjour a tous!

    J'ai un sacre probleme: j'ai une colonne qui se balade partout d'apres la taille de l'ecran, etc... (d'ailleurs j'avais jamais remarqué le probleme comme sur mon ecran la boite etait a la bonne place... ).
    Donc je sollicite votre aide pour me sortir de se petrin

    J'aimerai que cette colonne reste a ça place (pas coller sur les bords) malgre la taille/resolution de l'ecran

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    	<div id="linkList">
    		<div id="linkList2">
    			<div id="lselect">
    				<h3 class="select"><span>Select a recette:</span></h3>
    				<ul>
    					<li><a href="construction.html" title="FACILE a faire!">Carbonara</a></li>
    					<li><a href="construction.html" title="FACILE a faire!"> Quiche Lorraine</a></li>
    					<li><a href="construction.html" title="FACILE a faire!"> Bouchées à la reine</a></li>
    					<li><a href="construction.html" title="FACILE a faire!"> Escalopes a la creme</a></li>
    					[....]
     
    				</ul>
    			</div>
    Et sur la feuille de style:

    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
    #linkList{
    	background:transparent url(/linkback.gif) repeat-y top left;
    	margin:0 0 0 70px;
    	float:left;
    	width: 120px;
    	position:absolute;
     
     
      top: 299px !important;   /* Bons navigateurs */
      top: 269px;		   /* explorer 5 */
      top/**/:/**/299px;	   /* explorer 6 */
    }
     
     
    #linkList2{
    	background:transparent url(/linkbottom.jpg) no-repeat bottom left;
    	padding:0 2px 20px 2px;
    }


    Merci beaucoup!!!!!!!!!!!!!!!!!!!!!!!!

  2. #2
    Membre confirmé Avatar de PuppeT mAsTer
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    104
    Détails du profil
    Informations personnelles :
    Localisation : France, Rhône (Rhône Alpes)

    Informations forums :
    Inscription : Juin 2006
    Messages : 104
    Par défaut
    Tu peux essayer en changeant le position de ton div de absolute par static

    ++


    PM, qui ne garantie pas que ça marche mais p-e

  3. #3
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut
    Merci pour la reponse !
    Etonnement... ça marche!

    Mais faut que je vois encore ça, du coup il me la fixe n'importe ou et surtout pas au meme endroit entre Firefox et IE (ça c'est plus problematique) mais au moins ça bouge plus!

  4. #4
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut
    j'ai regle le probleme le probleme de la boite qui se fixe n'importe ou : il suffisait en fait de mettre "none" dans le parametre "float". Donc la c'est bien centré la ou il faut ! Par contre il me reste le probleme de la HAUTEUR .... Entre firefox et IE c'est plus ou moins bas (sans varier sur la largeur) et j'arrive pas a remonter la boite vers le haut de la page

  5. #5
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut
    Alors j'ai "resolu" le probleme de la boite qui etait trop basse en changeant le code d'origine (voir premier message) par celui ci:

    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
    #linkList{
    	background:transparent url(/linkback.gif) repeat-y top left;
    	margin:-960px 0 0 70px;
    	float:left;
    	width: 120px;
    	position:absolute;
    
    	
      top: 299px !important;   /* Bons navigateurs */
      top: 269px;		   /* explorer 5 */
      top/**/:/**/299px;	   /* explorer 6 */
    }
    
    
    #linkList2{
    	background:transparent url(/linkbottom.jpg) no-repeat bottom left;
    	padding:0 2px 20px 2px;
    }
    Sous Internet explorer c'est tout bon, mais alors Firefox je sais pas ce qu'il me fait...... Explication: au lieu que la boite remonte "normalement" , firefox me "l'étire" , du coup l'entête de la colonne est a peu pres a la bonne place mais en dessous y a un grand "vide" et en fin de compte le bas de la colonne est toujours a la meme place...

    Help please

  6. #6
    Membre éprouvé Avatar de IdF-Socrateus
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    76
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juin 2006
    Messages : 76
    Par défaut
    J'utilise personnellement des "position:absolute" pour fixer ce qui doit l'être de manière "contrainte", puis je définis la hauteur et la largeur (on peut mettre "auto" pour ne contraindre que l'un des deux, ou des %...). Ensuite je positionne avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    top:10px;
    left:100px;
    par exemple...
    Je n'ai pas vu ta page, mais une marge de -960 ça fait un peu bizarre, non ?

  7. #7
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut
    merci pour ta reponse, je vais essayer!

    Pour le -960 oui c'est trop bizarre !
    Mais quand c'est 0px c'est tout en bas donc pour remonter je voyais pas d'autres soluce



    Help



    edit: ça marche pas en fait si je mets absolute et le positionnement, car quand je change la taille de la fenetre ou la resolutiion de l'ecran , hop! la colonne se decale.... Y a que "static" qui empeche a la fenetre de bouger, mais la fixe n'importe ou... c'est fou


    edit 2: j'ai mis la page en ligne sur http://ylouys.free.fr/plats.page/plats.html si quelqu'un veut bien m'aider (je laisserai pas la page car c'est pas moi qui est fait la structure est que la site est fait pour le privee )
    le css est dispo sur http://ylouys.free.fr/plats.page/166.css

  8. #8
    Membre éprouvé Avatar de IdF-Socrateus
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    76
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juin 2006
    Messages : 76
    Par défaut
    pour le positionnement, tu peux essayer de le faire par rapport au bord droit, si tu veux que ça y reste collé :
    right:5px; (après tu décales comme tu veux)
    précise l'objectif avant tout :
    - avoir un bloc de taille fixe, positionné dans une mise en page fixe (prévue pour une certaine résolution, et pas une autre)
    - avoir un bloc qui occupe 120 px de large, de hauteur variable, sur le bord droit
    - ou encore avoir un bloc qui occupe 50% de l'espace en restant sur la droite dans tous les cas ?
    ça sera plus facile pour choisir le type de positionnement...
    ceci dit, IE et les standards, ça fait deux, et ça bug pas mal avec le positionnement, donc y'a toujours des incompatibilités entre IE et Firefox (entre autres).
    Pour aller plus loin, fais des recherches sur "hack IE", ou sur les problèmes d'affichage dans IE; surtout une fois que tu as choisi le bon code pour IE, après y'a toujours moyen de bidouiller pour rendre le truc compatible. Au pire: deux feuilles de style différentes avec une balise du type :
    <!--[if IE]>
    <link href="iefix.css" rel="stylesheet" type="text/css">
    <! endif -->
    le fichier iefix.css contenant les corrections spécifiques pour IE.

    Sinon, rien à voir, mais faut mettre l'extension .php quand tu as du code dans la page, sinon
    1. il est pas exécuté
    2. tout le monde peut le voir (dangereux dans certains cas...)

  9. #9
    Membre éclairé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    386
    Détails du profil
    Informations personnelles :
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations forums :
    Inscription : Mai 2006
    Messages : 386
    Par défaut
    vi le position:absolute devrait bien correspondre, avec un left et top en complement peut etre

  10. #10
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut
    Merci pour vos réponses!

    Alors:
    -j'ai fais absolute et je l'ai mis en ligne (adresse precedente) pour que vous voyez le probleme: maintenant TOUT est bon (hauteur, meme vue dans les 2navigateurs,etc...) SAUF ce positionnement (j'ai eu une fausse joie d'ailleurs car avec ma resolution c'etait bon ) .... Suffit d'appuyer sur F11 pour voir comme ça varie sur la largeur

    -j'ai essaye avec le posionnement avec right:Xpx mais je voyais pas de changement

    -l'objectif est tout simplement que tout le monde voient la meme chose

    - pour le .php je sais mais j'ai un script de boite de commentaire qui m'affiche trop de "Warning" donc je laisse en html



    Au final, je vois vraiment pas pourquoi ça bouge sur la largeur en absolute , alors qu'en static ça foire tout

  11. #11
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut
    euh... question bete: c'est possible que ce soit GoLive qui me fait des partir en vrille mes pages ???

    Car j'ai remarqué ceci:
    sur http://ylouys.free.fr/apero.html
    (le css : http://ylouys.free.fr/166.css)

    =>la page est bonne! (c'etait d'ailleurs le cas pour toutes mes pages)

    Hors, si je prend EXACTEMENT le meme fichier css et la MEME page html (a part les images, encore que...) , bien sous GoLive ça me fait varier la colonne !

    Comment c'est possible cela????

  12. #12
    Membre éprouvé Avatar de IdF-Socrateus
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    76
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juin 2006
    Messages : 76
    Par défaut
    Ben y doit changer ton code (c'est un éditeur, GoLive ?); pour savoir ce qui se passe réellement ==> mode texte seul (notepad2), sinon tu sauras pas ce qui a changé.
    Le pire des éditeurs: word. Fais un petit test : une page avec juste un mot dessus ("hello !" pour changer...), et ouvre-la avec notepad (ou autre); compare avec ce que tu peux écrire pour le même résultat...
    je trouve ça plutôt édifiant.

    Pour le php, je rigole pas: non seulement ton code n'est probablement pas interprêté, mais si c'est le cas, c'est encore pire : on ne devrait jamais trouver ce genre de choses sur une page :
    <?
    $pathcom=""; //nom du répertoire... etc.)
    require("$pathcom"."config/function.inc.php");
    ?>
    si tu mets en place un accès par login, tu as toutes les chances d'avoir une intrusion par là (c'est tellement tentant...). Le php doit rester côté serveur, seuls ses résultats s'affichent pour un internaute, pas son code !
    fais un tour sur le forum php, ou cherche "exploiter faille include php" si tu veux être convaincu !
    s'il y a des warnings, y'a un pb quelque part, si tu veux bien les mettre à la suite ça peut se régler...
    @+

  13. #13
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut
    Oui Adobe Golive c'est similaire a dreamweaver!
    Je pense donc que c'est lui qui me fais foirer les pages.... Mais j'édite avec quoi moi maintenant ???? Car pour voir le resultat, si je dois le transferer par ftp a chaque fois c'est galere! (pour regler "margin" etc...)


    Sinon pour le php:

    Je ne savais pas! Merci de la remarque (je connais trop rien au Php: je profite des site de scripts où il faut suivre juste les instructions : intructions qui disaient de mettre le code php la ! ! ! )
    Donc ou je dois mettre ce code ??? Je comprend pas la

    Sinon pour les messages d'erreurs (script "commentaires v2"), la page s'affichait meme pas ( http://ylouys.free.fr/plats.page/plats.php ) mais j'ai compris que la page qui appelait le script devait malheureusement se trouver dans un repertoire parent du script et que l'inverse ne marchait pas! (ici le script se trouve a la racine http://ylouys.free.fr/ ), ce qui est embetant comme chacune de mes pages est dans un dossier different ...

    Mais sinon j'ai testé de mettre la page + le script a la racine et ça donne

    http://ylouys.free.fr/plats.php ! Et tout en bas on voit bien les messages d'erreurs...
    (ne pas preter attention a la colonne décalé en haut.... que j'arrive a résoudre )

  14. #14
    Membre éprouvé Avatar de IdF-Socrateus
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    76
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juin 2006
    Messages : 76
    Par défaut
    Donc ou je dois mettre ce code ??? Je comprend pas la
    tu le laisses dans ta page (le php est entre <?php et ?> ), mais pour qu'il soit interprêté il faut que le fichier se termine par .php

    comme éditeur, j'utilise notepad2 (c'est en mode texte)
    http://www.flos-freeware.ch/np2intl/notepad2_fr.zip

    en éditeurs wysiwyg, NVU est pas mal utilisé, et il me semble qu'il produit un code assez propre...
    y'a une discussion là-dessus sur le forum.

    pour appeler les scripts, c'est effectivement assez délicat dès que tout n'est pas dans le même répertoire (ce qui n'est pas pratique pour d'autres raisons...).
    tu peux utiliser l'adresse complète (http://........., pas toujours pratique pour les tests), ou des répertoires relatifs (ça a des inconvénients aussi).
    Personnellement, j'utilise des variables du genre $rootpath (qu'il faut définir), qui me permettent de conserver l'arborescence où que soient les fichiers. Ceci dit, je n'ai pas le code sous la main, et ce serait plutôt l'objet d'un tutoriel complet sur une certaine façon d'organiser les sites web qu'une simple explication (surtout dans un forum autre que php).

    pour les messages d'erreur, soit tu peux encadrer le code avec des <!-- //-->, histoire de cacher les messages, mais l'objectif est quand même de résoudre le problème qu'ils posent: message=pb de code, donc solution à trouver... copier le message d'erreur dans google aide souvent beaucoup.

    et sinon, tu reviens dans le forum adéquat te faire aider (perso, sql c pas mon trop truc, mais l'erreur vient de là...)

  15. #15
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Juin 2005
    Messages
    24
    Détails du profil
    Informations personnelles :
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juin 2005
    Messages : 24
    Par défaut
    merci des conseils!

    Je vais utiliser le bon vieux wordpad

    Par contre tu me dis de laisser le code dans la page, ET en meme temps que c'est dangereux ???!!! Je le laisse tout simplement alors?

    Sinon le fait de marquer l'adresse complete, n'a pas fonctionné non plus...
    Je vais tout mettre alors a la racine (ce qui va etre chiant avec le CSS)

  16. #16
    Membre éprouvé Avatar de IdF-Socrateus
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    76
    Détails du profil
    Informations personnelles :
    Âge : 43
    Localisation : France, Paris (Île de France)

    Informations forums :
    Inscription : Juin 2006
    Messages : 76
    Par défaut
    non non: si ton fichier se termine par .php, il sera interprêté par le serveur, et donc il n'apparaitra plus dans la page que voient les visiteurs du site, et là ce n'est plus dangereux.
    C'est de laisser du php dans une page qui se termine par .htm (ou .html) qui est dangereux.

    wordpad si tu veux, mais y'a plein d'éditeurs gratuits avec coloration syntaxique: essaye le lien (ou regarde dans le topic sur les éditeurs), tu verras la différence ! (couleurs différentes selon qu'il s'agit de texte, de variables, de fonctions...)

    pour les variables, ne laisse pas tomber: regarde du côté des variables du serveur (il faut utiliser la commande phpinfo), y'en a une qui te renvoie l'adresse de la racine de ton site, et ensuite tu fais des chemin relatifs depuis cette adresse. Ca prend 5 minutes et tu peux utiliser des dossiers pour classer un peu les fichiers du site (ce que j'avais fait en plus, c'est de mettre un chemin qui m'arrange un peu plus dans une variable pour le réutiliser facilement)

Discussions similaires

  1. XHTML/CSS fixer la taille d'une form
    Par Andry dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 19/07/2006, 15h31
  2. [CSS] Probleme avec le contenu d'une boite avec IE
    Par Seth77 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 19/07/2006, 11h52
  3. [CSS] Taille d'une boite DIV dans un tableau
    Par Seth77 dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 14/06/2006, 19h17
  4. [CSS] boite flottante problème
    Par Pfeffer dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 02/03/2006, 21h14
  5. css fixer une taille pour les select
    Par NeHuS dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 19/10/2005, 10h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo