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:
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)
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!!
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; }
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 ...
Partager