28173 sujets

CSS et mise en forme, CSS3

Questions sur le tutoriel d'un design à 2/3 colonnes

Pages :
Bonjour à tous, j'essayais de modifier mon design actuel avec l'aide de ces tutoriels

Un design fluide avec trois «colonnes», grâce au positionnement flottant

et

Design XHTML/CSS complet avec 2 colonnes de même hauteur

J'aimerais connaitre si c'est primordial d'englober toutes mes pages dans un div (global) et donc de mettre une hauteur.

Je me pose cette question car actuellement j'ai un problème avec mon footer qui ne se met pas tout en bas de la page. (pour etre précis il se met seulement en dessous de ma colonne central et ne prend donc pas en compte si les 2 colonnes flottantes sont plus hautes
Voici les CSS




#corps
{
	padding-bottom: 10px;
	overflow: hidden;
}

#menu_gauche {
width: 160px;
float: left;
margin-right: 10px;
list-style-type: none;
padding: 1px 0;
}

#colonne_droite {
float: right;
width: 200px;
margin-left: 10px;
padding: 0em;
}


#pied_de_page
{
position: absolute;
	width: 100%;
margin-top:20px;
background-image: url("../images/footer.png");
background-repeat: no-repeat;
text-align: center;
}


Je pense que le problème est que je n'ai pas mis de position: relative; à un div global.

Est ce bien cela le problème ?
SI oui suis je donc obliger de créer un div global ou il y a une autre solution?
Modifié par Snipy (01 Jun 2007 - 23:08)
Modérateur
Salut,

À la vue de ton code, je crois qu'il doit manquer la propriété clear : both à ton footer. Également, supprime la position absolu.


#pied_de_page
{
[b]clear:both;[/b]
width: 100%;
margin-top:20px;
background-image: url("../images/footer.png");
background-repeat: no-repeat;
text-align: center;
}


En effet, il est préférable de placer un global pour tes deux colonnes.

++
Modifié par Nolem (02 Jun 2007 - 08:23)
C'est un peu mieux, car mon footer ne passe plus par dessus mes colonnes flottante, mais l'effet recherché n'est pas encore la.
Voici un screen

http://img99.imageshack.us/img99/681/sanstitre1rh1.png

J'aimerais que le pied soit tout en bas


a écrit :
En effet, il est préférable de placer un global pour tes deux colonnes.


Peux tu me dire pourquoi ?

Bonne journée
Modérateur
En gros cela évite ton soucis et des autres également (hauteur des colonnes, image de fond, etc.).

le code est dans ce style :


[b]<div id="global">[/b]
 <div id="colonne_1"></div>
 <div id="colonne_2"></div>
 <div id="colonne_3"></div>
[b]</div>[/b]
<div id="pied_de_page"></div>


++
Modifié par Nolem (02 Jun 2007 - 13:05)
Apres la création de ce div global, j'ai toujours un problème.
Maintenant mon pied de page n'est plus après mon div corps, mais est toujours à la même distance en bas. Ce qui veut dire que si mon corps devient trop long mon div pied de page se retrouve sur le corps
Voici le screen http://img47.imageshack.us/img47/5527/sanstitre1pb3.png
J'aimerais donc qu'il s'ajuste en fonction de la hauteur de mon corps Smiley smile
A savoir que le div global commence juste apres le <body> et ce fini juste avant le <div> de mon pied de page.

Voici le CSS actuel


html,body
{
 height: 100%;
margin: 0;
}

div#global {
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	}

#corps
{
	padding-bottom: 10px;
	overflow: hidden;
}

#menu_gauche {
width: 160px;
float: left;
margin-right: 10px;
list-style-type: none;
padding: 1px 0;
}

#colonne_droite {
float: right;
width: 200px;
margin-left: 10px;
padding: 0em;
}


#pied_de_page
{
position: absolute;
width: 100%;
margin-top:20px;
background-image: url("../images/footer.png");
background-repeat: no-repeat;
text-align: center;
bottom: 0;
}


Merci d'avance pour votre aide Smiley smile
Modifié par Snipy (02 Jun 2007 - 14:58)
Salut,

bon je comprends pas la derniere astuce de ce tuto d'alsa.

