RESOLU: logo en 3 part (left-repeat center right-repeat)

Marsh Posté le 03-05-2005 à 13:05:27

bonjour,
le probleme consiste a afficher une image/logo/banniere/header sur la totalité de la largeur de l'ecran (ou d'une DIV).

J'ai un logo de la taille d'une bannière classique (long rectangle)(image-center)
J'ai coupé un bout de l'image sur 0.2 cm a l'extrémité gauche (image-left)
idem pour (image-right)

Je voudrais maintenant que image-center soit tjrs bien au centre (et no-repeat),
et que image-left "comble" a gauche (repeat sur autant de px que necessaire avant image-center),
pareil a droite.

chaque image (bg) est dans une DIV (header-left,center,right), le tout dans une DIV header, le tout dans une DIV container.
pas facile de "combler" tout ca correctement, quelque soit la largeur de ma DIV container qui est 90% de la largeur de l'ecran.

voila, si vous avez une idée ?
j'ai deja essayé pas mal de choses en CSS, mais pas evident de déterminer le width des DIV gauches et droite.

HTML:

Code :

<div id="container" >
<div id="header" >
<div id="header-left" ></div>
<div id="header-center" ></div>
<div id="header-right" ></div>
</div>
[...bla...]
</div>

CSS:

Code :

#container {
width: 90%;
}
#header {
height: 119px;
}
#header-left {
height: 100%;
width: ???;
float: left;
/*background: url(header-left.jpg) repeat-x top left;*/
background-image: url(header-left.jpg);
background-repeat: repeat-x;
background-position: top left;
}
#header-center {
height: 100%;
align: center;
/*background: url(header.jpg) no-repeat fixed top center;*/
background-image: url(header.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#header-right {
height: 100%;
width: ???;
float: right;
/*background: url(header-right.jpg) no-repeat-x top right;*/
background-image: url(header-right.jpg);
background-repeat: repeat-x;
background-position: top right;
}

PS: difficile d'utiliser z-index sans absolute: j'ai reussi a mettre le width de left et right a 50%, et a afficher center par dessus, mais center en absolute donc, ce qui ne va plus lors du défilement de la page (assenceur).
PS: peut etre récupérer la largeur de l'écran en javascript, mais je
m'en passerais bien

merci d'avance a celui qui aurra la bonne solution. ( attention ca ennerve bon courage)
ou si vous avez carrément une autre idée pour arriver au même, elle est la bienvenue.

Message édité par artfakt le 03-05-2005 à 14:19:08

Reply

Marsh Posté le 03-05-2005 à 13:05:27

Reply

Marsh Posté le 03-05-2005 à 13:10:24

pour header-left et header-right faut mettre le width en auto
pour header-center, faut préciser le width en px...

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 03-05-2005 à 13:54:51

résolu !
l'html reste le meme, le css deviens...

#container {
width: 90%;
}

#header {
height: 119px;
position:relative;
background-color:white;
}
#header-left {
height: 100%;
width: 50%;
float: left;
/*background: url(header-left.jpg) repeat-x top left;*/
background-image: url(header-left.jpg);
background-repeat: repeat-x;
background-position: top left;
}
#header-center {
position:absolute;
height: 100%;
width:400px; /* taille de l'image central */
left:50%;
margin-left: -200px; /* moitié de l'image central x -1 */

/*background: url(header.jpg) no-repeat fixed top center;*/
background-image: url(header.jpg);
background-repeat: no-repeat;
background-position: top center;
background-color:LemonChiffon;
}
#header-right {
height: 100%;
width: 50%;
float: right;
/*background: url(header-right.jpg) no-repeat-x top right;*/
background-image: url(header-right.jpg);
background-repeat: repeat-x;
background-position: top right;

}

Message édité par KangOl le 03-05-2005 à 13:55:57

---------------
Nos estans firs di nosse pitite patreye...

Reply

Marsh Posté le 03-05-2005 à 14:07:52

parfait KangOl c'est nickel !
c'est la combinaison gagnante,
quelle belle combinaison de relative et absolute.
merci bcp pour ton aide,
j'ai encore a bosser ces satanés CSS (drolement puissant, mais faut maitriser)
bien joué,
merci encore
et bonne continuation

Message édité par artfakt le 03-05-2005 à 14:18:05

Reply

RESOLU: logo en 3 part (left-repeat center right-repeat)

Sujets relatifs:

Leave a Replay