28172 sujets

CSS et mise en forme, CSS3

[Résolu] Header avec 3 blocs (largeur fixe et variable)

Bonjour,

je réalise un site et je bloque un petit peu sur le css. Je dois intégrer un design avec un header. Il possède une ligne un peu aléatoire mais qui doit se prolonger à droite et à gauche. J'ai donc découpé le header en 3 parties :
- une image principale avec une largeur fixe (1020px), centrée
- un bloc à gauche avec une image en fond qui se répète
- et un autre à droite aussi (avec une image de fond différente)

Voila comment s'organise l'html :

<div id="header_left"></div>
<div id="header">
   Menu, slogan, ....
</div>
<div id="header_right"></div>


Et pour le css :
#header_left, #header, #header_right {float: left;}
#header_left {background: blue;}
#header_left, #header_right {height: 243px;}
#header {background: green; width: 1020px; height: 203px; padding-top: 40px;}
#header_right {background: red;}


Le problème c'est que je n'arrive pas à faire remplir l'espace à gauche et à droite par les deux blocs. Je pourrai le faire en js en déterminant leur largeur des 2 blocs latéraux en fonction de la largeur de l'écran mais je préfèrerai largement le faire en css.

Auriez-vous une solution ?

Merci de votre aide
Modifié par skurty (10 Jun 2011 - 10:13)
Bonjour,

Tu te complique la vie.

2 solutions possibles :
1. L'image centrale comporte du texte et/ou est cliquable:
<div id="header"><img src="chemin" alt="contenu alternatif"></div>
#header{
  background:url(très grande image avec les prolongations) center repeat-y;
  text-align:center;
}


2. L'image centrale ne comporte pas detexte et n'est pas cliquable:
<div id="fondheader"><div id="header"></div></div>
#fondheader{
  background:url(très grande image avec les prolongations) center repeat-y;
}
#header{
  width:1200px;
  margin: 0 auto;
  background:url(image du header) no-repeat;
}



La première solution est à privilégier.
Bonjour et merci de ta réponse.

Je n'ai pas envie de faire un header de 2000px de largeur parce que ce n'est pas du tout optimisé et je pense qu'il y a une meilleure façon de faire.

J'avais commencé à faire la deuxième façon mais je ne peux pas avoir un fond uniforme parce que je souhaiterai faire continuer l'image des deux cotés mais ce n'est pas le même motif à droite et à gauche.
Euh... Les deux solutions utilisent les deux mêmes images...

Et je te rassure, si c'est optimisable (en compressant les images convenablement).
Oui mais le problème n'est pas là : il me faut 3 images en tout. Voici un croquis (très) simplifié pour représenter le header : http://img861.imageshack.us/img861/8012/headerpvm.png

Les deux traits en pointillés représentent le découpage que j'ai effectué.

La partie centrale représente la partie fixe et les deux extrémités sont les blocs à largeur variable.

Comme vous le voyez, les deux blocs latéraux sont différents, il faudrait donc que je trouve un moyen pour les placer à coté du bloc central en les forçant à prendre la largeur restante en fonction de la résolution.
La solution présentée par Laurie-Anne, en utilisant une image de fond suffisamment large (mettons 3000px), marche pas mal. Suivant la nature de l'image, ça peut donner des choses plutôt légères (quelques ko) en choisissant le bon format d'image (presque à coup sûr PNG8). Par curiosité, je voudrais bien voir à quoi c'est censé ressembler exactement.

Si vraiment on a besoin de trois éléments séparés, on peut reprendre la première solution de Laurie-Anne, et l'adapter ainsi:
#header {
  position: relative;
  background: url(image de mettons 10px de large avec le motif de droite) right top repeat-x;
  text-align: center;
}
#header:before {
  position: absolute; z-index: 1;
  left: 0; right: 50%;
  top: 0; bottom: 0;
  background: url(image de mettons 10px de large avec le motif de gauche) left top repeat-x;
}
#header > img {
  position: relative;
  z-index: 2;
}

Modifié par fvsch (07 Jun 2011 - 19:21)
Bonjour à toutes et à tous,

J'ai commis un erreur d'interprétation dans mon dernier message. Désolé ! J'ai repris l'analyse du sujet.

J'ai testé la méthode de 'FVSCH' qui est la reprise de Laurie-Anne. Et bien, elle ne fonctionne pas ! Je n'ai pas trop insisté.

En ce qui concerne le problème exposé, voici l'énoncé afin d'être clair :

Je suis parti de trois images :

