div en position différente sous FF et IE

leeloo06110 · Message par **leeloo06110** » 02 déc. 2006, 09:41

bonjour,
j'ai un problème dans mon css, je n'arrive pas à trouver où placer mon #... qui va avec mon div créé pour un petit cadre créé pour "ce site est strictement créé pour ...".
Lorsque j'affiche la page sous IE il est correctement placé, mais dans FF il est décalé....
je vous laisse la page, si ça peut vous être utile.
Merci encore à tous de votre aide précieuse

http

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html lang="fr-fr">
<head>
  <meta content="text/html; charset=ISO-8859-15"
 http-equiv="content-type">
  <title>index</title>
  <link media="all" rel="stylesheet" href=""
 type="text/css">
  <meta content="soumise_lou" name="author">
</head>
<body
 style="background-color: rgb(0, 0, 0); color: rgb(0, 0, 0); direction: ltr;"
 alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div style="text-align: center;"><img
 style="width: 800px; height: 600px;" alt=""
 src="img/m10.jpg"><br>
<div style="text-align: left;"><br>
<div
 style="position: absolute; left: 344px; top: 576px; height: 45px;"
 id="adulte">
<h4><span style="color: rgb(204, 204, 204);">Ce
site
est strictem<span style="font-weight: bold;"></span>ent
r&eacute;serv&eacute; aux adultes</span></h4>
</div>
#adulte { position: absolute; height: 55px; top: 574px; left: 345px;"
<div style="text-align: justify;"><span
 style="color: rgb(204, 204, 204);"></span><span
 style="color: rgb(204, 204, 204);">Vous avez atteint
l'&acirc;ge de majorit&eacute; l&eacute;gale tel que
d&eacute;fini dans votre pays de r&eacute;sidence.</span><span
 style="color: rgb(204, 204, 204);"> Vous avez pris
connaissance du caract&egrave;re &eacute;rotique des images et
des textes contenus sur ce site.</span><br>
<span style="color: rgb(204, 204, 204);">Vous vous engagez
&agrave; ne pas en d&eacute;voiler l'existence &agrave; des
mineurs.</span><br>
<span style="color: rgb(204, 204, 204);">Vous vous engagez
&agrave; ne pas en diffuser les images sur des sites non
prot&eacute;g&eacute;s vis &agrave; vis des mineurs.</span><br>
<span style="color: rgb(204, 204, 204);">Vous mettrez tout
en oeuvre
pour emp&ecirc;cher n'importe quel mineur de votre entourage d'y
acc&eacute;der par le biais de votre ordinateur, ou par tout moyen
&agrave; votre disposition.</span><br>
<span style="color: rgb(204, 204, 204);">Vous vous
interdisez toute
poursuite l&eacute;gale vis-&agrave;-vis de ce site, de son
propri&eacute;taire ou de son h&eacute;bergeur.</span><br>
<span style="color: rgb(204, 204, 204);">Tous les textes
et photos sont
la propri&eacute;t&eacute; exclusive de soumise lou......... Il
vous
est interdit d'en faire usage sans notre accord explicite.</span><br>
<br>
<div
 style="position: absolute; width: 68px; top: 818px; left: 385px;"><span
 style="color: rgb(204, 204, 204);"><a
 style="color: rgb(204, 204, 204); text-decoration: none;"
 href="hall.html" target="_self">ENTRER</a>&nbsp;</span><br>
<span style="color: rgb(204, 204, 204);"></span></div>
<br>
<div style="position: absolute; top: 818px; left: 529px;"><span
 style="color: rgb(204, 204, 204);"><a
 style="color: rgb(204, 204, 204); text-decoration: none;"
 href="http://www.msn.fr">QUITTER</a>
</span><br>
</div>
<br>
<br>
<div
 style="position: absolute; top: 46px; left: 844px; color: rgb(204, 204, 204);">
<h3>MANRAY</h3>
</div>
<div
 style="position: absolute; height: 40px; top: 44px; left: 12px; color: rgb(204, 204, 204);">
<h3>SOUMISE LOU</h3>
</div>
<span style="color: rgb(204, 204, 204);"></span><span
 style="color: rgb(204, 204, 204);"></span></div>
</div>
</div>
</body>
</html>

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; DigExt; SV1)

Mongo Bob · Message par **Mongo Bob** » 02 déc. 2006, 13:47

leeloo06110 a écrit :je n'arrive pas à trouver où placer mon #... qui va avec mon div créé pour un petit cadre créé pour