mais alors que j'en cherchais un autre de ce site egalement je suis tombé dessus.
Et il y a donc cette histoire de padding-bottom qui permettrait de compenser le fait d'utiliser le position:absolute et le bottom:0.

comment ? alors ça...peut-etre un fusion des marges par le dessous?
ben tu me diras si ça marche. bon re go sur roland..j'esp que ca va tjs pour PHM...
Modifié par CPascal (02 Jun 2007 - 15:09)
Hein!!!! mais c'est la solution de ton probleme moi a la rigueur je m'en fou.
lis le tuto avant d'engueuler ce qui essai de t'aider.

je cite le tutoriel

a écrit :
Maintenant que ceci est réglé, nous avons un deuxième problème : le pied de page, positionné en absolu, vient recouvrir la fin du contenu lorsque celui-ci est suffisamment long. On corrigera ce problème assez facilement, à l'aide d'un padding sur le dernier élément de contenu :

div#page #dernier-element {
padding-bottom: 4em;
}Attention : la hauteur de ce padding devra être relative à la hauteur du pied de page ! Il s'agit donc de connaître à l'avance la hauteur de ce pied de page, soit dans une unité fixe (px), soit dans une unité variable (em) : c'est la seule restriction importante de la méthode que nous venons d'exposer.


ceci est la solution préconisé par la FAQ de ce forum.
Modifié par CPascal (02 Jun 2007 - 15:33)
CPascal a écrit :
Hein!!!! mais c'est la solution de ton probleme moi a la rigueur je m'en fou.
lis le tuto avant d'engueuler ce qui essai de t'aider.

je cite le tutoriel

Maintenant que ceci est réglé, nous avons un deuxième problème : le pied de page, positionné en absolu, vient recouvrir la fin du contenu lorsque celui-ci est suffisamment long. On corrigera ce problème assez facilement, à l'aide d'un padding sur le dernier élément de contenu :

div#page #dernier-element {
padding-bottom: 4em;
}Attention : la hauteur de ce padding devra être relative à la hauteur du pied de page ! Il s'agit donc de connaître à l'avance la hauteur de ce pied de page, soit dans une unité fixe (px), soit dans une unité variable (em) : c'est la seule restriction importante de la méthode que nous venons d'exposer.


ceci est la solution préconisé par la FAQ de ce forum.

Euh je ne t'ai jamais enguelé
Smiley cligne

Sinon je te remercie de ta réponse, un seul point que je ne comprend pas afin de faire fonctionner cette astuce, a quoi correspond le div dernier élément ? C'est un div qui est dans le div corps ?

Merci d'avance et encore désolé Smiley biggrin
<div id="dernier-element">&nbsp;</div>

est ce qu'on trouve dans le code source de la page d'exemple.

j'ai enlevé tous sauf le min-heignt dans le style page sans que ça empeche la solution.

donc a priori ce serait possible d'appliquer le padding-bottom a ton div#global.....

bon voila. je comprends imparfaitement.... c pk je demandais notamment aux modo qui font les FAQ, mais pas que, ce qu'ils en pensaient.
Mon pied de page est maintenant parfaitement placé (en hauteur), je n'ai pas utilisé l'astuce ci dessous.

Un dernier problème subsiste, sur certaines de mes pages, le footer n'est pas centré, il démarre en même temps que le corps et non pas en même temps que le premier menu

Voici le screen :

http://img463.imageshack.us/img463/5196/sanstitre1vg2.png


Merci d'avance pour votre aide pour régler ce petit problème Smiley biggrin
Modérateur
Salut,

