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 :

Width 100% lorsqu'on réduit la fenêtre du navigateur


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2011
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2011
    Messages : 3
    Par défaut Width 100% lorsqu'on réduit la fenêtre du navigateur
    Bonjour,
    Je suis entrain de développer un site web avec deux bandeaux:
    - un bandeau en haut(header) qui va contenir le logo
    - un autre bandeau en bas(en-tête) qui va contenir les droits auteur
    mon problème est quand je réduit la fenêtre du navigateur, le width de mes bandeaux change
    est ce que quelqu'un a une idée ?!
    j'ai essayé d'utiliser max-width et min-width mais toujours le même problème

    mon css:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    html, body {
    	margin:0%;
    	padding:0%;
    	height:100%;
    	width:100%;
    	background-color:#ece9dc;
    }
     
    .bandeaulogo {	
    	background-color:#060606;
    	height:70px;
    	width:100%
    }
    et merci

  2. #2
    Invité
    Invité(e)
    Par défaut
    Salut,

    N'oublie pas le ; après width:100% dans .bandeaulogo, on ne sait jamais.

    Pourrais-tu fournir, en plus, le code HTML pour que l'on puisse t'aider ?
    (au passage, tu peux utiliser les balises [*code]...[*/code], sans les *)

    Ton problème n'apparaît pas clairement, en fait. Si la largeur de ton bandeau est définie en %, elle est relative à celle de son contenant. Si ce même contenant est body, qui lui-même occupe 100% de la fenêtre du navigateur, il n'est pas anormal que la largeur de ton bandeau varie en fonction de celle de la fenêtre.

    A moins que je n'aie rien compris.

  3. #3
    Candidat au Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2011
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2011
    Messages : 3
    Par défaut
    bonjour,
    en css ce n'est pas grave de ne pas mettre ; a la dernière ligne car il y a l'accolade fermante.

    voici un exemple de ce que je veux faire =>

    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
    <style>
     
    html, body {
    margin:0%;
    padding:0%;
    height:100%;
    width:100%;
    background-color:#ece9dc;
    }
     
    .bandeaulogo {	
    	background-color:#060606;
    	height:70px;
    	width:100%
    }
     
    .footer { height:41px;}
     
    .txt {
    	margin:0 auto;
    	width:840px;
    	height:41px;
    	font-size:12px;
    	color:#ffffff;
    	font-family:"Univers";
    	font-style:"regular";
    	text-align:left;
    	padding-top:10px;
    }
    </style>
     
    <div class="bandeaulogo header"><div class="txt">image du logo</div></div> 
     
    <br />
     
    <div class="bandeaulogo footer"><div class="txt">texte footer</div></div>
    donc si on réduit la fenêtre du navigateur, les deux bandeaux n'en plus un width a 100%

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Bonjour,
    pas sûr d'avoir bien compris mais je me lance...
    ton bandeaulogo et footer font bien 100% mais comme tu fixes une valeur de 840px pour la class text de la DIV qui est inclus dans la DIV avec class bandeaulogo une scrollBar apparaît dès que la largeur de la fenêtre fait moins de 840.

  5. #5
    Candidat au Club
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Juin 2011
    Messages
    3
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Juin 2011
    Messages : 3
    Par défaut
    Oui tu as raison, une scrollBar apparaît dès que la largeur de la fenêtre fait moins de 840. et le bandeau noir n'est plus a 100%width.
    Je sais que si j'enlève le width de ma class txt le bandeau reste tout le temps a 100% mais c'est ça mon problème je dois fixer la largeur de la class txt pour la mise en forme de ma page.

  6. #6
    Invité
    Invité(e)
    Par défaut
    Eh bien fixe la largeur de ta classe .txt à 840px.
    Et si tu ne souhaites pas avoir de scrollbar lors de la réduction de la fenêtre, c'est max-width: 840px qu'il faut écrire.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 210
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 210
    Par défaut
    Citation Envoyé par safaeA Voir le message
    Oui... ...et le bandeau noir n'est plus a 100%width.
    il est à 100% de la largeur de son parent qui en l'occurrence est la fenêtre
    Citation Envoyé par safaeA Voir le message
    Je sais que si j'enlève le width de ma class txt le bandeau reste tout le temps a 100% mais c'est ça mon problème je dois fixer la largeur de la class txt pour la mise en forme de ma page.
    essaies peut être de mettre un min-width : 840px sur les bandeaux, je dois admettre que je me perd un peu...

Discussions similaires

  1. liens avec width:100% dans un td : firefox != IE
    Par avogadro dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 07/12/2006, 20h05
  2. [css] positionnement d'images width 100%
    Par testicool dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 02/02/2006, 23h18
  3. Problème de compatibilité pour [style="width:100%;] sur
    Par Furius dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 12/01/2006, 17h19
  4. une de mes frame disparail lorsque je rétréci la fenêtre...
    Par renofx1 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 11/01/2006, 00h41
  5. [CSS]width:100% avecmargin/padding/border ?
    Par Raay dans le forum Mise en page CSS
    Réponses: 14
    Dernier message: 03/11/2005, 15h15

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