souci div+css dans firefox avec padding-left ou right, ie OK

[macgil]

bonsoir
j'ai feinté avec des tableaux pour compenser ce petit bug, mais je me dis qu'il existe une solution.
en mettant l'un au dessou de l'autre 2 blocs qui se touchent, dont l'un contient du texte, et les deux avec le meme attribut width, tout va bien ils forment un seul rectangle avec 2 couleurs différentes.
maintenant, je souhaite que le texte dans le 2e bloc ne touche pas les bords et j'ai donc mis des padding-left et padding right avec valeur 10 à mon 2è bloc. seuelement, maintenant, mon 2e bloc est 20 px plus large a droite que le premier, alors qu'ie affiche 2 blocs de la meme largeur... mystère

de plus, si qqun maitrise à fond, j'ai un autre souci de différence de positionnement ie-firefox que je detaillerai volontiers avec exemple si quelqu'un se sent de résoudre le casse tête

d'avance merci

macgil

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[Asumbaa]

Salut,

Pour éviter ce genre de souci, il faut que tu choisisses un doctype correct. Sans ce doctype IE utilise "son" modèle de boite et c'est pas la joie

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[macgil]

un grand merci, mais oups ca fait un sacré choc pour le codeur html que j'étais jusque il y a 10mn.
finalement le strict a bien du bon, a un détail près... changer de balise <font> pour souligner un mot, ca ca me semble to-much, surtout que les balises <i> et <b> semlent toujours valales.
il me manque toutefois deux infos pour tout faire juste:
- ou placer le code doctype dans mon document html, ou php?
- ou trouver la liste des choses encore admises en transitionnal?

un grand merci d'avance

macgil

ps. asumba, mon deuxième souci n'est pas résolu par cette explication vu qu'il concerne la position relative d'un div par rapport a un autre. te sent tu d'y jeter un oeil?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[Asumbaa]

un grand merci, mais oups ca fait un sacré choc pour le codeur html que j'étais jusque il y a 10mn.

Mais c'est un choc salutaire, crois moi !

finalement le strict a bien du bon, a un détail près... changer de balise <font> pour souligner un mot, ca ca me semble to-much, surtout que les balises <i> et <b> semlent toujours valales.

Elles sont en effet toujours valides, mais si tu veux faire les choses bien, c'est dans la CSS que tu souligneras / mettras en gras... sauf exception. Si ton italique / gras correspondent au fait d'appuyer le mot, ce sont les balises <embed> et <strong> qu'il faudra que tu utilises.

il me manque toutefois deux infos pour tout faire juste:
- ou placer le code doctype dans mon document html, ou php?
- ou trouver la liste des choses encore admises en transitionnal?

Le Doctype est la première ligne de ton code HTML.
Un Doctype Transitionnal t'autorise beaucoup de choses, puisqu'il formalise la façon de faire "sans séparer contenant et mise en forme".
Le mieux, c'est une fois indiqué ton Doctype, de valider ta page grâce au validateur W3C qui t'indiquera si tu es conforme aux spécifications et dans le cas contraire, ce qu'il faut retoucher.
Une extension Firefox utile pour ça : HTML Validator

asumbaa, mon deuxième souci n'est pas résolu par cette explication vu qu'il concerne la position relative d'un div par rapport a un autre. te sent tu d'y jeter un oeil?

Ta deuxième <div> aura un width de 20px inférieur à la première, tout simplement, puisque width donne la largeur "utile".

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[macgil]

MILLE FOIS MERCI!

encore une question naze, j'en ai conscience:
si j'ai une page avec iframe, avec un doctype en haut de la page contenante, dois-je en mettre un en haut des pages incluses dans l'iframe?

pour mon 2e souci:

de plus, si qqun maitrise à fond, j'ai un autre souci de différence de positionnement ie-firefox que je detaillerai volontiers avec exemple si quelqu'un se sent de résoudre le casse tête

il a tendance a etre plus complexe... tu as la patience de jeter un oeil?
(et desolé pour le deuxième a )

macgil

[Asumbaa]

Oh, t'étais là ! Alors...

si j'ai une page avec iframe, avec un doctype en haut de la page contenante, dois-je en mettre un en haut des pages incluses dans l'iframe?

La page principale aura un doctype "frameset" et les internes, chacune le doctype qui lui correspond comme si elle était indépendante.
Mais sache que "frame" est quasi un gros mot ici Si tu as moyen de faire sans (avec des include PHP par exemple) ce sera nettement mieux.

pour mon 2e souci:

