[RESOLU]Colonne ajustable et pied de page qui suit

Question

kimy

28 Jan 2010 à 17:12

Bonjour,

je voudrais savoir comment on fait pour faire des colonne qui s'ajuste l'une a lautre!

Je suis très débutante dans le domaine!

J'ai tout mis en page en css avec div id. Je ne sais vraiment pas si ce que j'ai fait est convenable pour le résultat que je veux!

J'ai un contenu et une colonne a droite pour le menu mais je voudrais que la colonne a gauche s'ajuste automatiquement a la hauteur de mon contenu! et je voudrais aussi que le pied de page suive et soit toujours en dessous des deux colonnes.

Je vous donne le lien de mon site http://www.planet-argent.com

J'ai toute mise ma mise en page en absolute et j'imagine que ca ne doit pas aider pour le résultat que je désire mais je ne savais vraiment pas comment faire autrement!

SVP, pouvez -vous m'aider pour faire ce que je veux et si vous avez des commentaires concernant la mise en page ou autre, n'hésiter pas!

je vous donne le code css que j'ai utilisé:

/* CSS Document */
body {
	background-color: #0268BA;
	background-image: url(images/bg-planetargent.jpg);
	background-repeat:repeat-x;
	margin: 0;  
	text-align: center; 
}

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #FFFFFF;
	
}	
#global {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 980px;
	height: 2050px; 
}	
#tete_01{
	background-image:url(images/tete_02.jpg);
	background-repeat:no-repeat;
	background-position:center;
	width:980px;
	height: 33px;
	text-align: center; 
	position: absolute;
margin: 0px
}	
#tete_04{
	background-image:url(images/tete_04.jpg);
	width:184px;
	height: 259px;
	position: absolute;
	top: 33px;
	left: 0px;
}	
#tete_05{
	background-image:url(images/tete_05.jpg);
	width:232px;
	height: 259px;
	position: absolute;
	top: 33px;
	left: 184px;
}	
#tete_06{
	background-image:url(images/tete_06.jpg);
	width:242px;
	height: 259px;
	position: absolute;
	top: 33px;
	left: 416px;
}	
#tete_07{
	background-image:url(images/tete_07.jpg);
	width:159px;
	height: 259px;
	position: absolute;
	top: 33px;
	left: 658px;	
}	
#tete_08{
	background-image:url(images/tete_08.jpg);
	width:163px;
	height: 259px;
	position: absolute;
	top: 33px;
	left: 817px;
}		
#menuhaut-img_g{

	width:184px;
	height: 67px;
	position: absolute;
	top: 292px;
	left: 0px;
	background-image: url(images/menuhaut-img_g.jpg);
	
	}		
#menuhaut-img_d{

	width:126px;
	height: 67px;
	position: absolute;
	top: 292px;
	left: 532px;
	background-image: url(images/menuhaut-img_d.jpg);
	
}
#menuhaut ul {
	padding:0;
	margin:0;
	top: 292px;
	left: 184px;
	position: absolute;
	list-style-type:none;
	
 }
#menuhaut li {
 float:left;
 
 }
#menuhaut ul li a {
	display:block;
	width:116px;
	line-height:48px;
	background:black url(images/menuhaut_01.jpg) repeat-x;
	text-decoration:none;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	height: 48px;
	background-image: url(images/menuhaut_01.jpg);


 }
#menuhaut ul li a:hover {
	background:black url(images/menuhaut_01-over.jpg) repeat-x;
	color:#4D6E05;
 }
#menuhaut ul li a:active {
	background:black url(images/menuhaut_01-over.jpg) repeat-x;
	color:#4D6E05;
}	
#contenu{
	width:590px;
	height: 1244px;
	position: absolute;
	top: 359px;
	left: 68px;
	background-color:#FFFFFF;
	
}	
#coin-page{
	background-image:url(images/coin-page_02.jpg);
	width:69px;
	height: 89px;
	position: relative;
	left: 521px;

}	
#bandeau titre{
	background-image:url(images/bandeau-titre.gif);
	width:69px;
	height: 89px;
	position: absolute;
	top: 0px;
	left: 521px;
	background-color:#FFFFFF;
	
}	
#container-copyright{
	width:928px;
	height: 96px;
	position: absolute;
	top: 1562px;

}	
#img-copyright{

