28173 sujets

CSS et mise en forme, CSS3

Problème ie6 et css (et ie7)

Bonjour,

J'aurais un petit problème de compatibilité..
Sur firefox tout tourne : http://stoquert.maisons-barberousse.fr/newstyle_mb_firefox/

Mais dès que je teste sous ie : la galère Smiley eek Smiley biggrin

premièrement dans ie7, le padding-left du corps est mal pris en compte.
Je pense pour cela utiliser des commentaires conditionnels.
Pourriez vous me guider pour utiliser ces commentaires seulement pour une seule version de ie ?

Deuxièmement sous ie6, le div footer se retrouve dans le corps (seulement dans l'accueil): bizzard...
Pourriez vous m'orienter vers une solution Smiley rolleyes

Merci beaucoup !!!!!!

PS :
vous pouvez remarquer un bug sur la page de creation sous ie mais de toute façon faut que je la refasse alors c'est bon... Smiley cligne

mon code css : 
@charset "iso-8859-2";
/* CSS Document */

html, body{
margin:0;
padding:0;
background-color:#CAACCA;

}

div#conteneur {
position:relative;
width: 940px;
margin-left:auto;
margin-right:auto;
margin-top:20px;
margin-bottom:20px;
background-color:#E9DDE9;
background-image:url(images/coin_haut_gauche.png);
background-position:top left;
background-repeat:no-repeat;


}


div#headerconteneur {
	position:relative;	
	overflow:hidden;
	height: 220px;
	background-image:url(images/coin_haut_droit.png);
	background-position:top right;	
	background-repeat:no-repeat;
	overflow:hidden;
	width:100%;

}
div#header{
position:relative;
background-image:url(images/Banniere.png);
background-repeat:no-repeat;
width:910px;
height:205px;
margin:auto;
margin-top:15px;
}

div#contenu {
position:relative;
min-height:480px;
margin-top:15px;

}
div#corps{
height:auto;
min-height:480px;
padding-left:145px;
padding-right:10px;
margin-bottom:20px;
}

div#menu
{
width:120px;
height:300px;
float:left;
margin-left:15px;
}
div#logos{
text-align:center;
}
a img{
border:none;
}
div#footerconteneur{
height:30px;
position:relative;
background-image:url(images/coin_bas_gauche.png);
background-position:bottom left;
background-repeat:no-repeat;
}
div#footer{
position:relative;
	background-image:url(images/coin_bas_droit.png);
	background-position:bottom right;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	margin-bottom:0;
	}
	
	
/*page_accueil.php*/	
div#anim{
position:relative;
margin-left:auto;
margin-right:auto;
margin-top:20px;

}

div#anonce{
width:270px;
float:right;
padding-right:20px;
margin-top:120px;
}

/*page_formulaire*/
div#form1{
float:left;
	height:268px;
	width:332px;
}
div#form2{
float:right;
}
div#formerreur{
margin-top:278px;
width:352px;
}
/*creations*/
div#creations{
position:absolute;
width:425px;
}
div#flashcontent3{
position:relative;
margin-left:435px;
margin-top:50px;
width:350px;
height:263px;
}

Modifié par seb67110 (16 Jan 2008 - 20:56)
bonjour
il faudrait nettoyer le code :
-beaucoup trop de div imbriquées sans nécessité
-beaucoup de position relative sans nécessité

la position relative pour un bloc est utile
1. pour positionner un bloc en absolu par rapport à ce bloc
2. pour positionner un élément par rapport à la situation qu'il occupe naturellement et dans ce cas on indique la position (top left etc.)

incrémente ton code html, tu y verras plus clair dans les balises

-le min-height n'est pas compris par IE6, c'est pourquoi ton footer se retrouve trop haut : supprime height:auto et remplace min-height par height : 480px;

-pour #corps: remplace padding-left: 145px par margin-left:145px
Modifié par verdan (16 Jan 2008 - 22:17)
Bonjour et merci pour ta réponse.

Ta solution pour le min-height ne correspond pas à mon site. En effet je veux qu'il soit extensible en hauteur si le texte dépasse.
Voir : http://stoquert.maisons-barberousse.fr/newstyle_mb_firefox/index2.php?page=entreprise
De plus sous ie6, le coin du design en bas à gauche est mal placé...

Pour la marge du corps ça marche.

a écrit :
bonjour
il faudrait nettoyer le code :
-beaucoup trop de div imbriquées sans nécessité
-beaucoup de position relative sans nécessité


Tu pourrais m'éclairer sur ce sujet ? Je débute vraiment en css...

Encore merci
voici ton CSS modifié (fonctionne pour IE6, IE7, firefox, opera)


/* CSS Document */
*{
margin:0;
padding:0;
}
body{
height:100%;
width: 940px;
margin:20px auto;
background-color:#CAACCA;
}

