[Résolu] 3 colonnes avec des images dans les 2 colonnes latérales...

Bonjour,

Premièrement, j'espère ne pas me tromper de section ou créer un sujet redondant. J'ai déjà fait moultes recherches et lu "n" tutoriaux concernant le css mais je n'arrive pas à trouver d'informations collant exactement à mon problème. N'hésitez pas à me renvoyer vers un lien le cas échéant.


Je souhaite avoir une colonne du milieu fixe (largeur 750 px par exemple) et adapter la largeur des 2 colonnes latérales en fonction de la largeur de la fenêtre du navigateur. Jusque-là, pas de problème, ça fonctionne...

Mon souci est que je souhaite intégrer une image différente dans chaque colonne latérale et que ces images restent "collées" à la colonne principale du milieu. Je voudrais que ces images soient tronquées de manière symétrique lorsque la fenêtre est trop petite pour les afficher entièrement (mais sans scrollbar ; scrollbar à réserver à la colonne principale centrale).

Comme mon texte n'est sans doute pas très clair, j'ai fait un dessin :


Voici également un exemple concret de site fonctionnant comme je le souhaiterais :
http://www.redbull.com/cs/Satellite/de_AT/EC-Red-Bull-Salzburg---News/001243074772325

J'ai bien entendu essayé de chercher dans les codes css de ce site (et d'autres du même type) pour arriver à trouver le codage qui me manque mais je ne suis malheureusement pas encore suffisamment calé pour m'y retrouver, surtout qu'il y a des éléments dans tous les sens.

J'ai aussi essayé d'utiliser une seule image de fond sur toute la largeur mais je n'arrive pas non plus à mes fins.


Voilà, si quelque bonne âme avait quelques tuyaux à me donner, je lui en serais extrêmement reconnaissant !

Merci par avance.
Modifié par Max160 (09 Sep 2013 - 00:18)

Je précise que je ne recherche pas forcément de solution toute faite, je suis preneur de n'importe quelle piste (même un simple lien vers un sujet similaire) ou ébauche de solution.

D'ailleurs, je me plante peut-être complètement et peut-être que ce que je souhaite faire n'est pas réalisable en utilisant les css...

Je n'ai pas non plus mis mon code car il ne marche pas donc je ne vois pas trop l'intérêt. J'ai pour le moment utilisé 3 colonnes avec des <div> et essayé différents positionnements des colonnes latérales mais je n'arrive pas à trouver la clé. Mon problème est surtout que je ne sais pas comment passer du référentiel classique en haut à gauche de la fenêtre du navigateur à un référentiel (fixe en quelques sorte) lié à la colonne principale (mais tout en laissant la colonne principale centrée en fonction de la largeur de page). J'ai essayé d'utiliser aussi bien le code de positionnement "absolute" que "relative" ou même "fixed" mais sans succès.

Bref, je suis embourbé.
Modifié par Max160 (09 Sep 2013 - 11:31)

Bon, j'ai résolu mon problème !

En fait, je m'y étais mal pris (mais je m'en doutais).


J'ai du coup placé une seule image au fond dans le "body" avec la propriété :

background: url(image.png);

J'ai centré l'image horizontalement et j'ai voulu qu'elle soit placée en haut de la page. Pas de répétition.

Voici donc le code css qui fonctionne :

body {
	background: url(image.png);
	background-color: black;
	background-repeat: no-repeat;
	background-position: center top;
}

Finalement, c'était tout bête et je me suis pris la tête pour rien...