28173 sujets

CSS et mise en forme, CSS3

Float et positionnement

Bonjour,

Je cherche à m'appuyer sur ce gabarit pour mettre en page mon site :

http://css.alsacreations.com/modeles/modele3.htm

Mais je rencontre une difficulté; en effet mon "menu gauche" peut parfois être plus haut que mon contenu central, de ce fait il dépasse du site...

J'ai essayé de retourner le problème dans tous les sens mais en vain. Au mieux j'arrive à inverser le problème Smiley murf

Quelqu'un a-t-il une idée ? Smiley sweatdrop

En clair, faire que la hauteur du site s'adapte sur le menu ou le contenu, selon le plus grand...
Modifié par kTc (21 Jul 2006 - 14:18)
Administrateur
Hello et bienvenue,

Le "problème" est classique et normal puisque les éléments <div> ne sont pas fait pour simuler des tableaux et des colonnes. Chaque <div> est indépendant, contrairement aux cellules de tableaux, c'est ce qui fait la souplesse du positionnement CSS justement.

Tu trouveras dans la FAQ du forum une réponse à ta recherche de "colonnes de même hauteur".

Bonne chance Smiley cligne

EDIT : Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ
Modifié par Raphael (21 Jul 2006 - 14:17)
merci pour ta réponse rapide

J'ai déjà regardé la FAQ (fort bien faite, soit dit en passant) et je pensais à la propriété table-cell mais par contre ce n'est pas fonctionnel sur IE<7 donc assez pénalisant Smiley decu

l'utilisation d'un tableau ne me convient pas non plus

je vais essayer en passant par du JS peut être
*keep searching
Bonjour,

Je te conseille d'utiliser la propriété float plutôt que le positionnement absolu, ce qui te permettrait d'utiliser la propriété clear sur le #pied afin qu'il soit toujours en dessous du menu (enfin de #gauche)

Concrètement il suffit de remplacer 
#gauche {
position: absolute;
left:0;
width: 150px;
}
par 
#gauche {
float: left;
width: 150px;
}

d'ajouter clear:left à #pied : 
#pied {
height: 30px;
background-color: #99CC99;
clear: left;
}


C'est tout.

Concernant le centrage horizontal, j'utilliserais plutôt la première technique décrite dans ce tuto. La technique du centrage par les marges négatives est plus compliquée et peut poser des problèmes d'accessibilité (en réduisant la largeur de la fenêtre tu pourras constater que la partie gauche devient inaccessible y compris avec le scroll. Là encore "ça passe" car le conteneur général n'est pas très large. Mais j'ai visité hier le site d'INA, "archives pour tous", qui utilise cette technique avec un conteneur de presque 1000px Smiley eek )
Modifié par Alan (21 Jul 2006 - 14:53)
j'ai en effet exploré cette piste qui m'a donné le résultat le plus probant

le hic se situait par contre sur l'application d'un background au contenant de mes deux div gauche et droite qui n'etait pas visible (a cause du float ?)

Je me permet de mettre ici mon code :


	<div id="page">
		<div id="head">
		header
		</div>
		<div id="menu">
		menu
		</div>
		<div id="contenu">
		<div id="menu2">
		menu2
		</div>
			<div id="gauche">
			contenu principal<br />
			contenu principal<br />
			contenu principal<br />
			contenu principal<br />
			contenu principal<br />
			contenu principal<br />
			contenu principal<br />
			contenu principal<br />
			</div>
			<div id="droite">
			menu de droite<br />
			menu de droite<br />
			menu de droite<br />
			menu de droite<br />
			menu de droite<br />
			menu de droite<br />
			menu de droite<br />
			menu de droite<br />
			menu de droite<br />
			menu de droite<br />
			</div>
		</div>
		<div id="footer">
		footer
		</div>
	</div>


En effet, si j'applique un background à la div contenu (qui est a cheval sur la menu2 et sur le couple gauche/droite), il est non visible Smiley decu

Pour l'instant, trouvé un contournement/solution en enlevant la div contenu et mettant un background à ma div page en decalant du haut du nombre de pixel représentant header+menu Smiley rolleyes
Sujet clos
Aller à