Regarde ceci (Si tu ne comprends pas quelques chose, n'esite pas Smiley smile ):


<body>
		<div id="conteneur">
			<h1>En tête de page</h1>
				<div id="global">
					<div id="colon1">
						<p>menu (colon1)</p>
						<p>largeur de 150 pixels</p>
						<ul id="menu">
							<li><a href="#">lien 1</a></li>
							<li><a href="#">lien 2</a></li>
							<li><a href="#">lien 3</a></li>
							<li><a href="#">lien 4</a></li>
						</ul>
					</div>
					<div id="colon3">
						<p>menu (colon3)</p>
						<p>largeur de 150 pixels</p>
						<ul id="menu">
							<li><a href="#">lien 1</a></li>
							<li><a href="#">lien 2</a></li>
							<li><a href="#">lien 3</a></li>
							<li><a href="#">lien 4</a></li>
						</ul>
					</div>
					<div id="colon2">	
						<p>contenu de la page (colon2)</p>
						<p>largeur aléatoire</p>
						<p>Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus.</p>
						<p>Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.</p>
						<p>Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.</p>
					</div>
				</div>
			<p id="pied">pied de page</p>
		</div>
	</body>





body   {
 background-color: teal;
 text-align: center;
 margin: 0;
 padding: 0 
}
p  {
 margin: 0 0 12px 
}
h1   {
 color: white;
 font-size: 2em;
 font-weight: bold;
 background-color: olive;
 margin: 0;
 height: 50px 
}
#global {
 background-color: gray 
}
#colon1   {
 background-color: gray;
 width: 150px;
 float: left 
}
#colon3 {
 background-color: gray;
 width: 150px;
 float: right 
}
#colon1 p,#colon3 p {
 margin-left: 12px 
}
#colon1 ul,#colon3 ul {
 margin: 0 0 15px 0
}
#colon1 li,#colon3 li  {
 list-style-type: none;
 margin: 0 0 0 15px;
 padding-bottom: 1px 
}
#colon1 li a,#colon3 li a {
 color: white;
 text-decoration: none 
}
#colon1 li a:hover,#colon3 li a:hover {
 border-bottom: 1px solid white 
}
#colon2  {
 background-color: #eaeae9;
 margin-right: 150px;
 margin-left: 150px 
}
#colon2 p {
 margin-left: 15px 
}
#pied    {
 background-color: #cc0;
 margin: 0;
 clear: both 
}


++
Le tuto disait de mettre


<!--[if lte IE 6]><style type="text/css">

div#colonne_droite {
	margin-left: 7px;
}	

</style><![endif]-->


Afin de parer aux éventuelles incompréhension avec IE 6.
Mais le problème c'est que cela fait buger la pa class CSS qui suit la condition.

Voici mon CSS actuel

/* colonne droite */
#colonne_droite {
float: right;
width: 200px;
margin-left: 10px;
padding: 0em;
}

<!--[if lte IE 6]><style type="text/css">

div#colonne_droite {
	margin-left: 7px;
}	

</style><![endif]-->
	
.right-column-box-standard {
width: 100%;
margin: 0em 0.8em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
background-color: rgb(255,255,255);
color: rgb(100,100,100);	
}


le border de la class .right-column-box-standard n'est plus pris en compte lorsque qu'il y a la condition qui précède.

Quelqu'un sait d'ou vient l'erreur ?
Modifié par Snipy (03 Jun 2007 - 21:06)
Salut,

essaye:

<!--[if lt IE 6]>
<style type="text/css">
div#colonne_droite {
	margin-left: 7px;
}
</style>
<![endif]-->


Smiley cligne
ghost a écrit :
Salut,

essaye:

<!--[if lt IE 6]>
<style type="text/css">
div#colonne_droite {
	margin-left: 7px;
}
</style>
<![ endif ]-->


Smiley cligne


<edit> je pensais à une erreur sur <![ endif ]--> mais à priori c'est le forum qui ne rend pas correctement la prose <![ endif ]--> si on ne met pas d'espace après [ ou avant ] surement une interaction avec le bbcode. Désolé </edit>
Modifié par ghost (04 Jun 2007 - 00:47)
Bon, les gens, je veux bien faire un peu de service après-vente de mes différents tutoriels, mais là je suis perdu.

Quel est le design à réaliser ?
Est-ce que le pied de page doit être tout en bas de page/fenêtre ou simplement en dessous des colonnes ?
Peut-on voir la version de travail en ligne ?

Pour rappel, si on veut placer un pied de page tout en bas de la fenêtre (si le contenu est court) ou alternativement en bas de page (si le contenu est long), on passera effectivement par le positionnement absolu pour le pied de page, et par un positionnement relatif pour le conteneur global (qui doit contenir le pied de page) en min-height: 100%.

