28173 sujets

CSS et mise en forme, CSS3

Problème avec site "extensible" et height 100%

Bonjour à tous,

Après avoir lu un maximum de choses sur les mises en page css et div... bien fouiné dans la faq et touti, je bloque sur un problème de srcoll et de propiété height.

Suite aux explications de pompage, l'ensemble de ma page se place parfaitement.
C'est mon #main qui m'embête et malgré toute logique, je ne vois pas la soluce.

http://www.wobo.fr/test/test2.html

http://www.wobo.fr/test/test3.html

http://www.wobo.fr/test/test4.html

Je n'ai trouvé aucun post sur ce type de problème ou bug, la page réagissant de la même manière sur IE et FF, ce qui est sensé être plutôt positif au départ!

Au départ, je souhaitais juste que le pied descende en fonction de la quantité de contenu dans #main, mais j'ai pas réussi.... du coup j'ai essayé de scroller uniquement #main (page actuelle ci-dessus)
, mais je bloque aussi.... voyez donc le résultat.

css:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #c5baa8;
}

div#page {
	position: relative;
	width: 95%;
	margin: 0 auto;
	min-height: 100%;
	height:100%;	
}


#header{
	position:absolute;
	width:100%;
	height:103px;
}
#header1{
	float:left;
	display: block;
	width:280px;
	height:103px;
	background-image:url(../images/logo.gif);
	background-repeat:no-repeat;
}
#header2{
	margin: 0px 230px 0px 280px;
	padding:0;
	height:103px;
	background-image:url(../images/top.gif);
	background-repeat:repeat-x;
}
#header3{
	float:right;
	width:230px;
	height:103px;
	background-image:url(../images/recherche.gif);
	background-repeat:no-repeat;
}

div#page #premier-element {
	margin-top: 0;
}
div#page #dernier-element {
	margin-bottom: 0;
}
div#piedpage {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
}


#centre{
	height:auto;
}
#left{
	float:left;
	height:100%;
	min-height:100%;
	width:265px;
	background-color:#FFFFFF;
	background-image:url(../images/border_g1.gif);
	background-repeat:repeat-y;
}
#main{
	background-color:#FFFFFF;
	height:100%;
	overflow:auto;
	
}
#right{
	float:right;
	height:100%;
	min-height:100%;
	width:230px;
	background-image:url(../images/border_d1.gif);
	background-repeat:repeat-y;
}


#pied{
	width:100%;
	height:100x;
}
#border_g2{
	float:left;
	width: 21px;
	height:87px;
	background-image:url(../images/border_g2.gif);
}
#border_d2{
	float:right;
	width: 21px;
	height:87px;
	background-image:url(../images/border_d2.gif);
}
#pied_flash{
	margin: 0px 21px 0px 21px;
	padding:0;
	height:87px;
	background-image:url(../images/bottom.gif);
	background-repeat:repeat-x;
}
#copyright{
	text-align:center;
	width:100%;
	height:13px;
	background-color: #c5baa8;
	font-family: Arial, san-serif;
	font-size: 9px;
	color: #FF0000;
}


html:


<body>
	<div id="page">
		<div id="header">
			<div id="header1"></div>
			<div id="header3"></div>
			<div id="header2"></div>		
		</div>
	<div id="premier-element"></div>
		<div id="centre">
			<div id="right"></div>
			<div id="left"></div>
			<div id="main"></div>
		</div>
	<div id="dernier-element"></div>
	<div id="piedpage">
		<div id="pied">
			<div id="border_g2"></div>
			<div id="border_d2"></div>
			<div id="pied_flash"></div>
			<div id="copyright">wobo</div>
		</div>
	</div>
</div>
</body>


Je pense que ça peut intéresser du monde ce genre de montage de page..
Si quelqu'un a une idée sur le problème... je suis limite nervous break down sur ce coup là.
Merci d'avance!

Smiley decu
Modifié par wobo (10 Sep 2007 - 23:01)
Coucou,

Je ne comprends pas : ton site actuellement s'adapte en hauteur à la taille de la fenetre, c'est à dire que ton bas de page est tjrs en bas de la fenetre.

Mais si tu veux que ce soit la quantité de texte qui determine la position de ton bas de page, et bien, ton diz ne sera plus extensible.

