28112 sujets

CSS et mise en forme, CSS3

[RESOLU] Aligner 3 div cote à cote

bonjour,

je suis en train de réaliser le graphisme d'un site, je suis arrivé à un truc sympa, mais je me demande si ce sera réalisable en css.
Avant d'aller plus loin je me permets de vous exposer le schéma suivant :

http://img11.hostingpics.net/pics/562649EXPLICATIONS.jpg

il s'agit de l'en-tête.

si les côtés gauche et droite ne peuvent pas être de taille variable (avec un background repeat x pour l'image de fond), c'est pas grave. mais il faut absolument que les 2 div de côtés soient collés au div central, car chaque côté est le prolongement d'éléments graphique présent sur le div central.

merci de vos avis !
Modifié par troubadour (08 Nov 2011 - 13:30)
Salut,
C'est faisable avec des float.
Par contre, si tu veux que ta div centrale soit toujours au centre de la page il faudra que les div gauche et droite soient de la même taille. Smiley smile
hello,

merci de la réponse!
ok je vais faire un essai de mise en place.
pour la taille de div gauche et droite (tu parles de largeur je pense), oui pas de problème, elles peuvent faire la même taille.
Oui oui, je parlais bien de la largeur.
Il faut que tu places un float:left sur tes trois div afin qu'elles flottent les unes par rapport aux autres.
ok j'ai mis en place une page, c'est pas exactement ça Smiley lol !
tu peux me donner une piste ?

voici le code :

<body>
<div id="container">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>
</body>


body{	
	margin:0;
	padding:0;}
#container{
	width:100%;
	height:313px;
	}
#left {
	float:left;
	background-image:url(image-header-gauche.jpg);
	background-repeat:repeat-x;	
	background-position:right;
	width:471px;
	height:313px;
	margin-left:0px;
}
#right {
	float:left;
	background-image:url(image-header-droite.jpg);
	background-repeat:repeat-x;
	background-position:left;
	width:471px;
	height:313px;
	margin-left:1500px;

}
#center {
	float:left;
	background-image:url(image-header-centre.jpg);
	background-repeat:no-repeat;
	width:978px;
	height:313px;
	margin-left:471px;
}

Modifié par troubadour (03 Nov 2011 - 08:24)
J'imagine que tu as mit des margin-left pour cadrer tes div ?

La technique la plus simple et la plus propre est de donner un 
margin:0 auto;

à ton conteneur afin qu'il se centre dans ta page. Cependant, tu dois lui donner une largeur fixe.

Ensuite, tu peux appliquer les
 float:left;
;
sur les div de manière à ce qu'elles se collent les unes par rapport aux autres. Bien entendu, il faut que tu enlèves les margin-left.
ha oui ok je vois comment ça marche!

le souci, c'est que les div gauche et droite ne se rétrécissent pas suivant la résolution du navigateur.
les images de ces div font 471px de large, le centre fait 978px, ce qui donne un total de 1920px.

il faut que ces div latérales puissent se rétrécir, jusqu'à disparaitre pour les basses résolutions, mais qui si elles sont visibles, l'affichage commence par la droite, si on veut, afin que ce soit collé contre la div centrale.

tricky, hein ? Smiley lol
oui, mais c'est pas important qu'elles soient affichées en entier.
si la résolution permet d'en afficher une partie, il faut que cela soit la partie collée au div central qui "commence" à s'afficher.
Bonsoir,

Les flottants ne peuvent malheureusement pas marcher je pense car après avoir placé la <div> d'ID "center" en float: left; on ne peut plus lui appliquer les marges automatiques (margin: 0 auto;).

Je n'ai trouvé qu'une seule solution qui fait assez "bidouille", mais bon...

HTML :
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>


CSS :
body {
	margin: 0;
	padding: 0;
}

div {
	height: 313px;
}

#center {
	width: 978px;
	margin: 0 auto;
	background-color: red;
}

#left, #right {
	width: 50%;
	position: absolute;
	top: 0;
	z-index: -1;
}

#left {
	left: 0;
	background: blue url(image_de_gauche.jpg) right repeat-x;
}

#right {
	right: 0;
	background: green url(image_de_droite.jpg) left repeat-x;
}


