28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème pour séparer deux colonnes

Bonjour à tous !

Je sollicite une nouvelle fois l'aide de la communauté...
Je suis en train de me battre avec une mise en page que je ne pense pas être très compliquée...

Je commence par mettre un dessin simplifié de ce que j'aimerai réaliser :
http://thebluewave.free.fr/stock/essai.jpg

Mon problème vient des deux cadres gris, que je n'arrive pas à placer l'un à côté de l'autre... Je vous rassure, j'ai déjà fait le tour de la FAQ, il y a des pistes, mais je n'arrive pas à les faire marcher dans mon cas...

Voici le code simplifié de ma page :

<body>
  <div id="menu"></div>
  <div id="global">
    <div id="logo"></div>
    <div id="session"></div>
    <div id="etat"></div>
    <div id="contenu"></div>
  </div>
</body>


Et le code simplifié de ma CSS :

body {
	margin: 0;
	padding: 0;
}
#menu {
	float: left;
	width: 145px;
}
/* Cadre global pour tout le côté droit */
#global {
	margin-left: 145px;
}
#logo {
	width: 324px;
	height: 109px;
}
#session {
	width: 324px;
	height: 109px;
}
#etat {}
#contenu {}


Voilà, j'ai essayé de positionner en absolu, en relatif... Je n'arrive jamais à séparer mes blocs "logo" et "session" en deux colonnes. De plus, j'aimerai pouvoir les "centrer" l'un par rapport à l'autre, qu'il y ait à peu près le même espace entre le menu et le bloc "logo", entre les deux blocs et entre le bloc "session" et le bord droit...

Pour finir, comme les positionnements que j'ai essayés pour ces blocs les font sortir du flux, les autres blocs ("etat" et "contenu") viennent se superposer...

Voilà, si quelqu'un a le temps et l'envie de se pencher sur ce problème... Je débute en CSS, je pense avoir fait pas mal le tour du forum et du site (et aussi du livre de Raphaël, que j'ai acheté Smiley langue ), et je n'arrive pas à appliquer les exemples que j'ai trouvés à ce cas précis...

Merci d'avance !
Modifié par Upsilon (05 Nov 2005 - 19:09)
salut Smiley smile

alors :
1. tu mets ton bloc menu en float:left (trés bien) mais ton bloc de droite ne l'est pas. Ce qui t'oblige à mettre un margin-left. Mets ce bloc en float:left et efface le margin-left. Ainsi ton bloc de droite collera parfaitement à ton bloc Menu quelque soit la largeur de celui-ci.

2. Même principe pour tes deux blocs gris. Un float:left pour le bloc Logo et Session. N'oublie pas de mettre un clear:both sur ton bloc Etat pour qu'il soit en dessous de tes deux blox gris en permanence.

et voila Smiley smile
Bonjour Upsilon,

Tu dois ajouter "float: left;" dans "#logo#.
De plus, tu doit donner une dimension à "#global", (750px) ou ne pas en donner à "#session". (Il prendra le reste de la place).
Bon, bah euh... Comment dire...

Une nouvelle fois, je suis soufflé par l'efficacité de ce forum... Mon problème était tout bête, je vous remercie de votre aide, tout marche bien à présent Smiley smile

Et je retourne de ce pas continuer ce site (un projet de fin d'année dans le cadre de mes cours...).

Merci à papillon41 et à octopussy, et merci à tous pour les différentes aides que ce forum et le site alsacreations apportent Smiley langue
Administrateur
Brevo à toi, il n'y a plus qu'à classer ce sujet parmi les autres [Résolu]s Smiley smile
Que la force soit avec toi Smiley lol
Modifié par Raphael (05 Nov 2005 - 17:52)
Sujet clos
Aller à