28172 sujets

CSS et mise en forme, CSS3

Bug affichage sous IE 7.0

Bonjour !

Dans la réalisation d'un site web, je me heurte a des bugs d'affichage sous IE 7.0 (j'ai même pas regardé IE 6.0 tellement ça me fait peur...)

Si vous le permettez, je voudrais les poster ici :

comme une image vaut mieux qu'un long discours..., voici le premier bug en action :
[img=http://img412.imageshack.us/img412/5639/bug1un1.th.png]

Voici le code html :


<html>

<head>
<title>MonSiteenCSS.com - Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" href="styles_ie7.css" />
</head>


<body>

<div id="global">

<div id="hautpage">
<h1><a href="index.html">MonSiteenCSS<span>.com</span></a></h1>
<h2><a href="index.html">La description bidon <span>de mon site</span> avec un effet <span>de couleur</span></a></h2>


</div><!--Fin HAUTPAGE -->


<div id="menu"><!------Début MENU ------------------------>

<ul id="menu_principal"><!------Début MENU PRINCIPAL------>
	<li id="index"><a href="#">menu1</a></li>
    <li id="fonctionnement"><a href="#">menu2</a></li>
    <li id="delais"><a href="#">menu3</a></li>
    <li id="tarifs"><a href="#">menu4</a></li>
    <li id="demonstrations"><a href="#">menu5</a></li>
    <li id="autres"><a href="#">menu6</a></li>
    <li id="contact"><a href="#">menu7</a></li>
    <li id="connexion"><img src="images/lock.png" width="24" height="24" style="position:absolute; top:-10px; right:5px;"><a href="#">menu8</a></li>

</ul><!------Fin MENU PRINCIPAL--------------------------->



<ul id="nav_outils"><!------Début MENU SECONDAIRE--------->
    <li id="phone"><a href="#"><p><phone>00 00 00 00 00<phone></p></a></li>
    <li id="devis"><a href="#"><p>longmenu1</p></a></li>
    <li id="cahiercharges"><a href="#">
      <p>longmenu2</p></a></li>
</ul><!------Fin MENU SECONDAIRE-------------------------->

</div><!------Fin MENU ----------------------------------->







<div id="contenu">

<p style="text-align:center; width:450px; margin:0 auto; font-weight:bold; font-size:1.2em; padding-bottom:30px;">mon joli texte avec des <span>effets</span> de <span>couleur</span>. Malheureusement il n'est pas centré ! Pourquoi ?</p>

</div>
<!--Fin CONTENT -->





<div id="baspage">
<div class="footer"></div>
<h2><a href="http://www.photollivier.com" target="_blank">Copyright &copy; 2008 - Site réalisé par <span>photollivier.com</span></a></h2>
</div>
<!--Fin BASPAGE -->
</div>
</body>
</html>



et enfin le CSS en relation :

@charset "utf-8";
/* CSS Document */

/*Normalise les marges et le remplissage*/
body, html, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0; padding:0;}
/*Normalise les tailles de polices pour les en-tête*/
h1, h2, h3, h4, h5, h6 {font-size:100%;}
/*Supprime list-style pour les listes*/
ol, ul {list-style-type:none;}
/*Supprime les bordures dans les tableaux*/
table {border-collapse:collapse; border-spacing:0;}

body {background:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center; background:url(images/bg_body.gif);}


div#global {
position:relative;
margin:0 auto;
width:980px;
text-align:left;
background:url(images/bg_body.gif);
}

div#hautpage {
position:relative;
width:980px;
height:200px;
margin:0 auto;
text-align:left;
background:url(images/header_bug.png) top right no-repeat;
}

#hautpage h1 {
position:absolute;
visibility:hidden;
bottom:10px;
left:10px;
font-weight:100;
font-size:1.9em;
text-align:center;
z-index:100;
}
#hautpage a {
text-decoration:none;
color:#000;
}
#hautpage h1 span {
position:absolute;
bottom:0;
color:#fff;
font-size:1;
font-weight:bold;
}

#hautpage h2 {
position:absolute;
top:5px;
right:5px;
font-weight:100;
z-index:100;
}
#hautpage h2 span {
position:relative;
color:#fff;
font-weight:bold;
}


/************************ FOOTER *********************/
div#baspage {
position:relative;
width:980px;
height:80px;
margin:0 auto;
background: url(images/footer_y.png) repeat-x;
}

#baspage p {
position:absolute;
right:40px;
bottom:0px;
color:#000;

}
#baspage a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:0.6em;
text-decoration:none;
color:000;
}

