CSS

Résolu/Fermé
Signaler
Messages postés
314
Date d'inscription
vendredi 2 mars 2007
Statut
Membre
Dernière intervention
10 novembre 2010
-
Messages postés
314
Date d'inscription
vendredi 2 mars 2007
Statut
Membre
Dernière intervention
10 novembre 2010
-
Bonjour,
moi j'ai un petit souci avec le bottom ou footer de ma feille css.
Normalement l'attribut bottom est cense mettre la chose voulu tout en bas de la page web??? non???

Moi ma barre se met certe en bas mais coller au dernier mot de la page ce qui a pour effet de tout decaler.
http://www.peugeot-aera.123.fr/actualite

Pour aider voici le declaration du bottom:

#bottom { background: url('/img/bg1.gif') repeat;
padding: 5px 0px 5px 100px;
border-top: 3px solid #ccc; }

et son utilisation dans la page html:

<div id="bottom">
<p style="margin:0;">
Copyright (©) Odye Erwann, 2007. <a href="#">Valid XHTML</a>, <a href="#">Valid CSS</a>, inspired by Renato Maguire
</p>
</div>

DONC moi pour recapituler je veux que cette barre ce retrouve tout en bas peu importe le texte present sur le page.
Merci d'avance de votre aide.
wannou

7 réponses

Messages postés
2480
Date d'inscription
vendredi 29 octobre 2004
Statut
Contributeur
Dernière intervention
13 février 2018
621
Salut,

"Normalement l'attribut bottom est cense mettre la chose voulu tout en bas de la page web??? non??? "

Tu a donné le nom bottom à ton id mais tu n'as pas utilisé cet attribut :p

Et bien il te suffit de dire à ton block d'être à 0px du bas de la page

bottom: 0px;
Messages postés
314
Date d'inscription
vendredi 2 mars 2007
Statut
Membre
Dernière intervention
10 novembre 2010
27
ok je comprend....
Mais cela ne fonctionne toujours pas!

euh j'ai peu etre mal declare ma feille css la voila complete:

* body attributes */
body, html { background: #fff; font: 13px Lucida Grande, Verdana, Sans-Serif; padding: 0; margin: 0; }

/* banner image, you may change this just by inputting a different file name. */
#banner { 	background: url('/img/bannerbg.jpg') no-repeat ;
			padding: 40px;
			margin: 0; 
			border-bottom: 3px solid #ccc;
			color: #fff; }

/* top navigation */
#nav { 		background: url('/img/bg1.gif') repeat;
		 padding: 13px; margin: 0; text-align: center; border-bottom: 3px solid #ccc;  }

/* where all the text goes */
#container {	background: #fff;
			margin: 0px 220px 0px 220px;
			padding: 10px;  }

/* copyright, all that junk. perhaps a second nav */
#bottom { 	bottom: 0px;
			background: url('/img/bg1.gif') repeat;
			padding: 5px 0px 5px 100px;
			border-top: 3px solid #ccc; 
			
			
		}

/* the left news box */
#left { 		width: 160px;
			padding: 7px 5px 7px 5px;
			margin: 10px 0px 5px 10px;
			float: left; }

/* left information */
#info { width: 160px;
		border-bottom: 1px solid #ddd; }
.box { background: #eee;
		border: 1px dotted #ddd;
		padding: 7px 5px 7px 5px; }

/* gallery */
#galleryhold { width: 220px;
				margin: 10px 0px 5px 10px;
				float: right;
				padding: 5px; }
.gallerybox { width: 160px;
				padding: 0 0 0 5px; }
.gallerybox a { text-decoration: none;
				color: #000; }

/* right list of links */
#links { float: left;
		width: 160px;
		padding: 7px 5px 7px 5px;
		margin: 10px 0px 5px 10px; }
#links ul { margin: 0;
		padding: 0; }
#links li { list-style-type: none;
		background: url(/img/article.jpg) no-repeat 0px 5px;
		padding: 0 0 0 25px;
		line-height: 2em;
		letter-spacing: 0.1em;  }
#links a { color: #608FFF;
 text-decoration: none; } 
	#links a:hover { text-decoration: underline; }
	#links a:visited { color: #608FFF; } 
	#links p { font-size: 20px;
				color:  #608FFF; }

