28173 sujets

CSS et mise en forme, CSS3

A faire en DIV :1 colonne fixe central + 2 bandes laterales réduisable

Bonjour

J'ai une page que je dois agencer de la facon suivante afin de ne pas utiliser les tableaux:

1 page centrale a taille fixe
2 bandes laterale dont la largeur se reduit automatiquement si on redimentionne la fenetre (pour tester dans diverses resolutions) pour permetre le decalage de la colonne fixe.

ces 2 bandes laterales doivent contenir des images pour evietr d'etre vides;

j'ai reussi a faire en sorte que la colonne soit fixe et se decale (avoir un margin left et right en auto) mais dès que j'ecris les DIV de bandes laterales avec images je n'arrive pas du tout a les gerer

En gros si les bandes sont générée par le margin auto ca marche
mais si je définis physiquement des bandes laterales ca foire completement.

Ca serait un grand pas pour moi si j'arrive a trouver une solution

j'espere que je suis assez clair.
merci d'avance pour vos idées
Bonjour Elderion et bienvenue parmi nous !

Si j'ai bien compris ton problème, il ne s'agit pas de trouver une solution mais de résoudre un problème de compréhension.

Si tu définis des marges latérales (à l'aide de la propriété margin associée aux valeurs auto à droite et à gauche) ton conteneur sera centré sur la page.

Il occupera, en largeur, la taille que tu lui aura définie et tes marges seront plus ou moins importantes en fonction de la taille de l'écran.

Jusque là, je crois que nous sommes d'accord.

Ta démarche consiste à rajouter des blocs à droite et à gauche dans un but illustratif. Or, ces éléments (lesquels font, à priori, partie de ton code html) sont de nature à contenir une information utile (normalement) ...laquelle, de ce fait, doit s'afficher quelque part à l'écran : forcément, tu rencontres un problème ... que j'imagine à peu près !

Si tu veux "meubler" ces espaces pour les résolutions supérieures à la taille que tu as fixée, il te faut éventuellement jouer avec la propriété "background" en fond du conteneur parent.

De manière générale, les images décoratives doivent être déclarées dans ta feuille de style.

Si je n'ai pas saisi ton problème ou si tu n'as pas compris mes explications, un petit exemple en ligne nous permettrait d'illustrer cela plus facilement ...
Il y a moyen d'ajouter ces div dans les marges sans qu'ils ne soient pris en compte ni par le bloc central, ni par la fenêtre du navigateur (afin qu'ils ne fassent pas apparaître une barre de défilement horizontal) : en les positionnant en absolu.

Disons que l'on a des « fausses marges » qui sont des div de 200px de large, et un bloc central qui fait 760px de large.
div#decorgauche {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -580px; /* 760÷2+200 */
}
div#decordroite {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: 380px; /* 760÷2 */
}

Pas testé directement, donc il y a peut-être des choses à affiner.
tu veux dire que les bandes latérales posent un probleme
car comme elles contiennent des images, le navigateur s'efforce de les afficher ?

lesdites images sont des propriétés background-image

quelle solution faudrait il donc pour que ces bandes avec background image soient considérées comme de simples bandes vides autorisées a se reduire en largeur suivant les resolutions d'ecran ?
ben pour le moment j'ai pas le droite de le montrer
vu que c un site d'entreprise

c'est pour ca que j'essaie de vous faire une description facile a imaginer
Sujet clos
Aller à