Placement d'une div full width

**VinceDP** · 01/04/2015, 12h32

Bonjour, je réalise un site sur Wordpress avec le thème Skeleton et j'ai besoin d'intégrer un bandeau faisant 100% de la page un peu avant le footer. La taille de mes pages est de 960px et j'ai donc du placer ma div contenant le bandeau au dessus du wrapper pour qu'il prenne bien toute la largeur

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<body class="page page-id-2 page-template-default sidebar-left">
    <div id="background_footer"></div>
    <div id="wrap" class="container">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.page-id-2 #background_footer {
    background: url("images/background_footer.png"); height: 73px; display: block; position: absolute; bottom:0px;
    width: 100%;
}

Ce qui donne ceci : http://hpics.li/6dea92a

Le problème est que quand le contenu des tabs du dessus est plus conséquent, le texte placé sur le bandeau se retrouve décalé alors que le bandeau lui reste en position : http://hpics.li/eed60d4

Y a t-il un moyen de faire déplacer le bandeau en fonction du contenu au dessus ? J'aimerais aussi savoir si il est possible de centrer les titres (comme "Mon parcours") en hauteur sans passer par un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

display: table-cell;

?

**Erwan31** · 01/04/2015, 12h58

Bonjour,
commencer par éviter le positionnement absolu (hors flux) qui n'est pas pertinent dans ce cas.
D'autre part , un élément positionné en absolu/fixed (tout comme les flottants) se transforme automatiquement en boite de bloc et c'est la valeur de display par défaut des div, tu n'as donc pas besoin du display:block.

**VinceDP** · 01/04/2015, 13h05

Le problème est que sans le positionnement absolue je ne peux pas placer le bandeau en bas de la page
Je ne savais pas pour le display: block merci de la précision !

**Erwan31** · 01/04/2015, 13h16

Ok, il y a d'autre méthode pour placer des élément en bas de page :

Sinon il faut ajouter une padding-bottom au bloc parent au moins égal à la hauteur du bloc positionné en absolu.

Placement d'une div full width

Positionnement en CSS

Discussions similaires

Partager

Partager