L'idée c'est qu'on a bien notre <div> d'ID "center" centrée grâce aux marges automatiques puisqu'elle reste dans le flux courant. Par contre, les <div> adjacentes sont quant à elles positionnées en absolute et "calées" contre les bords du <body> grâce aux déclarations left: 0; et right: 0;. Il ne reste plus qu'à les placer en-dessous de la partie centrale en jouant avec le z-index.

Mais je ne trouve pas cette solution très élégante... Smiley ohwell Si quelqu'un a mieux...
Merci à vous deux pour les propositions !

J'ai testé les 2 possibilités, mais ça bute toujours sur un problème qui à mon avis ne peut pas être résolu, ni avec tableau ni CSS.

Le positionnement des images background, lors de l'étirement de la fenêtre du navigateur ne se fait pas correctement. Je pense qu'on ne peut pas faire que le point de référence soit le bord de la div centrale, afin que l'image s'affiche progressivement depuis ce point.

Bon, je vais refaire un design moins embêtant!
C'est aussi ça peut-être d'utiliser correctement les CSS ... Smiley murf

Merci encore pour votre aide !
Salut,
si c'est juste pour mettre une image en fond, pourquoi tu ne mets pas une div contenant ton image derrière ta div principale ?

Edit : Je n'avais pas lu le message de Jérémy. Il s'avère que c'est à peu près ce que je fais dans ces cas là.

Mon conteneur en margin:0 auto; pour le centrer, une div en absolute avec un z-index pour la passer en dessous et l'image en background. Une hauteur fixe et une largeur en pourcentage font le compte.
Modifié par Fahrenheit (03 Nov 2011 - 10:15)
non c'est un peu plus compliqué que ça, comme je l'ai décrit dans mon dernier message.

faire que les images des div droite et gauche, extensibles, soient callées contre le div central, et que quand ça s'agrandit, les images commencent à apparaitre depuis ce point de référence.
Raphael a écrit :
Bonjour,

À première vue, des tableaux de mise en page conviendraient parfaitement à ce que tu veux obtenir.
Soit de vrais tableaux HTML, soit jouer avec CSS table-cell

http://www.slideshare.net/goetter/vive-les-tableaux-de-mise-en-page

Bonne chance Smiley cligne


Bonjour,

je me bats depuis des temps immémoriaux pour intégrer des notions CSS bien expliquées ici ou sur OpenWeb. J'ai commencé par des float pour ma mise en page pour mon site, puis je les ai virés. Là je me dis que je fais en remettre une dose.

Ta présentation est vraiment extra : drôle, didactique et intelligente. J'ai parfois l'impression qu'il y a plusieurs dogmes qui s'affrontent (float ou pas float). Même dans les tutoriels de ce site il y a des présentations de mises en page tout en float ou pas du tout. (c'est ce que je disais hier : http://forum.alsacreations.com/topic-4-56443-1-Positionnement-sans-float.html )

Donc un grand merci pour ce recadrage (et avec quelques slides en lorem...elsassich Smiley cligne )

BRAVO !
Modifié par kileak (03 Nov 2011 - 14:52)
Bon, comme je disais, et pour clore, j'ai fait une découpe plus simple de mon design.
une div avec une image en background de 100% de largeur et une autre div imbriquée, centrée, avec une autre image transparente en background.

Merci de votre aide en tous les cas !
Fahrenheit a écrit :
C'est faisable avec des float.

Non, pas si les deux blocs sur les côtés doivent avoir une largeur fluide.

troubadour a écrit :
tricky, hein ? Smiley lol

Plutôt simple avec:
- soit du display:table|table-cell;
- soit deux blocs imbriqués et un petit jeu sur les images de fond.
Pas 100% évident (des solutions CSS3 tels que Flex Box rendraient ça un peu plus simple, mais c'est pas encore prêt à l'emploi), mais rien d'insurmontable. Smiley smile

troubadour a écrit :
Le positionnement des images background, lors de l'étirement de la fenêtre du navigateur ne se fait pas correctement.

Tu as utilisé background-position?

Je serais curieux de voir le design, pour voir si c'est vraiment problématique ou finalement assez simple.
Sujet clos
Aller à