Probleme grosse bordure blanche en bas de page

Logiciel & apps Programmation
1

Bonjour amis zero :slight_smile:

J’ai un gros souci, sur mon site web j’ai une grosse barre blanche en bas…
Voir le site

Voila mon code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="stylesheet" type="text/css" href="CIAL.css"/>

<title>Comptoir d'ici et d'ailleurs</title>
<script language="javascript">
if (document.images) {
button1= new Image
button2= new Image
button1.src = "images/home.jpg"
button2.src = "images/rollhome.jpg"
}
</script> 

<script language="javascript">
if (document.images) {
button3= new Image
button4= new Image
button3.src = "images/decorations.jpg"
button4.src = "images/rolldecorations.jpg"
}
</script> 

<script language="javascript">
if (document.images) {
button5= new Image
button6= new Image
button5.src = "images/brocante.jpg"
button6.src = "images/rollbrocante.jpg"
}
</script> 

<script language="javascript">
if (document.images) {
button7= new Image
button8= new Image
button7.src = "images/vetements.jpg"
button8.src = "images/rollvetements.jpg"
}
</script>

<script language="javascript">
if (document.images) {
button9= new Image
button10= new Image
button9.src = "images/bijoux.jpg"
button10.src = "images/rollbijoux.jpg"
}

</script>
<script language="javascript">
if (document.images) {
button11= new Image
button12= new Image
button11.src = "images/divers.jpg"
button12.src = "images/rolldivers.jpg"
}

</script>

<script language="javascript">
if (document.images) {
button13= new Image
button14= new Image
button13.src = "images/acces.jpg"
button14.src = "images/rollacces.jpg"
}
</script>


<script language="javascript">
if (document.images) {
button15= new Image
button16= new Image
button15.src = "images/contact.jpg"
button16.src = "images/rollcontact.jpg"
}
</script>
</head>

<body>
	<div id="fond">
		<div id="header">
		</div>
		<div id="menu1">		
			<table cellspacing="0" cellpadding="0" border="0">
				<tr>
					<td>
						<ul id="menu">
							<li><a href="index.html" onmouseover="document.A.src=button2.src" onmouseout="document.A.src=button1.src"><img src="images/home.jpg" border=0 name="A"/></a><ul class="sousMenu">
						</ul>
							</li> 
							
							<li style="width: 113px"> <a href="decoration.html" onmouseover="document.B.src=button4.src" onmouseout="document.B.src=button3.src"><img src="images/decorations.jpg" border=0 name="B"/></a>
								<ul class="sousMenu">
									<li><a href="statue.html">Statues</a></li>
									<li><a href="Tableaux.html">Tableaux</a></li>
									<li><a href="luminaires.html">Luminaires</a></li>
								</ul>
							</li> 

							<li style="width: 115px"><a href="brocante.html" onmouseover="document.C.src=button6.src" onmouseout="document.C.src=button5.src"><img src="images/brocante.jpg" border=0 name="C"/></a>
								<ul class="sousMenu">
									<li><a href="Petits meubles.html">Petits meubles</a></li>
									<li><a href="Objetsbro.html">Objets</a></li>
						
								</ul>
							</li> 

							<li style="width: 117px"><a href="vetements.html" onmouseover="document.D.src=button8.src" onmouseout="document.D.src=button7.src"><img src="images/vetements.jpg" border=0 name="D"/></a>
								<ul class="sousMenu">
									<li><a href="Sarouel.html">Sarouel</a></li>
									<li><a href="Tunique.html">Tunique</a></li>
									<li><a href="Top.html">Top</a></li>
									<li><a href="JupesRobes.html">Jupes/robes</a></li>
								</ul>
							</li> 

							<li style="width: 108px"><a href="bijoux.html" onmouseover="document.E.src=button10.src" onmouseout="document.E.src=button9.src"><img src="images/bijoux.jpg" border=0 name="E"/></a>
								<ul class="sousMenu">
									<li><a href="Bagues.html">Bagues</a></li>
									<li><a href="Colliers.html">Colliers</a></li>
									<li><a href="Boucles d'oreilles.html">Boucles d'oreilles</a></li>
								</ul>
							</li> 

							<li style="width: 118px"><a href="divers.html" onmouseover="document.F.src=button12.src" onmouseout="document.F.src=button11.src"><img src="images/divers.jpg" border=0 name="F"/></a>
								<ul class="sousMenu">
									<li><a href="Encents.html">Encent</a></li>
									<li><a href="objet.html">objets</a></li>
								</ul>
							</li> 

							<li style="width: 115px"><a href="acces.html" onmouseover="document.G.src=button14.src" onmouseout="document.G.src=button13.src"><img src="images/acces.jpg" border=0 name="G"/></a>
								<ul class="sousMenu">
								</ul>
							</li> 

							<li style="width: 118px"><a href="contact.html" onmouseover="document.H.src=button16.src" onmouseout="document.H.src=button15.src"><img src="images/contact.jpg" border=0 name="H"/></a>
								<ul class="sousMenu">
								</ul>
							</li> 			
						</ul>
					</td>
				</tr>
			</table>	
		</div>	
	<div id="cadrevetements">
	</div>
		
	<div class="menugauche">
		<a href="decoration.html">Decoration
		</a>
	</div>
	<div class="menugauche">
		<a href="brocante.html">Brocante</a>
	</div>
	<div class="menugauche">
			<a href="vetements.html">Vetements</a>
		</div>
		<div class="menugauche2">			
			<a id="a2" href="Sarouel.html">Sarouels</a>	
		</div>
		<div class="menugauche2">
			<a class="a2" href="Tunique.html">Tuniques
			</a>	
		</div>
		<div class="menugauche2">
			<a class="a2" href="Top.html">Top</a>	
		</div>
		<div class="menugauche2">
			<a class="a2" href="JupesRobes.html">Jupes/Robes</a>	
		</div>
		<div class="menugauche">
			<a href="bijoux.html">Bijoux</a>	
		</div>
		<div class="menugauche">
			<a href="divers.html">Divers</a>
		</div>
		<div class="menugauche">
			<a href="acces.html">Acces</a>
		</div>
		<div class="menugauche">
			<a href="contact.html">Contact</a>
		</div>
	</div>
	