/* edited attributes of things */
.news { color: #608FFF;
		font-weight: bold; 
		font-size: 16px; }
.news1 { color: #fff;
		background-color: #608FFF;
		font-weight: bold; font-size: 16px;
		padding: 3px 0 3px 5px;
		width: 140px; }
.meta { border-top: 1px solid #aaa;
		color: #aaa; 
		text-align: right;} 
#container p { line-height: 2;
				text-indent: 30px; } 
	#container a { color: #608FFF; } 
	#container a:hover { text-decoration: none; }
#container ul { margin: 0 0 0 150px;
				padding: 0; }
#container li { list-style-type: none;
				background: url(/img/article.jpg) no-repeat 0px 5px;
				padding: 0 0 0 25px; line-height: 2em; letter-spacing: 0.1em;
				color: #666;
				font-weight: bold; }
#bottom a { color: #608FFF; }	
	#bottom a:hover { text-decoration: none; }
#nav a:link,
	#nav a:visited, 
	#nav a:active {	 background: url('/img/bg1.gif') repeat;
					padding: 13px;
					text-decoration: none;
					color: #000000; }
#nav a:hover { padding: 13px;
				background: url{'/img/bannerbg.jpg'};
				text-decoration: none;
				color: #FFFFFF; }
 html #info { padding-bottom: 7px; }
acronym { border-bottom: 1px dotted #608FFF; }


voila voila et la page web
http://peugeot-aera.123.fr/actualite ou le probleme est voyant

merci de ton aide
Messages postés
61
Date d'inscription
mercredi 28 avril 2004
Statut
Membre
Dernière intervention
26 mai 2009
2
hello voivi ta solution:

position:absolute; bottom:0px;
Messages postés
314
Date d'inscription
vendredi 2 mars 2007
Statut
Membre
Dernière intervention
10 novembre 2010
27
Cette fois la barre est bien enbas mais(ya toujours de smais), si je descend la page elle reste a l'endroit ou elle etait et se retrouve au milieu de la page (lorsque je descend la page avec le slider....

Sinon j'ai trouve ca ...
/* copyright, all that junk. perhaps a second nav */
#bottom { 	position:absolute;
			width: 100% !important;
			z-index: 500 !important;
			position: relative;	
			bottom:0px;
			background: url('/img/bg1.gif') repeat;
			padding: 5px 0px 5px 100px;
			border-top: 3px solid #ccc; 
			
			
			
		}

qui marche sur le coups mais qui ce REdecale 1 seconde apres ??!!??
Messages postés
2480
Date d'inscription
vendredi 29 octobre 2004
Statut
Contributeur
Dernière intervention
13 février 2018
621
Dans ce code on à donner 2 valeurs différentes à position, c'est une de trop.

position: relative ne fonctionne pas sous IE6 et ne répond pas à ce que tu veux, avec ca le block ne bouge pas quand on scroll.

Celà suffit :
#bottom {
	bottom: 0px;
	position: absolute;
}


Pour que le contenu du block soit centré tu peux mettre :

	width:100%;
	text-align: center;


Au fait comme ça le block sera toujours apparent en bas du navigateur, pour que le block se mettent en bas du CONTENU il faut tous simplement rien faire, mais mais mais pour celà le contenu lui ne doit pas avoir de position (relative ou absolu).
Messages postés
2480
Date d'inscription
vendredi 29 octobre 2004
Statut
Contributeur
Dernière intervention
13 février 2018
621
Petite parenthèse, je trouve intolérable que tu mettes :
Valid XHTML, Valid CSS


Ton code n'est pas du tout valide, ni xhtml ni le css.

Par exemple, on utilise pas <BR> mais <br />. Ou encore tu utilise un tableau pour une boite de recherche.
Messages postés
314
Date d'inscription
vendredi 2 mars 2007
Statut
Membre
Dernière intervention
10 novembre 2010
27
Ok merci,

c'est vrai pour la validation ... oups en fait je suis aller sur le site de tremplate open source et j'ai pas fais gaffe a cela.
merci de me le dire je corrige le tire rapidement