28220 sujets

CSS et mise en forme, CSS3

Bug de la répétition d'un fond et espace sous IE

Bonsoir à tous Smiley smile

Donc grâce à vous j'ai pu progressé dans mon blog Smiley cligne

Mais j'ai encore quelque souci, il faut regarder le site sous FF et IE pour sans rendre compte :

- Sous IE le fond Gris Foncé se répète bien jusqu'en bas du corps mais pas sous FF

- Sous FF le heut et le milieu du corps se touche tans dis que sous IE il y a un écart !

http://thymotep.info/deep/

Voici mes codes :



body {

	background-color: #EAEAEA;
	margin:0;
	padding:0;	
	color:#FFFFFF;

}
img {

	border:0;

}

#header {

	margin:auto;
	margin-top:20px;
	height:89px;	

	}

#header-gauche {

	float:left;	

}

#header-repeat {

	background:url('img/header-repeat.jpg') repeat-x;
	height:89px;
	
}

#header-droite {

	float:right;

}

#nav-bar {

	margin:auto;
	height:30px;	

	}
	
#nav-bar-gauche {

	float:left;
	
}

#nav-bar-droite {

	float:right;
	
}

#nav-bar-repeat {

	background:url('img/nav-bar-repeat.jpg') repeat-x;
	height:30px;
	
}

#corps {

	margin:auto;
	background:url('img/separation-menu-corps.jpg') #868686 repeat-x;
	height:335px;
	
}

#menu {

	width:171px;
	float:left;
	
}
.bouton {
	
	background: url('img/bouton.jpg') no-repeat;
	width:171px;
	height:25px;
	float:left;
	
}

#mi-menu, #mi-menu1, #mi-menu2 {

	background: url('img/mi-menu.jpg') repeat-y;
	width:171px;
	float:left;
	display:none;
	
}

h1 {

	margin:0;
	color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	
}
h1 a{ text-decoration:none; color:#FFFFFF;}
h1 a:hover{ text-decoration:none; color:#FFFFFF;}
h2 {margin:0; margin-top:5px; text-decoration:none; font-weight:bold; font-size:12px;}

h3 {

	margin-left:10px;
	margin-right:4px;
	color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:justify;
	
}

#article {

	width:665px;
	float:right;

}

#haut-article{

	background: url('img/haut-corps.jpg') no-repeat;
	width:665px;
	height:7px;
	
}

#mi-article{

	background: url('img/corps.jpg') repeat-y;
	width:665px;
	margin:0;
		
}
h4 {

	margin-left:6px;
	margin-right:13px;
	margin-top:0px;
	margin-bottom:0px;
	color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:normal;
	text-align:justify;
	
}


<!-- En tête et script javascript dans un include -->
<body>
<!-- Header -->
	<div id="header">
	<a href="index.htm"><img src="img/header-gauche.jpg" width="204" height="89" alt="Blog.thymotep.info" id="header-gauche" /></a>
	<img src="img/header-droite.jpg" width="204" height="89" alt="Blog.thymotep.info" id="header-droite" />
    <div id="header-repeat"></div>
	</div>
<!-- Fin du header -->
<!-- Nav bar -->
	<div id="nav-bar">
	<img src="img/nav-bar-gauche.jpg" width="204" height="30" alt="" id="nav-bar-gauche" />
	<img src="img/nav-bar-droite.jpg" width="204" height="30" alt="" id="nav-bar-droite" />
	<div id="nav-bar-repeat"></div>
	</div>
	</div>
<!-- Fin de la Nav Bar -->
<!-- Corps -->
<div id="corps">
<div id="menu">
<!-- LIEN 1 -->
<h1><div class="bouton"><a href="#" onclick="if(a == 0) { document.getElementById('mi-menu').style.display = 'block'; a = 1; }
	else { document.getElementById('mi-menu').style.display = 'none'; a = 0;} "><h2>Acceuil</h2></a></div></h1>
	
		<h1><div id="mi-menu">
<h2>Test</h2>
	</div></h1>
