28172 sujets

CSS et mise en forme, CSS3

[RESOLU] 3 colonnes dont celle du milieu de largeur fixe

Bonjour,

Je travaille depuis peu sur un (vieux) site réalisé avec un système de frames. J'ai décidé qu'avant de faire mes modifications, j'allais standardiser un minimum le code afin que ca soit plus lisible et maintenable.

La structure du site est la suivante :

COLONNE GAUCHE (fixe/une image de fond) =@= CENTRE (800px) =@= COLONNE DROITE (fixe/une autre image de fond)

J'aimerais donc avoir 3 divs, dont les largeurs seraient les suivantes : 100% - 800px - 100%.

Je suis un peu perdu dans les overflow, clear, float...

Quelqu'un pourrait-il me donner un coup de main pour la structure que je souhaite ?

D'avance merci !

Heriquet
Modifié par Heriquet (09 Jul 2008 - 10:46)
Ok je vais faire ca... je n'ai plus le net chez moi actuellement donc j'ai pas pu beaucoup chercher... je teste ce qui est proposé puis je réouvre le post si problème.

Merci à toi.
Voilà j'ai lu le tuto, j'ai fait quelques essais, mais sans succès.

Par rapport au tutoriel, je prend le problème à l'envers. Le tuto montrait comment faire un site en 3 colonnes avec la partie centrale variable et les bords fixes. Moi j'ai 800px au centre et les 2 colonnes des cotés occupent chacunes la moitié de l'espace restant.

La hauteur des 3 colonnes est de 700px. C'est une contrainte due au graphisme (les images de fond qui viendront à droite et à gauche font 700px).

Voici ce que j'ai réussi à faire jusqu'à présent :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<style type="text/css">		
		body{
			background: #b2b2b2;
		}
		div#wrapper {
			width: 100%;
			height:100%;
			background: #b2b2b2;
			position: absolute;
		}
		div#colonne1 {
			float: left;
			width: 100px;
			height:700px;
			background: lightblue;
			background-repeat:repeat-x;
		}
		div#centre {
			background: khaki;
			width: 800px;
			height:700px;
			float: left;
		}
		div#colonne2 {
			position:relative;
			float:left;
			width: 100px;
			height:700px;
			background: burlywood;
			background-repeat:repeat-x;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="colonne1"></div>
		<div id="centre"></div>
		<div id="colonne2"></div>	
	</div>
</body>
</html>


Je suis reparti de l'exemple du tuto mais je n'ai pas réussi à donner une largeur variable aux colonnes. Elles sont à 100px chacunes, j'aurais voulu 100% mais cela ne donne rien...

Merci de votre aide.
Modifié par Heriquet (07 Jul 2008 - 13:46)
Heriquet a écrit :
Moi j'ai 800px au centre et les 2 colonnes des cotés occupent chacunes la moitié de l'espace restant.

Ce qui signifie que tu as une colonne de contenu, et tout simplement des images de fond à placer autour pour intégrer ton graphisme. Rien à voir, donc, et plus encore que tu ne le crois. Smiley cligne

Cette demande (bloc de largeur fixe au centre, deux blocs prenant les largeurs restantes sur les côtés) revient de temps à autre sur le forum. Dans la quasi-totalité des cas, il s'agit juste d'un mauvais choix d'intégration. Il ne faut pas chercher à créer des blocs pour placer ces images de fond, du moins pas de la manière envisagée.

Montre-nous le design, et on pourra te conseiller plus efficacement sur la marche à suivre.
Pour résumer, le design est composé de 3 éléments distincts :

A gauche : une image de fond qui se répète en largeur
Au centre : le contenu de 800px de large
A droite : une autre image de fond qui se répète en largeur aussi

Le tout fait 700px de haut centré verticalement (je vais rire aussi pour ca...)
Merci Changaco... j'avais déjà vu cette page. Mais je garde ce problème pour après le premier problème de design.
Sur la page de test je ne peux pas sélectionner le texte dans le bloc central.
Ce que tu demandes ne me paraît pas possible actuellement. Ce sera très simple quand le "Advanced Layout" de CSS 3 sera implémenté mais ça ce n'est pas pour tout de suite ...
Salut,