background-image:url(images/bandeau-bas_fleur.jpg);
	width:112px;
	height: 96px;
}	
#bandeau-copyright{
background-image:url(images/bandeau-bas.jpg);
background-repeat:repeat-x;
	width:794px;
	height: 55px;
	position: absolute;
	left: 112px;
	top: 41px;
}	
#gauche-copyright{
background-image:url(images/bandeau-bas_gauche.jpg);
	width:22px;
	height: 69px;
	position: absolute;
	left: 906px;
	top: 27px;
}	
#menu-gauche{
	background-image:url(images/menubg-02.jpg);
	width:280px;
	height: 1311px;
	position: relative;
	top: 292px;
	left: 658px;
	z-index: auto;
}	
#img-tete_10{
	background-image:url(images/tete_10.jpg);
	width:280px;
	height: 67px;
	position: absolute;
	top: 0px;
	left: 0px;
}	
#menu-gagner-titre{
	background-image:url(images/menu-gagner.jpg);
	width:280px;
	height: 72px;
	position: absolute;
	top: 80px;
	left: 0px;

}
#menu-gagner ul {
	width:217px;
 	line-height:32px; 
	padding:0;
	margin:0;
	list-style-type:none;
	top: 152px;
	left: 31px;
	position: absolute;
	list-style-type : none;
 
  }
#menu-gagner ul li a {
 	display:block;  
 	background:black url(images/menubleu_01.jpg) repeat-y;
 	text-decoration:none;
 	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 13px;
	color: #FFFFFF;
 }
#menu-gagner ul li a:hover {
	background:black url(images/menubleu_01-over.jpg) repeat-x;
	color:#115AA8;
}	
#menu-partenaire-titre{
	background-image:url(images/menu-partenaire.jpg);
	width:280px;
	height: 72px;
	position: absolute;
	top: 384px;
	left: 0px;
}
#menu-partenaire ul {
	width:217px;
	line-height:32px;
	position:absolute;
	padding:0;
	margin:0;
	list-style-type:none;
	top: 456px;
	left: 31px;
	overflow:visible
	list-style-type : none;

 
  }
#menu-partenaire ul li a {
 	display:block;  
	width:217px;
 	line-height:32px; 
 	background:black url(images/menuvert_01.jpg) repeat-y;
 	text-decoration:none;
 	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 13px;
	color: #FFFFFF;

 }
#menu-partenaire ul li a:hover {
	background:black url(images/menuvert_01-over.jpg) repeat-x;
	color:#587605;
 }	
#container-menu-part{
	width: 217px;
	height: auto;
	position: relative;
	top: 584px;
	left: 31px;


}
#menu-part_top{
	background-image:url(images/menuv-logo-partenaire_haut.jpg);
	background-position:top;
	background-repeat:no-repeat;width:217px;
	height:10px;
	position: relative;
	overflow:hidden;

 }	
#menu-part_middle{
	background-image:url(images/menuv-logo-partenaire_bg.jpg);
	background-repeat:repeat-y;
	width:217px;
	height:auto;
	overflow:hidden;
	text-align:center;
	position: relative;
	padding-top: 0px;
	padding-bottom:0px;
	marging-bottom:0px;


 }
#menu-part_bottom{
	background-image:url(images/menuv-logo-partenaire_bas.jpg);
	background-position: bottom;
	background-repeat:no-repeat;
	width:217px;
	height:10px;
	position: absolute
	bottom: 0px;
	
 }
#container_pied{
	width:869px;
	height:318px;
	top:1688px;
	left:55px;
	position:absolute;

 }
#pied-haut{
	background-image:url(images/pied-haut.jpg);
	width:869px;
	height:25px;


 }
#pied-milieu{
	background-image:url(images/pied_middle.jpg);
	background-repeat:repeat-y;
	width:869px;
	height:175px;
 }
#pied-img-gauche{
	background-image:url(images/pied-img-gauche.jpg);
	background-repeat:no-repeat;
	width:184px;
	height:118px;
	
 }
#pied-img-droit{
	background-image:url(images/pied-img-droit.jpg);
	background-repeat:no-repeat;
	width:193px;
	height:118px;
	position: absolute;
	left: 677px;
	top: 200px;
	
 }
#pied-bas{
	background-image:url(images/pied-bas.jpg);
	background-repeat: repeat-x;
	width:493px;
	position: absolute;
	height:118px;
	left: 184px;
	top: 200px;
	z-index:1;

