28112 sujets

CSS et mise en forme, CSS3

Calcul largeur variable blocs alignés horizontalement

Salut,
J'essaie de faire un truc bête mais j'arrive pas à trouver comment résoudre mon problème ! Help ! Smiley smile
Je voudrais faire une barre d'en-tête horizontale, avec trois blocs aligné : un premier à gauche d'une taille fixe pour y mettre le logo, un au milieu de taille variable (dans lequel je pourrais insérer quelques éléments genre qui est loggué), et un dernier de taille fixe aligné à droite pour y loger 2/3 icônes rapides.

Ma question est : comment faire pour que celui du milieu prenne tout l'espace restant entre les 2 fixes, plutôt qu'uniquement la taille de son contenu ?

Merci de votre aide !

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<title>SFMed v2</title>
		<link rel="stylesheet" href="style.css" media="all">
	</head>
	<body>
		<div id="root">
			<div id="top">
				<div id="top-left">S F M E D &nbsp;&nbsp;v 2</div>
				<div id="top-main">top-main</div>
				<div id="top-right">top-right</div>
			</div>
			<div id="menu-horizontal">Menu</div>
			<div id="main">MAIN</div>
			<div id="footer">FOOTER</div>
	</body>
</html>


body {
	color: black;
	background-color: #def5de;
	background-image: linear-gradient(#97bc99, #def5de);
	background-repeat: repeat-x;
	background-position: right top;
}

div#root {
	margin : 25px 15px 15px 15px;
}


div#top {
	background-color: white;
	border-radius: 5px 5px 0 0;
}
	div#top-left {
		float: left;
		border-radius: 5px 0 0 0;
		background-color: #c4686b;
		color: white;
		font-size: 1.5em;
		width: 200px;
		height: 50px;
		text-align: center;
		line-height: 50px;
	}
	div#top-main {
		float: left;
		background-color: white;
		height: 50px;
		line-height: 50px;
		padding-left: 25px;
		padding-right: 25px;
	}
	div#top-right {
		float: right;
		border-radius: 0 5px 0 0;
		background-color: #f2f0f0;
		height: 50px;
		line-height: 50px;
		padding-left: 25px;
		padding-right: 25px;
	}

div#menu-horizontal {
	clear: both;
	background-color: #33383c;
	color: #858a8e;
	padding: 25px 25px 25px 25px;
}

div#main {
	min-height: 450px;
	background-color: white;
	padding: 25px 25px 25px 25px;
}

div#footer {
	height:50px;
	background-color: #f8f8f8;
	border-radius: 0 0 5px 5px;
	padding: 25px 25px 25px 25px;
}

Modifié par wasted (16 Sep 2014 - 18:13)
Administrateur
Bonjour,

il y a différents moyens (exemple faire flotter à droite et à gauche les colonnes mais elles doivent se trouver avant la colonne centrale dans l'ordre du code HTML) mais maintenant qu'IE6 et IE7 sont morts et enterrés (sans fleur ni couronne Smiley rolleyes ), je préfère utiliser une mise en page en tableau qui est soit fluide soit pas du tout, c'est comme on veut Smiley smile

J'ai bien dit mise en page (CSS) en tableau, pas "avec des tableaux HTML" ça c'est dégueu pardon pas sémantique.
display: table; et table-cell; donc qu'on peut appliquer sur tout élément de son choix (div, section, aside, nav ce qu'on veut). Ça change le style, ça change pas la nature profonde de l'élément (nav reste un élément balisant la navigation du site, pas soudainement une cellule de tableau...)

Avec KNACSS, ça donne le code suivant : http://codepen.io/anon/pen/oqApD

.row ça style avec display: table; et le très important table-layout: fixed; grâce auquel le navigateur va strictement respecter les largeurs que l'auteur - toi, moi - indique au lieu de se fier à la quantité de contenu dans chaque bloc. Ici il respectera donc une largeur de 10% (la classe .w10) et 200px (la classe .w200p) et attribuera le reste à la colonne centrale pour laquelle rien n'est indiqué.

Propriété qu'on souhaite ou pas avec les tableaux et les éléments affichés comme des tableaux : les cellules d'une même ligne font la même hauteur. C'est pas le cas avec les flottants.
Modifié par Felipe (16 Sep 2014 - 19:44)
Excellent, je ne connaissais pas ce type de présentation CSS !
Ca fonctionne très bien, merci beaucoup Smiley biggrin
Sujet clos
Aller à