28172 sujets

CSS et mise en forme, CSS3

[Résolu] Design fluide à 3 colonnes : Les avoir de même taille?

Bonsoir à tous,
J'aimerai vous soumettre un problème que je rencontre.
Actuellement je refais le design de mon site qui était un site à largeur fixe, avec une colonne à gauche et un corps à sa droite (classique quoi, il est toujours en ligne le temps que je paufinne sa prochaine version graphique)

Voici l'adresse du dossier où j'élabore le design : http://www.collapse-of-time.net/test/

Depuis peu je m'attèle à la création d'un nouveau design.
-Avec une colonne à droite et à gauche et un corps au centre.
-Avec un design fluide.

Mais voila, j'arrive au point où je me rend compte que pour un design fluide, l'application des colonnes factices est sans doute impossible Smiley sweatdrop

J'ai cherché mais je n'ai pas trouvé d'alternatives sur le site, ni sur le web (j'espere que vous pourrez m'aider)

J'ai aussi d'autres petites requêtes à vous soumettre :
-J'ai mis un max-width pour les grandes résolutions pour éviter que ma structuration ne s'étire trop. Et j'aurais voulu pourquoi un margin:auto ne fonctionne pas pour centrer le site.

-Auriez vous trouvé des fioritures dans mon code html/css que je puisse optimiser tout cela svp?

Je récapitule :
1. Comment faire pour que toutes les colonnes du site aient une hauteur égale dans un design fluide?

2. [OK] Comment mettre mon site au centre de l'écran pour les grandes résolutions? (il reste bloqué à gauche dans ce cas là)
J'ai trouvé, pour cela j'ai ajouté un id css qui contenait toute la page du header au pied avec ceci dedans :
	#global{width:100%;max-width:1500px;min-width:800px;margin-left:auto;margin-right:auto;}


3. Quelles seraient les optimisations possibles niveau code?

Voici mon code CSS :

@font-face {
font-family: 'OratorStd';
src: url('OratorStd.ttf');
src: local('OratorStd'), url('http://www.collapse-of-time.net/parties/fonts/OratorStd.ttf') format('TrueType');
}
html{height:100%;background-color:#181818;font-size: 100%;}
body{margin:0;padding:0; max-width:1500px; font-family: Arial, sans-serif; color:white;}

/*EN-TETES*/
	#header{background:url('images/remplissage-banniere.gif') repeat;}
	#banniere{margin:auto; width:917px; height:261px; background:url('images/banniere.gif') no-repeat;}
	#conteneur{background:url('images/fond.gif') repeat;}

/*MENUS*/
	/*Global*/
		.menu-haut{background:url('images/corps-haut.gif') repeat-x; height:31px;}
		.menu-bas{background:url('images/corps-bas.gif') repeat-x;}
		.conteneur-menu{max-width:20em;}
/*Menu Gauche*/
	/*Annexes*/
		#menu-gauche p{text-align:justify;	display:inline;}
		#menu-gauche li{margin-left: -35px;}
		#menu-gauche h4{padding-top:3px; font-size:0.8em;}
	/*IDs*/
		#menu-gauche{
			float:left;
			width:20%;}
		#menu-gauche-haut-droite{
			background:url('images/menu-haut-droite.gif') no-repeat;
			height:33px;
			width:34px;
			float:right;}
		#menu-gauche-colonne{
			background:url('images/menu-colonne.gif') repeat-y right;
			padding-left:6px; 
			padding-right:33px;}
		#menu-gauche-bas-droite{
			background:url('images/menu-bas-droite.gif') no-repeat;
			height:37px;
			width:34px;
			float:right;}
/*Menu Droite*/
	/*Annexes*/
		#menu-droite p{text-align:justify;	display:inline;}
		#menu-droite li{margin-left: -35px;}
		#menu-droite h4{padding-top:3px; font-size:0.8em;}
	/*IDs*/	
		#menu-droite{
			float:right;
			width:20%;}
		#menu-droite-haut-gauche{
			background:url('images/menu-haut-droite.gif') no-repeat;
			height:33px;
			width:34px;
			float:left;}
		#menu-droite-colonne{
			background:url('images/menu-colonne.gif') repeat-y left;
			padding-left:33px; 
			padding-right:6px;}
		#menu-droite-bas-droite{
			background:url('images/menu-bas-droite.gif') no-repeat;
			height:37px;
			width:34px;
			float:left;}

/*CORPS*/
	/*Annexes*/
		#corps p{
			color:#d8d8d8;
			text-align:justify;
			padding-left:24px; 
			padding-right:23px;}
		#corps img {max-width:100%;}
	/*IDs*/	
		#corps{margin-left:20%;	margin-right:20%;}
		#corps-haut{
			background:url('images/corps-haut.gif') repeat-x;
			height:31px;}
		#conteneur-corps{margin:auto; max-width:50em;}	
		#corps-bas{background:url('images/corps-bas.gif') repeat-x;	height:37px;}

/*PIED*/
	#pied{clear:both;}
	#pied-partenaires{margin-right:30px;}
	#pied-annuaires{
		float:left;
		margin-left:30px;
		font-size: 11px;}
	#pied-mentions{
		clear:both;
		text-align:center;
		color:#919191; 
		font-size:12px;}
	
/* -----------ANNEXE------------ */
	img {border:none;}
	table, td, tr{padding:0px; margin:0px;}
	li{
	font-size: 100%;
	list-style-type: none;
	background: url('images/arrow.png') no-repeat 0 0.32em;
	padding-left: 15px;} 
	a{outline:0; text-decoration:none; color:#E2EA00;}
	a:hover{text-decoration:underline;}
	em{font-style:normal;}
	strong{font-weight:normal;}
	h1,h2,h3,h4,h5,h6{
		font-family:OratorStd, Arial, sans-serif;
		text-align:center;
		background:url('images/titres-menu.gif') repeat-x;
		height:42px;}
	h1{padding-top:3px; font-size:1.5em;}
	h2{padding-top:4px; font-size:1.3em;}
	h3{padding-top:10px; font-size:1em;}
	h4{padding-top:10px; font-size:0.95em;}


Et voici à nouveau l'adresse : http://www.collapse-of-time.net/test/

Merci grandement à vous! Smiley cligne
PS: Je m'occuperai du cas IE après avoir trouvé la solution à ces problèmes Smiley biggrin
Modifié par Deus Ex Machina (02 Jul 2010 - 15:51)
Sujet clos
Aller à