Se connecter avec
S'enregistrer | Connectez-vous

Div non centrés avec Firefox...

Dernière réponse : dans Programmation

Bonjour

Dans toutes les pages html que je code, les Div sont bien centrés dans IE mais pas dans FireFox... :??:  Et j'ai beau relire quinze fois mon code, reprendre à zéro et tout, je ne trouve pas mon erreur... :pfff: 

J'ai bien-sur fait des recherches avant de venir poster. Beaucoup de sujets traitent de problemes de centrage avec Firefox, mais aucun ne m'a aidé.
( J'imagine que c'est quelque-chose de si bête que personne n'a besoin d'en parler, à part moi. :lol:  )

Voici un exemple, avec cette page que je commence tout juste :

http://dj.dom.free.fr/i-want-to-meet-you/index_fr.htm

Le Div mainContent2 devrait etre centré horizontalement sur la largeur du Div mainContent1. (La largeur de mainContent1 étant la largeur de la page moins celle du menu). Mais il reste à gauche... :cry: 

Merci de m'éclairer.

Autres pages sur : div centres firefox

Lassé par la pub ? Créez un compte

Déjà, poste l'essentiel de ton code, HTML et CSS. Mais poste ton code dans les balises prévues à cet effet : [code] (ou simplement bouton )

Ensuite, tu as un bon p'tit pb de scroll dès que la fenêtre est plus petite que la somme de tes blocs.. Donc, oublie le "position: absolute;".. D'ailleurs, on ne fait pas comme ça.. Si tu veux qu'un scroll se déclenche au besoin, tu dois avoir au moins un bloc en "position: relative;". Le positionnement absolu retire les objets du flux "normal" du contenu de la page. Donc, c'est une source de pb avec les scrolls.

Et puis, un bloc principal qui se promène en largeur au gré de la taille de la fenêtre alors que le menu de gauche ne bouge pas, ça fait mauvais effet.. Surtout sans voir sa propre largeur évoluer..

