Design extensible

Mais des côtés

Sujet résolu

16 juillet 2006 à 17:38:17

Bonjour, j'aimerais avoir un design extensible, mais sur les deux côtés, à gauche et à droite. Je bloque pour faire le header.

Voir schéma ici (les zones encadrées de rouge sont les divs voulus, ceux des côtés doivent être extensibles). http://pix.nofrag.com/fc/38/10080e064e5cbf2ba97b07e0f63a.html

Mon code :

#gauche {
background-image: url("images/gauche.png");
background-repeat: repeat;
height: 136px;
float: left;
}
#droite {
background-image: url("images/droite.png");
height: 136px;
float: left;
background-repeat: repeat;
}
#header {
background-image: url("images/header.png");
height: 136px; width: 781px;
margin: auto; position: relative;
}

Je n'arrive pas à avoir les deux côtés extensibles. Merci !

Spiky

16 juillet 2006 à 17:52:39

Tu n'as pas besoin de faire 3 div pour obtenir ton header extensible

#header {
background-image: url('images/droite.png');
height: 136px;
width: 100%;
background-repeat: repeat-x;
}

Raph

16 juillet 2006 à 18:00:39

Tiens tiens... je reconnais cet avatar

Plus sérieusement, merci mais je souhaite une extensibilité à gauche aussi, et que l'image fixe soit centrée. Tu comprends ?

Merci.

Spiky

16 juillet 2006 à 18:02:07

La choses reste la même

Suffit juste de rajouter text-align: center; et ton header sera au centre avec ton background de part et d'autres

Raph

16 juillet 2006 à 18:06:36

En fait c'est que mon motif à gauche est différent de celui de droite (il n'est pas dans le même sens

).

Mais si ce n'est pas possible je le mettrai dans le même sens...

Spiky

16 juillet 2006 à 18:07:55

Arf ok, j'avais pas vu, au temps pour moi

EDIT: Désolé mais j'ai pas d'idée pour faire ce que tu veux faire, disons que c'est beacoup de manipulations pour pas grand chose...

Raph

16 juillet 2006 à 18:23:31

Ça ne fonctionne pas... :/

http://pix.nofrag.com/12/cc/bda33be88371b89c60ba347d5618.html

EDIT : Oki, je vais mettre mes motifs dans le même sens alors...

Anonyme

16 juillet 2006 à 18:39:54

Tu fais deux images.
Une avec donc les bannière comme tu as fait la, sans les extensions, et une autre d'un pixel de width pour l'extension (j'espère que tu me comprends :-°

)

Tu fais donc :

#conteneur {
background-image: url("leliendelimagede1dewidth");
width: 100%;
height: 120px; /* C'est un peu près ca je crois à toi de changer */
background-repeat: repeat-x;
}

#banniere {
background-image: url("banniere.jpg");
width: 500px;
height: 120px;
background-repeat: no-repeat;
}

Spiky

16 juillet 2006 à 18:41:55

Citation : Valar

...

Ca ne sert à rien de poster des solution quand on a pas lu TOUT le topic, cette solution je l'ai déjà proposée, et si tu regarde son image, le motif varie à gauche et à droite (ils sont différents...)

Anonyme

16 juillet 2006 à 18:44:24

Citation : Spiky

Citation : Valar

...

Ca ne sert à rien de poster des solution quand on a pas lu TOUT le topic, cette solution je l'ai déjà proposée, et si tu regarde son image, le motif varie à gauche et à droite (ils sont différents...)

Je ne vois pas de trucs différents, si Raph le dit^^

Je ne vois pas ce que ca change par contre, tu découpes les deux, tu fais un floeat left pour les deux avec un width à 50% et tu mets la bannière au dessus et le tour est joué

Raph

16 juillet 2006 à 18:50:51

Merci, mais finalement je ne vais pas me casser la tête, j'ai mis le même motif partout, et j'ai pris la solution de Spiky.

Merci à vous.