28172 sujets

CSS et mise en forme, CSS3

[Résolu]Colonnes factices + pied de page en bas

bonsoir

alors voilà je galère pas mal à essayer de combiner des colonnes factices et de mettre mon pied de page en bas, alors pour être plus concret voilà le code :


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html,body{height:100%;background:#333}
html,body,div,p{margin:0}
div#column2{width:100%;min-height:100%;background:#FC0 url(b.png) repeat-y right;position:relative}
div#column1{width:100%;min-height:100%;background:url(a.png) repeat-y}
div#main{min-height:100%;margin-left:30px;margin-right:30px}
div#foot{width:100%;height:50px;text-align:center;background:#CCC;position:absolute;bottom:0}
-->
</style>
</head>
<body>
<div id="column2">
	<div id="column1">
		<div id="main">
			<p>blablabla<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			blablabla</p>
		</div>
	</div>
	<div id="foot">
		<p>Footer</p>
	</div>
</div>
</body>
</html>


mais absolument impossible de permettre à l'image contenue dans div#column2 d'aller en bas

le premier min-height:100% empêche les autres cellules div de prendre la hauteur tant souaitée de height 100%.............

si quelqu'un a une idée elle sera accueillie avec joie

merci
++
Modifié par Artefacus (31 Oct 2007 - 09:19)
oups en fait c'est div#column1 qui va pas jusqu'en bas, elle y arrive quand div#main est plein de texte et que la page commence à scroller vu que div#main pousse div#column1, mais les valeurs min-height ne sont pas interprétées

si je mets height:100% partout ça donne l'impréssion de fonctionner quand le contenu du site est faible comme dans l'ex, mais dès que le contenu du site va le faire scroller les éléments div#column2,div#column1,div#main restent fixes et le texte passe en dessous ...........

merci
++
seb
Bonjour et bienvenue, Artefacus.

Avant tout, pourrais-tu éditer ton message pour baliser le code qu'il contient proprement, avec [ code] et [ /code], comme demandé dans les règles du forum ?

Ensuite, pour utiliser les colonnes factices, il faut utiliser une image de fond sur le conteneur des colonnes. Ton code HTML devrait ressembler à ceci : 
<div id="main">
   <div id="col1">
   ...
   </div>
   <div id="col2">
   ...
   </div>
   <div id="footer">
   ...
   </div>
</div>
Il faudra placer l'image de fond simulant la colonne dans #main : 
#main {
   background: #fff url(img/de/fond.png) left top repeat-y ;
   ...
}
Par ailleurs, je ne vois pas comment tu peux faire des colonnes avec une largeur de 100% de la page (width = 100%) ? Dans ce cas, il n'y a qu'une seule colonne, et donc plus de problème. Smiley biggol

Le plus "simple" est d'utiliser le positionnement flottant, sur au moins la première colonne. Par exemple : 
#col1 {
   float: left ;
   width : 30% ;
}
#footer {
   clear: both ;
}
Tu trouveras plus d'indications dans ce tutoriel, où on fait justement une mise en page avec colonnes factices & pied de page en bas. Smiley cligne
Bonjour,

Le problème vient du fait que tu ne peux pas donner de height: N% ou de min-height: N%; a un élément dont le parent n'a pas de hauteur déterminée.

Donc imbriquer deux blocs en min-height: 100%, ça n'est pas possible.

Solutions:
- si on travaille en largeur fixe, pas besoin de deux blocs en min-height: 100%, un seul suffit pour placer l'image des colonnes factices;
- si on travaille en largeur fluide, on peut ruser en utilisant l'élément body pour placer une image de fond répétée en hauteur.

En HTML, l'élément body a un comportement un peu spécial avec la plupart des navigateurs: même si on restreint sa hauteur via un height: 100%, une image de fond sur body s'étirera sur toute la hauteur de la page (si celle-ci venait à être plus longue que le viewport).

J'avais réalisé le test suivant:
http://web.covertprestige.info/test/18-colonnes-factices-fluides-et-entete-piedpage-1.html
Effectivement le site doit rester dynamique, donc pas de largeur fixe, j'etais entrain d'essayer d'appliquer le tuto cité ci-dessus, mais pour l'instant j'arrive à ça :

http://artefacus.free.fr/Alsa/etape2.html