#baspage h2 {
position:absolute;
bottom:5px;
right:5px;
}
#baspage span {
color:#fff;
}
/********************** FIN FOOTER **********************/



/***************************** MISE EN FORME DU CONTENU ******************/
#contenu {
position:relative;
width:970px;
min-height:350px;
margin:0 auto;
background:#FFF;
z-index:20;
padding:30px 0;
border-right:solid 5px #FCE90A;
border-left:solid 5px #FCE90A;
}

#contenu span {
color: #FF6600;
}

.box {
border-right:solid 1px #FCE90A;
border-bottom:solid 1px #FCE90A;
border-left:solid 1px #FCE90A;
font-size:1em;
}

.boxTitre {
text-align:center;
height:40px;
line-height:40px;
font-size:1.2em;
margin-bottom:30px;
background:#FCE90A url(images/box_40px_up_bg.png) repeat-x;
}

.titrePage {
text-align:center;
font-weight:bold;
font-size:1.2em;
padding-bottom:30px;
}
/******************************* FIN CONTENU ****************************/





/******************************* LE MENU PRIMAIRE ***********************/
div#menu {
font:Georgia, "Times New Roman", Times, serif;
position:absolute;
width:980px;
margin:0 auto;
background:#FCE90A;
z-index:200;
}

div#menu a {
font-size:10px;
color:000;
}

ul#menu_principal {
position:absolute;
bottom:0; /* Collé à #contenu */
left:80px;
width:auto;
z-index:20;
}
#menu_principal li {
float:left;
width:100px;
text-align:center;
display:inline;
padding-right:5px; !important /*ESPACEMENT HORIZONTAL DES ONGLETS DU MENU !*/
}

#menu_principal a {
display:block;
height:40px;
text-decoration:none;
background:url(images/tabs_passive_y.png) no-repeat;
line-height:40px; /* Quand égal à la hauteur du bloc, centre verticalement le texte */
font-weight:bold;
color:#FFF;
}
#menu_principal a:hover {
display:block;
text-decoration:none;
background:url(images/tabs_active_y.png) no-repeat;
height:40px;
line-height:40px; /* Quand égal à la hauteur du bloc, centre verticalement le texte */
color:#FFF;
}


/**** MENU SECONDAIRE : CAHIER DES CHARGES / DEVIS GRATUIT / LOGIN / MOT DE PASSE ****/
#nav_outils {
z-index:15; 
}

#nav_outils a {
text-decoration:none;
display:block;
width: 100%;
height: 100%;
}

li#phone {
position:absolute;
background:url(images/phone.png) top right no-repeat;
right:0;
bottom:100px;
width:200px;
height:59px;
z-index:25;
}

#phone p {
position:relative;
width:140px;
left:0;
top:40%;
text-align:right;
}
#phone phone { /* non ce n'est pas une répétition */
font-size:12px;
font-weight:bold;
color:000;
}

#devis {
position:absolute;
background: url(images/tabs_big_passive_y.png) top left no-repeat;
bottom:0;
right:225px;
width:200px;
height:60px;
line-height:20px;
}
#devis a {
text-align:center;
color:#FFF;
font-weight:bold;
}

li#devis a:hover {
background:url(images/tabs_big_active_y.png);
text-decoration:none;
font-weight:bold;
text-align:center;
display:block;
width:100%;
height:100%;
color:#fff;
}

#cahiercharges {
position:absolute;
background: url(images/tabs_big_passive_y.png) top left no-repeat;
bottom:0;
right:425px;
width:200px;
height:60px;
line-height:20px;
color:FFF;
}
#cahiercharges a {
text-align:center;
color:#FFF;
font-weight:bold;
}

#cahiercharges a:hover {
background:url(images/tabs_big_active_y.png);
text-decoration:none;
text-align:center;
font-weight:bold;
display:block;
width:100%;
height:100%;
color:#fff;
}


Donc, comme vous avez pu le voir :
- Les onglets du menu sont "coupés"
- Le #contenu a un problème de décalage.
- le paragraphe dans mon contenu n'est pas centré sur la page.

Rien que ça...

Y'a t'il un moyen "d'apprendre" ces bugs ou seule l'expérience permet d'en venir à bout ?

Merci d'avance !
Modifié par Ollivier (26 Mar 2008 - 09:53)
Par l'alignement :
C'est à cause de l'entête de ta page HTML
un grand classique Smiley cligne

Regarde si ça règle les autres problèmes ou reviens me voir.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<head>
<title>MonSiteenCSS.com - Accueil</title>
<link rel="stylesheet" media="screen" type="text/css" href="styles_ie7.css" />
</head>


[EDIT]
J'ai regardé ton code, est il faut tout reprendre!

