28172 sujets

CSS et mise en forme, CSS3

Probleme version IE et FF

Bonjour,

J'ai developpé tout mon site Internet explorer 6.
J'ai essyé de voir le même site en internet explorer 7. A ma grande surprise, toute la forme est depalcé. Le menu de navigation complement deformé.

J'utilise des DIV pour les differentes sections du site.

Comment faut il rendre le site independant des versions. En plus en FireFox, j'ai aussi un site complement deformé.

Merci de votre aide,
Bonjour et bienvenue sur Alsacréations Smiley smile ,

Sans une page en ligne il va être difficile de te venir en aide Smiley cligne
Merci pour votre réponse,

voici le css utilisé

#conteneur
{
    MARGIN: 2px auto 0px;
    WIDTH: 860px;
    POSITION: relative;
    BACKGROUND-COLOR: #dddddd;
	BACKGROUND-COLOR: #CC0000;
	POSITION: absolute;
	border-width: 2px; 
	border-style: dotted;
	border-color: red;
}

#header
{
    HEIGHT: 140px;
	WIDTH: 860px;
	MARGIN-TOP: 1px;
	MARGIN-LEFT: 1px;
    BACKGROUND-COLOR: #CC0000;
	POSITION: absolute;
	border-width: 2px; 
	border-style: dotted;
	border-color: red;
}

#centre
{   MARGIN-LEFT: 150px;
    MARGIN-RIGHT: 150px;
	WIDTH: 560px;
    MARGIN-TOP: 145px;
    MARGIN-BOTTOM: 5px
	BACKGROUND-COLOR: #006600;
    POSITION: absolute;
}
#gauche
{   
    MARGIN-TOP: 145px;
    MARGIN-BOTTOM: 5px;
	WIDTH: 140px;
	HEIGHT: 140px;
	MARGIN-LEFT: 5px;
    BACKGROUND-COLOR: #ffffff;
    POSITION: absolute;
}
#droite
{
    MARGIN-LEFT:700px;
	MARGIN-TOP: 145px;
    MARGIN-BOTTOM: 5px;
	HEIGHT: 140px;
    /*MARGIN-RIGHT: 5px;*/
    WIDTH: 140px;
	BACKGROUND-COLOR: #ffffff;
    POSITION: absolute;
}
#pied
{
    MARGIN-BOTTOM: 0px;
    HEIGHT: 20px;
	WIDTH: 860px;
    BACKGROUND-COLOR: #FF9933;
	POSITION: absolute;
}


Merci d'avance,
Modifié par Felipe (21 Dec 2008 - 17:58)
Merci pour la réponse,


<!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="fr" lang="fr">
<HTML>
 <HEAD>
  <TITLE> websote </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">

  <link rel="stylesheet" type="text/css" href="menu_css.css" />

 </HEAD>

 <BODY>
  <DIV ID="conteneur">
   
	 <DIV ID="header"> entete site
     </DIV>
	  <DIV ID="gauche"> gauche site (menu de naviga)
     </DIV>
	  <DIV ID="centre"> centre page 
     </DIV>
	  <DIV ID="droite">droite site
     </DIV>
	  <DIV ID="pied"> pied de site
     </DIV>

  </DIV>

 </BODY>
</HTML>

Modifié par Felipe (21 Dec 2008 - 17:59)
Salut faamugol,

Igor a écrit :

Par ailleurs pour conserver une bonne lisibilité des messages sur le forum, il est demandé d'utiliser les balises code pour présenter le code source des exemples.
Pourrais-tu éditer ton message pour te conformer à cette règle de mise en forme ?
Merci d'avance.
Merci d'en tenir compte. Smiley cligne

Par ailleurs tu as visiblement rajouté le DOCTYPE à du code généré par EditPlus que je ne connais pas mais dont le code est incompatible puisqu'il est en majuscules. Pour plus d'infos lire le tuto : Les DTD HTML4.01 et XHTML1.0 : comment choisir.)

Au passage tu as du coup 2 fois l'élément HTML.

Je t'invite à te baser sur la structure proposée par le Squelettor et éventuellement à essayer Komodo Edit ou PsPad.
Modifié par Heyoan (20 Dec 2008 - 15:13)
Bonjour,

Avec le code suivant, je n'arrive pas à potionner mon div Pied à la fin de la page.
En plus la couleur de fond de la div conteneur n'apparait pas. Ca fait 2 jours que je cherche mais je ne vois pas.

Merci d'avance,


<!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="fr" lang="fr">
<HTML>
<HEAD>
<TITLE> websote </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<link rel="stylesheet" type="text/css" href="menu_css.css" />

</HEAD>

<BODY>
<DIV ID="conteneur">

     <DIV ID="header"> entete site
   </DIV>

   <DIV ID="gauche"> gauche site (menu de naviga)
  </DIV>

  <DIV ID="centre"> centre page 
   </DIV>

   <DIV ID="droite">droite site
   </DIV>

   <DIV ID="pied"> pied de site
   </DIV>

</DIV>

</BODY>
</HTML>


la page menu_css.css

BODY
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    FONT-SIZE: 13px;
    BACKGROUND-IMAGE: url(back.png);
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    BACKGROUND-REPEAT: repeat-x;
    FONT-FAMILY: Verdana;
    BACKGROUND-COLOR: #B2B2B2;
}