mais ça ne donne pas le visuel escompté (bon j'ai pas finis de creuser non plus)

je vais de suite m'attaquer à ton code voir ce que je px en faire, bien que le problème est que j'ai déjà une image en fond dans le body positionnée en haut (pas sur l'exemple que j'ai donné vu que je l'ai simplifié au max), et même dans le meilleur des cas j'en metterais bien une autre aussi pour le bas de page Smiley sweatdrop


merci
++
seb
Artefacus a écrit :
bien que le problème est que j'ai déjà une image en fond dans le body positionnée en haut

Tu es obligé de la mettre en haut?

Artefacus a écrit :
(pas sur l'exemple que j'ai donné vu que je l'ai simplifié au max)

C'est toujours une bonne chose de simplifier, mais bien entendu nous ne pouvons pas deviner les problèmes annexes s'ils ne sont pas fournis. Smiley cligne
a écrit :
C'est toujours une bonne chose de simplifier, mais bien entendu nous ne pouvons pas deviner les problèmes annexes s'ils ne sont pas fournis.


bien sur tu as parfaitment raison, mais bon vu que ce que j'ai envi de faire en css est déjà bien assez compliquer (avec des tableaux, c'est fait sans prob) .............. donc j'voulais simplifier et faire étape par étape Smiley smile

donc voilà une version avec un peu plus détaillée de ce que je vx faire Smiley cligne

voilà:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html,body{height:100%}
body{background:#333 url(body_top.jpg) repeat-x}
html,body,div,p{margin:0}
div#column2{width:90%;min-height:100%;margin:0 auto;background:#FC0 url(b.png) repeat-y right;position:relative}
div#column1{width:100%;min-height:100%;background:url(a.png) repeat-y}
div#main{min-height:100%;margin-left:30px;margin-right:30px}
div#foot{width:100%;height:50px;text-align:center;background:#CCC;position:absolute;bottom:0}
-->
</style>
</head>
<body>
<div id="column2">
	<div id="column1">
		<div id="main">
			<p>blablabla<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			blablabla</p>
		</div>
	</div>
	<div id="foot">
		<p>Footer</p>
	</div>
</div>
</body>
</html>

visible ici : http://artefacus.free.fr/Alsa/alsa_03.htm

et dans le meilleur des cas arriver aussi à positionner une autre image en bas du site en fond à savoir celle-ci : http://artefacus.free.fr/Alsa/body_bottom.jpg

en utilisant ton code, pour l'instant au mieux j'ai :


<!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>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Gabarit page fluide avec colonnes factices et pied de page toujours en bas</title>
<style type="text/css">
html,body{height:100%}
body{background:#333 url(b.png) repeat-y 5% 0%}
html,body,div,p,h1{margin:0}
#page{width:90%;min-height:100%;margin:0 auto;background:url(a.png) right repeat-y;position:relative}
#site_bg{margin:0 19px;background:#FFF}
#contenu{margin:0 10px}
#piedpage1{height:80px;clear:both}
#piedpage2{position:absolute;bottom:0;left:0;width:100%;height:3em;line-height:2.8em;text-align:center;border-top:solid 2px brown;background:yellow}
</style>
<!--[if lte IE 6]>
<style type="text/css">
div#page{height:100%}
/* Corrige un décalage d'1px par rapport au bord inférieur (source du bug ?) */
div#piedpage2{bottom:-1px}
</style>
<![endif]-->
</head>
<body>
<div id="page">
	<div id="site_bg">
		<div id="contenu">
			<h1>Gabarit de page fluide avec colonnes factices et pied de page toujours en bas</h1>
			<p>Lorem ipsum facer simul perpetua nec ex, id mel diam populo perfecto. No sit novum error accusam. Sit homero convenire an, meis dolores aliquando ne cum. Ignota impetus luptatum ea est, vim tantas soleat philosophia at. Eu eum sint commune ocurreret.</p>
		</div>
	</div>
	<div id="piedpage1">
		<div id="piedpage2">Ceci est un pied de page</div>
	</div>
</div>
</body>
</html>

visible : http://artefacus.free.fr/Alsa/colonnes.html

je dois tricher de 1px sur

#site_bg{margin:0 19px;background:#FFF}

car vu que ce sont des % y a un liseret aléatoir qui apparait au resize et qui fait voir la couleur #333 du body, mais bon j'px tricher en mettant 19px alors que mes images font actuellement 20px de large donc c'est pas trop un prob, mais le fond blanc n'ira pas jusqu'en bas, si je le mets ailleurs il va recouvrir l'image dans du body et j'parle même pas de mettre les 2 autres images en fond de site pour faire mon dégradé en haut et en bas................... Smiley sweatdrop

toujours ouvert à toutes propositions

merci
++
seb
Modifié par Artefacus (31 Oct 2007 - 17:23)
Ce serait pas le même problème que Dam2a ? (sujet : Div hauteur dynamique)
Avoir plusieurs div côte à côte et vouloir qu'ils aient tous la meme hauteur ?

Si oui, j'ai posté une réponse au post de Dam2a, qui explique comment faire en CSS+JS.

Si non, alors j'ai dû mal comprendre Smiley smile
ok j'vais faire une petite recherche, j'te dirai si je trouve bien ton post, mais bon s'il faut mettre du java en plus.......... j'crois que j'vais faire simple et mettre un tableau puis basta.

merci
++
seb
Artefacus a écrit :
mais bon s'il faut mettre du java en plus...

Attention à ne pas confonde Java et JavaScript (rien à voir).

Artefacus a écrit :
j'crois que j'vais faire simple et mettre un tableau puis basta

C'est souvent une solution tout à fait correcte et pertinente. Smiley cligne
oui javascript, j'm'emporte Smiley cligne

mais bon j'aimerais bien arriver à le faire en full css, mais bon j'vois pas trop comment, puis si c'est pas possible, ben voilà, c'est pas possible, mais j'vais quand même essayer la solution trouvée ici :

http://www.devarticles.com/c/a/Web-Design-Standards/Matching-div-heights-with-CSS-and-JavaScript/

m'enfin je pensais que le css et les div pouvaient donner l'equivalent des rendus obtenus avec des tableaux, mais bon là ce que je demande à l'air de pas mal compliqué l'histoire, alors qu'un simple<table><tr><td></td><td></td><td></td><td></td></tr></table> avec les bonnes classes me donnera satisfaction ...............

merci encore @ tous, si quelqu'un arrive tout de même à trouver une solution avec ce que j'ai posté au dessus sur le liens :

http://artefacus.free.fr/Alsa/alsa_03.htm

je suis toujours preneur

++
seb
Bon c'est dommage, mais je m'avoue vaincu ............ retour aux tableaux ....... j'ai essayer le tuto javasript, carrement bien, mais une fois que la page est loadée, ben les collonnes ne bougent plus et ne sont donc plus dynamiques......

dommage que je ne puisse pas indiquer la hauteur min-height:100% dans un div ayant déjà cette valeur

merci encore
++
seb
Salut,

Juste pour le fun, ça à l'air de passer sous IE7 (ie6+commentaire conditionnel) FF et opera, c'est un peu "tiré par les cheveux" et je n'avais pas vu l'histoire du background de body en bottom Smiley biggol donc là j'ai méchamment bricolé... Smiley rolleyes 

*{padding: 0; margin: 0;}

body, html{
height: 100%;

}

#conteneur{
width: 90%;
margin: 0 auto;
background:  #fff url(gauche.jpg);
background-position: left 0;
background-repeat: repeat-y;
/*height: 100%;--------------- en commentaire conditionnel pour IE6 --------------------------------------*/
min-height: 100%;
position: relative;
z-index: 1;
}

#sous_conteneur{
margin: 0 0px 0 20px;
background: url(droite.jpg);
background-position: right 0;
background-repeat: repeat-y;
position: relative;
height: 100%;
z-index: 50;

}

#header{
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100%;
background: yellow url(droite.jpg);
background-position: right 0;
background-repeat: repeat-y;
z-index: 100;
}

#contenu{
width: 100%;
padding: 100px 0px 50px 0px;
background:  url(droite.jpg);
background-position: right 0;
background-repeat: repeat-y;
position: relative;
z-index: 150;
}

