Re: [debutant] [HS] Css, firefox et IE

Thu, 09 Mar 2006 01:19:43 -0800

galorbe a écrit :
Bonjour les gens.
Ce sujet est complètement hors sujet, rien à voir DU TOUT avec Mandriva (voire Linux), mais plutot avec le HTML et la fabrication de site oueb. Donc, d'abord mes plus plates excuses à tous. J'ajouterai que ça fait deux jours que je me prend la tete dessus, sans trouver le truc. Bref, voila mon problème: J'ai fais un petit site internet pour une asso de vers chez moi. Je l'ai fais avec quanta+ , avec feuilles de styles css etc...
Je le verifie chez moi, sous linux, avec firefox ou autre navigateurs: ça passe sans aucun problèmes. Je verifie sous windoz, avec firefox, sans prob!
Par contre, des que je regarde avec cette s*******perie de internet explorer, c'est la grosse cata: mon menu chevauche ma page principale, les dimensions ne sont plus respectées, c'est l'agonie!!!.
J'ai cherché toute la journée le probleme sans resultats, j'ai meme reussi à le validé en W3C sans prob!
La vraiment, je ne vois pas.
Je sais que parmis vous il y a des adeptes du html, et qui en plus sont vraiment super beaux, vach'ment sympas et tout et tout... s'ils pouvaient y jeter un oeil pour voir... se serait super cool mega top class!
Voila l'adresse:
http://www.lacohue.org
Il n'y a pas de php, ni de flash ou java... juste du html tres simple (suis pas un genie!)
Merci beaucoup

J'oubliais, si vous voulez voir la feuille de style, elle est a la base du site, c'est a dire "http://www.lacohue.org/stylecohuetom.css"
J'ai meme preparé un petit zip (page d'accueil, images et css) si vous tester chez vous: http://www.lacohue.org/img/sitecohue.zip
Voila... je vous remercie. 


=========================================
Vous souhaitez acquerir votre Pack ou des Services Mandriva?
Rendez-vous sur "http://store.mandriva.com".
Rejoignez le club mandrake : http://www.mandrivaclub.com
=========================================
A premiere vue, cela provient du box model de IE - qui déconne...

Essaie ceci: déplace la partie html concernant le menu vers le haut, qu'elle soit déclarée avant le corps de page. Ceci devrait résoudre le problème du menu. Exemple sur ta page principale:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>lacohue.org</title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta name="AUTHOR" content="[EMAIL PROTECTED]">
  <meta http-equiv="content-language" content="fr">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="KEYWORDS" content="la cohue, concert, musique, morvan">

  <link rel="stylesheet" type="text/css" href="">"css.css">
</head>
<body>
<!--menus de gauche________________________________________________________________________________________________________________-->

	<div id="gauche">
		<IMG src="">"imgsite/logocohue.jpg" width="110" height="110" align="middle" border="0" alt="logocohue" vspace="3">
		<div class="menu">
    			<p><a href="">"index.html">ACCUEIL</a></p>

    			<p><a href="">"concert.html">CONCERT</a></p>
    			<p><a href="">"prevente.html">PREVENTE</a></p>
    			<p><a href="">"avenir.html">A VENIR</a></p>
  		</div>

		<p class="menu"><u>LA COHUE</u>
		<a href="">"projet.html">PROJET</a>

		<a href="">"statut.html">STATUTS</a>
		<a href="">"contact.html">CONTACT</a>
		<a href="">"adherer.html">ADHERER</a></p>
	
		<p class="menu"><u>DIVERS</u>
		<a href="">"photo.html">PHOTOS</a>
		<a href="">"lien.html">LIENS</a></p>

		<p class="menu"><u>EMAILS</u>
		<a href="">"mailto:[EMAIL PROTECTED] la cohue">EMAIL</a>
		<a href="">"mailto:[EMAIL PROTECTED] la cohue">WEB</a></p>
		<p class="menu">Mise à jour:<br>6 mars 2006</p>

	</div>

<div id="conteneur">
	<div id="banniere"><img src="">"imgsite/bancohue.png" width="780" height="100" border="0" alt="banniere"></div>

<!--page principale_______________________________________________________________________________________________________________-->

	<div align="left" id="page">

	<IMG class="imdroite" src="">"img/accueil.jpg" width="228" height="350" align="right" border="1" alt="bouzouki" hspace="10">

		
<h3>Bonjour et bienvenue.</h3>

		<div class="citation">
