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

HTML Discussion :

[DIV] alligment vertical


Sujet :

HTML

  1. #1
    Membre habitué Avatar de pmartin8
    Inscrit en
    Novembre 2003
    Messages
    306
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 306
    Points : 126
    Points
    126
    Par défaut [DIV] alligment vertical
    Bonjour

    J'ai une DIV qui doit toujours etre placé dans le bas de ma page web (body)

    Coment faire? J'utilise IE

    merci

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 644
    Points : 66 671
    Points
    66 671
    Billets dans le blog
    1
    Par défaut
    ta page peut scroller ?
    un peu de code serait le bienvenu pour envisager une solution ...

  3. #3
    Membre habitué Avatar de pmartin8
    Inscrit en
    Novembre 2003
    Messages
    306
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 306
    Points : 126
    Points
    126
    Par défaut
    en fait je veux avoir un object (image, div , nimporte quoi) qui va toujours etre au bas de mon ecran sur un page qui ne scroll pas

    je peux te donner du code mais cest un peu ridicule

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <html>
    <body>
     
      Un page web full intéressante  
     
      <div> 
         Cette div doit etre en bas de mon ecran peu importe la résolution
      </div> 
    </body>
    </html>

  4. #4
    Membre éclairé Avatar de Death83
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    1 667
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2005
    Messages : 1 667
    Points : 878
    Points
    878
    Par défaut
    Je crois que c'est un truc que l'on peut pas faire avec les div. Regarde dans la fac je crois que c'est préciser. J'avais eu le meme probleme mais je sais plus comment j'avais fait pour y remédier.

  5. #5
    Membre habitué Avatar de pmartin8
    Inscrit en
    Novembre 2003
    Messages
    306
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 306
    Points : 126
    Points
    126
    Par défaut
    en fait je me fou un peu que ca soit une DIV ...

    Je suis ouvert a nimporte quelle solution!

  6. #6
    Membre actif
    Profil pro
    Inscrit en
    Août 2005
    Messages
    221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 221
    Points : 227
    Points
    227
    Par défaut
    Salut !

    Soit :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div style="clear: both"></div>
    A utiliser s'il y a des éléments flottants dans ta page.

    Ou alors :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div style="position: absolute; bottom: 0; width: 100%; height: ..px"></div>
    En général à placer dans un autre bloc en position relative.

    Mais comme précédemment dit il faut voir avec le code de ta page.

  7. #7
    Membre habitué Avatar de pmartin8
    Inscrit en
    Novembre 2003
    Messages
    306
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 306
    Points : 126
    Points
    126
    Par défaut
    heum spirou

    {clear: both} ca assure qu'il n'y aura rien qui va floater a gauche et a droite de la DIV... Rien a voir avec l'alligment vertical, si ce n'est que ca force un saut de ligne lorque tes DIV float

    Pour ce qui de bottom: 0px ca indique tu tu va alligner ta div a 0 pixel du bas de ta div COURANTE....
    Le bottom auquel cela fait référence est le bottom de la DIV courrante et non celle de la page web!




    Ce que Death83 dit plus haut est bien vrai.. l'allignement virtical n'est pas supporté encore avec les DIV ... Je cherche donc une autre solution sans utiliser de DIV

    Merci

  8. #8
    Membre actif
    Profil pro
    Inscrit en
    Août 2005
    Messages
    221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 221
    Points : 227
    Points
    227
    Par défaut
    Oui m'enfin, j'ai sans doute dû mal comprendre ce que tu voulais.

    Citation Envoyé par pamartin8
    J'ai une DIV qui doit toujours etre placé dans le bas de ma page web (body)

    Coment faire? J'utilise IE
    Et ensuite :
    Citation Envoyé par pmartin8
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <html>
    <body>
     
      Un page web full intéressante 
     
      <div>
         Cette div doit etre en bas de mon ecran peu importe la résolution
      </div>
    </body>
    </html>
    J'ai pas trop compris de quel alignement vertical auquel tu fais allusion, l'alignement de quoi ?
    Et par rapport à quoi ?

  9. #9
    Membre habitué Avatar de pmartin8
    Inscrit en
    Novembre 2003
    Messages
    306
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 306
    Points : 126
    Points
    126
    Par défaut
    J'ai pas trop compris de quel alignement vertical auquel tu fais allusion, l'alignement de quoi ?
    Et par rapport à quoi ?
    l'alligment de ma DIV
    Par rapport a ma page WEB.
    --------------------------------------------

    Mais puisque j'ai oublié l'idée dutiliser une DIV .. voici le nouveau probleme:

    Je veux placer du texte pour quil soit toujours situé dans le bas de ma page web peut import la résolution de mon écran. Je sais qu'un frame ferait l'affaire, mais je ne veux pas en utiliser

    merci

  10. #10
    Membre actif
    Profil pro
    Inscrit en
    Août 2005
    Messages
    221
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Août 2005
    Messages : 221
    Points : 227
    Points
    227
    Par défaut
    Je pense que de toute façon, ce n'est pas l'utilisation d'un div qui puisse poser le problème.

    Voici un exemple :
    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
    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
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML STRICT 4.01 //EN"   "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
    		<title>
    		</title>
    	</head>
    	<body style="margin: 0; height: 100%">
     
    	<div style="position: relative; padding: 0 100px; _height: 100% /* IE seulement */">
     
    		<div style="padding: 0 0 50px 0">
    			L’article suivant énumère 101 astuces que l’on peut faire avec le composant explorateur de Mozilla que l’on ne peut pas faire avec IE. Cette liste ne comporte que des astuces n’impliquant pas une modification manuelle de la base de registres ou autre bidouille obscure. J’ai utilisé la version Windows de IE v6.0, la liste change un peu pour la version Mac.
    			Article original : version anglaise – version Italienne – version japonaise.
    			1. Navigation par onglets
    			Vous pouvez afficher plusieurs sites dans une même fenêtre grâce des onglets. [1]
    			2. Blocage des fenêtres Pop-Ups
    			Empêche l’affichage de toutes ces petites fenêtres de pub. [2]
    			3. Empêcher les scripts de faire certaines choses
    			Telles que déplacer des fenêtres, les fermer et stocker des cookies. [3]
    			4. Barre de liens
    			Affiche le contenu des balises de liens dans un document, vous permettant de naviguer dans diverses parties d’un site. [4]
    			5. Barre latérale
    			La barre latérale fournit quantité d’onglets par défaut, et d’autres peuvent être ajoutés par l’utilisateur. [5]
    			6. Peut ajouter des panneaux personnels à la barre latérale
    			Des barres latérales personnalisées peuvent être écrites en HTML ou XUL et peuvent être installées depuis un site distant sans grosses difficultés. [6]
    			Mozilla, les onglets, la barre latérale et la barre de navigation – 61.2 ko
    			Mozilla, les onglets, la barre latérale et la barre de navigation
    			Le barre de navigation, située juste sous la barre d’adresse, permet de positionner des boutons sur les champs "meta" implantés par l’auteur de la page. Ici, vous trouvez des informations sur les auteurs, leur email, des pages suivantes/précédentes ou un niveau de hiérarchie supérieur (tags "link rel" implantés par les auteurs).
    			7. Meilleur contrôle sur le zoom du texte
    			On peut ajuster la dimension du texte à n’importe quelle taille. IE n’a que 5 niveaux de zoom, et je n’ai pas trouvé de raccourci clavier pour les utiliser. [7]
    			8. Peut zoomer n’importe quel texte, même ceux avec des polices à taille fixe
    			Peux zoomer sur le texte quelle que soit l’unité de taille précisée.
    			9. Peut choisir parmi plusieurs feuilles de style fournies dans une page
    			Quand une page possède plusieurs feuilles (ou des alternatives), on peut choisir celle à utiliser via le menu Vue. [8]
    			10. Dialogue Info Page
    			Fournit des informations complémentaires sur le codage, type MIME, balises de références et méta. [9]
    			11. Dialogue détaillé form/link/media info
    			La fenêtre de dialogue « Page Info » possède des onglets avec les listes des éléments formulaires, liens, images et autres média présents dans la page. On peut même prévisualiser les images et les enregistrer depuis cette fenêtre. [10]
    			12. Enregistre les plug-ins
    			Mozilla enregistre les plug-ins lors de l’enregistrement d’une page Web entière. Vous pouvez aussi les enregistrer depuis la fenêtre Info Page. [11]
    			13. Thèmes
    			Fournit deux thèmes par défaut (Classique et Moderne), mais d’autres peuvent être installés. [12]
    			14. Fenêtre des marque-pages affiche plus de détails
    			Plus d’informations sont affichées dans la fenêtre des marque -pages. [13].
    			15. Mots-clés pour les marque-pages
    			Des mots-clés permettent de trouver rapidement un marque-page. Cela a l’avantage de renseigner automatiquement la partie saisie tapée après le mot-clé, là où ’%s’ apparaît dans l’URL du marque-page.  [14]
    			16. Les marque-pages sont téléchargés à intervalles réguliers
    			On peut demander à Mozilla de vérifier périodiquement les mises à jour de la page associée à un marque-page, et être prévenu lorsque le contenu de cette dernière change. Enfin en théorie. [15]
    			17. Gestionnaire de cookies
    			Le gestionnaire de cookies permet de visualiser les cookies enregistrés, leur contenu et date d’expiration. [16]
    			18. Peut supprimer les cookies individuellement
    			Le gestionnaire de cookies permet de supprimer les cookies individuellement, sans avoir à fouiller dans le système de fichiers.
    			L’article suivant énumère 101 astuces que l’on peut faire avec le composant explorateur de Mozilla que l’on ne peut pas faire avec IE. Cette liste ne comporte que des astuces n’impliquant pas une modification manuelle de la base de registres ou autre bidouille obscure. J’ai utilisé la version Windows de IE v6.0, la liste change un peu pour la version Mac.
    			Article original : version anglaise – version Italienne – version japonaise.
    			1. Navigation par onglets
    			Vous pouvez afficher plusieurs sites dans une même fenêtre grâce des onglets. [1]
    			2. Blocage des fenêtres Pop-Ups
    			Empêche l’affichage de toutes ces petites fenêtres de pub. [2]
    			3. Empêcher les scripts de faire certaines choses
    			Telles que déplacer des fenêtres, les fermer et stocker des cookies. [3]
    			4. Barre de liens
    			Affiche le contenu des balises de liens dans un document, vous permettant de naviguer dans diverses parties d’un site. [4]
    			5. Barre latérale
    			La barre latérale fournit quantité d’onglets par défaut, et d’autres peuvent être ajoutés par l’utilisateur. [5]
    			6. Peut ajouter des panneaux personnels à la barre latérale
    			Des barres latérales personnalisées peuvent être écrites en HTML ou XUL et peuvent être installées depuis un site distant sans grosses difficultés. [6]
    			Mozilla, les onglets, la barre latérale et la barre de navigation – 61.2 ko
    			Mozilla, les onglets, la barre latérale et la barre de navigation
    			Le barre de navigation, située juste sous la barre d’adresse, permet de positionner des boutons sur les champs "meta" implantés par l’auteur de la page. Ici, vous trouvez des informations sur les auteurs, leur email, des pages suivantes/précédentes ou un niveau de hiérarchie supérieur (tags "link rel" implantés par les auteurs).
    			7. Meilleur contrôle sur le zoom du texte
    			On peut ajuster la dimension du texte à n’importe quelle taille. IE n’a que 5 niveaux de zoom, et je n’ai pas trouvé de raccourci clavier pour les utiliser. [7]
    			8. Peut zoomer n’importe quel texte, même ceux avec des polices à taille fixe
    			Peux zoomer sur le texte quelle que soit l’unité de taille précisée.
    			9. Peut choisir parmi plusieurs feuilles de style fournies dans une page
    			Quand une page possède plusieurs feuilles (ou des alternatives), on peut choisir celle à utiliser via le menu Vue. [8]
    			10. Dialogue Info Page
    			Fournit des informations complémentaires sur le codage, type MIME, balises de références et méta. [9]
    			11. Dialogue détaillé form/link/media info
    			La fenêtre de dialogue « Page Info » possède des onglets avec les listes des éléments formulaires, liens, images et autres média présents dans la page. On peut même prévisualiser les images et les enregistrer depuis cette fenêtre. [10]
    			12. Enregistre les plug-ins
    			Mozilla enregistre les plug-ins lors de l’enregistrement d’une page Web entière. Vous pouvez aussi les enregistrer depuis la fenêtre Info Page. [11]
    			13. Thèmes
    			Fournit deux thèmes par défaut (Classique et Moderne), mais d’autres peuvent être installés. [12]
    			14. Fenêtre des marque-pages affiche plus de détails
    			Plus d’informations sont affichées dans la fenêtre des marque -pages. [13].
    			15. Mots-clés pour les marque-pages
    			Des mots-clés permettent de trouver rapidement un marque-page. Cela a l’avantage de renseigner automatiquement la partie saisie tapée après le mot-clé, là où ’%s’ apparaît dans l’URL du marque-page.  [14]
    			16. Les marque-pages sont téléchargés à intervalles réguliers
    			On peut demander à Mozilla de vérifier périodiquement les mises à jour de la page associée à un marque-page, et être prévenu lorsque le contenu de cette dernière change. Enfin en théorie. [15]
    			17. Gestionnaire de cookies
    			Le gestionnaire de cookies permet de visualiser les cookies enregistrés, leur contenu et date d’expiration. [16]
    			18. Peut supprimer les cookies individuellement
    			Le gestionnaire de cookies permet de supprimer les cookies individuellement, sans avoir à fouiller dans le système de fichiers.
     
    		</div>
     
    		<div style="position: absolute; bottom: 0; width: 100%; height: 50px; background: red; margin-top: 50px;">
    			Toujours en bas.
    		</div>
     
    		</div>
     
    	</body>
    </html>
    J'ai ajouté un div container qui contient tout les élément de la page.
    Fonctionne avec IE et FF.

    Est-ce genre de truc que tu désires obtenir ?

  11. #11
    Membre habitué Avatar de pmartin8
    Inscrit en
    Novembre 2003
    Messages
    306
    Détails du profil
    Informations forums :
    Inscription : Novembre 2003
    Messages : 306
    Points : 126
    Points
    126
    Par défaut
    ouais cest pas mal!1
    merci bien!

    Mais ca me cause encore un nouveau probleme:

    La div qui est placée dans le bas elle est en position absolue alors elle sort du document flow. Si par exemple je voulais avoir un encadré qui entoure le text du haut et la div rouge en bas alors ca fonctionne pas

    as-tu une solution pour ca?

    merci

Discussions similaires

  1. DIV Affichage vertical
    Par Zineb08 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 28/10/2008, 01h53
  2. [CSS] alignement vertical d'un texte dans un div
    Par alexfrere dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 06/07/2006, 19h07
  3. [DIV] vertical align
    Par crakocrako dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 06/07/2006, 15h47
  4. [DIV][CSS] Alignement vertical
    Par pmartin8 dans le forum Mise en page CSS
    Réponses: 15
    Dernier message: 02/11/2005, 15h50
  5. [HTML] Centrage vertical d'un div
    Par LE NEINDRE dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 25/08/2005, 18h31

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