</body>

</html>

Et mon css :



body {

	  
	}

#fond {
	background-image: url('images/fond.jpg');
	width:1400px;
	height:1400px;
	background-attachment: scroll;
	background-repeat:no-repeat;
	 
	}
	
#header {
	background-image:url('images/header.jpg');
	width:926px;
	height:172px;
	background-repeat:no-repeat;
	position: relative;
	left:237px;
	top:20px;
	background-attachment:scroll;
	}
	
#menu1 {
	width:926px;
	height:115px;
	position:relative;
	left:236px;
	top:17px;
	z-index:1;
}
	
#menu ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	z-index:1;
}
	

#menu {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
	z-index:1;
}
.table_menu {
	border-collapse:collapse;
	border-spacing:0;
	padding:0;
	z-index:1;
}

#menu .sousMenu
{
 	display:none;
 	list-style-type: none;
 	margin: 0;
 	padding: 0;
 	border: 0;
 	z-index:1;
}
#menu .sousMenu li
{
	 border-color:transparent transparent -moz-use-text-color -moz-use-text-color;
	 border-style:solid solid none none;
	 border-width:1px 1px 0 0;
	 float:none; width: 149px;
	 z-index:1;
	 
}

#menu li
{
	 float: left;
	 width:120px;
	 margin: 0;
	 padding: 0;
	 border: 0;
	 z-index:1;
}
#menu .sousMenu li a:link,#menu .sousMenu li a:visited
{
	 display: block;
	 color: #FFFFFF;
	 margin: 0;
	 border: 0;
	 text-decoration: none;
	 background: transparent url("images/fondTR.png") repeat;
	 z-index:1;
}
#menu .sousMenu li a:hover
{
	 background-image: none;
 	background-color: #F2462E;
 	z-index:1;
}
#menu li:hover > .sousMenu {
	display:block; 
	z-index:1;
}
#cadremenu
{
  	background-image: url('images/cadremenu.jpg');
  	width:925px;
  	height:1154px;
  	left:236px;
  	top:-61px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:0; 
}

