28172 sujets

CSS et mise en forme, CSS3

4 colonnes: 3fixes, 1 dynamique

Bonjour,

Je souhaiterai faire en css un site avec 4 colonnes dont 3 fixes et un dynamique.

Le total des colonnes doit faire 100% de la largeur de la page.
J'entends par là 3 colonnes qui ont une largeur fixe définit par "width" et chacune a une largeur différentes. Puis une colonne qui prend une largeur variable pour faire un total de 100%.
Quand à la hauteur celle-ci doit être commune à la colonne dynamique pour toutes les colonnes.

Pour cela voici un petit schéma qui explique:
http://img187.imageshack.us/img187/8041/4colonnesej9.png


J'aimerai savoir comment je peux faire ceci en css.

Merci bien.

PS: Chaque colonne à une couleur de fond différents.
Modifié par Takiana (02 Apr 2008 - 19:13)
Rebonjour,

Avec l'exemple donner ici "Quatre colonnes fluides de même hauteur centrées horizontalement", j'arrive effectivement à faire mes 4 colonnes mais cependant comment faire que la hauteur de chaque colonne dépendent de celle quiest dynamique et qu'elles fassent la même hauteur que elle? Merci
J'ai mis le code modifier si jamais ça peux vous aidez.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur 4 colonnes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
	*
	{
		padding:0;
		margin:0;
	}
	ol 
	{
		position:relative;
		margin:0 0;
		list-style:none;
	}
	ul 
	{
		list-style:inside;
	}
	h1 
	{
		text-align:center;
	}
	#decouverte 
	{
		position:absolute;
		width:126px; 
		background-color: #123456;
	}
	#start 
	{
		position:absolute; 
		background-color: #457854; 
		right: 286px; 
		left: 126px;
	}
	#services
	{
		position:absolute;
		width:130px; 
		background-color: #126678; 
		right: 156px;
	}
	#power 
	{
		position:absolute;
		width:156px; 
		background-color: #FFAABB; 
		right: 0px;
	}
</style>
</head>

<body>

<h1>Des solutions adaptées à vos besoins</h1>
<ol>
	<li id="decouverte">
		<h2>Offre "Découverte"</h2>
		<p>
			Cette offre de bienvenue vous donne accès
			aux principales fonctionnalités du système:
		</p>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
		</ul>
	</li>
	<li id="start">
		<h2>Offre "Start"</h2>
		<p>
			Cette offre d'entrée de gamme vous donne accès
			aux principales fonctionnalités du système ainsi
			que quelques bonus:
		</p>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
			<li>Pas de frais d'activation</li>
			<li>Interface entièrement personnalisable</li>
		</ul>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
			<li>Pas de frais d'activation</li>
			<li>Interface entièrement personnalisable</li>
		</ul>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
			<li>Pas de frais d'activation</li>
			<li>Interface entièrement personnalisable</li>
		</ul>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
			<li>Pas de frais d'activation</li>
			<li>Interface entièrement personnalisable</li>
		</ul>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
			<li>Pas de frais d'activation</li>
			<li>Interface entièrement personnalisable</li>
		</ul>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
			<li>Pas de frais d'activation</li>
			<li>Interface entièrement personnalisable</li>
		</ul>
	</li>
	<li id="services">
		<h2>Offre "Services+"</h2>
		<p>
			Cette offre très prisée vous donne accès
			aux principales fonctionnalités du système
			et aux nombreuses possibilités de partage:
		</p>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
			<li>Pas de frais d'activation</li>
			<li>Interface entièrement personnalisable</li>
			<li>Possibilité de téléversement</li>
		</ul>
	</li>
	<li id="power">
		<h2>Offre "PowerUser"</h2>
		<p>
			Cette offre vous donne accès à l'ensemble
			des fonctionnalités du système pour une expérience
			utilisateur supérieure, avec entre autres:
		</p>
		<ul>
			<li>Tout le catalogue disponible</li>
			<li>Service accessible 24h/21</li>
			<li>Pas de frais d'activation</li>
			<li>Interface entièrement personnalisable</li>
			<li>Possibilité de téléversement</li>
			<li>Diffusion et stockage</li>
			<li>Création personnalisée de bibliothèques</li>
			<li>Espace alloué illimité</li>
			<li>Nombre d'alias illimté</li>
			<li>… et bien plus encore!</li>
		</ul>
	</li>
</ol>


</body>
</html>
Hello,

Ça va dépendre du design à intégrer. Suivant le design, on devrait pouvoir appliquer la technique des colonnes factices (même en largeur fluide)... ou pas.
Merci bien. Je vais y jeter un oeil.

Petit précision sur le design:

Le design se sera la 1ère colonne des images en ligne verticalement (background de couleur gris/bleu).
La 2ème du texte, formulaire, images,... (background de couleur bleu)
La 3ème menu éléments 1 par 1 alignés verticalement avec une image tout en haut (background de couleur gris/bleu comme pour la 1ère avec l'image en background).
La 4ème une image (background) en haut également (background de couleur noir)

Voilà si jamais ça peux aider
Sujet clos
Aller à