div#conteneur {
position:relative;
height:100%;
background-color:#E9DDE9;
background-image:url(images/coin_haut_gauche.png);
background-position:top left;
background-repeat:no-repeat;
}


div#headerconteneur {
	overflow:hidden;
	height: 220px;
	background-image:url(images/coin_haut_droit.png);
	background-position:top right;	
	background-repeat:no-repeat;
}
div#header{
background-image:url(images/Banniere.png);
background-repeat:no-repeat;
width:910px;
height:205px;
margin:auto;
margin-top:15px;
}

div#contenu {

margin-top:15px;
padding-bottom:30px;
}
div#corps{
margin-left:160px;
margin-right:10px;
margin-bottom:20px;
}

div#menu
{
width:120px;
height:300px;
float:left;
margin-left:15px;
}
div#logos{
text-align:center;
}
a img{
border:none;
}
div#footerconteneur{
position:absolute;
bottom:0;
left:0;
width:100%;
height:30px;
background-image:url(images/coin_bas_gauche.png);
background-position:bottom left;
background-repeat:no-repeat;


}
div#footer{
	height: 30px;
	background-image:url(images/coin_bas_droit.png);
	background-position:bottom right;
	background-repeat:no-repeat;
	}
	
	
/*page_accueil.php*/


le html modifié (attention j'ai changé l'emplacement de certaines </div> donc à copier-coller pour ne rien louper)


<body>

<div id="conteneur">
	<div id="headerconteneur">
		<div id="header"></div>
	</div>
<div id="contenu">
	<div id="menu">
		<div id="flashcontent1">

		</div>

	<script type="text/javascript">
		// <![CDATA[
		
		var so = new SWFObject("menu.swf", "menu", "120", "140", "9");
		so.write("flashcontent1");
		
		// ]]>
	</script>

 


		<div id="logos">
<img src="images/logos/mascotte.gif" alt="Logo UNCMI" width="120" height="163" longdesc="images/logos/uncmi.jpg" />
<img src="images/logos/es.gif" alt="Logo ES" width="120" height="120" border="0" longdesc="images/logos/thermic.gif" />
<img src="images/logos/dolcevita.gif" alt="Logo dolcevita" width="120" height="46" border="0" longdesc="images/logos/gaz-naturel.gif" />  <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="21" width="60"/></a>
		</div>
	</div>

<div id="corps">
	<div align="center" class="Style2"><span class="titres">L'entreprise </span> </div>
 <p align="left" class="Style2"><img src="images/logos/mb.gif" alt="Logo les Maisons Barberousse" width="137" height="58" longdesc="images/logos/mb.gif" /><span class="textes">Les Maisons Barberousse Construction de maisons individuelles </span></p>
 <p align="justify" class="textes">La Sarl "Les  Maisons Barberousse", dont le siège est à Haguenau 12 Rue St-Georges, a vu  le jour en Février 1979.</p>
 <p align="justify" class="textes">Notre activité principale est le domaine de la maison individuelle. Vous  trouverez chez nous la demeure qui répond à vos souhaits. Le choix existe:  maison suivant catalogue, maison personnalisée, maison sur mesure, qu'elle soit  classique ou contemporaine tout est possible. </p>
 <p align="justify" class="textes">Pour construire  votre maison en "traditionnel" nous avons sélectionné, avec nos  artisans locaux, qui les mettent en oeuvre, des matériaux nobles et de bonne  qualité. </p>
 <p align="justify" class="textes">C'est grâce au dialogue permanent, que nous entretenons avec nos artisans,  à la continuité du travail que nous leur fournissons, ainsi qu'à la rigueur de  notre gestion, que vous allez bénéficier de prix compétitifs. </p>
 <p align="justify" class="textes">Des hommes de  métier sont à votre service; Architecte, conseiller financier, artisans, une  équipe dynamique et compétente pour vous guider. <br />
  Assistance à tous les stades de votre opération construction, choix de  votre terrain, meilleure orientation, implantation, demandes administratives,  financières. Etude de financement réelle et sérieuse. </p>
 <p align="justify" class="textes">Le contrat de construction que nous vous proposons est conforme aux  dernières dispositions législatives. Il est en harmonie avec les  recommandations faites par les organismes et associations de consommateurs. <br />
  L'assurance dommages ouvrage sans supplément de prix. C'est votre  garantie pour les 10 années à venir. Pour votre sécurité, nous souscrivons un  contrat pour chaque maison que nous réalisons.</p>
 <p align="justify" class="textes">C'est parce que "Les Maisons Barberousse" ont su répondre  efficacement à la demande, qu'aujourd'hui beaucoup de familles de notre région  sont des propriétaires heureux. </p>
 <p align="justify" class="textes">En conclusion, je puis vous assurer que je veillerai personnellement au bon  déroulement de votre opération construction et cela à tous les niveaux, respect  du plan de financement, respect des délais de construction, qualité du service  après vente. <br />
  Je vous remercie  d'avoir pris le temps de lire ces quelques lignes. </p>
 <p align="center" class="textes"><br clear="all" />
  <br />
  Josiane Besson,</p>
 <p align="center" class="textes">Gérante</p>