#cache{
background: #fff url(droite.jpg);
background-position: right 0;
background-repeat: repeat-y;
height: 100%;
position: absolute;
right: 0px;
left: 20px;
z-index: 10;
}

#contenu p{
margin: 0 20px;
}

#pied{
height: 50px;
width: 100%;
background: green;
position: absolute;
bottom: 0;
left: 0;
z-index: 200;
}

#header p, #pied p{
font-size: 2em;
text-align: center;
}

#fond_bottom_g{
height: 290px;
width: 6%;
position: absolute;
left: -6%;
bottom: 0;
background: #fff url(body_bottom.jpg);
background-position: left bottom;
background-repeat: repeat-x;
}

#fond_bottom_d{
height: 290px;
width: 5.5%;
position: absolute;
right: -5.5%;
bottom: 0;
background: #fff url(body_bottom.jpg);
background-repeat: repeat-x;
}

<body>
<div id="conteneur">
	<div id="cache">
	</div>
	<div id="sous_conteneur">
		<div id="contenu">		
			<div id="header">
			<p> entête</p>
			</div>		
		<p>Lorem ipsum dolor sit amet, odio tellus quam natoque sed quam, nulla elementum enim diam ornare leo dictumst, ut lobortis. Nec non tellus vitae odio odio, cras maecenas luctus fermentum odio morbi, vel fusce dui est quam sed nec, feugiat eget vivamus ac luctus aptent. Aliquam a. Turpis ut faucibus nam donec sem sed, vestibulum vehicula quis habitasse euismod consectetur metus, tortor eget ligula, facilisi magnis magna etiam elit, aliquet leo. Vitae in consectetuer vestibulum, sed lobortis erat justo donec egestas. Dignissimos ipsum sit nec morbi, mattis quam malesuada, sem congue dapibus faucibus malesuada pede. Tortor consectetuer imperdiet nec aliquam, et dictumst maecenas amet elit wisi nisl, sed semper pellentesque consectetuer feugiat tempor, bibendum fermentum nibh egestas, sapien donec donec interdum sapien. Ultricies aenean aliquam odio sem amet rerum, in mauris dolor nec bibendum eget, suscipit ante eu.
		</p>
		</div>		
	</div>
	<div id="pied">
		<p>pied</p>
		<div id="fond_bottom_d">
		</div>
		<div id="fond_bottom_g">
	</div>
