28172 sujets

CSS et mise en forme, CSS3

Salut à tous !

j'ai un souci avec une mise en page 3 colonnes, je m'explique :
j'ai trouvé un exemple de gabarit qui approche ce que je veux faire pour illustrer mon problème :
http://www.alsacreations.com/static/gabarits/modele11.html
à ceci près que les colonnes gauches et droites seront vides et uniquement décoratives, elles accueilleront en background des illustrations pour agrémenter le site.

j'ai donc une colonne principale au centre d'une largeur fixe de 960 pixels et j'aimerai avoir des colonnes à gauche et à droite, dans lesquelles je glisserai mes fameux background qui s'afficheront donc sur les cotés quelque soit la résolution.

problème : ces colonnes n'apparaissent pas si je n'écris rien dedans et si je glisse quelques lettres elles ne prennent la largeur que du contenu, normal. Comment faire pour qu'elles occupent toute la largeur à gauche et à droite afin que mes backgrounds soient visibles ?
j'ai essayé 100% mais bien sur elles occupent ensuite toute la page.

Merci d'avance !
j'ai tenté de préciser width:10% pour la colonne de gauche mais le problème c'est que le chevauchement est assez disgracieux en largeur minimale.
960px + 2 colonnes ? Sauf si elles sont vraiment fine, ce n'est pas vraiment conseillé pour les résolutions 1024 qui risque d'avoir un scroll horizontal.

Tu ne pourrais pas plutôt utiliser un fond sur ton body (ou div qui englobe tout) ?
oui, merci, mais non, je ne peux pas, ce n'est pas si simple Smiley lol
du coup la colonne a une largeur et en résolution minimale (écran 1024) elle chevauche la colonne centrale au lieu de simplement se réduire.

mais je crois avoir trouvé une astuce en mettant les colonnes en absolute et en précisant un tout petit pourcentage pour la largeur, les colonnes diminuent pas mal en petite taille d'écran et limite l'impact du chevauchement.

mais j'aurais aimé savoir comment avoir des colonnes qui s'adaptent parfaitement en largeur à gauche et à droite en fait.

Merci en tout cas !
oups j'avais pas vu ta réponse kenor

et bien en fait il y a bien une div qui englobe tout oui, et 960 pixels c'est la dimension max et idéale pour du 1024 il me semble non ? (960 grid)
j'ai donc une div wrap à 100% en largeur qui englobe une div droite et une gauche à 8% environ dans la situation actuelle et ma div centrale qui contient mon site à 960 pixels.

les colonnes sont fines oui, vides mêmes puisque seul existe un background, c'est l'intérêt. il y a la place sur les cotés dans les grosses résolutions, elles s'étendent au max; il n'y a pas la place elles font 0 pixels de large si nécessaire.