Eurovore: Besoin d'un coup de main en css pour aligner un footer - Eurovore

Aller au contenu

Page 1 sur 1

Besoin d'un coup de main en css pour aligner un footer

#1 L'utilisateur est hors-ligne   inov-in 

  • Posteur Junior
  • Groupe : Membres
  • Messages : 50
  • Points : 0
  • Inscrit(e) : 03-mars 12
  • Sexe :Homme

Posté 30 mai 2012 - 16:44

Salut, j'essaie d'intégrer un design et j'ai un mal fou à placer le footer en bas, que la page soit vide ou qu'elle mesure 1mètre de hauteur.
Il y a 4 positions : le header, une colonne gauche, le contenu à droite et le footer

Si je met un petit paragraphe dans le contenu, le footer se place bien (sous la colonne gauche).
Mais dès qu'il y a trop de texte et que ca continue sous la colonne gauche, le footer ne descend pas en fonction du texte, et il se place "sous" le contenu.

Quelqu'un pourrait m'aider ?

Ce message a été modifié par inov-in - 30 mai 2012 - 19:21 .

0

#2 L'utilisateur est hors-ligne   H4ris 

  • Posteur Junior
  • Groupe : Membres
  • Messages : 143
  • Points : 0
  • Inscrit(e) : 12-juillet 10
  • Sexe :Homme

Posté 30 mai 2012 - 16:49

Hello,

Il faut que tu appliques un "clear: both" à ton footer :wink:
0

#3 L'utilisateur est hors-ligne   inov-in 

  • Posteur Junior
  • Groupe : Membres
  • Messages : 50
  • Points : 0
  • Inscrit(e) : 03-mars 12
  • Sexe :Homme

Posté 30 mai 2012 - 16:56

Toujours pareil :verycry:
0

#4 L'utilisateur est hors-ligne   Satovo 

  • Posteur Expérimenté
  • Groupe : Membres
  • Messages : 610
  • Points : 0
  • Inscrit(e) : 20-novembre 05
  • Sexe :Homme
  • Localisation :Rennes
  • Intérêts :Longboard, Billard.

Posté 30 mai 2012 - 17:23

Tu as mit ton container en position: absolute; tu l'as donc sortie du flux de ta page HTML.

A la place de ce position absolute essaye de le mettre en float: right; (et pareillement pour ton menu de gauche ou tu lui appliqueras un float: left;)

"clear:both;" ne sert que pour les éléments flottant.
Cascadeur Style Sheet (Inside Joke)
Et Ninja du W3C
0

#5 L'utilisateur est hors-ligne   inov-in 

  • Posteur Junior
  • Groupe : Membres
  • Messages : 50
  • Points : 0
  • Inscrit(e) : 03-mars 12
  • Sexe :Homme

Posté 30 mai 2012 - 17:31

Si je met pas position relative et absolue, le cadre passe en dessous...

Ce message a été modifié par inov-in - 30 mai 2012 - 19:21 .

0

#6 L'utilisateur est hors-ligne   H4ris 

  • Posteur Junior
  • Groupe : Membres
  • Messages : 143
  • Points : 0
  • Inscrit(e) : 12-juillet 10
  • Sexe :Homme

Posté 30 mai 2012 - 17:47

Ah je pensais que tu utilisais les float. :unsure:
Dans ce cas là utilises un "float: left" sur le menu de gauche et un "float: right" sur le contenu de droite et ainsi donc utilises un "clear: both" sur le footer.
0

#7 L'utilisateur est hors-ligne   Satovo 

  • Posteur Expérimenté
  • Groupe : Membres
  • Messages : 610
  • Points : 0
  • Inscrit(e) : 20-novembre 05
  • Sexe :Homme
  • Localisation :Rennes
  • Intérêts :Longboard, Billard.

Posté 30 mai 2012 - 17:49

Retire le position relative de ton menu #gauche il ne sert a rien.

Enlève le position absolute de ton contenu #milieu.
Retire le padding-left de ton contenu #milieu