#conteneur
{
    MARGIN: 2px auto 0px;
    WIDTH: 860px;
    POSITION: relative;
    BACKGROUND-COLOR: #B2B2B2; 
}

#header
{
    HEIGHT: 150px;
    WIDTH: 887px;
    MARGIN-TOP: 0px;
    MARGIN-LEFT: 1px;
    BACKGROUND-COLOR: #dddddd;
   POSITION: absolute;
}

#menuaccueil
{
    MARGIN-LEFT: 0px;
   WIDTH: 887px;
    MARGIN-TOP: 160px;
    height:20px;
   BACKGROUND-COLOR: #FF9934;
    POSITION: absolute;
}

#centre
{   MARGIN-LEFT: 150px;
    MARGIN-RIGHT: 150px;
    WIDTH: 560px;
    MARGIN-TOP: 185px;
    MARGIN-BOTTOM: 5px;
    BACKGROUND-COLOR: #fffbbb;
    POSITION: absolute;
}
#gauche
{   
    MARGIN-TOP: 185px;
    MARGIN-BOTTOM: 5px;
   WIDTH: 140px;
    HEIGHT: 140px;
    MARGIN-LEFT: 2px;
    BACKGROUND-COLOR: #ffffff;
    POSITION: absolute;
}

#droite
{
    MARGIN-LEFT:720px;
   MARGIN-TOP: 185px;
   MARGIN-BOTTOM: 5px;
   HEIGHT: 250px;
    WIDTH: 160px;
    BACKGROUND-COLOR: #ffffff;
    POSITION: absolute;
}

#pied
{
    MARGIN-BOTTOM: 0px;
    HEIGHT: 20px;
    WIDTH: 860px;
    BACKGROUND-COLOR: #FF9933;
    MARGIN-LEFT:0px;
   POSITION: absolute;
}

Modifié par Felipe (21 Dec 2008 - 17:59)
Administrateur
Bonjour,

je viens de rajouter les balises [ code] et [ /code] (sans les espaces) puisque tu ne l'avais pas fait.

Pour ce qui est du test dans les navigateurs: il faut d'abord tester tes pages dans un navigateur moderne respectant les normes CSS càd Firefox, Opera, Safari 3, Chrome, ... et seulement ensuite tenter de réparer les erreurs dans IE6 et IE7 en utilisant les commentaires conditionnels (voir FAQ du Forum pour ce dernier point).

Je ne sais pas quel outil tu utilises mais entre les instructions CSS en majuscules et surtout surtout les 
position: absolute;

OUBLIE cet outil mal conçu Smiley sweatdrop Regarde plutôt du côté de NVu/Kompozer si tu veux qqch d'un peu graphique, des gabarits de mise en page Smiley murf de Florent V. et des outils déjà cités par Heyoan Smiley lol
merci pour vos reponse,

la modelle11 m'interesse mai je n'arrive pas à l'adapter à mon site,

que signie cette unité em et quand l'utilise t-on ?

Je voudrais juste savoir si quelqu'un peut maider avoir le style qui va fonctions dans les navigateure FF IE 5, 6 et 7. opera. Je parle du model11:
------------------Entete-------------

------ --------------------- ------
gache centre droite
------ ---------------------- ------

---------------pied-------------------



Merci d' avance,
Modérateur
Salut faamugol et bienvenue sur le forum,

De mémoire, il me semble que les balises xhtml tout comme le xml (logique) doivent être écrite en minuscule.

<<<EDIT
Un outil qui est très bien, c'est html kit. Néanmoins, on ne dispose pas du wysiwyg. Cela force à se remémorer les bases Smiley cligne
EDIT;

@ Merci Heyoan pour le lien du squelettor. Alsacreations n'arrête pas le progrès Smiley smile



++
Modifié par Nolem (21 Dec 2008 - 21:25)
faamugol a écrit :
la modelle11 m'interesse mai je n'arrive pas à l'adapter à mon site

Il est nécessaire de maitriser les bases de HTML et CSS pour pouvoir adapter efficacement ces modèles.

faamugol a écrit :
que signie cette unité em et quand l'utilise t-on ?

Un tutoriel d'Alsacréations en parle.

faamugol a écrit :
Je voudrais juste savoir si quelqu'un peut maider avoir le style qui va fonctions dans les navigateure FF IE 5, 6 et 7. opera.

Déjà le support d'IE5 est à oublier, cette version n'étant pratiquement plus en circulation. Ensuite, le support d'IE6 est possible mais casse-gueule et demande pas mal de connaissances et d'expérience. Pour IE7 c'est déjà plus simple, même s'il peut y avoir des problèmes ponctuels. Dans tous les cas on travaillera en prenant comme référence un ou deux navigateurs «modernes», je pense notamment à Firefox, Safari ou Opera.

Pour information, le gabarit que tu indiques (gabarit 11) «fonctionne» déjà dans les navigateurs que tu cites, sauf dans IE5 (dont on a dit qu'il ne fallait plus s'occuper). Donc si tu ne «casses» pas ce modèle, ça fonctionnera. Smiley cligne (Du moins pour la structure de base.)
Modifié par Florent V. (21 Dec 2008 - 23:24)
Sujet clos
Aller à