Partage

J'ai revu la structure de mon site....

... mais toujours problèmes entre les navigateurs :( HELP !

Sujet résolu

6 septembre 2006 à 14:43:07

Bonjour,

Je sais que je suis un peu chiant

Mais j'ai revu ma façon de faire mon site par rapport à mes premiers postes, du coup j'ai résolu tout les problèmes dont je vous avez parlé mais voilà que d'autres font leur apparition ! J'en peux plus !

Alors dabord la structure de mon site (en block):

Image utilisateur

Le principe en fait du site c'est qu'à chaque rubrique, l'entete et le pied de page changent pour un autre visuel.

Mon premier problem :

Image utilisateur

Mon second problem :

Image utilisateur

Alors ici c'est une image insérée dans le block de l'entete dans le code xHTML, contrairement à l'autre qui est une image en background dans le css ! :-°

Voici mes codes :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" media="screen" type="text/css" title="contrees" href="css/contrees.css" />
   <title>...(¯`*•.¸(¯`*•.¸ il'Éã - Les Contrées d'un Site ¸.•*´¯)¸.•*´¯)...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>



<div id="en_tete">

</div>



<div id="menu">
<div class="element_menu_tete">

</div>

<div class="element_menu">
<ul>
   <li><a href="index.html" title="Introduction">Intro</a></li>
<li><a href="xhtml/nouvelles.html" title="News">Nouvelles</a></li>
<li><a href="xhtml/dates.html" title="Dates de concerts">Sur la route</a></li>
<li><a href="xhtml/naissance.html" title="Biographie">Naissance</a></li>
<li><a href="xhtml/recreation.html" title="Musiques et videos">Récréation</a></li>
<li><a href="xhtml/imaginaire.html" title="Photos et illustrations">Imaginaire</a></li>
   <li><a href="xhtml/ailleurs.html" title="Liens">Ailleurs</a></li>
   <li><a href="xhtml/shop.html"title="Pour se procurer l'album !">shop</a></li>
   <li><a href="xhtml/contacts.html"title="Où nous joindre">Contacts</a></li>
</ul>
</div>

<div class="element_menu_pied">

</div>

</div>

   <div id="sous_menu">
<div class="element_sous_menu_tete">

</div>

<div class="element_menu">

</div>

<div class="element_sous_menu_pied">

</div>

</div>



<div id="corps">
<p>
   <img src="general/lutin.gif" alt="lutin"/>
</p>


<h3>Introduction</h3>

<p>
   <br />
La vie est une absurdité remplie de fous aux visages défigurés par le temps...<br />
   Mon refuge est un arbre, un ruisseau, un oiseau...<br />
   Il est en chacun de nous une endroit où l'on conjure le sort...<br />
   Ici est le mien...<br />
   <br />
   <br />
   <br />

</p>
</div>



<div id="pied_de_page">

</div>

</body>
</html>

body
{
width: 720px;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
background-image: url("../general/fond3.jpg");
}

/* L'en-tête */

#en_tete
{
width: 480px;
height: 263px;
background-image: url("../general/en_tete_index.jpg");
background-repeat: no-repeat;
margin: 0px;
margin-left: 120px;
}

/* Le menu */

#menu
{
float: left;
width: 120px;
margin: 0px;
margin-top: 10px;
}

.element_menu_tete
{
background-image: url("../general/menu_top.jpg");
height: 81px;
background-repeat: no-repeat;
}

.element_menu
{
background-image: url("../general/menu_center.jpg");
background-repeat: repeat-y;
margin-bottom: 0px;
}

.element_menu_pied
{
background-image: url("../general/menu_bottom.jpg");
height: 15px;
background-repeat: no-repeat;
}

#sous_menu
{
font-size: 0.8em;
float: right;
width: 120px;
margin: 0px;
margin-top: 100px;

}

.element_sous_menu_tete
{
background-image: url("../general/sous_menu_top.jpg");
height: 54px;
background-repeat: no-repeat;
}

.element_sous_menu_pied
{
background-image: url("../general/sous_menu_bottom.jpg");
height: 51px;
background-repeat: no-repeat;
}

/* Quelques effets sur les menus */

.element_menu ul
{
list-style-image: url("../general/puce.gif");
padding: 0px;
padding-left: 30px;
margin: 0px;
}

.element_menu a
{

text-decoration: none;
color: #dd9f54;
font-style: italic;
}

.element_menu a:hover
{
text-decoration: underline;
color: #3399ff;
}

/* Le corps de la page */

#corps
{
margin: 0px;
margin-left: 120px;
margin-right: 120px;
padding: 10px;

color: #3d562e;
background-image: url("../general/motif3.jpg");
background-repeat: repeat-y;

}