Met un clear: both; a ton #footer et magie magie ça fonctionne.

EDIT : Et bien entendu (ça coule de source, tu mets bien un float: right; à ton contenu #milieu)

Le ninja du CSS a encore frappé :ph34r: ahaha.

Ce message a été modifié par Satovo - 30 mai 2012 - 17:51 .

Cascadeur Style Sheet (Inside Joke)
Et Ninja du W3C
0

#8 L'utilisateur est hors-ligne   inov-in 

  • Posteur Junior
  • Groupe : Membres
  • Messages : 50
  • Points : 0
  • Inscrit(e) : 03-mars 12
  • Sexe :Homme

Posté 30 mai 2012 - 17:54

Oh la la, c'est super :+1: :sm24: :merci: :youpi: :mrbien:
0

#9 L'utilisateur est hors-ligne   inov-in 

  • Posteur Junior
  • Groupe : Membres
  • Messages : 50
  • Points : 0
  • Inscrit(e) : 03-mars 12
  • Sexe :Homme

Posté 17 juin 2012 - 16:01

Vous seriez encore pret à m'aider ? Toujours cette histoire de footer (sur un autre design)
J'aurais aimé que, peu importe la taille du contenu, que le footer se place toujours en bas :(
Merci à tous ceux qui m'aideront ;)

html {
	margin : 0;
	padding : 0;
	height : 100%;
}

body {
	width : 100%;
	height : 100%;
	margin : 0;
	padding : 0;
	text-align : left;
	font: 12px Arial, Helvetica, sans-serif;
	color : #626262;
	position : relative;
	background : #0777a6 url(images/header2.png) repeat-x top;
}

a {
	color : #626262;
}

a:hover {
	text-decoration : none;
}

img {
	border : 0;
}

.clear_b {
	clear:both;
}

#ensemble {
	width : 958px;
	min-height : 100%;
	margin : 0 auto;
	padding : 0;
	position : relative;
}

#header {
	width : 990px;
	height : 235px;
	margin : 0;
	padding : 0;
	background : url(images/header1.png) no-repeat;
	position : absolute;
	top : 0;
	left : -16px;
	z-index: 2;
}

#header .titre_site {
	margin : 0;
	padding : 0;
	position : absolute;
	top : 62px;
	left : 30px
}

#header .pub {
	width : 476px;
	height : 68px;
	margin : 0;
	padding : 0;
	background : url(images/pub_header.png) no-repeat;
	position : absolute;
	top : 70px;
	right : 12px
}

#menu_hor {
	text-align : center;
	width : 992px;
	height : 48px;
	margin : 0;
	padding : 17px 0 0 0;
	background : url(images/menu_hor.png) no-repeat;
	position : absolute;
	bottom : 0;
	left : 4px;
}

#menu_hor a {
	margin : 0 25px 0 25px;
	padding : 0;
	text-shadow : 1px 1px #000000;
	text-decoration : none;
	font-weight : bold;
	color : #ffffff;
}

#menu_hor a img {
	margin : 0 15px 0 0;
	padding : 0;
}

#menu_hor a:hover img {
	margin : 0 5px 0 10px;
	padding : 0;
}

#gauche {
	width : 263px;
	margin : 0 -40px 0 10px;
	padding : 220px 0 0 0;
	float : left;
}

#gauche .menu_titre {
	width : 298px;
	height : 23px;
	margin : 20px 0 6px 0;
	padding : 9px 0 0 65px;
	color : #ffffff;
	font-weight : bold;
	text-align : left;
	text-shadow : 1px 1px #000000;
	background : url(images/menu_titre.png) no-repeat;
}

#gauche .lien1 {
	width : 243px;
	height : 20px;
	margin : 0;
	padding : 5px 0 0 0;
	color : #ffffff;
	font-weight : bold;
	text-align : left;
	text-decoration : none;
	text-shadow : 1px 1px #000000;
	background : url(images/menu_lien.png) no-repeat;
	display : block;
}

#gauche .lien1 img {
	margin : 0 20px 0 50px;
	padding : 0;
}

