18041 sujets

Questions générales et questions de débutants

Site à 3 colonnes et des background-image sur les cotés

Bonjour,

Je reviens faire un petit tour par ici car je suis sur un problème qui dure et je tourne en rond. Avant explication, je tiens à préciser que je n'ai pas trouvé de sujet semblable dans le forum... Smiley decu

Je voudrais faire un site à trois colonnes, une centrale à taille fixe et deux sur les cotés contenant chacune un backgrounbd-image différent, qui elles, devront s'adapter à la largeur restante de l'écran.

J'ai été sur cette page, et pensnat que le 3e exemple me convenait, je me suis lancé tete basse avant de rester bloqué sur le fait que les colonnes sur le coté (float left et right) sont obligatoirement de taille fixe.
Même problème avec ces exemples-ci

En résumé, comment faire pour donner un taille fixe au Div central et en même temps faire que les Divs sur les cotés soient "extensibles" à toute la largeuur non utilisée de l'écran ?
En sachant que les deux dernières n'auront pas de contenu mais un background-image seulement.

merci d'avance, si je n'ai pas été clair, levez-le doigt !
:)
Bonjour,

Pas besoin de faire des «colonnes» pour ce genre de chose, à partir du moment où on n'a pas de contenu sur les côtés.

Méthode bourrin:
[b]HTML:[/b]
<body>
<div id="conteneur">
<div id="centre">
...
</div>
</div>
</body>

[b]CSS:[/b]
body {
margin: 0; padding: 0;
background: white url(...) repeat-y left top;
}
div#conteneur {
background: url(...) repeat-y right top;
}
div#centre {
width: 700px;
margin: 0 auto;
}

Ensuite, pour la gestion exacte des images de fond sur body et div#conteneur, ça dépendra du design à réaliser. On peut avoir un aperçu?
Dans ce cas, tu peux toujours faire ça :


<div id="leftBg"></div>
<div id="rightBg"></div>

<div id="conteneur">
...
</div>




#leftBg {
width: 50%;
position: absolute;
top: 0px;
left: 0px;
background: ...;
}

#rightBg {
width: 50%;
position: absolute;
top: 0px;
right: 0px;
background: ...;
}

#conteneur {
background: #fff;
width: 750px;
margin: auto;
}


Il est tout à fait possible qu'il y ai une façon mieux de faire ça...
Je trouve la méthode de Florent mieux car elle évite les div vides.

Cependant, je crois que la mienne peut être utile pour certains background...

Tout dépend le design et le type de "repeat" dont tu as besoin...
voici un aperç de ce que je voudrais, c'est tellement simple que ça ne l'est plus !
http://.free.fr/beta.gif
merci de vos réponse, je vais tester les deux méthodes et reviendrai vous dire laquelle est la plus adaptée à mes besoins Smiley smile
Modifié par cevichero (13 Jul 2007 - 11:22)
Là je vois une méthode encore plus simple...

Si la taille de ton conteneur est fixe, tu peux utiliser une seule image en arrière plan de ton body...
yahrou a écrit :
Si la taille de ton conteneur est fixe, tu peux utiliser une seule image en arrière plan de ton body...

+1

C'est tellement simple que c'en est simple. Smiley cligne

Conseil: penser à bien utiliser la propriété background-position.
yahrou a écrit :
Là je vois une méthode encore plus simple...
Si la taille de ton conteneur est fixe, tu peux utiliser une seule image en arrière plan de ton body...

oui yahrou, j'y avais déjà pensé, mais comment je fais si un écran est plus large que le mien ? par exemple un écran panoramique ?


Pour vos méthodes, elles sont bien mais il y a toujours un problème d'espace entre l'image en background et le div central.
exemple avec celui de florent :
http://.free.fr/beta01.gif

je tente avec celui de Yahrou...
Modifié par cevichero (13 Jul 2007 - 11:23)
Je ne vois pas comment le fait d'vaoir deux images va résoudre ton problème de taille d'écan...

ton image c'est en gros, un dégradé des deux cotes de ton conteneur.

Tu fais une image avec les deux dégradé et au milieu une bande noire de la taille de ton conteneur, le tout à peu près 10px de haut et la largeur qu'il te faut pour avoir ton dégradé.

Ensuite, tu mets ton image en background de ton body en position center top ave un repeat-y, sans oublier de mettre une couleur d'arrière plan en plus, qui correspond à la continuité de ton dégradé (ici une sorte de bleu des mer du sud...).

C'est vraiment la solution la plus simple.
La solution que je t'ai proposée ou bien celle de florent étant destinée à des designs plus complexes, elles ne feront que te compliquer la vie.
pour yahrou :
voici ce que ça donne, le problèeme est qu'il faut donner du contenu aux blocs sur les cotés pour qu'il prennent la hauteur du contenu central.
Et, il passe par-dessus le contenu central de par sa position absolute je pense...


Florent V. a écrit :

Conseil: penser à bien utiliser la propriété background-position.

Je ne comprends pas Florent, sur quel exemple je dois me baser ?

Merci à vous deux
Réussi !
et grâce à vous !!!

J'avoue que avec seule "l'énigme" de florent je n'aurais pas trouvé (pas tt de suite en tt cas) mais l'idée d'une seule image avec un positionnement central est géniale !
C'est tellement simple en effet... Smiley smile
Il faudra seulement penser à modifier l'image de Bkgd. si on veut modifier la largeur du conteneur.

merci à vous deux, j'espère que cet exemple servira à d'autres.

Yipeeyaï-Kee CSS !
cevichero a écrit :
Je ne comprends pas Florent, sur quel exemple je dois me baser ?

Pour la propriété background-position? Sur aucun exemple.

Si tu as un bloc central de 700px de large, et un dégradé de 150px de chaque côté (sans compter la partie unie, qui sera générée via une couleur de fond), ça te fait une largeur totale de 1000px. Tu fais donc une image de 1000px de large et de disons 50px de haut, répétable en hauteur. Vu ton design, il y aura pour cette image: 150px de degradé à gauche, 700px de blanc, et 150px de dégradé à droite.

Note: en PNG, ça sera probablement plus léger qu'en JPEG.

Ensuite, on place ça comme image de fond centrée et répétée en hauteur sur body.
body {
margin: 0; padding: 0;
background-color: #165D80;
background-image: url(/images/fond-body.png);
background-repeat: repeat-y;
background-position: center top;
}

Ce qui peut aussi s'écrire ainsi:
body {
margin: 0; padding: 0;
background: #165D80 url(/images/fond-body.png) repeat-y center top;
}


Ensuite, on placera un conteneur global (par exemple un div#global, enfant de body) au centre, de la manière suivante:
div#global {
width: 700px;
margin: 0 auto;
}
Sujet clos
Aller à