<!-- LIEN 2 -->
<h1><div class="bouton"><a href="#" onclick="if(b == 0) { document.getElementById('mi-menu1').style.display = 'block'; b = 1; }
	else { document.getElementById('mi-menu1').style.display = 'none'; b = 0;} "><h2>Acceuil</h2></a></div></h1>
	
		<h1><div id="mi-menu1">
<h2>Test 2</h2><br /><h3>Je remercie Delta67 ( PHP qui n'est pas encore en place ), Simon pour le Javascript, le ( PHP pas en place ) et le HTML / CSS et le Forum AlsaCréations )</h3>
	</div></h1>
<!-- LIEN 3 -->	
<h1><div class="bouton"><a href="#" onclick="if(c == 0) { document.getElementById('mi-menu2').style.display = 'block'; c = 1; }
	else { document.getElementById('mi-menu2').style.display = 'none'; c = 0;} "><h2>Acceuil</h2></a></div></h1>
	
		<h1><div id="mi-menu2">
<h2>Test 3</h2><h3><br />Ceci est mon futur blog, Futur car je ne l'ai d'une part pas fini, et d'une autre je ne suis pas sûr d'y arriver, même si j'ai quelques amis qui m'aident et un forum !</h3>
	</div></h1>
<!-- FIN DES LIENS -->
	</div>


<!-- Fin du menu -->
<!-- Articles -->
<div id="article">
	<div id="haut-article"></div>
	<div id="mi-article"><h4>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ornare tristique pede. Aliquam arcu leo, imperdiet eget, dapibus non, accumsan quis, est. Sed eget massa. Praesent mi. Cras sollicitudin erat non tellus. Quisque sit amet leo. Sed volutpat faucibus eros. Duis eget libero. Ut luctus. Nullam sit amet nibh vel quam accumsan aliquam. Curabitur elementum. Nulla purus dolor, aliquet ac, gravida sit amet, vehicula non, elit. Morbi neque quam, viverra eget, bibendum dictum, condimentum sit amet, nibh. Nunc sit amet nisl eu eros ullamcorper dictum. In orci ligula, viverra non, tempus sit amet, dapibus sit amet, lectus. Pellentesque pharetra. Nam gravida. Pellentesque dignissim. Ut eu leo sed urna ullamcorper aliquam. Nunc ultricies quam sed mauris bibendum iaculis.<br />
<br />
Vivamus pulvinar diam sit amet quam. Nunc dui elit, mattis ut, rhoncus quis, accumsan in, tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mauris at risus ullamcorper consequat. Praesent vulputate metus ac pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci leo, euismod vitae, pulvinar a, aliquet a, tellus. Morbi tincidunt malesuada leo. Proin tincidunt libero at nibh. Cras sollicitudin vulputate nunc. Suspendisse blandit purus vel magna. Nulla dignissim lectus euismod odio.<br />
<br />
Ut ultrices dapibus velit. Aliquam erat volutpat. In tempus libero. Proin tempus. Aenean odio wisi, laoreet nec, viverra et, congue ac, risus. Morbi consectetuer elit et turpis. Vivamus pulvinar. Donec ornare dapibus nibh. Sed odio. In eget turpis.<br />
<br />
Maecenas pretium eros nec tortor. Morbi at ipsum quis massa varius tempus. Morbi placerat eros sit amet quam. Nulla in lorem ut neque volutpat adipiscing. Pellentesque erat magna, volutpat non, rhoncus sollicitudin, tincidunt vitae, felis. Praesent eget magna. Sed dictum. Mauris vehicula auctor risus. Curabitur neque nunc, interdum et, vestibulum id, placerat sit amet, elit. Etiam nec elit id nisl molestie dictum. Maecenas elementum lectus ut magna. In ut sem. Proin suscipit, metus non viverra sodales, elit diam fermentum est, a feugiat eros lorem id risus.<br />
<br /></h4>
	</div>
</div>

</div>
<!-- Fin du corps -->
</body>
</html>


Pourriez-vous m'aider Smiley confused

Merci d'avance !
Modifié par thymo (15 Aug 2006 - 16:16)

<!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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Thymotep'S Blog</title>
<link href="style.css" rel="stylesheet" type="text/css" />

</head>


Voilà Smiley smile
Sujet clos
Aller à