Donc, c'est :
  • soit tu fais un bloc principal avec une largeur variable indexée sur celle de la fenêtre (donc du <body> ou du <html>) pour conserver un menu collé à gauche de la fenêtre,
  • soit tu conserves un bloc principal avec une largeur fixe auquel tu laisse "collé" le menu de gauche, les deux insérés dans un conteneur global qui, lui, va être centré dans la fenêtre par la règle CSS "margin: 0 auto;" (littéralement : marge haute et basse à 0 et marges latérales automatiques).

    Et puis, puisque ton site est tout nouveau tout beau, profites-en pour abandonner l'antique HTML 4.01 pour l'XHTML Strict (1.0 ou 1.1) avec des règles CSS dans des fichiers séparés (fichiers .css). Tout ce qu'il te faut dans le topic unique pinné en gras et en tête de la liste d'ici (notamment les liens vers AlsaCréations, OpenWeb et le Site du zér0)..

    Idem pour le jeu de caractères : depuis un paquet d'années, on est à l'iso-8859-15 pour cause de prise en charge de l'€ et des Œ et œ précédemment oubliés dans l'ancien iso-8859-1 (si, si, c'est pas une blague).. Mais de plus en plus, on passe au jeu Unicode, particulièrement l'utf-8, qui permet entre autres de se passer des caractères HTML spéciaux pour les lettres accentuées (par exemple le fameux "é" pour un simple "é")..

    :jap: 

    Ok, merci beaucoup. J'ai choisi ta deuxieme proposition.

    Voici la page corrigée : http://dj.dom.free.fr/i-want-to-meet-you/index_fr.htm

    et voici le partie du code qui nous interresse :

    1. <head>
      

    2.  
    3.   <style type="text/css">HTML {
      

    4. 	HEIGHT: 100%
      

    5. }
      

    6.  
    7. body{  margin:0px;  padding:0px;  overflow:auto;  width:100%;  height:100%;}
      

    8.  
    9. #Principal{ width:1004px; height:623px; margin: 0 auto;}
      

    10.  
    11. #Menu1{ float: left; position:relative;  top:20px;  left:0px; width:223px; height:400px; font-weight: bold; background-image: url(<a href="http://dj.dom.free.fr/data-pro/fond-i-want-to-menu.jpg" target="_blank">http://dj.dom.free.fr/data-pro/fond-i-want-to-menu.jpg</a>); background-repeat: no-repeat;}
      

    12.  
    13. #Contenu1{ float: left; height:623px; width:781px; overflow:hidden; background-image: url(<a href="http://dj.dom.free.fr/data-pro/fond-i-want-to-main.jpg" target="_blank">http://dj.dom.free.fr/data-pro/fond-i-want-to-main.jpg</a>); background-repeat: no-repeat; text-align: left;}
      

    14.  
    15.   </style>
      

    16. </head>
      

    17.  
    18.  
    19.  
    20. <body style="text-align:center; color: rgb(255, 255, 255); background-color: rgb(152, 190, 250);" alink="#3366ff" link="#3366ff" vlink="#3366ff">
      

    21.  
    22. <Div id="Principal">
      

    23.  
    24.  
    25.  
    26. <div id="Menu1">
      

    27. menu1
      

    28. </div>
      

    29.  
    30.  
    31.  
    32. <div id="Contenu1">
      

    33. Contenu1
      

    34. </div>
      

    35.  
    36.  
    37. </div>
      

    38.  
    39.  
    40. </body>



    Citation :
    profites-en pour abandonner l'antique HTML 4.01 pour l'XHTML Strict (1.0 ou 1.1) avec des règles CSS dans des fichiers séparés (fichiers .css).
    C'est vraiment important ça ? Car en fait, moi je fais avant tout des dessins animés, et je veux juste créer des pages correctes pour présenter mes réalisations. Je ne suis pas passionné par le webdesign, donc apprendre un nouveau langage et tout ça ne me tente pas trop... :sweat: 

    Citation :
    Idem pour le jeu de caractères : depuis un paquet d'années, on est à l'iso-8859-15 pour cause de prise en charge de l'€ et des Œ et œ précédemment oubliés dans l'ancien iso-8859-1 (si, si, c'est pas une blague).. Mais de plus en plus, on passe au jeu Unicode, particulièrement l'utf-8, qui permet entre autres de se passer des caractères HTML spéciaux pour les lettres accentuées (par exemple le fameux "é" pour un simple "é" )..
    Tu veux dire que je peux taper mon texte normalement avec les accents et tout et que ça ne genera aucun navigateur !? :ouch:  Cool si c'est ça.

    Citation :
    J&P, quand nous fais-tu un smiley spécial "iso-8859-15" ?

    :lol:  Pourquoi pas... Tu me rappelles où sont les tiens ? Je ne retrouve plus où je les ai vus :ange: ..


    Citation :
    Ok, merci beaucoup. J'ai choisi ta deuxieme proposition.

    Voilà, ça se tient ;) ...

    Citation :
    Citation :
    profites-en pour abandonner l'antique HTML 4.01 pour l'XHTML Strict (1.0 ou 1.1) avec des règles CSS dans des fichiers séparés (fichiers .css).
    C'est vraiment important ça ? Car en fait, moi je fais avant tout des dessins animés, et je veux juste créer des pages correctes pour présenter mes réalisations. Je ne suis pas passionné par le webdesign, donc apprendre un nouveau langage et tout ça ne me tente pas trop... :sweat: 

    XHTML n'est pas à proprement parler un nouveau langage. C'est une simplification du HTML tout en apportant une rigueur de programmation salutaire.

    Pour faire simple, les largesses que le HTML permettait par l'emploi de balises et d'attributs plus ou moins reconnus par les navigateurs et les écarts de prog dans les ouvertures et les fermetures des balises ont été réduites en profondeur.

    Quelques exemples :
  • Tout le code doit être en minuscules, y compris les attributs d'évènements comme "onClic", "onMouseOver", etc.. Méfiance avec les éditeurs de pages Web qui proposent des corrections automatiques de code.
  • Toute balise doit être fermée : un "tag" de fermeture doit être présent quel que soit le type de balise. Les balises "doubles" restent sous la forme <div></div>, mais toutes les balises "simples" intègrent le slash "/" de fermeture après un espace : <meta ... />, <param ... />, <img ... />, <br />, <hr />, <input ... />, etc..
  • Tout attribut qui a son équivalent CSS se voit devenir facultatif, voire est supprimé dans le code XHTML. Exemples : border, width, height, background, etc, etc, qui ont tous des équivalents CSS et sont donc sont facultatifs.. A par pour les besoins des formulaires, l'attribut "name" est grandement supprimé au profit de l'attribut "id" déjà existant.
  • Tout attribut doit avoir une valeur : exit donc les attributs "simples". Exemple : <input ... checked> devient <input ... checked="checked" />
  • Pour la balise <img> : l'attribut "alt" est obligatoire, même vide (alt="" ; et il peut être vide ;) ). Il est là pour spécifier un texte alternatif pour les navigateurs ne sachant pas afficher les images (lecteurs d'accessibilité et pour non-voyants, par exemple). Contrairement à une idée parfois transmise à cause d'un ancien bug d'IE, "alt" n'affiche pas d'info-bulle au survol de l'image, c'est l'attribut "title" qui s'en charge.

    Le site du W3C (organisme qui régit les recommandations de prog Web) propose un validateur de code >> http://validator.w3.org/
    Un autre site fait de même, le WDG >> http://www.htmlhelp.com/tools/validator/

    Bref, pour ton site, tu peux utiliser les en-têtes suivantes :

    La DOCTYPE ou déclaration de type de document :
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">

    La suite de l'en-tête :
    1. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" lang="fr"> // Avec déclaration de la langue de la page
      

    2.  
    3. <head>
      

    4. 	<title>I want to meet you - clip animation 2d 3D dedie a Emma Watson</title>
      

    5.  
    6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> // Type de contenu et jeu de caractères
      

    7. 	<meta ... /> // Tes autres balises meta (gare au slashes "/" de fermeture)
      

    8.  
    9. 	<link rel="shortcut icon" href="mon_favicon.ico" /> // Icône de favori / marque page / signet
      

    10.  
    11. 	<link rel="stylesheet" type="text/css" href="ma_feuille_de_style.css" /> // Lien vers ta feuille de style CSS ; toujours préférer cette solution plutôt que de mélanger les types de codes dans un même fichier
      

    12. </head>

    Tu as ici une en-tête XHTML 1.0 Strict correcte et en mode de compatibilité HTML ("Content-Type" en "text/html"). Ainsi, ton site sera compatible tous navigateurs sans te soucier de quoi que ce soit.

    Ensuite, ce seront des différences de mise en page que tu constateras, suivant la manière dont les navigateurs gèrent les règles CSS (IE7 est le premier de la gamme MS à enfin gérer convenablement les CSS ! Mais seulement si tu utilises une DOCTYPE "Strict" : XHTML 1.0 ou 1.1)

    Un topic pour toi >> http://www.presence-pc.com/forum/ppc/Programmation/vous-lancez-developpement-lisez-ceci-sujet-1872-1.htm

    Citation :
    Citation :
    Idem pour le jeu de caractères : depuis un paquet d'années, on est à l'iso-8859-15 pour cause de prise en charge de l'€ et des Œ et œ précédemment oubliés dans l'ancien iso-8859-1 (si, si, c'est pas une blague).. Mais de plus en plus, on passe au jeu Unicode, particulièrement l'utf-8, qui permet entre autres de se passer des caractères HTML spéciaux pour les lettres accentuées (par exemple le fameux "é" pour un simple "é" )..
    Tu veux dire que je peux taper mon texte normalement avec les accents et tout et que ça ne genera aucun navigateur !? :ouch:  Cool si c'est ça.

    Oui. Et c'est même un des arguments côté prog qui soutient le principe de l'Unicode. Parfois ça peut être un peu déroutant pour certains traitements avec des langages côté serveur comme le PHP et d'autres d'avoir à gérer certaines variables contenant des lettres accentuées (identification d'utilisateur, par exemple) mais, pour un site simple comme le tien, tu n'as strictement aucun risque..


    Sachant que tout ça peut être déterminé automatiquement par ton logiciel de création Web, que ce soit Nvu (gratuit) ou Adobe Dreamweaver (payant).

    Parmi les éditeurs à éviter : Adobe GoLive! (payant ; généralement fourni avec la Creative Suite) et surtout MS Frontpage (payant aussi ; peut être intégré à certaines versions de MS Office ou à des packs MS IIS). La principale raison : ils génèrent du code "maison", parfois assez éloigné des recommandations W3C, avec l'ajout de balises propriétaires tout à fait inutiles et pouvant causer des soucis de mise en page dans les navigateurs.

    :jap: 

    Merci pour toutes ces infos et tous ces conseils. :) 

    Oui j'utilise NVU, mais je préfère faire le "gros" du travail à la main, car NVU fait un peu n'importe quoi...

    Le validateur veut me faire retirer mes propriétés alink, link, et vlink, mais j'aime bien définir moi-même les couleurs des textes liens. :( 

    Voilà : http://dj.dom.free.fr/i-want-to-meet-you/index_fr.xhtm
    Tout a l'air de fonctionner, mais j'ai des ascenseurs étranges avec IE quand la fenetre est trop petite...

    Voici le contenu de mon fichier CSS :
    1. <style type="text/css">HTML {
      

    2. 	HEIGHT: 100%
      

    3. }
      

    4.  
    5. body{  margin:0px;  padding:0px;  overflow:auto;  width:100%;  height:100%;}
      

    6.  
    7. #principal{ width:1004px; height:623px; text-align: left; margin: 0 auto; background-image: url(<a href="http://dj.dom.free.fr/data-pro/fond-i-want-to.jpg" target="_blank">http://dj.dom.free.fr/data-pro/fond-i-want-to.jpg</a>); background-repeat: no-repeat;}
      

    8.  
    9. #menu1{ float: left; position:relative; text-align: left;  top:53px;  left:56px; width:223px; height:400px; font-weight: bold; font-size: 16px;}
      

    10.  
    11. #menu2{ position:relative; text-align: left;  top:93px;  left:-35px; width:223px; height:400px; font-weight: bold;}
      

    12.  
    13. #contenu1{ float: left; position: relative; left: 39px; top: 125px; height:460px; width:697px; text-align: left; color:white;}
      

    14.  
    15.   </style>

    Citation :
    Le validateur veut me faire retirer mes propriétés alink, link, et vlink, mais j'aime bien définir moi-même les couleurs des textes liens.

    Ces atributs sont supprimés car inutiles. En CSS on utilise des pseudo-classes : :link, :visited, :hover, :active et :focus, sachant qu'on n'utilise généralement que :hover et éventuellement :visited.

    Des infos sur la page concernant les pseudo-classes de la recommandation W3C, en français :
  • chapitre 5.11.2 Les pseudo-classes d'ancre : :link et :visited >> http://www.yoyodesign.org/doc/w3c/css2/selector.html#link-pseudo-classes
  • chapitre 5.11.3 Les pseudo-classes dynamiques : :hover, :active et :focus >> http://www.yoyodesign.org/doc/w3c/css2/selector.html#dynamic-pseudo-classes

    Et l'index de toutes les règles CSS actuellement en usage (plus ou moins selon les performances des navigateurs mais, avec l'arrivée d'IE7, tout ça se "stabilise") qui te permettra de tout savoir (ou presque) sur leurs descriptions et leurs usages respectifs >> http://www.yoyodesign.org/doc/w3c/css2/indexlist.html


    Citation :
    Tout a l'air de fonctionner, mais j'ai des ascenseurs étranges avec IE quand la fenetre est trop petite...

    Effectivement, il y a un soucis.....

    D'abord, pas de nom de fichier en .xhtm : cette extension n'est pas standard et est source de pb ! Avec FF, ça m'ouvre le code source et ça ne "rend" pas la page.. Reste avec un .htm classique.

    Ensuite, ne laisse aucune définition de style dans le code HTML, comme dans tes balises genre <body>. Si tu utilises des CSS qu'on appelle "externes", tout doit y être, sauf quelques rares cas exceptionnels..

    Pour continuer, les définitions (ou règles) CSS sont de type additives (ou cumulatives). De par leur nom, d'ailleurs : CSS = Cascaded Style Sheets, en français Feuilles de Style en Cascade. Donc, les règles que tu définis pour IE 6 et inférieurs par ton commentaire conditionnel (très bien !) verront certains de leurs arguments modifiés par les règles de ta feuille "de base". Or c'est l'inverse que tu veux et dois faire : déclarer d'abord ta feuille "de base" et seulement ensuite déclarer seulement les valeurs que tu vas réserver spécifiquement pour IE 6 et inférieurs.

    Quant au code dans un fichier CSS, c'est tout en majuscules à l'exception des noms que tu donnes à tes objets (id) ou à tas catégories d'objets (class) : dans ce cas, c'est "case-sensitive" ou sensible à la casse. Donc un #MonObjet n'est pas #monobjet !

    Surveille aussi l'usage des espaces, sois rigoureux tant que tu le peux, trouve toi ta façon d'écrire le code si c'est toi qui l'écrit, de manière à avoir un compromis entre facilité de lecture (important) et consommation d'octets avec des caractères en trop (facultatif pour un petit site pas très visité). Tu peux aisément utiliser les tabulations, ça aide visuellement. De plus, ne sois pas avare de commentaires : on les utilise de la manière suivante en CSS (et il n'y en n'a qu'une, contrairement à nombre de langages de prog) : /* mon commentaire */ ; tout ce qui est entre /* et */ est en commentaire, peu importe la longueur et le nombre de lignes du commentaire !).

    Toutes les règles qui ont pour valeur "0" n'ont pas besoin d'indication de mesure.. "0" tout-court est suffisant, puisque 0px = 0em = 0pt = 0cm etc.. Ca économise des octets et ça rend surtout le code CSS un poil plus lisible..

    Toutes les règles CSS peuvent avoir deux formes : l'une détaillée (donc "spécialisée" ; exemples : "background-image", "margin-top", etc), l'autre "courte" ou "compacte", forme qui regroupe les différentes règles de la même famille directe (exemple : "background: src("monimage.png") top left no-repeat;" = "background-image: src("monimage.png"); background-position: top left; background-repeat: no-repeat;"). Attention, parfois la forme détaillée est nécessaire, care elle permet de ne ré-écrire au besoin qu'un seul attribut parmi ceux précédemment déclarés, là où l'usage de la forme compacte risquerait de tout écraser !

    Pour les règles compactes de marges : "margin: 5px 10px 15px 20px;" = "margin-top: 5px; margin-right: 10px; margin-bottom: 15px; margin-left: 20px;". Ca va dans le sens horaire. Une forme plus raccourcie existe, tu l'as vue : "margin: 0 20px;" = "margin-top: 0; margin-right: 20px; margin-bottom: 0; margin-left: 20px;". Plus d'infos dans le chapitre 8.3 Les propriétés de marge >> http://www.yoyodesign.org/doc/w3c/css2/box.html#margin-properties.


    Pour la disposition de tes conteneurs (menu et bloc principal) dans ton conteneur général, n'utilise pas le "float: left" pour ton bloc principal. Règles dans les positionnements :
  • Positionnement relatif : influence le positionnement du contenu avant et après dans le flux du code (X)HTML. Positionnement par défaut.
  • Positionnement absolu : n'influence aucunement le positionnement de qui que ce soit d'autre ! L'objet ainsi placé est "retiré" du flux.
  • Positionnement fixe : idem, mais en plus l'objet reste fixe dans la fenêtre du navigateur, sans suivre le moindre scroll. Ne fonctionne pas avec IE 6 et inférieurs.
  • Float left ou right : positionnement que j'appellerais d'intermédiaire : l'objet est retiré du flux, mais il influence le contenu directement après lui en demandant au moteur de rendu (le navigateur) d'effectuer des décalages pour qu'il n'y ait pas de chevauchement. Mais c'est tout ! Un objet "flottant" n'influence pas la hauteur du bloc qui le contient, sauf en cas de bug (avec IE 6 et inférieurs, par exemple ; peut-être aussi IE 7, mais c'est beaucoup moins sûr et je n'ai pas cherché à le savoir).
    Attention : pour les positionnements absolus et je pense aussi fixes : le positionnement est par rapport au premier objet placé plus haut dans la hiérarchie de contenance qui a une règle de positionnement déclarée (quelle qu'elle soit).

    Vois aussi :
  • le chapitre 9.3 Les schémas de positionnement >> http://www.yoyodesign.org/doc/w3c/css2/visuren.html#positioning-scheme
  • et le chapitre 9.5 Les flottants >> http://www.yoyodesign.org/doc/w3c/css2/visuren.html#flo...

    Donc, on résume.. Essaie ceci :
    1. html { width: 100%; height: 100%; }
      

    2.  
    3. body { margin: 0; padding: 0x; overflow: auto; width: 100%; height: 100%; }
      

    4.  
    5. #principal { position: relative; width: 1004px; height: 623px; margin: 0 auto; }
      

    6.  
    7. #menu1 { position: absolute; top: 20px; left: 0; width: 223px; height: 400px; font-weight: bold; background: url(<a href="http://dj.dom.free.fr/data-pro/fond-i-want-to-menu.jpg" target="_blank">http://dj.dom.free.fr/data-pro/fond-i-want-to-menu.jpg</a>) no-repeat; }
      

    8.  
    9. #contenu1 { position: relative; margin: 0 0 0 223px; height: 623px; width: 781px; background: url(<a href="http://dj.dom.free.fr/data-pro/fond-i-want-to-main.jpg" target="_blank">http://dj.dom.free.fr/data-pro/fond-i-want-to-main.jpg</a>) no-repeat; text-align: left; overflow: auto; }

    Dans ton #principal, j'utiliserais plutôt "min-height" pour adapter la hauteur du site au contenu et ainsi permettre au visiteur de pouvoir utiliser toute la hauteur de son écran.. Un site de 600 px de haut sur un écran en 1024, c'est un peu "timbre-poste.. Mais ça dépend évidemment de la "maquette" de ton site, de l'aspect graphique que tu veux voir.. C'est pourquoi, bien que je ne sois pas forcément d'accord avec ton choix que par ailleurs je respecte puisqu'il est d'ordre graphique, je laisse "height" en l'état ;) ..

    J'ai passé ton menu en position absolue, histoire de le "coller" à gauche de ton #principal, tu vois que je lui ai ajouté "position: relative;" pour que #menu1 qui est juste après dans la hiérarche se positionne par rapport à lui et pas par rapport à la fenêtre du navigateur (généralement, on ne déclare pas de positionnement pour les objets <html> et <body>, puisqu'on leur donne généralement pour dimensions celles de la fenêtre du navigateur en définissant "width" et "height" sur 100%).

    Du coup, j'ai passé ton #contenu1 en "position: relative;", te permettant par la suite de placer à l'intérieur des objets en position absolue. Sans cette définition de positionnement, ceux-ci prendront comme référence ton #principal qui, lui, en a une.. Pour placer ton #contenu1, j'emploie les marges, particulièrement une marge à gauche égale à la largeur de ton #menu1..

    A ton #contenu1 j'ai ajouté un "overflow: auto;" pour le cas où le contenu de ta page dépasse les 623px de haut que tu as donné à ta maquette.. Sauf erreur de ma part, le scroll se déclenchera sur ton ton #contenu1. Attention : ta banière de titre semble être dedans. A toi de voir si tu ne devrais pas définir un bloc de banière en position absolue comme ton menu mais en horizontal tout en haut de ton #principal et définir la marge haute de ton #contenu1 de la hauteur de ton bloc de banière.


    Je crois que je vais m'arrêter là, la suite est entre tes mains, rien ne vaut l'expérimentation ;)  !! D'autant que j'ai peut-être laissé passer des erreurs de frappe ou des choses du genre :ange: ..

    Un dernier "truc" : pour tes essais, utilise les navigateurs "du moment", à savoir IE 7 (et IE 6 si tu en as un sous la main ; surtout pour lui faire des règles CSS spécifiques additionnelles au besoin), Firefox, Opera et, si tu le peux, soit Konqueror (sur Linux) soit Safari (sur Mac OS X ; Safari est une adaptation de Konqueror par Apple pour OS X)..

    :jap: 

    Wahou.... merci pour cette réponse aussi détaillée qu'instructive. :) 

    Entre temps, j'ai refait une version plus simple, avec l'image de fond en un seul morceau en background de Principal, et Menu et Contenu qui contiennent juste le texte et se supperposent à l'image.
    http://dj.dom.free.fr/i-want-to-meet-you/index_fr.htm

    Je n'ai pu adapter qu'une partie du code CSS que tu m'as donné avec ma nouvelle version, sinon ça faisait un truc bizarre.

    1. <style type="text/css">
      

    2.  
    3. html { width: 100%; height: 100%; }
      

    4.  
    5. body {  margin: 0; padding:0px; width:100%;  height:100%; text-align: center; color: rgb(255, 255, 255); background-color: rgb(152, 190, 250);}
      

    6.  
    7. #Principal { position: relative; width: 1004px; height: 623px; margin: 0 auto; overflow:hidden; text-align: left; background-image: url(<a href="http://dj.dom.free.fr/data-pro/fond-i-want-to.jpg" target="_blank">http://dj.dom.free.fr/data-pro/fond-i-want-to.jpg</a>); background-repeat: no-repeat;}
      

    8.  
    9. #Menu1{ float: left; position:relative; text-align: left;  top:18px;  left:56px; width:223px; height:400px; font-weight: bold; font-size: 16px;}
      

    10.  
    11. #Menu2{ position:relative; text-align: left;  top:93px;  left:-35px; width:223px; height:400px; font-weight: bold;}
      

    12.  
    13. #Langues{ position:relative; text-align: left; top: 17px; left: 850px; font-size: 16px;}
      

    14.  
    15. #Contenu1{ float: left; position: relative; left: 39px; top: 95px; height:460px; width:697px; text-align: left; font-weight: bold; color: rgb(91, 76, 157); overflow: auto;}
      

    16.  
    17. <!--
      

    18. A:link {text-decoration:none}
      

    19. A:visited {text-decoration:none}
      

    20. -->
      

    21.  
    22. </style>


    Il faut que je mete aussi les styles des SPAN, images, et tout, dans le fichier CSS, ou juste les styles des Div ?
    J'ai enfin compris que l'interet d'un fichier CSS et que je ne change les propriétés qu'une fois pour toutes les pages. Mais quand c'est un objet que je n'utilise que sur une seule des pages, dois-je le mettre aussi dans le fichier CSS ?

    Je n'ai pas installé IE7. Je préfère garder le 6, pour pouvoir surveiller la manière dont ceux qui gardent le 6 voient mon site. :) 

    Oui, je ne veux pas changer la taille de Contenu sinon il ne sera plus entourré de nuages. :) 
    Donc mon idée est de faire en sorte que ces pages passent tout juste chez un utilisateur en 1024x768, et que le contour soit inutilisé pour les résolutions plus hautes.
    Moi je suis en 1280x960, ça fait un peu petit par rapport aux sites en plein écran, mais je trouve que ça va.

    Citation :
    Il faut que je mete aussi les styles des SPAN, images, et tout, dans le fichier CSS, ou juste les styles des Div ?
    J'ai enfin compris que l'interet d'un fichier CSS et que je ne change les propriétés qu'une fois pour toutes les pages. Mais quand c'est un objet que je n'utilise que sur une seule des pages, dois-je le mettre aussi dans le fichier CSS ?

    Tu mets tout !! Chipote pas, c'est fait pour ;) .. Mais prend le temps de voir comme ça fonctionne, comment c'est architecturé, ce n'est pas bien compliqué, il faut juste de la rigueur.

    L'avantage du fichier CSS est qu'il n'est chargé qu'une fois par le navigateur du visiteur : lors du chargement de la première page qu'il visionne. Par la suite, ce fichier est stocké dans le cache du navigateur, ainsi que les images chargée et donc tout ceci n'est pas rechargé depuis Internet lors de la consultation des pages suivantes, c'est simplement lu depuis le cache. Gain de temps pour le visiteur, réduction du trafic côté hébergement du site Web, donc gain au niveau du cumul mensuel, certains hébergeurs limitent le trafic suivant les offres d'hébergement ; ce n'est aucunement le cas chez Free ;)  (en revanche, on est dans le cas d'un hébergement mutualisé très haute densité ce qui, parfois, provoque des ralentissements pour les visiteurs) .

    Et je le répète : dans le code XHTML et CSS pas de majuscules pour les noms des balises, y compris dans le code CSS : "A:link {text-decoration:none}" n'est pas correct, c'est "a:link {text-decoration:none}". Par contre, "#Principal" ou ".MaClass" fonctionne : ce sont des noms donnés par le concepteur du site à des objets ou à des classes d'objets, ce ne sont pas des balises (X)HTML.

    Citation :
    Je n'ai pas installé IE7. Je préfère garder le 6, pour pouvoir surveiller la manière dont ceux qui gardent le 6 voient mon site. :) 

    Si tu n'as pas d'autre PC à ta disposition, c'est une sage décision. Mais sache qu'IE 7 a tout de même ses petites subtilités. Elles sont heureusement très peu nombreuses (surtout par rapport à IE 5.x et 6.0), mais il y en a.....


    Comme d'hab' pour toute chose qu'on entreprend : prend le temps de tout bien lire, de tout bien assimiler et de faire tes essais, tes expérimentations. Rien ne peut s'obtenir en un claquement de doigts. Tu as désormais de nombreuses cartes entre les mains, à toi de jouer ;)  ! Le WE arrive, tu pourras peut-être en profiter :D .....

    :jap: 

    mido@IDN a dit :
    Quant au code dans un fichier CSS, c'est tout en majuscules à l'exception des noms que tu donnes à tes objets (id) ou à tas catégories d'objets (class) : dans ce cas, c'est "case-sensitive" ou sensible à la casse.


    Wai ben là je te suis pas trop : tout en majuscule ? tu en es sur ?
    Lassé par la pub ? Créez un compte

    Créer un nouveau sujet