28172 sujets

CSS et mise en forme, CSS3

Css float et internet explorer

Bonjour voila deux jours que j'essaye de modifier l'apparence de mon site web sur internet explorer via une feuille de style pour IE.

Malheureusement je n'y arrive pas et je ne vois pas comment m'en sortir notamment avec les div float.

Je vous mets mon css et html.

Merci de votre aide.

div {
text-align:center;
color:#FFFACD;
}
div#descriptif {
padding-left:90px;
padding-right:90px
width:1200px;
height:100px;
background-image:url('images/003.gif');
font-size:xx-large;
color:#FFFACD;
height:1%;
}
div#contenu {
padding-left:90px;
padding-right:90px
background-image:url('images/001.gif');
width:1000px;
font-size:x-large;
color:#FFFACD;
height:1%;
}
div#piedpage {
width:1250px;
height:70px;
background-image:url('images/003.gif');
font-size:large;
clear:both;
height:1%;
}
div#menu {
float:left;
width:70px;
border-right:solid 1px;
padding-right:8px;position:absolute;
background-image:url('images/003.gif');
color:#FFFACD;
}
div#blocnews {
div position:absolute; top: 40%; left: 5%; right: 40%;
float:right;
width:170px;
color:#A0A0A0;
border-left:solid 1px;
padding-left:8px;
background-image:url('images/003.gif');
font-size:x-large
}
<style type="text/css">
a:link {
color:#FFFACD;
}
a:visited {
color:#FFFACD;
}
a:hover {
color:"FFFACD;
}
a:active {
color:#FFFACD;
}
</style>










<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Le Ptit Atelier du bois</title>
<link rel="stylesheet" href="style.css">
</head>
<body><!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" title="ie.css" href="ie.css" />
<![endif]--><BODY BACKGROUND="images/001.gif"><font face="comic sans ms">
<div id="descriptif"> LE PTIT ATELIER DU BOIS </div>
<div id="menu"><h2><UL><p><a href="page1.htm"><LI>Le Concept</p>
<p><a href="page2.htm"><LI>Nos Produits</a></p>
<p><a href="page3.htm"><LI>Nous contacter</a></p>
<p><a href="page4.htm"><LI>Les tarifs</a></p></UL></h2></a></div>
<div id="contenu" float:left
<div id="blocnews"><blink>News</blink><br><br><br>
<FONT size="3">Retrouvez-nous à Tinténiac dans le cadre du festival Tinté art' rue:<br>
<LI>Le 25 juillet au marché des artisans<br><LI>Le 26 juillet au marché bio et bien être</FONT></div>
<spacer type=block width=35 height=35>Création d'objets et de mobilier en bois dans une logique de développement durable<br><br><br>
<a href="mailto:leptitatelierdubois@free.fr"><IMG SRC="images/002.JPG" height=200 widght=100 border=3 img style="border-color:#FFFACD"</a></div>
<div id="piedpage" clear:both><br>leptitatelierdubois@free.fr</div></font>
<!-- Webdezign.tutoriaux.free.fr® Compteur de visiteurs -->
<script src="http://webdezign.tutoriaux.free.fr/services/compteur_page.php?client=2915&Af=6"></script>
<!-- Fin Compteur de visiteurs® -->
</body>



merci encore
Hello grenny et bienvenue Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je te rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Bonjour voila deux jours que j'essaye de modifier l'apparence de mon site web sur internet explorer via une feuille de style pour IE.

Malheureusement je n'y arrive pas et je ne vois pas comment m'en sortir notamment avec les div float.

Je vous mets mon css et html.

Merci de votre aide.


div {
text-align:center;
color:#FFFACD;
}
div#descriptif {
padding-left:90px;
padding-right:90px
width:1200px;
height:100px;
background-image:url('images/003.gif');
font-size:xx-large;
color:#FFFACD;
height:1%;
}
div#contenu {
padding-left:90px;
padding-right:90px
background-image:url('images/001.gif');
width:1000px;
font-size:x-large;
color:#FFFACD;
height:1%;
}
div#piedpage {
width:1250px;
height:70px;
background-image:url('images/003.gif');
font-size:large;
clear:both;
height:1%;
}
div#menu {
float:left;
width:70px;
border-right:solid 1px;
padding-right:8px;position:absolute;
background-image:url('images/003.gif');
color:#FFFACD;
}
div#blocnews {
div position:absolute; top: 40%; left: 5%; right: 40%;
float:right;
width:170px;
color:#A0A0A0;
border-left:solid 1px;
padding-left:8px;
background-image:url('images/003.gif');
font-size:x-large
}
<style type="text/css">
a:link {
color:#FFFACD;
}
a:visited {
color:#FFFACD;
}
a:hover {
color:"FFFACD;
}
a:active {
color:#FFFACD;
}
</style>










<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Le Ptit Atelier du bois</title>
<link rel="stylesheet" href="style.css">
</head>
<body><!--[if IE]>
<link rel="stylesheet" media="screen" type="text/css" title="ie.css" href="ie.css" />
<! endif --><BODY BACKGROUND="images/001.gif"><font face="comic sans ms">
<div id="descriptif"> LE PTIT ATELIER DU BOIS </div>
<div id="menu"><h2><UL><p><a href="page1.htm"><LI>Le Concept</p>
<p><a href="page2.htm"><LI>Nos Produits</a></p>
<p><a href="page3.htm"><LI>Nous contacter</a></p>
<p><a href="page4.htm"><LI>Les tarifs</a></p></UL></h2></a></div>
<div id="contenu" float:left
<div id="blocnews"><blink>News</blink><br><br><br>
<FONT size="3">Retrouvez-nous à Tinténiac dans le cadre du festival Tinté art' rue:<br>
<LI>Le 25 juillet au marché des artisans<br><LI>Le 26 juillet au marché bio et bien être</FONT></div>
<spacer type=block width=35 height=35>Création d'objets et de mobilier en bois dans une logique de développement durable<br><br><br>
<a href="mailto:leptitatelierdubois@free.fr"><IMG SRC="images/002.JPG" height=200 widght=100 border=3 img style="border-color:#FFFACD"</a></div>
<div id="piedpage" clear:both><br>leptitatelierdubois@free.fr</div></font>
<!-- Webdezign.tutoriaux.free.fr® Compteur de visiteurs -->
<script src="http://webdezign.tutoriaux.free.fr/services/compteur_page.php?client=2915&Af=6"></script>
<!-- Fin Compteur de visiteurs® -->
</body>




merci encore
Peut-on avoir un aperçu de ce qui ne s'affiche pas correctement pour comprendre ton problème ?

Sinon je vois une ligne dans ton HTML qui n'est pas correcte :

<div id="contenu" float:left

Ca devrait-être :
<div id="contenu" style="float:left">

Donc fermeture du div et "float" est un paramètre css donc on le met dans le paramètre html "style". L'idéal serait même que ce paramètre css soit dans la feuille de style elle même.

Et je vois d'autres erreurs comme ça dans ton html.
Commence donc par le corriger en t'aidant du validateur W3C et ça devrait résoudre bon nombre de problèmes.
Modifié par moust (19 Jul 2009 - 18:28)
Je viens de regarder ça sous IE6 et je ne remarque pas le problème dont tu me parles. Smiley ohwell

Essais de réduire la largeur de tes blocs. S'ils sont trop grands pour loger dans leur contenu alors il y a un retour à la ligne forcé.
Sujet clos
Aller à