Se connecter avec
S'enregistrer | Connectez-vous

css et pacotille

Dernière réponse : dans Programmation

Rebonjour,

J'ai commencé a faire d'autres pages html mais cette fois la mise en page se fait via des balises div et une feuille de style externe, seulement il subsiste toujours des différences entre le résultat sous firefox et IE, et ce notament avec l'espace que je veux laisser libre sur la droite de mon contenu.

Voici mon div central :
  1. #contenu{
  2. position : absolute;
  3. top : 150px;
  4. left : 230px;
  5. width : 170px;
  6. padding-top : 10px;
  7. padding-bottom : 30px;
  8. padding-left : 10px;
  9. background-color : transparent;
  10. }

J'ai utilisé padding-rigth avec diverses valeurs, sous IE ca marche bien mais sous firefox il ignore completement ce paramettre. Ici j'ai fait un artifice, j'ai réduit le width (de 200 à 170) pour avoir les blancs que je voulais, mais dans ce cas j'ai des sauts de ligne barbares...

Merci d'avance de votre aide ^^

Autres pages sur : css pacotille

Lassé par la pub ? Créez un compte

[petite parenthèse]
Bah si tu persistes à maintenir la déclaration XML (XML Prolog) en tête de ton code HTML, c'est sûr que IE ne va pas aimer et va faire des histoires.. Lis les liens qui parlent les différences de rendu entre les modes "standard" et "quirks" (dans ton autre topic) et en complément furette le site OpenWeb qui détaille ça, sous le nom "modèle de boîtes CSS vs modèle Microsoft" (lien vers OpenWeb dans le topic pinné "Vous vous lancez dans le développement web ? lisez ceci").. Sinon, tu n'arriveras pas à grand chose avec tes mises en page.. IE n'est pas complètement compatible CSS, nous imposant quelques bidouilles récurrentes.. Quant à l'XHTML, IE n'est pas non plus totalement compatible (pb notamment avec l'XML Prolog).. Alors que FF fait partie des navigateurs qui n'ont pas ce genre de soucis..
[/petite parenthèse]


Ceci dit, pour ton div, tu peux essayer de lui ajouter le paramètre CSS 'display: block;'.. Firefox comprendra peut-être mieux..