de plus, si qqun maitrise à fond, j'ai un autre souci de différence de positionnement ie-firefox que je detaillerai volontiers avec exemple si quelqu'un se sent de résoudre le casse tête

il a tendance a etre plus complexe... tu as la patience de jeter un oeil?
(et desolé pour le deuxième a )

Expose, expose ! On est là pour ça et je ne suis pas toute seule à pouvoir te répondre !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[calimo]

Mais sache que "frame" est quasi un gros mot ici Si tu as moyen de faire sans (avec des include PHP par exemple) ce sera nettement mieux.

Pour plus d'infos, on peut se référer à l'article d'OpenWeb : http://openweb.eu.org/articles/finir_cadres/

Le nombre d'arguments est impressionnant, il est d'ailleurs au moins aussi impressionnant de voir que malgré tout cela, certaines personnes continuent d'en utiliser

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firegecko Firefox/1.5.0.4

[macgil]

pour vous rassurer, ca fait longtemps que j'include, mais je n'ai encore pas trouvé de solution pour includer avec une barre de défilement verticale si vous voyez ce que je veux dire... (une page d'une hauteur illimitée dans un espace limité)

je code des parties php pour un site sur lequel je n'ai aucun controle, et dont la webmaster, qui débute mais qui le fait bien, a la tete dure et veut faire seule, donc impossible de lui faire mettre du php à la base de son site


j'en reviens à mon souci de différence des blocs entre ie et firefox

voici un code html contenant 3 blocs, dont celui du millieu en contient 2

Code : Tout sélectionner

<BODY><center>
<div class="contenant">
	<div class="titre">a</div>
	<div class="page">
		<div class="gauche">b</div>
		<div class="centre">c <br><br>c<br><br>c<br><br>c<br><br>c <br><br>c<br><br>c<br><br>c<br><br>c <br><br>c<br><br></div>
	</div>
	<div class="pied">d</div>
</div>
</center>
</BODY>

en résumé, une bande en haut, une bande en bas, et dans l'espace central, une colonne à gauche et un bloc à droite.
(le code plein de <br> servant a creer des lignes, la fonction min-height n'etant pas reconnue par ie...


ceci étant défini par la css suivante:

Code : Tout sélectionner

div.titre{
height:100;
width:100%;
background-color: yellow;
}

div.page {
width: 100%;
text-align:left;
margin-top: 15;
background-color: red;
}

div.gauche {
float: left;
text-align:left;
width: 150;
height: 340;
background-color: green;
}


div.centre {
text-align:left;
float: left;
width: 785;
min-height: 340;
margin-left: 15;
background-color: black;
}

div.pied {
margin-top: 20;
height: 30;
width: 100%;
text-align:center;
background-color: blue;
}

je n'ai la bonne mise en page sur firefox, le bloc contenu passe au dessus du bloc page et pied au lieu de faire augmenter la hauteur de celui-ci

j'espère que je suis assez clair...
dernier détail... mettez un doctype... et plus rien ne marche mais c'est moins faux sur ie que sur firefox...

donc sos et merci d'avance....

[Asumbaa]

le bloc contenu passe au dessus du bloc page et pied au lieu de faire augmenter la hauteur de celui-ci

Euh... C'est pas très clair...

Au premier coup d'oeil :
- Il faut préciser que tu parles en pixels dans ta CSS :

Code : Tout sélectionner

width: 150px;
height: 340px;

- Je pense qu'il te manque un

Code : Tout sélectionner

clear: left;

dans ton pied de page pour qu'il aille se coller en dessous de tous tes éléments flottants.

D'autre part :
<center> à oublier si possible ; centre tout ça en css
<div class="titre"> se remplace avantageusement par <h1>
Pour des éléments uniques dans la page, "id" est plus approprié que "class"

Un include qui scrolle ? Tu le fais dans un élément de hauteur fixe avec un

Code : Tout sélectionner

overflow: scoll;

mais bon, si tu n'as pas la main sur tout, tu ne vas peut-être pas pouvoir tout améliorer


Edit : ah si, je crois que j'ai compris.
En fait tu ne veux pas que ton centre flotte ; essaye voir sans float: left; sur ton .centre (il faudra lui mettre un margin-left pour éviter que le .gauche le masque)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4

[macgil]

je vais tester tout cela...
je me met au doctype, ca permet déjà certaines corrections...

mais la j'ai un tableau qui ne respecte plus sa largeur en css... j'ai pas fini de rire je le sens....

super merci pour les conseils

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.4) Gecko/20060508 Firefox/1.5.0.4