Salut,
je dois dire que je ne savais pas vraiment ou poster ce sujet, vu que je n'arrive pas a savoir d'ou vient le bug (CSS ou XHTML (j'en doute)).
Voila, il y a donc le mot "page" de "haut de page" qui se dédouble sous IE et vient se placer sous mon pied de page, pour des raisons que j'ignore.
Voici mon code XHTML (celui de la page index, mais il est semblable pour les autres) :
Et voici ma CSS pour IE :
Les parties concernées (du moins, censé être concernées) sont encadré par une double ligne de "*".
Le site ICI.
Il me semble que ce bug a commencé avec la mise en place du second menu en bas de page, juste au dessus du pied.
Modifié par TheReverendEVIL (11 Apr 2006 - 14:13)
je dois dire que je ne savais pas vraiment ou poster ce sujet, vu que je n'arrive pas a savoir d'ou vient le bug (CSS ou XHTML (j'en doute)).
Voila, il y a donc le mot "page" de "haut de page" qui se dédouble sous IE et vient se placer sous mon pied de page, pour des raisons que j'ignore.
Voici mon code XHTML (celui de la page index, mais il est semblable pour les autres) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- ******************** Debut de l'entete ******************************** -->
<head>
<title>Toulokowitz.com :: accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Toulokowitz bureautique." />
<meta name="keywords" content="toulokowitz, bureautique, photocopieurs, telecopieurs, fax,
caisses enregistreuses, systemes d'encaissement, imprimantes, sagem, kyocera, konica minolta, casio,
canon, HP, Helwet Packard consomables, accessoires, informatique, mobilier, troyes, 10000, aube,
papeterie, meilleurs prix, qualite, SAV, services, vente, savoir faire, reprographie, photocopies,
jet d'encre, laser, multifonctions, peripheriques, maintenance, installation, switchs, hubs" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->
</head>
<!-- ******************** Fin de l'entete ********************************** -->
<!-- ******************** Debut du body ************************************ -->
<body id="accueil">
<p id="top" ></p>
<!--
DEBUT DEBUG INFOS (les accents ont ete retire, remplacement ulterieur avec
l'ecriture conventionnelle
les style CSS :
____________________________________________________________________________
Deux feuilles de Styles, une pour IE6 et les versions anterieures, une pour
les autres navigateurs.
Teste uniquement sous IE6 et Mozilla Firefox 1.5.
____________________________________________________________________________
les differentes classes et leurs contenus :
*****
bann : banniere
menu : menu
under : separateur "menu"/"conteneur"
conteneur : contient "sousmenu" et "content"
sousmenu : le sous menu
contenu : contenu principal du site
foot : pied de page
*****
titre : mise en page titres
text : mise en page texte
*****
a:link : lien(s) vierge(s)
a:visited : lien(s) deja visite(s)
a:active : couleurs du lien lors de l'activation (mouse down)
a:hover : survol des liens
____________________________________________________________________________
Des conventions de nomage body#id et a#id permettent l'affichage de la part
en court de visite.
____________________________________________________________________________
Pas de javascript *pour le moment*
Pas de PHP *pour le moment*
____________________________________________________________________________
FIN DEBUG INFOS
-->
<div class="global">
<a href="index.htm"><img src="images/head.gif" alt="logo toulokowitz" /></a>
<span class="bann"></span><!-- fermeture classe=bann -->
<div class="menu">
<a href="index.htm" id="accueilnav">Accueil</a> | <a href="produits.htm">Produits</a> | <a href="contact.htm">Contact</a> | <a href="prive/prive.htm">Prive</a>
</div><!-- fermeture class=menu -->
<span class="under"></span><!--fermeture class=under -->
<div class="conteneur"> <!-- contient class=sousmenu et class=content -->
<div class="sousmenu">
<span class="firstitre">N</span><span class="restitre">os Produits :</span><br />
<a href="phcnb.htm">-photocopieurs N/B</a><br />
<a href="phcc.htm">-photocopieurs couleur</a><br />
<a href="riso.htm">-riso</a><br />
<a href="tlc.htm">-telecopieurs</a><br />
<a href="caisses.htm">-caisses enregistreuses et systemes d'encaissement</a><br />
<a href="info.htm">-informatique</a><br />
<a href="mobilier.htm">-mobilier</a><br />
<a href="consomable.htm">-consomables et accessoires</a><br />
</div> <!-- fermeture class=sousmenu -->
<div class="contenu">
<span class="firstitre">P</span><span class="restitre">resentation :</span>
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur convallis. Praesent urna diam, pharetra eget, vulputate eu, scelerisque vitae, felis. Aenean arcu lectus, egestas at, sollicitudin eget, egestas eu, urna. Nunc ac neque eget turpis dictum ornare. Cras venenatis. Morbi eu quam. Suspendisse et erat. Vestibulum at tellus quis augue consequat lobortis. Mauris consequat odio iaculis justo. Pellentesque at odio. Proin dapibus. Curabitur tincidunt tellus id odio. Nunc ligula ipsum, auctor eu, consequat a, adipiscing et, sapien.
</p>
<p>
<a href="http://www.aol.fr/">Le lien est-il cliquable ?</a>
</p>
<p>
Cras fringilla. In laoreet mauris sit amet tellus. Pellentesque non diam a sem volutpat facilisis. Nullam venenatis accumsan felis. Etiam sapien. Nunc vitae nisi eget odio accumsan vehicula. Aliquam enim sapien, lacinia sit amet, viverra non, eleifend ac, nunc. Donec urna. Cras ac diam non purus consectetuer mollis. Curabitur euismod adipiscing quam. Aenean tristique neque ac felis. Nam id lectus. Aenean aliquam purus sed erat. Integer tempor massa non ipsum. Donec et eros quis velit interdum sollicitudin. Nullam viverra placerat velit.
</p>
<p>
Donec nisl nulla, vestibulum ac, hendrerit quis, tempor a, sapien. Maecenas vehicula, sem a eleifend hendrerit, risus libero rutrum est, ut ultrices massa justo vel urna. Mauris orci. Sed non lectus a risus fringilla posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce quis lorem. Vestibulum sodales nonummy neque. Sed sed metus. Praesent turpis mauris, consectetuer sed, eleifend quis, adipiscing eget, nisl. Maecenas lacus. Mauris dictum mollis magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec magna magna, tempor eget, porta vitae, tempor id, nibh. Donec purus. Donec condimentum risus vel tortor. Pellentesque egestas ante sit amet nisi.
</p>
<p>
Integer non velit. Suspendisse porta enim eget sem. Cras tristique, dui quis porttitor scelerisque, nulla enim vehicula eros, at consectetuer turpis diam pulvinar nibh. Sed facilisis tortor. Etiam volutpat magna at magna. Vivamus sem eros, lacinia in, adipiscing quis, imperdiet ac, elit. Nam dignissim. Vestibulum euismod arcu nec nisi. Vestibulum commodo odio a metus. In eget elit a tellus mattis varius. Suspendisse potenti. Phasellus congue. Donec luctus. Praesent a elit sed lorem posuere scelerisque. Etiam in purus sed mi mattis vehicula. Etiam et neque eget felis fringilla imperdiet.
</p>
<p>
Nulla lectus. Sed pretium arcu nec odio. Donec ultricies sapien vel sapien. Pellentesque consectetuer, lacus vel ullamcorper congue, mauris ante nonummy ipsum, vel feugiat augue neque sed nunc. Ut nonummy egestas mi. Sed iaculis. Etiam lobortis felis ac nulla. Aliquam lobortis, odio in volutpat hendrerit, augue ligula placerat ipsum, nec consectetuer ligula turpis vitae arcu. Curabitur cursus. Sed consectetuer nisl sed turpis. Quisque mattis. Nullam tincidunt turpis id nisl. Sed id leo. Praesent nisl massa, facilisis at, fermentum non, ultrices id, mauris. Nunc a lectus a pede feugiat tincidunt. Nulla in nisi vitae sem tempor laoreet.
</p>
</div><!-- fermeture classe=text -->
<p />
<div class="titre">
<p>
Freude, Schoner Gotterfunken,
</p>
<p>
Tochter aus Elysium,
</p>
<p>
Wir betreten, fueurtrunken,
</p>
<p>
Himlische, dein Heiligtum.
</p>
<p>
Deine Zauber binden wieder,
</p>
<p>
was die mode streng geteilt.
</p>
<p>
Alle menschens werden bruder,
</p>
<p>
wo dein sanften Flugen weilt.
</p>
</div><!-- fermeture classe=titre -->
</div> <!-- fermeture class=contenu -->
</div> <!-- fermeture class=conteneur -->
<div class="menu2">
<a href="index.htm" id="accueilnav">Accueil</a> | <a href="produits.htm">Produits</a> | <a href="contact.htm">Contact</a> | <a href="prive/prive.htm">Prive</a>
</div><!-- fermeture class=menu -->
*******************************************************
*******************************************************
<div class="foot" id="piedpage">
<div class="textfoot">
2006 Toulokowitz | tous droits reserves | <a href="#top">Haut de page</a>
</div><!-- fermeture class=textfoot -->
</div> <!-- fermeture class=pied -->
*******************************************************
*******************************************************
</div> <!-- fermeture class=global -->
</body>
<!-- ******************** Fin du body ***************************************-->
</html>
Et voici ma CSS pour IE :
/* ************************ Feuille de Styles CSS pour IE 6 ou lte *********** */
/* ************************ lte : "Less than or equal to" ******************** */
/* ************************ mise en page : elements ************************** */
body {
margin-left: 0px;
background-image: url(../images/fond1.gif);
}
br {
line-height: 10px;
}
.global {
float: none;
width: 800px;
margin-left: auto;
margin: auto;
border: solid 1px;
text-align: left;
margin-top : 0px;
margin-bottom: 25px;
background-color: #ffffff;
}
.bann{
float : left;
width: 800px;
height: 80px;
border-bottom: solid 1px;
border-top: solid 1px;
background-image: url(../images/bann.gif) ;
}
.menu {
background-image: url(../images/menu.gif) ;
float : left;
height: 24px;
width: 800px;
top: 80px;
border-bottom: solid 1px;
text-align: center;
padding-top: 5px;
}
.under {
float : left;
width: 800px;
height: 40px;
top: 110px;
border-bottom: solid 1px;
}
.conteneur {
float : left;
width: 800px;
background-color: #ffffff;
}
.sousmenu {
float : left;
width: 160px;
margin-left: 4px;
margin-right : 7px;
margin-top: 10px;
border: dashed 1px;
padding-top : 10px;
padding-left : 5px;
padding-right : 5px;
padding-bottom : 10px;
background-color: #d5d5d5;
}
.contenu {
float : none;
width: 580px;
margin-left: 0px;
margin-top: 10px;
border: dashed 1px;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background-color: #d5d5d5;
}
.menu2 {
float : left;
height: 24px;
width: 800px;
text-align: center;
padding-top: 5px;
margin-top: 10px;
}
******************************************************
******************************************************
.foot {
float : left;
clear: both;
width: 800px;
height: 24px;
padding-top: 5px;
text-align: center;
background-image: url(../images/foot.gif);
background-repeat: no-repeat;
border-top: solid 1px;
}
*******************************************************
*******************************************************
img {
display: block;
border: none;
}
/* *************************** mise en page : elements - fnal **************** */
/* *************************** mise en page : lien *************************** */
a:link {
line-height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #003366;
text-decoration: none;
font-weight: bold;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #003366;
text-decoration: none;
font-weight: bold;
line-height: 20px;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #d01616;
text-decoration: underline;
font-weight: bold;
line-height: 20px;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: bold;
line-height: 20px;
}
body#accueil a#accueilnav,
body#produits a#produitsnav,
body#contact a#contactnav,
body#privat a#privatnav,
body#phcnb a#phcnbnav,
body#phcc a#phccnav,
body#tlc a#tlcnav,
body#info a#infonav,
body#mobi a#mobinav,
body#conso a#consonav,
body#caisse a#caissenav
body#privatadd a#privataddnav,
body#privatsupp a#privatsuppnav,
body#privatmodif a#privatmodifnav,
body#riso a#risonav {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FF6600;
font-weight:bold;
text-decoration: underline;
}
#piedpage a:link{
line-height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FF6600;
text-decoration: none;
font-weight: bold;
}
#piedpage a:visited {
line-height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FF6600;
text-decoration: none;
font-weight: bold;
}
#piedpage a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #c5060d;
text-decoration: underline;
font-weight: bold;
}
#piedpage a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}
/* *************************** mise en page : texte ************************** */
.titre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
/* color: #e08f25;*/
color: #d01616;
text-decoration: none;
}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
.T {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 40px;
color: #d01616;
font-weight: bold;
}
.namerest {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 40px;
color: #000000;
font-weight: bold;
}
.bureautique {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
.textfoot {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
}
.firstitre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #d01616;
font-weight: bold;
}
.restitre {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
font-weight: bold;
}
Les parties concernées (du moins, censé être concernées) sont encadré par une double ligne de "*".
Le site ICI.
Il me semble que ce bug a commencé avec la mise en place du second menu en bas de page, juste au dessus du pied.
Modifié par TheReverendEVIL (11 Apr 2006 - 14:13)