<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COHUE</strong>, subst. fém.<br>
Réunion tumultueuse d'un grand nombre de personnes; foule confuse, désordonnée. "Quelle cohue! Cohue de piétons, cohue tumultueuse. Quelle imprudence (...) de traverser une telle cohue! On dirait une émeute" (A. FRANCE, L'Orme du mail, 1897, p. 189). "C'était une cohue furieuse et hurlante. (...). Toute cette foule criait, chantait, braillait" (MAUPASSANT, Contes et Nouvelles, t. 1, La Femme de Paul, 1881, p. 1217).
		</div><br><br>

<strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Les filles de la cohue vont frapper fort.<br>Elles ont retroussé leur manches et vous ont concocté de belles surprises endiablées.<br>
Ne faites pas attention à ce qu'ils disent dans les dictionnaires et venez gouter la douce cohue musicale!<br><br>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Nous espérons que vous trouverez ici toutes les informations dont vous aurez besoin, n' hésitez pas à nous contacter.
Et au plaisir de vous voir très bientôt.</strong><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;L'équipe


	</div>




<!--pied de page______________________________________________________________________________________________________-->

	<div id="pied" align="center">&#169; 2006 Galorbe - <a href="">"http://galorbe.free.fr" target="_blank">site Galorbe</a> - <a>contact mail </a>- Réalisé sous LINUX-Mandriva2006 / Quanta+</div>

</div>



</body>
</html>


Le problème vient de ce que un DIV à position absolue se voit affecter
la position de son premier enfant (ici, "page"); donc si tu gardes le
menu dans 'conteneur', il se fait 'pousser' sur le texte.



La solution (qui permet à IE de fonctionner correctement et aux autres
navigateurs d'afficher toujours la même chose), c'est de mettre le menu
avant 'conteneur'.



Pour le reste remplace ta feuille de style par ceci:




body {
    background-color : #ffffff;
    color : #671184;
    font-family : Arial,Helvetica,sans-serif,Verdana;
    font-size : medium;
  }


#conteneur {
    position: absolute; 
    width: 100%;
  }

/* Les ID pour div id="gauche"------------------------------------------------------------------------------------------ */


#gauche {
    padding-bottom : 0px;
    padding-left : 3px;
    padding-right : 5px;
    padding-top : 0px;
    position : absolute;
    top : 0px;
    width : 118px;
  }


#gauche p {
    font: bold 12px Arial, Helvetica, sans-serif;
    text-align: center;
  }

/* Classe menu------------------------------------------------------------------------------------------------------------------  */


.menu {
    background : #E2E2FF;
    border: 1px solid #0E16A4;
    margin-bottom : 3px;
    margin-left : 0px;
    margin-top : 0px;
    width : 118px;
  }


.menu a {
    color: #C00003;
    text-decoration: none;
    width: 100%;
    display: block;
    padding: 2px 0px 3px;
  }


.menu p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0px;
  }


.menu a:hover {
    color: #FFFFFF;
    background: #A9A9BF;
  }


#page {
    background-image : url('imgsite/fondbulle.png');
    background-repeat : repeat;
    border : 1px solid #0E16A4;
    font-size : 12px;
    margin-left : 130px;
    margin-right : 20px;
    margin-top : 16px;
    min-height : 351px; /*non reconnu par IE - voir hack suivant */
    padding : 10px 20px 20px 20px;
  }

* html #page {height: 351px;} /*comme min-height pour IE seulement*/

#banniere {
    height : 100px;
    width : 780px;
    margin : auto;
  }


h5 {
    color : #d37a06;
    font-size : 15px;
    text-decoration : underline;
  }


h4 {
    color : #931900;
    font-size : 18px;
    font-weight : bold;
    text-decoration : underline;
  }


#pied {
    background-color : #e2e2ff;
    border : 1px solid #0e16a4;
    font-size : 10px;
    height : 12px;
    margin-left : 130px;
    margin-right : 20px;
    margin-top : 3px;
    padding-bottom : 5px;
  }


#pied a {
    color : #671184;
    text-decoration : none;
  }


.imdroite {
    float : right;
  }


.citation {
    color : #878787;
    font-size : 10px;
    font-style : italic;
  }





Voilà; tu auras probablement quelques petits ajustements à faire, mais
c'est déjà mieux.



Mitch




=========================================
Vous souhaitez acquerir votre Pack ou des Services Mandriva?
Rendez-vous sur "http://store.mandriva.com";.
Rejoignez le club mandrake : http://www.mandrivaclub.com
=========================================

Répondre à