Modifié par kimy (01 Feb 2010 - 14:15)

Laurie-Anne

28 Jan 2010 à 21:35

En gros ce que tu veux faire c'est : Deux colonnes de même hauteur ?

Aureance

28 Jan 2010 à 22:46

Bonsoir,
Ajuster les hauteurs avec des blocs en position absolute ce n'est pas possible à ma connaissance.
Il est meilleur d'utiliser les flottements et de garder les hauteurs s'ajuster d'elles même.

Sur Alsacréations il y a une galerie de Gabarits HTML et CSS simples. Tu comprendras vite si tu regardes leurs codes sources.

Pour ce que tu veux faire, le principe de base est celui ci :

upload/579-colonnes-en-.jpg

Ce qui donne pour le code complet de cet exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Titre de la page</title>
		<style type="text/css">
	body {
	margin: 0; padding: 0; text-align: center;}
	#conteneur {width: 1000px; margin: 0 auto;}
			#haut {width: 1000px; }
			#gauche {width: 700px;float: left;}
			#droite {width: 300px;float: left;}
			.stop_flottement {clear: both;}		
			#bas {width: 1000px;}
	/* Attention ! si l'on ajoute des bordures, il faut diminuer d'autant la largeur des blocs…*/
	/* #haut, #gauche, #droite, #bas { border: 1px dashed #555 } */
		</style>
	</head>
	<body>
<div id="conteneur">
	<div id="haut">
		<p>Contenu du haut</p>
	</div>
	<div id="gauche">
		<p>Contenu de la colonne de gauche</p>
	</div>
	<div id="droite">
		<p>Contenu de la colonne de droite</p>		
	</div>
		<p class="stop_flottement"></p>
	<div id="bas">
		<p>Contenu du bas</p>
	</div>	
</div>
	</body>
</html>

Modifié par Aureance (28 Jan 2010 - 22:53)

kimy

29 Jan 2010 à 14:33

Merci,

c'est vraiment gentil d'avoir pris le temps de me répondre et de me faire un schémas!
Vraiment merci!

J'essaie ce que tu me propose et je te reviens pour te dire si ça fonctionne!

kimy

29 Jan 2010 à 14:37

Je voulais savoir un truc, avec cette méthode est-ce que les deux colonnes gauche et droite se suiveront, c'est a dire, si je modifie le contenu, est-ce que la colonne de droite suivra la hauteur de la colonne gauche ?

et le pied, est-ce qu'il se positionnera toujours après le contenu ( les deux colonnes)?

merci!

Aureance

29 Jan 2010 à 14:52

kimy a écrit :
Je voulais savoir un truc, avec cette méthode est-ce que les deux colonnes gauche et droite se suiveront, c'est a dire, si je modifie le contenu, est-ce que la colonne de droite suivra la hauteur de la colonne gauche ?

et le pied, est-ce qu'il se positionnera toujours après le contenu ( les deux colonnes)?

C'est exactement ça ! Smiley cligne

kimy

29 Jan 2010 à 15:22

et mes images, est-ce que je ferais mieux de les placer dans le html ou dans le css?

parce que la mon css est très long!

et comment je les positionne mes images dans mon contenu, est-ce que je dois mettre les images en absolute et seulement avec les marge, je devrai y arriver?

Parce que je n'y arrivais pas quand j'ai essayé!

merci beaucoup!

Aureance

29 Jan 2010 à 15:37

Les images qui servent uniquement à la décoration doivent de préférence être placées en arrière-plan (en css background). Les autres images, celles qui ont un intérêt rédactionnel sont placées dans le fil du contenu, sans autre particularité pour le positionnement.

Je vois que tu utilises 8 div pour construire ta têtière… À mon avis tu pourrais simplifier : une seule devrait suffire. Je n'ai pas regardé plus loin, mais le reste me semble du même acabit.

kimy

29 Jan 2010 à 15:47

donc, je devrais placé les 8 images dans une seule div ou je devrai faire simplement une image, mais si je fais une seule image, ce ne sera pas trop lourd?

odel

29 Jan 2010 à 15:57

Bonjour -
Je m'immisce dans la conversation pour moi aussi bénéficier des lumières d'Aureance.