Il ne s'agit pas de placer le "#" à un endroit ou à un autre, "#" représente l'id du div.
Ce n'est pas conseillé d'incorporer le css dans le html, ça marche mais fais une feuille de style, interne et finalement externe, c'est mieux.
Bon, maintenant, je suppose que tu parles du div id "adulte".
Tu as ça :

Code : Tout sélectionner

#adulte { position: absolute; height: 55px; top: 574px; left: 345px;"

qui fait double emploi avec ça :

Code : Tout sélectionner

<div style="position: absolute; left: 344px; top: 576px; height: 45px;" id="adulte">

"Double emploi" si on veut, sauf que la 1ère ligne citée est absurde, elle est complètement inopérante supprime la, tu ne travailles que sur la deuxième, dont la syntaxe est correcte (tu dois toujours avoir "<" et ">" qui entourent la balise html, ici "div", l'attribut "style" le signe "=" et entre """ les propriétés css séparées par ";" enfin l'id.
Tu ne peux pas utiliser "h4" si tu n'as pas utilisé h1, h2, h3... A la place de "h4", fais donc un "p" pour cette phrase, les "h" sont réservés strictement aux titres. Du coup, inutile de le mettre dans un div, p suffit comme conteneur.

Enfin, pourquoi mélanger style css et style html? Fais que du css!
Une fois que tu auras débroussaillé tout ça, tu pourrais mieux contrôler le positionnement, mais il faudrait que tu reprennes tout ton site à la base après la lecture d'un bon tutoriel (voir Post it).

calimo · Message par **calimo** » 02 déc. 2006, 15:04

En fait, les styles doivent être placés dans une balise <style> elle-même contenue entre <head> et </head>. Car ce n'est pas du HTML, mais bien du CSS !

Deux remarques :

c'est effectivement mieux de supprimer tous les styles en-ligne ainsi que ce qui se trouverait dans un élément style, et de tout placer dans une feuille de style externe ;
Il manque une URL à ton doctype. Cela fait probablement (comme c'est un doctype HTML 4.01 Strict je n'en suis pas sur à 100%) tomber les navigateurs en mode de rendu des pages dit "quirk", c'est-à-dire un mode totalement imprévisible qui émule le comportement des anciens navigateurs. Mets une URL, ça devrait aller mieux.
Code : Tout sélectionner
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firedragon Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 02 déc. 2006, 20:30

calimo a écrit :En fait, les styles doivent être placés dans une balise <style> elle-même contenue entre <head> et </head>. Car ce n'est pas du HTML, mais bien du CSS !

Précison utile, ce n'est pas un mélange de style html et de style css comme je l'avançai imprudemment, mais juste pour pinailler, je l'avoue

, disons qu'il est tout à fait correct de mettre du css dans le body, à condition de faire précéder les propriétés css de la balise html <style>, correct certes, mais à quoi bon? L'intérêt des css est de les mettre de toute façon, au bout du compte, même pas seulement en interne hors du body et dans le head, mais bien en externe. Les mettre dans <style> dans le body html ou les mettre dans <style> sous <head> est correct pour les 2, et fonctionne, mais retrouve un des désavantages du pur style html 100% des années 90 : surcroît de poids de la page web.

calimo · Message par **calimo** » 03 déc. 2006, 17:21

Mongo Bob a écrit :disons qu'il est tout à fait correct de mettre du css dans le body, à condition de faire précéder les propriétés css de la balise html <style>,

Non non, ce n'est pas correct !

http://www.la-grange.net/w3c/html4.01/p ... edef-STYLE

HTML autorise un nombre quelconque d'éléments STYLE dans la section HEAD d'un document.

C'est les scripts qu'on peut mettre dans le body, mais pas les styles

Voir la définition de body:
http://www.la-grange.net/w3c/html4.01/s ... #edef-BODY

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- corps du document -->

Cela dit, on est bien d'accord que leur place, c'est une feuille de style externe

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firelimace Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 03 déc. 2006, 17:50

calimo a écrit :Non non, ce n'est pas correct !

Une autre source (pas trouvé de lien mais ma bible, p.45, CSS2 de Goëtter) dit que si :
"Cette (...)méthode consiste à écrire directement les css dans le code html, grâce à la propriété html style"
"style" est pris en tant qu'attribut de la balise concernée, exemple :
<h1 style="color:blue;">TITRE</h1>
C'est bien du css dans le body mais il dit comme nous : aucun intérêt! Restons en là, donc?

calimo · Message par **calimo** » 03 déc. 2006, 19:45

Outch, une source qui parle de propriété style pas bon ça

C'est un attribut ou un élément (en fait ici c'est les deux), mais une propriété, ça veut juste rien dire

