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 :

Container fluid header et footer


Sujet :

CSS

Mode arborescent

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2016
    Messages
    37
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2016
    Messages : 37
    Par défaut Container fluid header et footer
    Bonjour à tous,

    J'ai fait un peu le tour du forum (les problèmes de header et de footer ça a l'air d'être assez récurent ^^) malheureusement je ne trouve rien qui fonctionne dan mon cas, il doit y avoir un conflit quelque part dans mon css mais je suis bien incapable de le trouver visiblement. Bref je sollicite votre aide parce que actuellement le header de ma page ressemble à ça:

    Nom : Capture.PNG
Affichages : 1069
Taille : 646,7 Ko

    Mon image de bannière fait bien toute la taille de la page mais malheureusement ce n'est pas le cas du header (en bleu) et à droite il ne va pas jusqu'au bout de la page. Le html de mon header est simple et j'utilise la classe container fluid de bootstrap pour qu'il prenne toute la largeur mais ce n'est pas le cas
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!--HEADER-->
      	<header class="container-fluid header">
      		<div class="row">
     
            <div class="col-md-4 logo">
              <p>Ici Logo</p>
      	</div>
            <div class="col-md-8 titre">
      		<h1>Express'hop</h1>
     
      	</div>
      		</div>
     
      	</header>
    <!-- Fin du HEADER-->

    Le css qui va avec (j'ai supprimer les padding automatique de la classe container-fluid de bootstrap dans mon css mais ce n'est pas ça qui pose problème)
    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
     
    .container-fluid
    {
    	padding:0;
     
    }
     
    .header
    {
    	width: 100%;
    	max-width: 100%;
    	background-color:#10C1D9;
    	height:85px;
    	text-align: center;
    	color:white;
    	box-shadow: 1px 1px 10px black;
     
    }
     
    .titre{
    	text-shadow: black 1px 1px 10px;
    	text-transform: uppercase;
    	letter-spacing: 1px;
    	font-weight: bold;
    }
    Voilà j'ai le même problème au niveau du footer qui est aussi en container-fluid et je n'arrive pas à régler ce problème, si l'un d'entre vous pouvait m'aider à trouver la solution ce serait super!!

    P.S: Je ne sais pas si on le voit sur l'image mais j'ai deux barres de défilement la verticale est normale car le contenu descend encore dans la page mais la barre horizontal est inutile j'aimerais que tout tienne sur une page et peut être que le probème vient de la ...
    Images attachées Images attachées  

Discussions similaires

  1. probleme declaration struct header
    Par mrttlemonde dans le forum C
    Réponses: 1
    Dernier message: 10/04/2006, 11h43
  2. [FPDF] Méthodes header et footer
    Par dun73 dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 17/03/2006, 10h00
  3. Problemes avec les header informations
    Par BernardT dans le forum Langage
    Réponses: 1
    Dernier message: 15/11/2005, 13h10
  4. mise en page (Header and Footer) en XML-XSL.
    Par christine dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 01/03/2004, 16h31

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