28172 sujets

CSS et mise en forme, CSS3

Problême avec ma div du bas

Bonjour voilà en bas de mon site j'ai mis une div bas pour finir mon site.
Dans safari elle s'affiche bien ainsi que dans firefox mais dans ie elle remonte Smiley ohwell
Voiçi le lien du site :
http://www.endoktrine.com/cat/
le plus bizarre c qu'elle s'affiche bien ici :
http://www.endoktrine.com/cat/illustration.html

je pense que c un problême de hauteur de div ou de conteneur j'ai posé une question précédement je vous redonne mon code css assez long.... :


body{
	background-color: #FFFFFF;
	background:url(theme/fond.jpg) no-repeat transparent top center;
	margin:0;
	padding:0;
	font-family:Helvetica, Verdana, Geneva, sans-serif;
	font-size:9px;
}

/*/////////////////////////////////////
		    Le header
/////////////////////////////////////*/
#top{
	background:url(theme/top.jpg) no-repeat transparent top center;
	height:85px;
	padding-top : 100px;
	padding-right:20px;
	font-size:24px;
	color:#FFF;
	text-align:right;
}

#top h1{
	padding:0 15px;
	margin:0;
	font-size:14px;
	color:#3c96b6;
	text-align:right;
}

p {
   margin: -104px 0;
}

/*/////////////////////////////////////
		    menu
/////////////////////////////////////*/
#menu{
	height:29px;
}

#menu1{
	background:url(theme/menu1o.png) no-repeat transparent top right;
	float:left;
	height:29px;
	width:389px;
	margin-right:3px;
	padding-right:20px;
	font-size:13px;
	line-height:29px;
	color:#FFF;
	text-align:right;
}

#menu1:hover{
	background:url(theme/menu1v.png) no-repeat transparent top center;
	float:left;
	height:29px;
	width:389px;
	margin-right:3px;
	padding-right:20px;
	font-size:13px;
	line-height:29px;
	color:#FFF;
	text-align:right;
	}

#menu2{
	background:url(theme/menuo.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu2:hover{
	background:url(theme/menuv.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu3{
	background:url(theme/menuo.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu3:hover{
	background:url(theme/menuv.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}
#menu4{
	background:url(theme/menuo.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu4:hover{
	background:url(theme/menuv.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	margin-right:2px;
	width : 100px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu5{
	background:url(theme/menuo.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu5:hover{
	background:url(theme/menuv.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu6{
	background:url(theme/menuo.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu6:hover{
	background:url(theme/menuv.jpg) no-repeat transparent top center;
	float:left;
	width:119px;
	height:29px;
	width : 100px;
	margin-right:2px;
	font-size:13px;
	color:#FFF;
	line-height:30px;
	text-align:center;
}

#menu a{
	color:#FFFFFF;
	text-decoration:none
}

#menu a:hover{
	color:#4c6203;
}

/*/////////////////////////////////////
		    fond
/////////////////////////////////////*/
#fond1{
	background:url(theme/f1.jpg) no-repeat transparent top center;
	height:700px;
	width:319px;
	float:left;
	margin-right:4px;
}
	
#fond2{
	height:700px;
	float:left;
	width:380px;
	float:left;
	margin-right:4px;

}

	
#fond3{
	height:690px;
	width:213px;
	float:left;
	
}
#bannews{
	margin-top:84px;
	height:268px;
	width:215px;
	background-color:#C8C8C8
}

#banflash{
	height:342px;
	width:213px;
	background-color:#C8C8C8
	
	
}

/*/////////////////////////////////////
		      dans fond
/////////////////////////////////////*/
#b-durable{
	background:url(theme/barre.jpg) no-repeat transparent top center;
	height:30px;
	width:317px;
	margin-left:0px;
	margin-top:15px;
	padding-left:35px;
	float:left;
	line-height:30px;
	color:#FFF;
	text-align:left;
}

#b-durable .gras{
	padding-left:16px;
	margin:0;
	font-size:16px;
	color:#ACBC00;
}

#durable{
	height:280px;
	width:232px;
	float:left;
	margin-left:20px;
	margin-top:15px;
	margin-bottom:10px;
	
}

#t-durable{
	height:20px;
	width:230px;
	margin-left:20px;
	margin-top:25px;
	background-color:#FFFFFF
	float:left;
	text-align:justify
}

#d1{
	height:87px;
	width:105px;
	float:left;
	margin-left:10px;
	margin-top:15px;
	background-color:#C8C8C8
	
}

#d2{
	height:87px;
	width:105px;
	float:left;
	margin-left:10px;
	margin-top:10px;
	background-color:#C8C8C8
	
}

#d3{
	height:87px;
	width:105px;
	float:left;
	margin-left:10px;
	margin-top:10px;
	background-color:#C8C8C8
	
}


#b-news{
	background:url(theme/barre.jpg) no-repeat transparent top center;
	height:30px;
	width:317px;
	margin-left:0px;
	margin-top:30px;
	padding-left:35px;
	float:left;
	line-height:30px;
	color:#FFF;
	text-align:left;
}

