Sujet Précédent Sujet Suivant

CSS

Résolu/Fermé
wannou Messages postés 314 Date d'inscription vendredi 2 mars 2007 Statut Membre Dernière intervention 10 novembre 2010 - 26 juin 2007 à 11:43
wannou Messages postés 314 Date d'inscription vendredi 2 mars 2007 Statut Membre Dernière intervention 10 novembre 2010 - 28 juin 2007 à 11:38
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

Réponse 1 / 7
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
26 juin 2007 à 13:52
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;
0
Réponse 2 / 7
wannou Messages postés 314 Date d'inscription vendredi 2 mars 2007 Statut Membre Dernière intervention 10 novembre 2010 27
26 juin 2007 à 15:08
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
0
Réponse 3 / 7
falcor Messages postés 61 Date d'inscription mercredi 28 avril 2004 Statut Membre Dernière intervention 26 mai 2009 2
26 juin 2007 à 15:16
hello voivi ta solution:

position:absolute; bottom:0px;
0
Réponse 4 / 7
wannou Messages postés 314 Date d'inscription vendredi 2 mars 2007 Statut Membre Dernière intervention 10 novembre 2010 27
26 juin 2007 à 15:51
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 ??!!??
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
26 juin 2007 à 19:03
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).
0
Réponse 6 / 7
s.spark Messages postés 2485 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 618
26 juin 2007 à 19:25
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.
0
Réponse 7 / 7
wannou Messages postés 314 Date d'inscription vendredi 2 mars 2007 Statut Membre Dernière intervention 10 novembre 2010 27
28 juin 2007 à 11:38
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
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses