28212 sujets

CSS et mise en forme, CSS3

[Résolu] Petit problème de css et GROS problème d'IE

Bonjour à tous,

J'ai un petit problème avec une image qui ne veux pas se placer à la bonne place avec un float:left ;
zone_bottom.jpg

Quand je dis "pas à la bonne place", je veux dire sous les 2 autres (zone_top et zone_bg).

J'ai réussi à la mettre sous les 2 autres mais en utilisant un margin-left de 166px!!!!

J'ai aussi, naturellement, un GROS problème d'affichage avec IE.

Voici le code source
<body>
		<div id="main">

			<div class="logo"><img src="images/banniere.jpg" /></div>
		
			<div class="menu">

{menu template='jardin-menu'}

			</div>
                  <div class="zone_top"></div>      
			<div class="zone">
				<div class="zone_txt">

  {content}

				</div>
			</div>
			<div class="zone_bottom"></div>
			
		</div>
	<div class="footer"><a href="http://www.conceptiondalien.com" title="Conception Dalien" target="_blank">Conception Dalien</a> &copy; Tous droits r&eacute;serv&eacute;s</div>	
       
	</body>


Et le .css
body {
	margin:0px 0px; padding:0px;
	text-align:center;
	font-family: "Arial Narrow", "Tahoma";
	background-color: #FFFFFF;
	font-size: 14px;
	color: #000;
}

h1 {
	text-align:left;
	font-family: "Times New Roman", "Arial Narrow", "Tahoma";
	font-size: 34px;
	color: #000;
	margin-left: 20px;
}

h2 {
	text-align:left;
	font-family: "Times New Roman", "Arial Narrow", "Tahoma";
	font-size: 24px;
	color: #000;
	margin-left: 20px;
}
	
#main {
	width:1000px;
	margin:auto;

	text-align:left;
	padding:15px;
	padding-top: 0px;
}

.logo {
	float: left;
	display: inline;
	margin-top: 10px;
	margin-left: 60px;
	margin-bottom: 25px;
}


.zone_top {
	float: left;
	display: inline;
	width: 684px;
	height: 176px;
	margin-top: 3px;
	margin-left: 14px;
	background: url(images/zone_top.jpg) no-repeat;
}

.zone {
	float: left;
	display: inline;
	width: 684px;
	height: 100%;
	background: url(images/zone_bg.jpg) center top repeat-y;
	padding-left: 29px;
}

.zone_txt {
	float: left;
	display: inline;
	width: 540px;
	height: 100%;
	padding-left: 29px;
	text-align: justify;
}

.zone_bottom {
	float: left;
	display: inline;
	width: 684px;
	height: 176px;
	margin-left: 166px;
	background: url(images/zone_bottom.jpg) no-repeat;
}

.menu {
	float: left;
	display: inline;
	width: 142px;
	margin: 60px 10px 0 0;
}

.menu a.accueil{
	float: left;
	display: inline;
	background: url(images/accueil.gif) no-repeat;
	width: 142px;
	height: 150px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding-top: 2px;
	margin-top: 5px;
}
.menu a.accueil:hover{
	background: url(images/accueil-hover.gif) no-repeat;
}
.menu a.produits{
	float: left;
	display: inline;
	background: url(images/produits.gif) no-repeat center;
	width: 142px;
	height: 150px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding-top: 1px;
	margin-top: 1px;
}
.menu a.produits:hover{
	background: url(images/produits-hover.gif) no-repeat center;
}
.menu a.contact{
	float: left;
	display: inline;
	background: url(images/contact.gif) no-repeat center;
	width: 142px;
	height: 135px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding-top: 1px;
	margin-top: 1px;
}
.menu a.contact:hover{
	background: url(images/contact-hover.gif) no-repeat center;
}

.footer {
	float: right;
	display: inline;
	background: url(images/footer.jpg) repeat-x bottom;
        width:100%;
	color: #000;
        text-align: center;
        padding: 33px 0 10px 0;
        font-size: 0.8em;
}
.footer a{	
	color: #000;
	text-decoration: none;
        font-size: 0.9em;
}
.footer a:hover{	
	color: #FF6600;
	text-decoration: none;
        font-size: 0.9em;
}


Lien temporaire

Merci pour votre aide si précieuse.
Modifié par Colombanois (09 Jun 2009 - 18:27)
Bonjour, le décalage vient du faite que ton menu ne descend pas suffisamment jusqu'en bas.

2 solutions :
-descendre le menu tout en bas avec une valeur fixe : horrible, et inadaptable.
- mettre un div qui englobe tout le contenu central. C'est elle qui doit ELLE être floaté et non les divs à l'intérieure.

Tu as le choix mais moi je penche pour la deuxième solution Smiley smile
Merci masseuro, ça réglé presque tous les problèmes sur IE, sauf celui-ci:

http://i40.tinypic.com/10r7lvd.jpg

Une idée?

Mon nouveau .css:
body {
	margin:0px 0px; padding:0px;
	text-align:center;
	font-family: "Arial Narrow", "Tahoma";
	background-color: #FFFFFF;
	font-size: 14px;
	color: #000;
}

h1 {
	text-align:left;
	font-family: "Times New Roman", "Arial Narrow", "Tahoma";
	font-size: 34px;
	color: #000;
	margin-left: 20px;
}

h2 {
	text-align:left;
	font-family: "Times New Roman", "Arial Narrow", "Tahoma";
	font-size: 24px;
	color: #000;
	margin-left: 20px;
}
	
#main {
	width:1000px;
	margin:auto;
	text-align:left;
	padding:15px;
	padding-top: 0px;
}

.logo {
	float: left;
	display: inline;
	margin-top: 10px;
	margin-left: 60px;
	margin-bottom: 25px;
}

#centre {
	float: left;
	margin:auto;
	display: inline;
}

.zone_top {
	float: left;
	display: inline;
	width: 684px;
	height: 176px;
	margin-top: 3px;
	margin-left: 14px;
	background: url(images/zone_top.jpg) no-repeat;
}

.zone {
	float: left;
	display: inline;
	width: 684px;
	height: 100%;
	background: url(images/zone_bg.jpg) center top repeat-y;
	padding-left: 29px;
}

.zone_txt {
	float: left;
	display: inline;
	width: 540px;
	height: 100%;
	padding-left: 29px;
	text-align: justify;
}

.zone_bottom {
	float: left;
	display: inline;
	width: 684px;
	height: 176px;
	margin-left: 166px;
	background: url(images/zone_bottom.jpg) no-repeat;
}

.menu {
	float: left;
	display: inline;
	width: 142px;
	margin: 60px 10px 0 0;
}

.menu a.accueil{
	float: left;
	display: inline;
	background: url(images/accueil.gif) no-repeat;
	width: 142px;
	height: 150px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding-top: 2px;
	margin-top: 5px;
}
.menu a.accueil:hover{
	background: url(images/accueil-hover.gif) no-repeat;
}
.menu a.produits{
	float: left;
	display: inline;
	background: url(images/produits.gif) no-repeat center;
	width: 142px;
	height: 150px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding-top: 1px;
	margin-top: 1px;
}
.menu a.produits:hover{
	background: url(images/produits-hover.gif) no-repeat center;
}
.menu a.contact{
	float: left;
	display: inline;
	background: url(images/contact.gif) no-repeat center;
	width: 142px;
	height: 135px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding-top: 1px;
	margin-top: 1px;
}
.menu a.contact:hover{
	background: url(images/contact-hover.gif) no-repeat center;
}

.footer {
	float: right;
	display: inline;
	background: url(images/footer.jpg) repeat-x bottom;
        width:100%;
	color: #000;
        text-align: center;
        padding: 33px 0 10px 0;
        font-size: 0.8em;
}
.footer a{	
	color: #000;
	text-decoration: none;
        font-size: 0.9em;
}
.footer a:hover{	
	color: #FF6600;
	text-decoration: none;
        font-size: 0.9em;
}


Et code source:
<body>
		<div id="main">

			<div class="logo"><img src="images/banniere.jpg" /></div>
		 <div id="centre">
			<div class="menu">

{menu template='jardin-menu'}

			</div>
                  <div class="zone_top"></div>      
			<div class="zone">
				<div class="zone_txt">

  {content}

				</div>
			</div>
			<div class="zone_bottom"></div>
		 </div>	
		</div>
	<div class="footer"><a href="http://www.conceptiondalien.com" title="Conception Dalien" target="_blank">Conception Dalien</a> &copy; Tous droits r&eacute;serv&eacute;s</div>	
       
	</body>

Modifié par Colombanois (08 Jun 2009 - 17:14)
Sujet clos
Aller à