#corps h2
{
color: #3d562e;
text-align: center;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

#corps h3
{
color: #990000;
text-align: center;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

#corps p
{
text-align: center;
font-size: 0.7em;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

a img
{
border: none;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
margin: 0px;
margin-left: 120px;
margin-right: 120px;
width: auto;
height: 184px;
padding: 0px;

text-align: center;

color: #B3B3B3;
background-image: url("../general/pied_index.jpg");
background-repeat: no-repeat;
}

Asphator

6 septembre 2006 à 15:07:14

Salut

Je ne sais pas vraiment.
Pour ton 2e problème, il est possible que cela vienne de ton padding: 10px; mais ca m'étonnerais fortement

Only limits are ours...

Toubo

6 septembre 2006 à 20:18:00

Bein nan ce n'est pas ça le problème. Personne n'a un idée ? J'ai mal expliqué ? Si vous voulez plus d'info demandé

J'suis seul au monde ! Lol Est-ce normal ou pas ? C'est trop moche je suis si prêt du but

SVP

Candygirl

6 septembre 2006 à 22:40:33

Tu mattes ton site avec IE ?

Pour ton premier problème, une petite recherche sur Google concernant le bug "3px jog" devrait t'éclairer un peu plus(une explication en anglais)

Pour le 2ème, ajouter un petit

* {margin:0;padding:0;}

En haut de css pour être sûr de bien virer tous les règlages du nav par défaut. Autrement tester de coller ce qui suit l'image directement à la suite de la balise img, sans espace ou retour de ligne dans le code, ou encore attribuer un display:block à l'image ou encore jouer sur le line-height. Difficile de donner une réponse précise sans le code correpondant.

Toubo

8 septembre 2006 à 0:38:23

Merci beaucoup d'avoir répondu ça me fait trop plaisir, ça semble être ça la solution mais malheureusement je ne pige pas grand chose à l'anglais et je n'ai pas trouvé d'article en français qui explique correctement le truc

Ca m'énerve !

Pour l'autre soucie, je suis désolé j'ai rien capté, j'suis un peu nul c'est pourquoi je suis ici dailleur

je m'excuse

J'ai donné les codes mais voici une page qui foire par exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" media="screen" type="text/css" title="contrees" href="../css/contrees.css" />
   <title>...(¯`*•.¸(¯`*•.¸ il'Éã - Les Contrées d'un Site ¸.•*´¯)¸.•*´¯)...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>



<div id="en_tete">
<img src="nouvelles/en_tete_nouvelles.jpg" alt="en tete"/>
</div>



<div id="menu">
<div class="element_menu_tete">

</div>

<div class="element_menu">
<ul>
   <li><a href="../index.html" title="Introduction">Intro</a></li>
<li><a href="nouvelles.html" title="News">Nouvelles</a></li>
<li><a href="dates.html" title="Dates de concerts">Sur la route</a></li>
<li><a href="naissance.html" title="Biographie">Naissance</a></li>
<li><a href="recreation.html" title="Musiques et videos">Récréation</a></li>
<li><a href="imaginaire.html" title="Photos et illustrations">Imaginaire</a></li>
<li><a href="ailleurs.html" title="Liens">Ailleurs</a></li>
   <li><a href="shop.html"title="Pour se procurer l'album !">shop</a></li>
   <li><a href="contacts.html"title="Où nous joindre">Contacts</a></li>
</ul>
</div>

<div class="element_menu_pied">

</div>

</div>

   <div id="sous_menu">
<div class="element_sous_menu_tete">

</div>

<div class="element_menu">
<ul>

</ul>
</div>

<div class="element_sous_menu_pied">

</div>

</div>



<div id="corps">
<h4>Le 12 septembre 2006</h4>

<h5>Bienvenue !</h5>

<p>il'Éã est heureuse de vous accueillir sur son tout nouveau site ! Tout beau, tout propre ! Enfin, on fait ce que l'on peut ! lol. Au fil des prochains jours, les rubriques vont se remplir ne vous inquiétez pas ! De nouvelles rubriques feront même leur apparition.
</p>

<h5>Il est là, le CD d' il'Éã !!!</h5>

<p> Et oui notre actualité c'est aussi l'enregistrement d'un CD démo de 7 titres masterisé madames et messieurs nan mais ! Pour plus d'informations ou pour vous procurer ce joyaux musical (oui bein faut bien se vendre ! lol) rendez-vous dans la rubrique Shop. Vous êtes dailleurs en train d'écouter quelques extraits si votre bel ordinateur est muni d'enceintes !
<br/ >
</div>



<div id="pied_de_page">

</div>

</body>
</html>

Merci encore pour le temps que vous me consacrez

Toubo

9 septembre 2006 à 13:06:27

Bonjour existe -t-il un tutorial en francais SVP sur le 3px jog ? merci

Toubo

10 septembre 2006 à 2:02:52

Je ne perds pas espoir ! Up !

Candygirl

10 septembre 2006 à 13:49:02

C'est bien de persévérer

Perso, plutôt que me prendre la tête avec ce bug je reverrais ma construction pour qu'il n'apparaisse pas. Tu utilises le margin pour positionner ton contenu; cette technique n'est vraiment intéressante que lorsque tu dois éviter de donner une taille à ton contenu ce qui n'a pas d'intérêt chez toi vu la largeur fixe de ton contenu.

Une manière simple (pas forcément le plus optimum) pour éviter l'apparition du bug sur ta structure serait de faire ainsi:

- Tu rejoutes, dans ton html, un div ("contenu" pour mon exmple) englobant ton #corps et #pied_de_page:

- Dans ton css tu ajoutes:

#contenu {width:480px; float:left;}

et tu enlèves les marges gauches et droites de ton #corps et #pied_de_page<code type="css"></code>

Et ton site devrais maintenant être correcte autant sur IE que ff.

Une autre option aurait été de positionner tes menu en absolu, par exemple.

Autrement as-tu résolu ton problème d'espace sur ton image avec les pistes que je t'ai données plus haut ou non?

Toubo

10 septembre 2006 à 22:44:40

Coucou mille merci pour ton aide, je mets beaucoup de temps à répondre car j'ai beaucoup de mal à comprendre ! hihi. Alors grâce à toi je crois que j'ai réussi mais je ne sais pas si j'ai fais ce que tu as demandé ? Est-ce que tu pourrais regarder et me dire si j'ai bien fait comme tu as dit ? Puis je sais que je te demande beaucoup, mais en fait j'aimerais comprendre ce que l'on vien de faire, on est sur le site des zéros et vraiment la je ne pige pas la manoeuvre, pourquoi il n'y a plus le bug des 3px ? Je t'avoue que je suis complètement perdu dans mon code à force d'en mettre puis d'en enlever je ne sais plus si il y a des chose en trop ou pas c'est le bordel quoi :s lol

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<link rel="stylesheet" media="screen" type="text/css" title="contrees" href="../css/contrees.css" />
<title>...(¯`*•.¸(¯`*•.¸ il'Éã - Les Contrées d'un Site ¸.•*´¯)¸.•*´¯)...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>



<div id="en_tete">
<img src="intro/en_tete_intro.jpg" alt="en tete"/>
</div>



<div id="menu">
<div class="element_menu_tete">

</div>

<div class="element_menu">
<ul>
<li><a href="intro.html" title="Introduction">Intro</a></li>
<li><a href="nouvelles.html" title="News">Nouvelles</a></li>
<li><a href="dates.html" title="Dates de concerts">Sur la route</a></li>
<li><a href="naissance.html" title="Biographie">Naissance</a></li>
<li><a href="recreation.html" title="Musiques et videos">Récréation</a></li>
<li><a href="imaginaire.html" title="Photos et illustrations">Imaginaire</a></li>
<li><a href="ailleurs.html" title="Liens">Ailleurs</a></li>
<li><a href="shop.html"title="Pour se procurer l'album !">shop</a></li>
<li><a href="contacts.html"title="Où nous joindre">Contacts</a></li>
</ul>
</div>

<div class="element_menu_pied">

</div>

</div>

<div id="contenu">
<div id="corps">
<h3>Introduction</h3>

<p>
<img src="intro/fee.gif" alt="fée"/><br />
La vie est une absurdité remplie de fous aux visages défigurés par le temps...<br />
Mon refuge est un arbre, un ruisseau, un oiseau...<br />
Il est en chacun de nous une endroit où l'on conjure le sort...<br />
Ici est le mien...<br />
<br />

</p>
</div>

<div id="pied_de_page">
<img src="intro/pied_intro.jpg" alt="pied"/>
</div>
</div>

<div id="sous_menu">
<div class="element_sous_menu_tete">

</div>

<div class="element_menu">

</div>

<div class="element_sous_menu_pied">

</div>

</div>

</body>
</html>

body
{
width: 720px;
margin: auto;
margin-top: 0px;
margin-bottom: 0px;
background-image: url("../general/fond3.jpg");
}

/* L'en-tête */

#en_tete
{
width: 480px;
height: 263px;
background-image: url("../general/en_tete_index.jpg");
background-repeat: no-repeat;
margin: 0px;
margin-left: 120px;
}

/* Le menu */

#menu
{
font-size: 0.9em;
float: left;
width: 120px;
margin: 0px;
margin-top: 0px;
}

.element_menu_tete
{
background-image: url("../general/menu_top.jpg");
height: 81px;
background-repeat: no-repeat;
}

.element_menu
{
background-image: url("../general/menu_center.jpg");
background-repeat: repeat-y;
margin-bottom: 0px;
}

.element_menu_pied
{
background-image: url("../general/menu_bottom.jpg");
height: 15px;
background-repeat: no-repeat;
}

#sous_menu
{
font-size: 0.8em;
float: right;
width: 120px;
margin: 0px;
margin-top: 100px;

}

.element_sous_menu_tete
{
background-image: url("../general/sous_menu_top.jpg");
height: 54px;
background-repeat: no-repeat;
}

.element_sous_menu_pied
{
background-image: url("../general/sous_menu_bottom.jpg");
height: 51px;
background-repeat: no-repeat;
}

/* Quelques effets sur les menus */

.element_menu ul
{
list-style-image: url("../general/puce.gif");
padding: 0px;
padding-left: 30px;
margin: 0px;
color: #ffffff;
}

.element_menu a
{

text-decoration: none;
color: #dd9f54;
font-style: italic;
}

.element_menu a:hover
{
text-decoration: underline;
color: #3399ff;
}

#contenu {width:480px; float:left;}

/* Le corps de la page */

#corps
{
margin: 0px;
padding: 10px;

color: #3d562e;
background-image: url("../general/motif3.jpg");
background-repeat: repeat-y;

}

#corps h2
{
color: #990000;
text-align: center;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

#corps h3
{
color: #990000;
text-align: center;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

#corps h4
{
color: #990000;
text-align: center;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

#corps h5
{
color: #3d562e;
text-align: center;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

#corps p
{
text-align: center;
font-size: 0.7em;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
}

a img
{
border: none;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

table /* Le tableau en lui-même */
{
max-width: 440px;
margin: auto; /* Centre le tableau */
border: 1px solid black; /* Bordure du tableau avec effet 3D (outset) */
border-collapse: collapse; /* Colle les bordures entre elles */
}

th /* Les cellules d'en-tête */
{
background-color: #3f0800;
border: 1px solid black;
color: #dd9f54;
font-size: 0.9em;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
padding: 5px;
}

td /* Les cellules normales */
{
border: 1px solid black;
font-family: georgia,"Arial Black", Arial, Verdana, serif;
font-size: 90%;
text-align: center; /* Tous les textes des cellules seront centrés*/
padding: 3px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}

#pied_de_page
{
margin: 0px;
width: auto;
height: 184px;
padding: 0px;

text-align: center;

color: #B3B3B3;
background-image: url("../general/pied_index.jpg");
background-repeat: no-repeat;
}

Alala bein je viens de trouver encore grâce a toi pour le second probleme ! J'avais écris:

au lieu de :

Fallait tout coller :s le truc de fou ! Est-ce que l'on peut m'expliquer pourquoi ?

Parcontre mon pied de page ne touche plus le bas il y a aussi une ptite marge qui apparait j'ai essayé la methode de collé mais rien ne fonction c'est normal ?

Candygirl

11 septembre 2006 à 15:27:48

Oui, c'est bien ça que je t'ai proposé. le bug des 3px n'apparaît pas parce qu'on a changé de configuration: ton corps et ton footer ne se trouvent plus dans le flux normal (situation d'apparition du bug) mais en float à côté de ton menu (pas de 3px bug).

Ton pied de page qui ne touche plus c'est pas normal, à moins que je ne comprenne pas vraiemnt ton problème... Si tu diminues ta fenêtre en hauteur que tu doives scroller pour aller jusqu'en bas, ton pied de page ne touche-t-il pas le bas de la fenêtre sans espace ? Avec le code ci-dessus (et une couleur de fond à la place de l'image), je ne vois pas de marge.

Le truc de tout coller, je ne sais pas trop t'expliquer. C'est déjà un truc qui pouvait poser problème avec le montage en tableau. Est-ce peut-être dû à l'interprétation du line-height si IE croit qu'il y a autre chose que l'image ? Pure spéculation...

Toubo

11 septembre 2006 à 23:26:53

Oki merci pour les explications !
Et oui ta bien compris le problème pour le pied de page ca fait la meme chose dans firefox ça touche plus le bas

Toubo

12 septembre 2006 à 22:14:37

Up !

Candygirl

13 septembre 2006 à 12:10:45

Je ne saois pas trop quoi te dire vu que le code que tu as donné ci-dessus ne produit aucun espace chez moi, ni sur ie ni sur FF... Tu es sûr que ton image de fond du pied_de_page fait bien 184px de haut et pas moins ?

Autrement si tu as un lien à donner pour observer le problème?

Toubo

13 septembre 2006 à 14:21:48

Oui je suis sur de la taille de l'image, je te donnerais l'adresse quand ça sera un ti peu en ligne, encore merci