.stats {
	margin : 0 20px 0 -50px;
	padding : 0;
}

#gauche .lien1:hover {
	color : #ffffff;
	font-size : 14px;
	text-decoration : underline;
}

#gauche .lien1:hover img {
	margin : 0 10px 0 60px;
}

#gauche .sep {
	width : 243px;
	height : 1px;
	margin : 0;
	padding : 0;
	background : url(images/menu_sep.png) no-repeat;
	display : block;
}

#droite {
	width : 725px;
	height : auto;
	margin : 0;
	padding : 240px 0 70px 0;
	background : url(images/cont.png) repeat-y;
	float : right;
	position : relative;
	z-index: 1;
}

#droite .intro {
	margin : 0;
	padding : 0 30px 0 30px;
	font-size : 11px;
	text-align : left;
	color : #26a6dc;
}

#droite .intro span {
	color : #1e5066;
}

#droite .separation {
	width : 694px;
	height : 19px;
	margin : 20px 0 0 15px;
	padding : 0;
	background : url(images/separation.png) no-repeat;
}

#droite .titre {
	width : 711px;
	height : 53px;
	margin : 0 0 0 7px;
	padding : 0;
	text-align : left;
	background : url(images/titre3.png) no-repeat;
}

#droite .titre h1 {
	margin : 0;
	padding : 17px 0 0 40px;
	color : #fff;
	text-align : left;
	text-shadow : 1px 1px #f45923;
	font-size : 16px;
	font-weight : bold;
}
#droite .titre h2 {
	margin : 0;
	padding : 17px 0 0 40px;
	color : #fff;
	text-align : left;
	text-shadow : 1px 1px #f45923;
	font-size : 16px;
	font-weight : bold;
}

#droite h2 {
	margin : 5px;
	padding : 17px 20px 0 40px;
	padding-bottom: 20px;
	color : #006EFF;
	text-align : left;
	text-shadow : 0px 0px #777777;
	font-size : 16px;
	font-weight : bold;
	text-decoration: underline;
}

p {
	margin : 0;
	padding : 0 30px 10px 30px;
	font-size : 13px;
	text-align : left;
	color : #4A4747;
}

#footer {
	width : 958px;
	height : 54px;
	margin : 0;
	padding : 0;
	background : url(images/footer.png) no-repeat;
	position : absolute;
	bottom : 0;
	right : -4px;
	clear:both;
}

#footer .gauche {
	margin : 0;
	padding : 22px 0 0 20px;
	text-shadow : 1px 1px #000000;
	font-weight : bold;
	color : #ffffff;
	float : left;
}

#footer .droite {
	margin : 0;
	padding : 22px 20px 0 0;
	text-shadow : 1px 1px #000000;
	font-weight : bold;
	color : #ffffff;
	float : right;
}

#footer a {
	color : #ffffff;
}

#barre_h {
	width : 100%;
	height : 26px;
	background : url(images/barre_h.png) repeat-x;
	position : absolute;
	left : 0;
	top : 0;
	z-index: 3;
}

#barre_h p {
	margin : 0;
	padding : 5px 0 0 20px;
	text-shadow : 1px 1px #000000;
	text-align : center;
	font-weight : bold;
	color : #ffffff;
}

Ce message a été modifié par inov-in - 17 juin 2012 - 16:03 .

0

#10 L'utilisateur est hors-ligne   H4ris 

  • Posteur Junior
  • Groupe : Membres
  • Messages : 143
  • Points : 0
  • Inscrit(e) : 12-juillet 10
  • Sexe :Homme

Posté 17 juin 2012 - 16:07

Tu n'aurais pas plutôt une page où le problème serait visible sa serait beaucoup plus simple que d'avoir à identifier le problème dans tout ce css :wink:

Sinon sa doit surement être dû au "position: absolute;" dans le footer qui pose problème.

Ce message a été modifié par H4ris - 17 juin 2012 - 16:10 .

0

Page 1 sur 1


Réponse rapide

  

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)