Effectivement si c'est un attribut c'est autorisé alors, même si c'est plutôt à éviter, mais tu ferais bien de trouver une source plus disons pointilleuse

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1) Gecko/20061010 Firelimace Firefox/2.0

Mongo Bob · Message par **Mongo Bob** » 03 déc. 2006, 20:57

Une précision sur la source pas assez pointilleuse :
http://www.alsacreations.com/livre/

Invité · Message par **Invité** » 04 déc. 2006, 21:38

J'essaie de mettre la fameuse url w3c complète, mais dès que j'enregistre, tout retourne comme au départ.
Comment celà se fait-il?
Y a-t-il un moyen de configurer nvu pour que ça s'inscrive d'office dés la création d'un doc?

Merci à vous, j'avance à pas de géant!!!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; DigExt; SV1)

Mongo Bob · Message par **Mongo Bob** » 18 déc. 2006, 10:36

calimo a écrit :Outch, une source qui parle de propriété style pas bon ça Confus
C'est un attribut ou un élément (en fait ici c'est les deux), mais une propriété, ça veut juste rien dire Choqué Roulement des yeux

Effectivement si c'est un attribut c'est autorisé alors, même si c'est plutôt à éviter, mais tu ferais bien de trouver une source plus disons pointilleuse Clin d'oeil

La source "pas assez pointilleuse" vient donc bien de Alsacréations, bah, tout le monde peut se tromper, je ne trancherai pas entre les 2 (rappel :
http://www.alsacreations.com/livre/)
Ceci dit, quand on utilise Nvu/Kpz en WYSetc... , pour faire du style, on se retrouve dans le code avec du css introduit dans le body par la balise html style, donc, actuellement, plein de débutants -qui utilisent Nvu ou Kpz- font ça et utilisent sans le savoir une manière de faire qui selon calimo, est incorrecte, qui, selon Alsa, est correcte mais pas conseillée (le css en externe est toujours péréférable et là, les 2 sont d'accord).
C'est mieux que si Nvu/Kpz faisait du style html derrière, certes!
Insertion d'une image par le WYSIWYG de Kompozer :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      essai
    </title>
  </head>
  <body>
    <img style="width: 89px; height: 31px;" alt="essai" src=
    "img/accesslogo1.png">
  </body>
</html>

C'est du css.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

HP · Message par HP » 18 déc. 2006, 12:12

Mongo Bob a écrit :"style" est pris en tant qu'attribut de la balise concernée, exemple :
Code : Tout sélectionner
<h1 style="color:blue;">TITRE</h1>
Ceci dit, quand on utilise Nvu/Kpz en WYSetc... , pour faire du style, on se retrouve dans le code avec du css introduit dans le body par la balise html style, donc, actuellement, plein de débutants -qui utilisent Nvu ou Kpz- font ça et utilisent sans le savoir une manière de faire qui selon calimo, est incorrecte, qui, selon Alsa, est correcte mais pas conseillée (le css en externe est toujours péréférable et là, les 2 sont d'accord).

On peut utiliser l'attribut style en "dernier recours" pour styler quelque chose "d'exceptionnel", et qui donc aurait peut d'intérêt d'être inscrit dans la feuille de style puisque j'entends par exceptionnel : que l'on n'utiliserait qu'une fois.

Les cas de figures peuvent exister

le besoin de redéfinir des margin ou des padding sur un élément déjà stylé notamment :

Code : Tout sélectionner

<p class="description" style="margin-top:1em">In bibendum dictum justo. Aliquam fringilla hendrerit purus. Donec tincidunt risus sed odio. Mauris nibh arcu, adipiscing a, hendrerit hendrerit, imperdiet sit amet, leo. Nullam et ante.</p>

admettons que par exemple, j'utilise fréquemment mon 'p' avec sa classe 'description' mais habituellement je l'utilise entre des 'p' ou des 'hx' et là je l'utilise derrière une 'table', 'table' va sûrement manquer de '(margin|padding)-bottom', je recale çà vite fait avec un style inline si tant est que je n'utiliserait plus 'p.description' à la suite d'une 'table'...

Il s'agit d'un exemple fictif, mais j'ai déjà été confronté à ce cas de figure de temps à autres.

Mongo Bob · Message par **Mongo Bob** » 18 déc. 2006, 12:26

HP a écrit :On peut utiliser l'attribut style en "dernier recours" pour styler quelque chose "d'exceptionnel",

Juste. Je l'utiliserai quand je veux donner une bordure temporaire à un <div> pour pouvoir le situer visuellement le temps que je règle certains paramètres autour, par exemple.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1) Gecko/20061010 Firefox/2.0

Geckozone

div en position différente sous FF et IE

div en position différente sous FF et IE

Qui est en ligne ?