Tu utilises à outrance 
position:absolute;
et ce n'est pas de cette façon que l'on code.
Avant de "fragmenter" ta page pour y insérer des "blocs", il faut créer un contenant "mère", tu ne peux pas en faire l'économie.

Ici, un exemple de page codée proprement, le <div id="contenant">, se charge de définir la largeur de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
*{margin:0; padding:0}

body {background:#CCCC99;}

#contenant {
width:80%;
margin: auto;
background:#FFCC00;
} 

#bandeau {
background:#990000;
height:200px;
} 

#bandeau {
background:#990000;
height:200px;
position: relative; /* Nécessaire afin d'éviter que la boite à onglet ne s'affiche en bas du navigateur */
} 

#boiteaonglets {
	position: absolute; /* Nécessaire Pour afficher la boite à onglet dans en bas à gauche du bandeau */
	left: 0px; /* à gauche */
	bottom: 0px; /* en bas */
	background:#99CC00;
	width:auto;
}
#footer {background:#CC9900;}
	

-->
</style>
</head>

<body>
<div id="contenant">

<div id="bandeau"><p>Mon bandeau</p>
<div id="boiteaonglets">Ici mes onglets</div>
</div> 

<div id="contenu">
<p>Contenu</p>
</div>

<div id="footer">ici, mon footer</div>

</div> <!-- Fin Contenant -->

</body>
</html>


voilà comment coder...

Attends donc la confirmation de Florent, je raconte peu être des bêtises (^-^)
Modifié par MasterPingouin (26 Mar 2008 - 11:36)
pas sur de tout comprendre...

tout d'abord, qu'est-ce qu'il a mon entête ? C'est celui de Dreamweaver CS3 par défaut... Pourquoi est-il bugué ?

J'ai un div global positionné en relatif (dans le flux donc...) contenant tous mes autres div.

Une erreur que j'ai fait est de redéfinir à chaque fois un position:relative; à chacun de mes contenant car ils héritent automatiquement du parent, vrai ?

Mais après, le positionnement absolu est parfois nécessaire, et même souvent... tu le verras dans les autres pages que je vais soumettre...

Donc j'ai enlevé toutes les propriétés:
position:relative;
width:980px;
margin: 0 auto;

à chaque contenu enfant, et ça règle le problème du décalage de #contenu, MERCI !

Maintenant, le menu !
Pourquoi les onglets sont ils coupés ?

Et surtout pourquoi mon texte à l'intérieur du #contenu n'est pas centré ?

Merci beaucoup de m'aider...

EDIT : j'ai essayé de changer l'entête, ça ne règle pas l'alignement... Smiley decu
Modifié par Ollivier (26 Mar 2008 - 12:09)
bon, au niveau du menu, il bug à cause de la propriété padding-right:5px; que je mise pour "aérer" les onglets du menu..., le plus simple est de la supprimer, je prépare les autres...
Chose amusante, j'ai remplacé mon entête par ton entête, et j'ai maintenant mon menu qui s'est barré on ne sait où... :

[img=http://img511.imageshack.us/img511/1650/bug2hp2.th.png]

De plus j'ai une "puce" devant un des "longmenu" et devant mon numéro de téléphone en haut à droite, pourquoi pas ailleurs ?

Par contre, le site marche plutôt bien sous IE7 maintenant, merci.

Une idée pour le reste ?

Je vais attaquer les antidépresseurs dans pas longtemps...
Modifié par Ollivier (26 Mar 2008 - 15:29)
j'ai supprimé tous mes commentaires du genre :

<!------Fin MENU PRINCIPAL--------------------------->

Et ça remarche !

Pourquoi ? ça par contre ça m'intéresse...
<!------Fin MENU PRINCIPAL---------------------------> n'est pas une commentaire html réglementaire

<!-- Fin MENU PRINCIPAL --> Ça c'est réglementaire

Sinon, il faut toujours commencer par l'entête que je t'ai filé, c'est pour être aux normes vis à vis du W3C.
Je ne me suis pas amusé à passer ta page par le validateur W3C, mais il y a des chances pour qu'elle soit blindé d'erreurs.

Quand on code un site en XHTML/CSS, on le fait souvent avec un éditeur de texte, Dreamweaver et là pour rendre la chose plus agréable à l'œil.


Contrôle le rendu de ta page sous IE6 et Firefox, tu aura quelques surprises désagréables.

Le meilleur moyen d'apprendre c'est de naviguer sur les tutoriels du site Smiley cligne
Modifié par MasterPingouin (26 Mar 2008 - 22:12)
Sujet clos
Aller à