</div>
</body>
On notera aussi qu'obtenir des colonnes de même hauteur sans tableau est tout à fait possible en CSS, avec display: table-cell. Voir la spécification CSS 2.1. Smiley cligne

Si cette possibilité n'a pas été mentionnée, c'est qu'elle n'est pas implémentée par Internet Explorer (on verra pour la version 8...).
a écrit :

donc là j'ai méchamment bricolé...


t'inquietes, j'ai passé pas mal de temps aussi, j'suis entrain de décortiquer ton code, et j'en étais arrivé à peu près la même solution pour positionner les images de dégradés du site en haut et bas en faisant des div à droite et à gauche en les positionnant de part et autre du site en haut et en bas, mais bon au final, j'avais obtenu un truc assez bancal, vu que les dimensions étaient calculées en % à certains moment (certainement lors des virgules flottantes) j'avais 1px de décalage ..........., donc j'en suis arrivé à la solution de florent en fixant les largeurs à droite et gauche du site et en mettant l'une des deux images en background dans le <body> ..............

mais ....... maintenant que c'est fait, et ben en 1600*1200, c'est horrible, le texte se comporte bien, mais v'là les longueurs de lignes, donc ...... retour à la case départ et ultime solution (qu'il me reste à faire) et bien c'est de tout refaire et de fixer la largeur de mon site en px, et zouuuu, j'en ai parlé à un pote qui m'a dit que ça se faisait plus trop les sites resizables de toute façon, donc faut juste que je me decide sur quelle résolution d'affichage je vais optimiser mon site ............. et donc vu que la largeur sera fixe, et ben une seule image pour faire mes colonnes de cadre à droite et gauche et donc plus de problème.

tout ça pour la gloire, mais bon, si j'avais pas vu de mes yeux le rendu j'aurais toujours été frustré en voyant ce site pensant qu'il pourrait être bien mieux d'une autre manière, donc bon au final, ça marche, mais finalement la solution la plus simple allie esthétisme et simplicité Smiley smile

a écrit :

On notera aussi qu'obtenir des colonnes de même hauteur sans tableau est tout à fait possible en CSS, avec display: table-cell. Voir la spécification CSS 2.1. cligne

Si cette possibilité n'a pas été mentionnée, c'est qu'elle n'est pas implémentée par Internet Explorer (on verra pour la version 8...).


ben ça aurait pu être une solution, mais bon si ça marche pas avec les navigateurs au moins ie6 et FF1.5, j'pense pas utiliser cette solution pour l'instant Smiley smile

merci encore @ tous
++
seb
Modifié par Artefacus (14 Nov 2007 - 11:59)
Sujet clos
Aller à