1/ faut il absolument un conteneur pour le tout ou la balise <body> convient elle ?
2/ si je comprends bien, une telle construction prendra toujours la totalité de la largeur de l'écran ?
3/ qu'en est il de la hauteur ? si elle n'est jamais spécifiée, est il correct de penser que chaque bloc aura la hauteur nécessaire à son contenu, et que le dernier (footer) occupera toute la hauteur restante (potentiellement 60% de la page) ?

Merci d'avance

Olivier

kimy

29 Jan 2010 à 16:52

bonjour Aureance,

J'ai recommencé la mise en page de mon site, et ca fonctionne quand même assez bien pour le début de mon site! cependant, La hauteur des deux colonnes ne s'ajuste pas, elle ne sont pas la même hauteur.

http://www.planet-argent.com/

je te donne le csse j'ai utilisé:

/* CSS Document */
body {
	background-color: #0268BA;
	background-image: url(images/bg-planetargent.jpg);
	background-repeat:repeat-x;
	margin: 0px; 
	padding: 0px
	text-align: center; 

}

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12pt;
	color: #FFFFFF;
	
}	
#global {
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 980px;

}	
#entete {
	width: 100%;
	height:auto;
}		
#menuhaut-img_g{
	float: left;
	width:184px;
	height: 67px;
	background-image: url(images/menuhaut-img_g.jpg);

}
#menuhaut ul {
	padding:0;
	margin:0;
	list-style-type:none;
	
 }
#menuhaut li {
 float:left;
 
 }
#menuhaut ul li a {
	display:block;
	width:116px;
	line-height:48px;
	background:black url(images/menuhaut_01.jpg) repeat-x;
	text-decoration:none;
	text-align:center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFFFFF;
	font-weight: bold;
	height: 48px;
	background-image: url(images/menuhaut_01.jpg);


 }
#menuhaut ul li a:hover {
	background:black url(images/menuhaut_01-over.jpg) repeat-x;
	color:#4D6E05;
 }
#menuhaut ul li a:active {
	background:black url(images/menuhaut_01-over.jpg) repeat-x;
	color:#4D6E05;
	
	}		
#menuhaut-img_d{
	float:left;
	width:126px;
	height: 67px;
	background-image: url(images/menuhaut-img_d.jpg);
}	
#img-tete_10{
	float: left;
	background-image:url(images/tete_10.jpg);
	width:280px;
	height: 67px;

	}	
#gauche{
	float: left;
	width: 590px;
	margin-left: 68px;
	background-color:#FFFFFF;
		height:70%;
	
}	
#img-coin-page{
	background-image:url(images/coin-page_02.jpg);
	width:69px;
	height: 89px;
	margin-left: 521px;

}	
#droit{
	float: left;
	background-image:url(images/menubg-01.jpg);
	background-repeat: repeat-y;
	width:322px;
	height:70%;
}	
.stop_flottement{
	clear:both;

Aureance

29 Jan 2010 à 17:03

odel a écrit :
1/ faut il absolument un conteneur pour le tout ou la balise <body> convient elle ?

Il n'est pas obligatoire d'avoir une div "contenu" on peut aussi décider que body fait une certaine largeur, On perd un avantage, c'est de pouvoir différencier le contenu du body (un contenu blanc sur un fond gris par ex).

odel a écrit :
2/ si je comprends bien, une telle construction prendra toujours la totalité de la largeur de l'écran ?

Non, cette construction prendra la largeur de l'élément dans laquelle elle est rangée. Soit le body soit une div "contenu".

odel a écrit :
3/ qu'en est il de la hauteur ? si elle n'est jamais spécifiée, est il correct de penser que chaque bloc aura la hauteur nécessaire à son contenu, et que le dernier (footer) occupera toute la hauteur restante (potentiellement 60% de la page) ?

Non, le footer aura aussi la taille de son contenu, de ses padding, min-height si tu l'uitilises etc…

@kimy Une dernière petite image explicative…

kimy

29 Jan 2010 à 17:15

merci beaucoup Aureance

ton aide m'a été vraiment précieuse!

Smiley cligne

odel

29 Jan 2010 à 17:47

Merci Aureance - le body par définition prend tout l'écran si rien n'est spécifié, correct ?

Olivier

Aureance

29 Jan 2010 à 22:37

Oui, le body est "le conteneur de tous les conteneurs"… Celui qui a la suprématie. En fait c'est la fenêtre du navigateur et dedans on met ce qu'on veut.

Sujet clos

CSS et mise en forme, CSS3

[RESOLU]Colonne ajustable et pied de page qui suit