[Résolu] Prolonger le design en dehors du container

Bonjour,

J'ai créé un design sous Photoshop pour ensuite le mettre en ligne et j'aimerais savoir comment faire pour faire continuer mon bandeau bleu et mon footer noir sur les bords en dehors du container. Et faire en sorte que ces deux "bandeaux" s'étirent en fonction de la résolution des Internautes ?

Version Photoshop : http://hpics.li/29428fa

Version Web actuelle : http://hpics.li/06f7343

Lien vers le site test : http://www.aurelienhamel.com/sites/test/index.html

Merci !
Modifié par DKProject (23 Apr 2013 - 14:07)

Salut DKProject,
ton container a une taille fixe, tu ne peux donc pas appliquer une taille supérieur à un élément compris dans ton container.
Voici ma solution ,car il y en a d'autres, applique une bordure de 5px à ton body

body{border-top:5px solid red;}

, quant au footer, il ne doit tout simplement pas à être compris dans le container. Tu lui appliques ensuite une taille( width de 100%), c'est aussi simple que ça.

footer{width:100%;background-color:black;}

J'espère que j'aurai su répondre à ta préoccupation.

Ok, je vais essayer ça.

Par contre pour la barre bleu et la barre noir, elles ont un dégradé dans l'espace que je leur est donnée (1004px) et ont la même couleur aux extrémités pour que justement le surplus sur les côtés soit uniforme.

Du coup, quand je met le border de 4px bleu dans le body, j'ai la barre qui est au dessus de ma barre avec le dégradé.

Je sais pas si je suis très clair ! ^^

Petit aparté : J'ai mis un hover sur mes boutons "réseaux sociaux" avec une technique qui fait que j'ai un message jaune dans Dreamweaver. Je voulais savoir si c'était une technique d'hover "propre" ou si l'erreur de Dreamweaver est justifiée ?

Image : http://hpics.li/066d78b

Merci !
Modifié par DKProject (20 Apr 2013 - 10:20)

Le dégradé que tu appliques est une image ou du css ?

Ce sont tous les deux des images !

Pour faire simple avec ta structure HTML actuelle :

Ne définit pas de largeur à #global pour occuper toute la largeur, de même pour #footer.
Appliques un margin-left/right à auto sur #header et #contenu pour les centrer à nouveau, ainsi qu'à #nav avec une largeur.

A partir de là, tu devrais avoir ton fond noir sur toute la largeur de la page pour ton footer et ton header contenu centré.

Le plus simple pour la bande bleue est de définir en background de body, la couleur bleu des extrémités en plus de l'image du dégradé centrer et en repeat-y. Il te reste plus qu'à appliquer un margin-top de 4px et un background-color blanc sur #global.

Merci de ta réponse.

Je viens d'essayer de modifier le CSS comme tu me la conseillé, cependant quand j'applique les changements le footer et le header bleu ne "s'étirent" par sur la longueur. J'ai juste le site qui se déstructure avec la suppression du footer et le site qui est décalé sur la gauche.

Je viens de réessayer et ça me donne ceci :

http://www.aurelienhamel.com/sites/test/index.html

Pour les espace à gauche et à droit du footer et de la barre bleu, ça doit se jouer dans le CSS j'imagine. Par contre comment je centre à nouveau la barre bleu avec dégradé ainsi que le menu du bas ?

Merci
Modifié par DKProject (21 Apr 2013 - 17:32)

Pour l'espace à gauche et à droite du footer, c'est dû au padding de global à supprimer. C'est tout. Ensuite, #nav avec un width de 1004 et un margin-left/right auto pour centrer ta liste à l'intérieur.

Pour la bordure, tu peux supprimer ta div #bande-bleue et reprendre ce que je disais plus tôt :

mob a écrit :
Le plus simple pour la bande bleue est de définir en background de body, la couleur bleu des extrémités en plus de l'image du dégradé centrer et en repeat-y. Il te reste plus qu'à appliquer un margin-top de 4px et un background-color blanc sur #global.

Si je regarde ta page teste, tu est arrivé à ce que tu voulais non ?

Tu peux peut-être ajouter un no-repeat et center à ton background pour centre ton dégrader. Et ça sera pas mal

Oui, j'ai réussi mais en remettant :

<div id="barre_bleu"></div>

Et quand je veux centrer et ajouter un no-repeat, l'image n'apparait plus et laisse place à la barre bleu unie.

#barre_bleu				{height:4px; background-image:url(../Images/bande_bleu.jpg) no-repeat; background-color:#004974; margin-left:auto; margin-right:auto;}

Informe toi sur la syntaxe exact de background : http://www.w3schools.com/css/css_background.asp

Tu pourras voir que background-image n'attend que l'url en arguments, si tu veux définir la couleur, la répétition et le positionnement, tu devras écrire seulement background.

Exemple :

background: blue url(img.png) no-repeat 50% 0;

Merci Mob pour ton aide, c'est parfait !