J'ai vu une configuration semblable dans les codes cités ci-dessus, mais le pied de page n'était pas bien placé dans le code HTML (il n'était pas à l'intérieur de div#global).

Quant à l'histoire du padding : tout simplement, il s'agit d'éviter que le pied de page positionné en absolu ne vienne recouvrir le bas du contenu des colonnes.


Sinon, pour ces histoires de padding, on peut simplifier en doublant div#global par un div qui aura un padding-top: 1px (pour éviter la fusion des marges) et un padding-bottom: 4em (par exemple, pour ménager un peu de place pour le pied de page).
Florent V. a écrit :
Bon, les gens, je veux bien faire un peu de service après-vente de mes différents tutoriels, mais là je suis perdu.

Quel est le design à réaliser ?
Est-ce que le pied de page doit être tout en bas de page/fenêtre ou simplement en dessous des colonnes ?
Peut-on voir la version de travail en ligne ?

Pour rappel, si on veut placer un pied de page tout en bas de la fenêtre (si le contenu est court) ou alternativement en bas de page (si le contenu est long), on passera effectivement par le positionnement absolu pour le pied de page, et par un positionnement relatif pour le conteneur global (qui doit contenir le pied de page) en min-height: 100%.

J'ai vu une configuration semblable dans les codes cités ci-dessus, mais le pied de page n'était pas bien placé dans le code HTML (il n'était pas à l'intérieur de div#global).

Quant à l'histoire du padding : tout simplement, il s'agit d'éviter que le pied de page positionné en absolu ne vienne recouvrir le bas du contenu des colonnes.


Sinon, pour ces histoires de padding, on peut simplifier en doublant div#global par un div qui aura un padding-top: 1px (pour éviter la fusion des marges) et un padding-bottom: 4em (par exemple, pour ménager un peu de place pour le pied de page).

Merci de ta réponse !

1/ Voici la version actuel en ligne : Version en ligne
2/ Le pied de page doit se trouver toujours en dessous de l'élément le plus bas (soit les colonnes soit le contenu)
Le pied de page est bien compris dans le div global (j'ai fait la modif hier soir).

Le pied de page est maintenant toujours en bas ce qui est l'effet recherché

Par contre dernier problème il se décale sur la droite sur certaines pages.
Page d'exemple : ici
4/ Pour l'histoire du padding tu t'adressais à moi? Si c'est le cas je n'ai pas tout compris. Smiley decu


Merci à tout ceux qui essaye de m'aider.

Bonne journée
Modifié par Snipy (04 Jun 2007 - 13:59)
Snipy a écrit :
Par contre dernier problème il se décale sur la droite sur certaines pages.
Page d'exemple : ici

La page que tu donnes en exemple a quelques problèmes au niveau du code HTML. En particulier : tu as deux éléments div#corps, dont le premier est conteneur du deuxième div#corps et du pied de page.
Merci !
ça me parait nickel pour l'instant.
Par contre j'ai toujours pas compris pourquoi

Snipy a écrit :
Le tuto disait de mettre


<!--[if lte IE 6]><style type="text/css">

div#colonne_droite {
	margin-left: 7px;
}	

</style><![endif]-->


Afin de parer aux éventuelles incompréhension avec IE 6.
Mais le problème c'est que cela fait buger la pa class CSS qui suit la condition.

Voici mon CSS actuel

/* colonne droite */
#colonne_droite {
float: right;
width: 200px;
margin-left: 10px;
padding: 0em;
}

<!--[if lte IE 6]><style type="text/css">

div#colonne_droite {
	margin-left: 7px;
}	

</style><![endif]-->
	
.right-column-box-standard {
width: 100%;
margin: 0em 0.8em 0.8em 0em;
padding: 0.4em 0.4em 0.4em 0.4em;
border: solid 0.1em rgb(200,200,200);
background-color: rgb(255,255,255);
color: rgb(100,100,100);	
}


le border de la class .right-column-box-standard n'est plus pris en compte lorsque qu'il y a la condition qui précède.

Quelqu'un sait d'ou vient l'erreur ?
Personne ne peut m'expliquer pourquoi les commentaires conditionnels font bugger les propriétés qui suivent ?
Pages :
Sujet clos
Aller à