Pour info : le padding est un décalage du contenu à l'intérieur du bloc conteneur par rapport à ses bords, pas une marge vers l'extérieur ! Pour la marge avec l'extérieur, c'est le paramètre margin, qui ne s'applique pas à un bloc en 'position: absolute;', puisque la position absolue (contrairement à la position relative) indique que le bloc n'est plus en liaison avec le reste de la page.. Seules ses paramètres de position peuvent être dépendants du conteneur dans lequel se trouve ce bloc.. Si tu cherches à travailler le positionnement d'un bloc, ajoutes-lui une bordure temporaire d'1 pixel.. Exemple : 'border: 1px solid #ff0000;' (ici, c'est une bordure rouge)..

Des liens vers des tutos CSS dans le topic pinné..

Et tu vas finir par te faire jeter : quand tu postes des bouts de code, utilise la balise code, bon sang [:ecco] : bouton .. Sinon ce n'est pas lisible !!

:jap: 

Dans ton cas, cette ligne est effectivement facultative.. Essaie sans, histoire de voir quel effet ça a.. Je ne peux pas dire qu'elle est ton pb, mais c'est une première piste connue..


Dans mon topic [PHP] Rétro-compatibilité HTML 4 automatique pour un site en XHTML 1.1 (http://www.presence-pc.com/forum/ppc/Programmation/PHP-Retro-compatibilite-HTML-automatique-pour-site-XHTML-sujet-2764-1.htm), j'ai fait un petit résumé très rapide de présentation sur ce que sont les HTML, XHTML et XML.. Ce petit paragraphe te sera utile..

Le XHTML peut être "livré" selon plusieurs types de média.. D'après le document W3C "Les types de Media XHTML" (traduction en français >> http://sebastienguillon.com/traduction/types-de-media-xhtml), lorsqu'un document XHTML est livré avec le type de média 'text/html', il ne sera pas exécuté en tant que document XML, donc on peut en déduire que le prologue XML devient inutile.

Le prologue XML devient indispensable lorsque le document XHTML est livré en tant que 'application/xhtml+xml', puisque dans ce cas précis, le document sera exécuté en tant que document XML..

Or, ton code précise un type de média 'text/html' (attribut 'content' de ta balise meta) :
  1. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Au passage, on utilise depuis quelques années le jeu de caractères iso-8859-15, autrment nommé Latin9, qui contient le symbole Euro, les 'Œ' et 'œ' précédemment oubliés (si, si) et les lettres accentuées de Scandinavie et des pays de l'Europe de l'Est nouvellement entrés dans l'Union.. Le vieux jeu iso-8859-1 (nommé Latin1) est obsolète, sauf pour les USA et pays anglo-saxons et c'est bien pour ça qu'il encore proposé par défaut par les logiciels de création Web..


De plus, tu utilises le XHTML 1.0 Transitional, qui est le plus "proche" du HTML puisqu'il est fait pour les migrations des anciens sites HTML 4 vers le XHTML.. Il reconnaît même encore les balises et attributs HTML, dépriéciés en XHTML 1.0 et même bannis du XHTML 1.1.. La balise <center> en est une, puisqu'on peut utiliser le centrage CSS d'un objet conteneur par le paramètre 'margin-left: auto; margin-right: auto;'.. Seul IE 5.x connaît un bug avec cette méthode, mais il n'est presque plus utilisé et le bug est facilement contournable..


Je ne vois donc aucune raison qui t'oblige à utiliser le prologue XML, surtout qu'IE ne sait pas quoi en faire et ne reconnaît plus le DOCTYPE qui suit.. Il exécutera donc la page comme si tu n'avais rien déclaré (donc avec un affichage à la sauce microsoft), par exemple :
  1. <html>
  2.  
  3. <meta machin-truc-chose>
  4.  
  5. <body>
  6. // Etc...


Si tu veux utiliser très finement le XHTML, tu devras approfondir le fonctionnement de ton site en plaçant un mécanisme de détection des performances du navigateur client (exemple celui que je décris dans mon topic), sinon c'est le risque de t'exposer à des soucis de rendu des pages.. Mais même cet artifice de détection et d'adaptation ne fait pas tout.. HTML et XHTML peuvent réagir différemment avec certains scripts, notamment.. Mais ce n'est plus vraiment le sujet de ta question ;) ..


Voili.. Sinon, je t'encourage à continuer dans le XHTML et à abandonner l'usage des tableaux pour la mise en page : on fait pareil et même mieux avec, par exemple, des blocs div conteneurs, sous-conteneurs, etc et les définitions CSS... Désavantage des tableaux : la lourdeur du code et quelques difficultés à affiner la mise en page.. Sans oublier que la gestion des bordures des tables, des rangées, des cellules peut différer d'un navigateur à un autre.. Avantage des CSS (uniquement en tant que fichiers externes) : une fois chargés par le navigateur, les fichiers CSS sont conservés dans le cache du navigateur, donc non rechargés par la suite, sauf si le navigateur détecte une modification des fichiers.. Toujours ça de moins à charger pour le visiteur et de moins dans la bande passante consommée côté serveur pour le propriétaire du site..

:jap: 

mmmm grand merci ^^

Bon pour résumer la situation, les pages que je faisais avec des table, je l'ai refais avec des balises div, mais le problème c'est que je suis passé d'un netpack à un autre, (un netpack c'est un peu style nuked clan, mais celui avec lequelle je dois faire est pour entreprise) et que le nouveau, bha il envoie à la poubelle ma balise header (et donc le link vers mon css externe).
J'ai fait un css externe spéciale pour mes pages que j'ai ensuite ajouté au css déja présent dans le site, mais bon sans mon header ca n'a pas servi a grand chose, je me suis donc tourné vers l'editeur de page du netpack, qui est vraiment une belle saloperie, voyez par vous même :

  1. <p align="center"><u><font face="trebuchet ms,geneva" size="4">Conditions générales</font></u></p>
  2. <p align="center"><font face="trebuchet ms,geneva" size="3">(interprétation)</font></p>
  3. <font face="trebuchet ms,geneva"><font face="trebuchet ms,geneva">
  4. <p><font face="trebuchet ms,geneva" size="2">Ces conditions générales apparaissent au dos des contrats et factures</font></p>
  5. <p><strong><font face="trebuchet ms,geneva"><font size="2">LES PARTIES</font> </font></strong></p>
  6. <p><font face="trebuchet ms,geneva" size="2">(1) Les contrats sont toujours conclus entre l’Interprète (BMC s.a.) et la personne ou entité portant la responsabilité financière de la Conférence et dite d ans le Contrat comme étant l’ « Organisateur » contrairement à toute autre personne qui pourrait être chargée d’être un intermédiaire, engager du personnel ou prendre des dispositions techniques liées à la Conférence. </font></p>
  7. <p><font face="trebuchet ms,geneva" size="2">Les conditions générales de l'Interprète ont préséance sur celles du donneur d'ordre. Celui-ci renonce à appliquer ses propres conditions, sauf convention contraire expresse.</font></p>
  8. <p><strong><font face="trebuchet ms,geneva"><font size="2">UTILISATION DES SERVICES FOURNIS</font> </font></strong></p>
  9. <p><font face="trebuchet ms,geneva" size="2">(2) L’interprétation est réalisée pour l’usage direct et immédiat par les participants.  Tout enregistrement de l'interprétation doit faire l'objet d'une demande préalable auprès de l'équipe d'interprètes et de BMC s.a. (14).</font></p>
  10. <p><strong><font face="trebuchet ms,geneva"><font size="2">CONDUITE</font> </font></strong></p>
  11. <p><font face="trebuchet ms,geneva" size="2">(3) Les interprètes de conférence s’abstiennent de tirer un profit personnel des informations surgissant lors de leur travail lors de réunions non publiques. Leur acceptation d’interpréter lors d’une réunion/conférence implique l’engagement que le travail sera réalisé de manière professionnelle. </font></p>
  12. <p><font face="trebuchet ms,geneva" size="2">(4) Seul les interprètes peuvent utiliser les canaux réservés à l’interprétation.  </font></p>
  13. <p><font face="trebuchet ms,geneva"><font size="2">(5) Les interprètes ne traduiront que les discours oraux. Toute interprétation lors de rencontres sociales est sujette à un accord préalable et mentionnée dans le contrat.</font> </font></p>
  14. <p><strong><font face="trebuchet ms,geneva"><font size="2">RESPONSABILITES DES PARTIES</font> </font></strong></p>
  15. <p><font face="trebuchet ms,geneva" size="2">(6) Si, pour n’importe quelle raison, l’Organisateur ne devait pas utiliser les services de l’Interprète les jours et dans les conditions mentionnés dans le contrat, l'Interprète a le droit de percevoir la somme correspondant au tarif demandé pour la période de travail prévue dans le contrat (Art.V), remboursement des frais (si prévu dans le contrat) et remboursement de toute autre dépense encourue pour la préparation de la conférence dont il convient de déduire toute somme perçue préalablement.  </font></p>
  16. <p><font face="trebuchet ms,geneva" size="2">(7) Si le contrat ne pouvait être rempli partiellement ou entièrement en raison de circonstances extraordinaires (grève, détournement, arrivée tardive de l’avion, instabilité politique, action militaire etc.), l’Interprète a toujours droit à : </font></p>
  17. <p><font face="trebuchet ms,geneva" size="2">(a) la rémunération prévue par le contrat </font></p>
  18. <p><font face="trebuchet ms,geneva" size="2">(b) le remboursement des frais encourus. </font></p>
  19. <p><font face="trebuchet ms,geneva"><font size="2">(8) Si l’interprète est dans l’incapacité de remplir sa part du contrat, il doit en informer au plus vite l’Organisateur.</font> </font></p>


:heink:  :heink:  :heink: 
Mais un autre site est en commande, et celui la je vais le faire sans netpack, tout en css (enfin j'espere qu'on me laissera faire), je vous montrerai le résultat.

En tout cas super merci johan, ta réponse est vraiment tres instructive.
:) 
Lassé par la pub ? Créez un compte