c'est quoi que tu veux ?
bonsoir....

Je voulais juste au départ que la page soit extensible vers le bas, avec un scroll global, classique, sauf que je dois avoir des attributes qui interfèrent et le pied ne suis pas le contenu....
Ou alors il le suis mais rajoute une centaine de pixel en plus vers le bas.

Je pense que le problème est lié au height:100 qui sert aux background-repeat: repeat-y dans:


#centre{
	height:100%;
}
#left{
	height:100%;
	min-height:100%;
}
#main{
	height:100%;
}
#right{
	height:100%;
	min-height:100%;
}


En bidouillant, j'ai installé le scroll uniquement sur #main avec l'overflow, mais ça bugge aussi (le lien que j'ai mis), ça aurait pu solutionner mon problème en le contournant.

Je continue à chercher dans les 2 directions, car ça donnerait 2 bases de sites différents.

En plus je cherchais aussi, à ce que le pied soit calé au bottom lorsque le contenu n'est pas suffisant pour générer un scroll....
Modifié par wobo (10 Sep 2007 - 22:22)
J'ai nettoyé un peu le code et mis le changement suivant en ligne à:

http://wobo.fr/test/test3.html

html:

 <body>
      <div id="page">
 		<div id="header">
			<div id="header1"></div>
			<div id="header3"></div>
			<div id="header2"></div>		
		</div>
		<div id="centre">
			<div id="right"></div>
			<div id="left"></div>
			<div id="main"></div>
		</div>
	        <div id="piedpage">
			<div id="border_g2"></div>
			<div id="border_d2"></div>
			<div id="pied_flash"></div>
			<div id="copyright">wobo</div>
	        </div>
      </div>
</body>


css:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #c5baa8;
}

div#page {
	position: relative;
	width: 95%;
	margin: 0 auto;
	height:100%;	
}
/* -----------------------------------------------------------------------*/
/* HEADER */
#header{
	position:absolute;
	width:100%;
	height:103px;
}
#header1{
	float:left;
	display: block;
	width:280px;
	height:103px;
	background-image:url(../images/logo.gif);
	background-repeat:no-repeat;
}
#header2{
	margin: 0px 230px 0px 280px;
	padding:0;
	height:103px;
	background-image:url(../images/top.gif);
	background-repeat:repeat-x;
}
#header3{
	float:right;
	width:230px;
	height:103px;
	background-image:url(../images/recherche.gif);
	background-repeat:no-repeat;
}
/* -----------------------------------------------------------------------*/
/* CENTRE */
#centre{
    [b]position:absolute;
	padding-top:103px;[/b]
	height:100%;
}
#left{
	float:left;
	height:100%;
	min-height:100%;
	width:265px;
	background-color:#FFFFFF;
	background-image:url(../images/border_g1.gif);
	background-repeat:repeat-y;
}
#main{
	position:relative;
	background-color:#FFFFFF;
	height:100%;
	overflow:auto;
	padding-right:10px;
	
}
#right{
	float:right;
	height:100%;
	min-height:100%;
	width:230px;
	background-image:url(../images/border_d1.gif);
	background-repeat:repeat-y;
}
/* -----------------------------------------------------------------------*/
/* PIED */
/* -----------------------------------------------------------------------*/

div#piedpage {
	position:absolute;
	bottom: 0; left: 0;
	width: 100%;
}
#border_g2{
	float:left;
	width: 21px;
	height:87px;
	background-image:url(../images/border_g2.gif);
}
#border_d2{
	float:right;
	width: 21px;
	height:87px;
	background-image:url(../images/border_d2.gif);
}
#pied_flash{
	margin: 0px 21px 0px 21px;
	padding:0;
	height:87px;
	background-image:url(../images/bottom.gif);
	background-repeat:repeat-x;
}
#copyright{
	text-align:center;
	width:100%;
	height:13px;
	background-color: #c5baa8;
	font-family: Arial, san-serif;
	font-size: 9px;
	color: #FF0000;
}


Ce qui est dingue, c'est qu'en changeant cela sur #centre, seul #main est affecté... mais pas #right et #left

"C'est à ni rien comprendre"
Modifié par wobo (10 Sep 2007 - 22:48)
Sujet clos
Aller à