Avant de partir dans des solutions un peu tarabiscotées, une image suffisamment large pour recouvrir les résolutions les plus étendues, composée de 50% de ton fond droit et 50% de ton fond gauche, le tout en background top center et repeat-y sur body et ton conteneur en margin 0 auto; cela devrait suffire Smiley cligne
Réponse de Florent V à un message privé :

a écrit :
Hello,

Je vois deux solutions:

1. Faire une image de fond de 2000px de large pour la partie du haut (hors décor central). En PNG bien compressé comme il faut, éventuellement en JPEG correctement compressé aussi, ça doit être jouable.

2. En plaçant deux blocs de largeur 50% (voire un peu moins) en absolu, et le contenu par-dessus en relatif.

La deuxième solution est peut-être la plus simple à gérer.
Je viens de réanalyser le problème.

Voici une image du site tel qu'il est actuellement disposé. Vous y trouverez l'adresse du site en question : adresse

Il y a donc les contraintes suivantes :

- Le site doit être centré verticalement
- La partie centrale doit être centrée horizontalement et fait 700px de haut sur 800px de large.
- Les cotés gauche et droit ont une largeur variable et une image de fond qui est différente.
- Le fond de la partie centrale est composé de la même image que celle qui est en fond de la partie droite du site.

J'ai bien noté les remarques.

J'ai dans l'idée d'implémenter la solution suivante en compilant les idées proposées :

- Un bloc gauche de 50% de largeur sur 700px de haut en absolu à gauche avec l'image de fond correspondante centré verticalement
- Un bloc droit de 50% de largeur sur 700px de haut en absolu à droite avec l'image de fond correspondante centré verticalement
- Un bloc central de 800px centré verticalement et horizontalement avec l'image de fond correspondante

Cette solution vous parait-elle plausible ?
Voici ou ma solution en est. Il y a un problème avec le centrage vertical de la partie centrale mais le reste semble en ordre...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<style type="text/css">	
		html, body {
		margin: 0;
		padding: 0;
		background: #b2b2b2;
		}

		#content { 
		position: relative;
		background: #FFFFFF;
		width: 800px;
		height: 700px;
		text-align: left;
		top: 50%;
		margin-top: -350px;
		left: 50%;
		margin-left: -400px;
		} 

		.column { 
		width: 50%;
		position: absolute; 
		top: 50%;
		margin-top: -350px;		
		height: 700px;
		} 

		.left {
		left: 0;
		background-image:url(texture_pageleft.gif);
		background:#000000;
		} 
		.right {
		right: 0;
		background-image:url(texture_pageright.gif);
		background:#000000;
		} 
	</style>
</head>
<body>
	<div class="left column"></div> 
	<div class="right column"></div> 
	<div id="content"><h1>content</h1></div> 	
</body>
</html>
Voilà j'ai finalisé ma solution avec des z-index... merci le net car j'aurais jamais trouvé... ca marche sous FF3 et IE7 le reste je sais pas...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<style type="text/css">	
		html, body {
		margin: 0;
		padding: 0;
		background: #b2b2b2;
		}

		#content { 
		position: absolute;
		background: #FFFFFF;
		width: 800px;
		height: 700px;
		text-align: left;
		top: 50%;
		margin-top: -350px;
		left: 50%;
		margin-left: -400px;
		z-index:3; 
		} 

		.column { 
		width: 50%;
		position: absolute; 
		top: 50%;
		margin-top: -350px;		
		height: 700px;
		} 

		.left {
		left: 0;
		background:#000000;
		z-index:1; 
		} 
		.right {
		right: 0;
		background:#000000;
		z-index:2; 
		} 
	</style>
</head>
<body>
	<div class="left column"></div> 
	<div class="right column"></div> 
	<div id="content"><h1>content</h1></div> 	
</body>
</html>


Encore un tout grand merci à ceux qui ont pris la peine de répondre ! Et vive Alsa
Sujet clos
Aller à