1) une image répétitive à gauche large de 1px et haute de 50px.
2) une image répétitive à droite large de 1px et haute de 50px.
3) une image centrale large de 100px et haute de 50px.

Il existe dans la partie gauche de l'image centrale un motif dont la continuité et la répétition se fera dans l'image de gauche.
Il existe dans la partie droite de l'image centrale un motif dont la continuité et la répétition se fera dans l'image de droite.

Nous plaçons d'abord l'image répétitive gauche de 0% à 50%.
Nous plaçons ensuite l'image répétitive droite de 50% à 100%.
Puis enfin, nous superposons l'image au centre du conteneur en venant écraser les deux images répétitives gauches et droites.

Nous avons deux problèmes :

1) comment centrer une image, c'est à dire que le centre de l'image doit coïncider avec le centre de la boite. Ça, je sais le faire.

2) comment récupérer les paramètres width et height de l'image.
Et bien ça, je ne sait pas le faire. Donc j'ai mis en dure, dans le CSS, les quatre points suivants :

--> hauteur de l'image : 50px.
--> largeur de l'image : 100px.

--> demi-hauteur : 25px.
--> demi-largeur : 50px.

On peut certainement simplifier le code CSS car j'ai laissé des répétitions afin d'être clair !

voici le résultat en CSS.
/*==========================================*/
/*     le conteneur de nos trois boites     */
/*==========================================*/

div#content {
			background-color		: skyblue;
			position			: relative;
			height			: 200px;
			margin			: 25px;
}

/*=============================================*/
/*     partie répétitive gauche de l'image     */
/*=============================================*/

.boite1 {
			position			: absolute;
			top				: 50%;
			left				: 0;

			background-image	: url("gauche.jpg");
			background-repeat	: repeat-x;

			margin-top			: -25px;

			width				: 50%;
			height			: 50px;

			z-index			: 1;
}

/*=============================================*/
/*     partie répétitive droite de l'image     */
/*=============================================*/

.boite2 {
			position			: absolute;
			top				: 50%;
			right				: 0;

			background-image	: url("droite.jpg");
			background-repeat	: repeat-x;

			margin-top			: -25px;

			width				: 50%;
			height			: 50px;

			z-index			: 1;
}

/*===============================================================================*/
/*     l'image est centrée et recouvre la partie répétitive gauche et droite     */
/*===============================================================================*/

.boite3 {
			position			: absolute;
			top				: 50%;
			left				: 50%;

			background-image	: url("centre.jpg");
			background-repeat	: no-repeat;

			margin-top			: -25px;
			margin-left			: -50px;
			
			width				: 100px;
			height			: 50px;

			z-index			: 2;
}




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Styles.css"></style>
</head>

<body>
<div id="content">
	<div class="boite1"></div>
	<div class="boite2"></div>
	<div class="boite3"></div>
</div>
</body>
</html>


J'ai testé sur les cinq navigateurs à ma disposition : MSIE 8.0, Mozilla Firefox, Google Chrome, Opera et Safari.

A tout hasard, je donne mes images :

image répétitive gauche :
upload/38115-gauche.jpg

image répétitive droite :
upload/38115-droite.jpg

image centre :
upload/38115-centre.jpg


J'espère avoir répondu à la question posée !

@+
Modifié par Artemus24 (08 Jun 2011 - 02:39)
Merci pour vos réponses.

fvsch ta solution utilise du css 3 et j'ai peur que cela pose des problèmes sur certains navigateurs.

J'ai finalement utilisé la technique d'une image très large avant que Artemus24 propose cette solution.

Merci encore pour votre aide.
Artemus24 a écrit :
Et bien, elle ne fonctionne pas ! Je n'ai pas trop insisté.

Si si, elle fonctionne. Je crois qu'il manquait juste un content: "" pour que le pseudo-élément soit visible.

skurty a écrit :
fvsch ta solution utilise du css 3 et j'ai peur que cela pose des problèmes sur certains navigateurs.

Non, c'est du CSS 2.1. Ça passe sur tous les navigateurs dont IE8 et IE9. Le pseudo-élément (:before) ne sera pas généré par IE7, donc si le support de ce dernier est souhaité on peut faire la même chose avec un <span> ou <div> vide enfant du conteneur.

J'ai un peu détaillé la technique ici:
http://covertprestige.info/css/fond-triptyque/
Merci fvsch pour ce tuyau par contre je suis passé par un <span> car malheureusement il me doit d'être compatible tous navigateurs, du moins pour l'instant Smiley cligne
Sujet clos
Aller à