5568 sujets

Sémantique web et HTML

Bande colorée html/css

Bonjour,

Je travaille actuellement sur mon site et j'aimerais y inclure une bande colorée faisant la largeur de la page. Or je n'y arrive pas, il y a toujours des marges blanches sur les côtés. Je travaille sur un template wordpress "Treeson" dont je modifie les styles grâce à un thème enfant.

Voici le code pour la bande :
html
 
<div class="content-container">
<p>test</p>
</div>


css


.content-container {
    background-color: pink;
    display: block;
    border:none;
    padding: 0;
    margin:0;
    height: 200px;
}


Je suis débutante et je ne trouve pas la solution, merci d'avance pour votre aide ! Smiley smile
Modérateur
Bonjour,

Le code que tu nous a donné ne suffit pas pour qu'on puisse voir d'ou ça vient... ton site est en ligne ? Tu peux nous donner son adresse qu'on aille voir ?

Ce que Thierry a derrière la tète c'est qu'il y a un container qui limite la largeur de ton élément c'est pour ça que la couleur ne va pas jusqu'aux bords.
Bonjour,


j'ai également l'impression que le menu ne va pas jusqu'aux bords non plus...

Merci pour votre aide !
Modifié par celia181 (03 Oct 2018 - 02:32)
Modérateur
Si tu regarde dans ton éditeur de code (F12) tu verras que le bloc "container" a une largeur fixe.

Si tu veux que le container fasse toute la largeur il faut overider le style avec :

.container {
    width: auto;
    padding: 0;
}


Mais le soucis est que dedans il y a un bloc .row avec :

.row {
    margin-right: -15px;
    margin-left: -15px;
}


Donc cela fait dépasser le bloc du container et crée une scroll. Il faut donc virer ces margin.
Et enfin il y a encore un bloc .col-lg-12 avec du padding qu'il faut enlever :

.container {
    width: auto;
    padding: 0;
}
.row {
    margin-right: 0;
    margin-left: 0;
}
.col-lg-12 {
    padding-right: 0;
    padding-left: 0;
}


C'est toujours assez compliqué de modifier un theme wordpress et de le contraindre a faire quelquechose pour lequel il n'avait pas été prévu.

Tu n'a pas une option dans ton thème pour avec une mise en page en pleine largeur ? Ou pour faire des sections comme ça ?

Il faut que tu fasse attention ca ici on a du modifier le container global, ce qui veut dire a mon avis que le contenu de TOUTES tes pages sera affiché en pleine page (et non plus contraint dans une colonne centrale).
Meilleure solution
Merci beaucoup ! ça marche !
ça modifie effectivement certaines pages mais je vais essayer de trouver une solution
Encore merci ! Smiley smile
Bonjour,

Comme on peu voir sur de nombreux nouveaux sites, la mode est au longue bande de couleur horizontal qui prennent toute la largeur de l'écran (comme sur la page d'accueil de emonsite d'ailleurs).

Connaissez vous la technique pour cette réalisation sur toute la largeur de l'écran?

Merci à vous
Sujet clos
Aller à