#b-news .gras{
	padding-left:16px;
	margin:0;
	font-size:16px;
	color:#ACBC00;
}

#news{
	height:200px;
	width:346px;
	float:left;
	margin-left:20px;
	margin-top:15px;
	background-color:#C8C8C8
	
}

#t-news{
	height:86px;
	width:346px;
	float:left;
	margin-left:20px;
	margin-top:10px;
	text-align:justify
	
}

#rubrique{
	height:200px;
	width:319px;
	float:left;
	margin-left:10px;
	margin-top:10px;
	
}

#rubrique ul li{
	list-style:none;

}

#rubrique ul li a{
	height:34px;
	width:223px;
	text-decoration:none;
	display:block;
	font-size:15px;
	text-align:center;
	background:url(theme/rub.png) no-repeat top left;
	line-height:38px;
}

#rubrique ul li a:hover{
	height:34px;
	width:223px;
	text-decoration:none;
	display:block;
	font-size:15px;
	text-align:center;
	background:url(theme/rub.png) no-repeat top left;
	line-height:36px;
}

#presentation{
	height:130px;
	width:230px;
	float:left;
	margin-left:50px;
	margin-right:20px;
	margin-top:8px;
	font-size:10px;
	text-align:justify
	
}

#cut1{
	height:30px;
	width:230px;
	float:left;
	margin-left:60px;
	margin-right:20px;
	margin-top:20px;
	font-size:10px;
	background:url(theme/cut2.png) no-repeat top left;
	
}

#cut2{
	height:51px;
	width:230px;
	float:left;
	margin-left:60px;
	margin-right:20px;
	margin-top:25px;
	font-size:10px;
	background:url(theme/cut1.png) no-repeat top left;
	
}

#contact{
	display:block;
	height:220px;
	width:319px;
	float:left;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	overflow:hidden;
	
}

/*/////////////////////////////////////
		      bas
/////////////////////////////////////*/
#bas{
	margin:0 auto;
	background:url(theme/bas.jpg) no-repeat;
	width:922px;
	height:132px;
	color:#FFF;
	line-height:170px;
	text-align:center;
	clear: left
	 
}
/*/////////////////////////////////////
		    Le conteneur
/////////////////////////////////////*/

	#conteneur{
	width:925px;
	margin:0 auto;
	}

mERCI À VOUS Smiley cligne
Bonjour,

Je ne sais pas d'où vient le problème dans IE (pas eu le temps de tester), mais voici quelques remarques:

1. Il aurait été utile de dire quelle(s) version(s) d'Internet Explorer présentent un rendu problématique. Il y en a tout de même trois principales en circulation (en comptant IE8 beta2)!

2. J'ai lu une horreur dans ton code CSS: p {margin: -104px 0;}... pour ma part, je vais éviter de tenter de débuguer un site qui utilise une telle règle catastrophique. Ce serait une perte de temps. Si ta mise en page repose sur cette double marge négative des paragraphes, c'est quand même grave.

3. Au niveau du code CSS de ton menu, il y a un gros problème d'optimisation du code. En gros, tu répètes tout le temps le même code au lieur de l'appliquer à tous les items du menu (et ne faire varier que ce qui a besoin de varier).

4. L'information «Blabla Design Freelance» est manquante dans l'en-tête. C'est une simple image de fond qui ne sera pas lue par les internautes qui désactivent les images (si si, il y en a...), ceux qui ne peuvent pas les voir pour une raison x ou y, et par les moteurs de recherche. De même pour l'information de contact dans la colonne de gauche: sans accès à l'image, pas d'information. Quelques lacunes sur les notions de base de l'accessibilité numérique?

5. Enfin, reprendre la mascotte de Twitter.com dans ton design, c'est pas super fin ni très malin. Smiley ohwell
Sujet clos
Aller à