Bacground qui ne suit pas....et footer qui n'est guère mieux...

Voilà... J'utilise présentement un template gratuit que j'essaie de transformer selon ma convenance. Mon problème est que le background de mon "conteneur" ne suit pas le texte qui est écrit, i.e. , que si je dois garder la chose telle quelle, je dois changer à chaque fois la hauteur de mon conteneur. J'ai le même problème avec le footer où la seule solution que je vois , c'est de le positionner différemment pour chaque page (en cliquant sur les liens, vous pourrez aisément constater le problème).

En regardant L''adresse du site est http://citronlime.com/ , vous constaterez que d'une page à une autre, le fond de s'ajuste pas.... Ce qui semble être dû au fait que je donne une hauteur à ma page. Mais lorsque je n'en donne pas, rien ne va.... La feuille de style fautive est:

/* CSS Document */

* {
margin: 0;
padding: 0;
}

body {
background: #000033 url("images/bg.gif") repeat;
text-align: center;
font: normal 11px/18px verdana, arial, tahoma, sans-serif;
color: #333;
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}

#header {
width: 582px;
height: 210px;
background: #000 url("images/header.gif") no-repeat;
position: absolute;
top: 0;
left: 0;
background-position: top right;
}

#conteneur {
width: 582px;
min-height: 800px;
height: 1075px;
background-image:url(images/sidebar.gif);
background-position: 0 0;
border: solid 10px #fff;
position: relative;
margin: 0 auto;
margin-top: 40px;
text-align: left;
}

h1 {
width: 140px;
height: 30px;
background-color: #333;
margin: 211px 1px 1px 0;
float: left;
font: bold 16px/30px arial, verdana, tahoma, sans-serif;
padding-left: 10px;
color: #fff;
cursor: default;
}

h1:first-letter {
color: #f00;
text-decoration: underline;
}

h2 {
width: 421px;
height: 30px;
background-color: #333;
margin: 211px 0 0 0;
float: left;
font: bold 16px/30px arial, verdana, tahoma, sans-serif;
padding-left: 10px;
color: #fff;
cursor: default;
}

h3{
	color:#000066;
	padding-bottom: 10px 20px 0px 0px;
}

h5{
	color:#000066;
	padding-bottom: 10px 0px 0px 0px;
	
}

#tril {
	background:  url(images/tril.gif) no-repeat;
	height: 830px;
	position: absolute;
	top: 0px;
	width: 100px;
	margin-top: -41px;
	left: -106px;
}

#nav {
list-style: none;
position: absolute;
z-index: 2;
border-right: 1px solid #fff;
height: 210px;
position: absolute;
top: 0;
left: 0;
}

#nav li a {
color: #fff;
font: normal 11px/24px verdana, arial, tahoma, sans-serif;
display: block;
width: 140px;
height: 24px;
background-color: #000;
border-bottom: 1px solid #fff;
padding-left: 10px;
text-decoration: none;
}

#nav li a:hover {
background-color: #333;
}

#current a {
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 100% 50%;
}

#sidebar {
	width: 132px;
	float: left;
	left: -151px;
	position: relative;
	left: -151px;
	border-top: 1px solid #fff;
	font: normal 10px/18px verdana, arial, tahoma, sans-serif;
	padding: 8px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
/*\*/
	margin-bottom: 120px;
	
}

img {
border: none;
}

a img {
display: block;
margin-bottom: 20px;
border: 1px solid #fff;
}

a:hover img {
border-color: #f00;
}

#contenu {
position: absolute;
top: 260px;
left: 170px;
}

p {
margin-bottom: 20px;
}

#footer {
	display:block; 
	margin-top: 40px; 
	margin-left: -170px;
	padding: 0pt 0px 0pt 0pt; 
	background: transparent url(images/footer.gif) no-repeat scroll left top; 
	width: 582px; 
	height: 56px; 
	clear: both; 
	overflow: hidden;
}
#footer span { visibility: hidden; }

#footer p {
		text-indent: -1000em;
}
/*]]>*/

Merci de votre aide et à titre de précision, j'ai acheté le livre de Raphaël pou m'aider à m'y retrouver un peu ainsi que le livre d'Eric Meyer.
Modifié par largowin (09 May 2006 - 23:58)

*Bonjour*,

Détend-toi, un seul post est suffisant .

Par contre pour celui qui reste, merci de présenter lisiblement ton code comme indiqué dans les règles: 13- Mise en forme générale des messages

Euh.... J'ai bien lu les règlements, mais je ne comprends pas ce qui cloche avec mon message... Dois-je aussi écrire mon code html? Je croyais que mettre le lien vers le site mentionné était suffisant.

Merci.

salut,

en fait il faudrait que tu utilises le bouton "code" de l'interface de saisie des messages pour qu'il y ait

[ code] (sans l'espace) avant ton code

et

[ /code] (toujours sans l'espace) après ton code.

Bon.... C'est fait, même si je ne comprends pas exactement ce que ça amène de plus.

Ok merci neko.... Maintenant j'ai compris pour l'espace....
Modifié par largowin (28 Apr 2006 - 05:48)

Salut.

Sur ce forum, les balises sont écrites entre crochets. Ce qui fait que pour te montrer le code, clb56 à du rajouter des espaces pour que les balises ne soit pas interprétées par le forum.
Il a bien précisé d'utiliser le bouton code, et que les balises qu'ils montrent contiennent un espace à éliminer pour rendre ça fonctionnel.
Tu as copié ses balises sans enlever cet espace. Il faut que tu le supprimes, entre le crochet ouvrant [, et code (pour la première balise, celle du haut), et entre le crochet ouvrant [ et /code] (pour la seconde).

La différence ? Voici ce que tu as fait :

[ code]
/* CSS Document */

* {
(...)
#footer p {
text-indent: -1000em;
}
/*]]>*/
[ /code]

Et voici ce que ça affiche sans ces espaces :

/* CSS Document */

* {
(...)
#footer p {
text-indent: -1000em;
}
/*]]>*/

La seconde solution rend le code plus lisible au milieu des explications. Un message ainsi présenté est plus agréable à lire pour ceux qui viendront t'aider. (Et ça permet de gagner du temps, car on a tendance, je pense, à attendre que les messages soient bien présentés avant de répondre : un gros bloc de code noir dans un texte noir, ça n'est pas toujours engageant.)