</div>



<div id="footerconteneur">
	<div id="footer"> 
		<div align="center">©Maisons Barberousse 2008 <span class="textetimes"><a id="img" href="?page=plan">Plan du site</a></span>
		</div>
	</div>
</div>

</div>

</div>
</body>


rem : pour ton texte tu devrais plutôt définir des class de p que mettre align dans le code html

l'explication, c'est que div#footerconteneur est positionné en absolu au fond de div#conteneur (relative) auquel on donne height:100%, ainsi il est toujours au fond quelque soit la hauteur de page.
-j'ai augmenté la marge corps car sous IE6 le caractère est plus gros et ça débordait à gauche sous le menu.
Merci enormement d'avoir répondu et d'avoir passé du temps sur mon problème !
C'est très sympa.
J'ai absolument compris ce que tu as fait.
J'aurais une dernière question : comment faire pour que le corps ai une hauteur minimal et qu'en même temps ça soit valide pour tout les navigateur ?
En effet ça cole pas trop : http://stoquert.maisons-barberousse.fr/newstyle_mb_firefox/Untitled-1.php

mais quand le texte dépasse c'est bon http://stoquert.maisons-barberousse.fr/newstyle_mb_firefox/Untitled-1.php?page=entreprise


Encore merci !!!! Smiley smile
bonjour
en fait, la structure de ta page plus courte n'était pas la même que pour l'autre page.
il faut évidemment veiller à avoir la même structure pour des pages de même type.

comme dit plus haut, tu as beaucoup trop de div inutiles et le code n'est pas indenté, ce qui induit en erreur et fait qu'on ne détecte pas d'emblée la structure du code.

ce que j'ai fait est plutôt du rabibochage mais le code est loin d'être optimal (il faudrait tout remettre au clair)

voici le code de la page corrigé :

<body>
<div id="conteneur">
	<div id="headerconteneur">
		<div id="header">
        </div>
	</div>
	
<div id="contenu">
	<div id="menu">
        
		<div id="flashcontent1">

		</div>

	<script type="text/javascript">
		// <![CDATA[
		
		var so = new SWFObject("menu.swf", "menu", "120", "140", "9");
		so.write("flashcontent1");
		
		// ]]>
	</script>

 


		<div id="logos">
<img src="images/logos/mascotte.gif" alt="Logo UNCMI" width="120" height="163" longdesc="images/logos/uncmi.jpg" />
<img src="images/logos/es.gif" alt="Logo ES" width="120" height="120" border="0" longdesc="images/logos/thermic.gif" />
<img src="images/logos/dolcevita.gif" alt="Logo dolcevita" width="120" height="46" border="0" longdesc="images/logos/gaz-naturel.gif" />  
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="21" width="60"/></a>
		</div>
	</div>

	<div id="corps">
        <div>
<p align="center" class="titres">Devenez Propi&eacute;taire </p>
<p class="textes">Avec Les Maisons Barberousse, votre projet personnalis&eacute; et de qualit&eacute; est possible gr&acirc;ce &agrave; une &eacute;quipe dynamique et comp&eacute;tante.Venez visiter notre salle  d'exposition pour voir et comparer les mat&eacute;riaux que nous utilisons. <a href="?page=constructeur">Un constructeur, pourquoi ?</a> </p>
		</div>
		
			<div id="anim">  

			</div>
		<div id="anonce">
			<div id="flashcontent2">
Vous ne possèdez pas le plugin flash, qui est indispensable pour visionner cet objet.
			</div>
 
<script type="text/javascript">
   var so = new SWFObject("actuellement_dispo.swf", "actuellement_dispo", 270, 80, 8, "#FFFFFF"); 
   so.addParam("quality", "hight");
   so.write("flashcontent2");
   </script>
		</div>

	</div><!--fermeture de corps-->
	<div class="clear">&nbsp;</div>
        
<div id="footerconteneur">
   	<div id="footer"> 
        &copy;Maisons Barberousse 2008 <span class="textetimes"><a href="?page=plan">Plan du site</a></span>
 		
    </div>
</div>

</div><!--fermeture de contenu-->
</div><!--fermeture de conteneur-->

</body>


j'ai rajouté dans le CSS : 


div.clear
{
clear:left;
}
div#menu
{
display:inline;
}
Sujet clos
Aller à