#cadredecoration
{
  	background-image: url('images/cadredecoration.jpg');
  	width:925px;
  	height:1154px;
  	left:236px;
  	top:-41px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:0; 
}
#cadrebrocante
{
  	background-image: url('images/cadrebrocante.jpg');
  	width:925px;
  	height:1154px;
  	left:236px;
  	top:-41px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:0; 
}
#cadrevetements
{
  	background-image: url('images/cadrevetements.jpg');
  	width:925px;
  	height:1154px;
  	left:236px;
  	top:-41px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:0; 
}
#cadrebijoux
{
  	background-image: url('images/cadrebijoux.jpg');
  	width:925px;
  	height:1154px;
  	left:236px;
  	top:-41px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:0; 
}
#cadredivers
{
  	background-image: url('images/cadredivers.jpg');
  	width:925px;
  	height:1154px;
  	left:236px;
  	top:-41px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:0; 
}
#cadreacces
	{
  	background-image: url('images/cadreacces.jpg');
  	width:925px;
  	height:1154px;
  	left:236px;
  	top:-57px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:0; 
}
#cadrecontact
{
  	background-image: url('images/cadrecontact.jpg');
  	width:925px;
  	height:1154px;
  	left:236px;
  	top:-41px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:0; 
}

.menugauche
	{
	position:relative;
	font-style:normal;
	font-weight:bold;
	font-weight: 900;
	font-family: Andalus;
	top:-1050px;
	left:300px;
	width:140px;
	height:30px;
	z-index:3;
	

}

.menugauche2
	{
	position:relative;
	font-style:normal;
	font-weight:bold;
	font-weight: 900;
	font-family: Andalus;
	top:-1050px;
	left:313px;
	width:200px;
	height:30px;
	z-index:3;
	

}


a	
	{
	text-decoration:none;
	color: orange;
	
	}
	
.a2	
	{
	text-decoration:none;
	color:  white;
	
	
	}
#google
{
	position:relative;
	left: 600px;
	top: -1200px;
	width:500px;
	height:500px;
	
}
#photo
{
	left: 580px;
	top:-1100px;
	position:relative;
	width:300px;
}


#photo1
{
	left:542px;
	top:-1100px;
	position:relative;
	width:300px;
}


#textemain	
{

	position:relative;
	font-style:normal;
	font-weight:bold;
	font-weight: 900;
	font-family: Andalus;
	color:white;
	top: 100px;
	left: 350px;
	width:500px;
	height:300px;
	
	
}
#taccess
{
	position:relative;
	font-style:normal;
	font-weight:bold;
	font-weight: 900;
	font-family: Andalus;
	color:white;
	top: 100px;
	left: 400px;
	width:400px;
	height:400px;
	
}
#soleil
{
	position:relative;
	background-image:url('images/soleil.png');
	width:465px;
  	height:395px;
  	left:335px;
  	top:240px;
  	background-repeat:no-repeat;
  	position:relative;
  	z-index:3;	
}

	
}

J’espère que vous allez pourvoir m’aider :slight_smile:

Merci!

2

Ton div#fond à une hauteur de 1400 pixels (CSS: height:1400px;)

3

Oui, c’est la taille de mon image de fond

4

Salut shuyun,

Tout d’abord, qu’une chose soit bien clair…je n’suis pas ton ami, et encore moins un ami-zéro BOUAHAHAHAHAHAH !

Bon…ça, c’est fait…

Ensuite, concernant ta “barre blanche” là, il aurait fallu que tu précises 1) quel navigateur tu utilises (tu verras comme c’est sympa de faire un site qui marche sur tous les navigateurs), et 2) la résolution de ton écran.

Pour ma part je l’ai regardé sur Firefox 3.5 et Google Chrome, cela ne changeait rien, mais j’ai une grosse résolution (1680x1050). Donc je ne vois pas seulement une barre blanche en bas, mais tout le fond en dehors du wallpaper que tu as mis en background.

Aussi, commence par mettre une couleur de fond à ton body, autre que le blanc. Met donc la couleur qu’on trouve en bas de ton image, puisque c’est le bas de ton site qui te gêne sur ton écran.

Pour cela, dans ta feuille de style (inutile de copier/coller tout le code ici au fait, il suffit d’aller sur ton site pour voir ton .css complet :wink: ), remplace le body{ } par le code suivant:

body {
background-color:#010100;
}

Déjà, ça…ça te vire le blanc.

Ensuite, je ne vois pas trop l’utilité de mettre tout ton site dans une div géante de 1400x1400.
Tu pourrais très bien mettre ça:

#fond {
background-color:#010100;
background-image:url(images/fond.jpg);
background-repeat:no-repeat;
position:relative;
}

Pour le #fond. Pour l’ “attachment”, ça c’est à toi de voir, c’est au bon vouloir :), si tu estimes que ton site sera assez “haut” par moment, ça peut être sympa de jouer avec ;).