Marge
Résolu/Fermé
beate
Messages postés
166
Date d'inscription
dimanche 28 août 2005
Statut
Membre
Dernière intervention
7 juillet 2010
-
28 sept. 2007 à 19:09
beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 - 30 sept. 2007 à 15:17
beate Messages postés 166 Date d'inscription dimanche 28 août 2005 Statut Membre Dernière intervention 7 juillet 2010 - 30 sept. 2007 à 15:17
14 réponses
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 776
28 sept. 2007 à 21:23
28 sept. 2007 à 21:23
Bonjour,
Si tu n'as pas besoin de lien sur le logo, essaye ça :
++
Pour les titres, HTML propose des balises bien pratiques h1, h2…
Ici, dans ce forum, ce bouton sert à présenter le code.
--
Si tu n'as pas besoin de lien sur le logo, essaye ça :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titre ? Alors h1</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
body {
margin:0;
}
h1 {
margin : 0 auto;
background : transparent url(logo_reduit.jpg) 0 0 no-repeat;
width : 730px;
height : 116px;
line-height : 116px;
padding : 0 0 0 190px;
border : 2px dashed #1e90ff;
}
</style>
</head>
<body>
<h1>Titre</h1>
</body>
</html>
++
Pour les titres, HTML propose des balises bien pratiques h1, h2…
Ici, dans ce forum, ce bouton sert à présenter le code.
--
beate
Messages postés
166
Date d'inscription
dimanche 28 août 2005
Statut
Membre
Dernière intervention
7 juillet 2010
6
28 sept. 2007 à 22:38
28 sept. 2007 à 22:38
Merci beaucoup,
En effet les balises h1,2,... sont bien pratiques (le les avais utilisées ailleurs).
Mon problème est presque résolu. Mais l'entête est devenu trop large; comme si sa largeur se rajoutait à celle de l'image d'arrière- plan, et ce n'est pas normal.
CSS:
body {margin:0; }
#cadre {border:2px solid #1E90FF; width:730px; position:relative;margin:0 auto;background:#FFFFFF;}
#entete {height:116px;border:0;}
h1 {margin:0 auto; background:transparent url(images/logo_reduit.jpg) 0 0 no-repeat;
width:540px; height:116px; line-height:116px;padding: 0 0 0 190px; border:0;}
html:
<div id="cadre">
<div id="entete">
<h1>Compagnie des Oiseaux de Nuit</h1>
</div>
</div>
ça marche si je mets width:540px car 730-190=540 et je ne comprends pas pourquoi. L'image d'arrière-plan ne devrait pas prendre de place dans la largeur ...
Tu comprends pourquoi?
Merci.
En effet les balises h1,2,... sont bien pratiques (le les avais utilisées ailleurs).
Mon problème est presque résolu. Mais l'entête est devenu trop large; comme si sa largeur se rajoutait à celle de l'image d'arrière- plan, et ce n'est pas normal.
CSS:
body {margin:0; }
#cadre {border:2px solid #1E90FF; width:730px; position:relative;margin:0 auto;background:#FFFFFF;}
#entete {height:116px;border:0;}
h1 {margin:0 auto; background:transparent url(images/logo_reduit.jpg) 0 0 no-repeat;
width:540px; height:116px; line-height:116px;padding: 0 0 0 190px; border:0;}
html:
<div id="cadre">
<div id="entete">
<h1>Compagnie des Oiseaux de Nuit</h1>
</div>
</div>
ça marche si je mets width:540px car 730-190=540 et je ne comprends pas pourquoi. L'image d'arrière-plan ne devrait pas prendre de place dans la largeur ...
Tu comprends pourquoi?
Merci.
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
28 sept. 2007 à 23:51
28 sept. 2007 à 23:51
Bonsoir
Décidément je n'arrive toujours pas à comprendre cette mode qui veut que les tableaux soient bannis et que la mise en page s'effectue désormais, tant bien que mal (plutôt mal d'ailleurs) avec des DIV dont le comportement par défaut a toujours été de s'empiler les uns sous les autres ... lol
sinon en reprennant ton 1ere exemple et en remplaçant margin par padding dans le style de #titre ça semble s'afficher correctement.
mais comme je ne suis pas un adepte de ce type de mise en page je peux me tromper
Décidément je n'arrive toujours pas à comprendre cette mode qui veut que les tableaux soient bannis et que la mise en page s'effectue désormais, tant bien que mal (plutôt mal d'ailleurs) avec des DIV dont le comportement par défaut a toujours été de s'empiler les uns sous les autres ... lol
sinon en reprennant ton 1ere exemple et en remplaçant margin par padding dans le style de #titre ça semble s'afficher correctement.
mais comme je ne suis pas un adepte de ce type de mise en page je peux me tromper
beate
Messages postés
166
Date d'inscription
dimanche 28 août 2005
Statut
Membre
Dernière intervention
7 juillet 2010
6
29 sept. 2007 à 03:29
29 sept. 2007 à 03:29
Merci encore!
Ta remarque concernant les tableaux me semble pertinente.
Cela m'amène cependant à un autre problème que je n'arrive pas à comprendre.
Dans une page où un div contient un tableau (je les aime bien, et là c'est indispensable), le conteneur "cadre" est coupé à la hauteur où commence mon tableau, mais seulement avec Firefox. Avec IE tout s'affiche normalement.
Peux-tu m'expliquer encore ce comportement? Ou quelqu'un d'autre?
CSS:
body {margin:0; }
#cadre { width:730px; position:relative;margin:0 auto;}
#entete {height:116px;}
#gauche {width:150px; float:left;}
#page {margin:10px 20px 20px 190px;}
HTML:
<body>
<div id="cadre">
<div id="entete">
<h1>Titre</h1>
</div>
<div id="gauche">
...suit le menu...
</div>
<div id="page">
... suit le contenu avec le tableau...
</div>
</div>
</body>
Le fond blanc de la pagede "cadre est coupé, dès que commence la tableau dans "page". eL tableau et les reste est visible mais pas lisible car il manque ce fond blanc de "cadre" ...
Mystère
Bonne nuit
Il paraît que la nuit porte conseil ...
Ta remarque concernant les tableaux me semble pertinente.
Cela m'amène cependant à un autre problème que je n'arrive pas à comprendre.
Dans une page où un div contient un tableau (je les aime bien, et là c'est indispensable), le conteneur "cadre" est coupé à la hauteur où commence mon tableau, mais seulement avec Firefox. Avec IE tout s'affiche normalement.
Peux-tu m'expliquer encore ce comportement? Ou quelqu'un d'autre?
CSS:
body {margin:0; }
#cadre { width:730px; position:relative;margin:0 auto;}
#entete {height:116px;}
#gauche {width:150px; float:left;}
#page {margin:10px 20px 20px 190px;}
HTML:
<body>
<div id="cadre">
<div id="entete">
<h1>Titre</h1>
</div>
<div id="gauche">
...suit le menu...
</div>
<div id="page">
... suit le contenu avec le tableau...
</div>
</div>
</body>
Le fond blanc de la pagede "cadre est coupé, dès que commence la tableau dans "page". eL tableau et les reste est visible mais pas lisible car il manque ce fond blanc de "cadre" ...
Mystère
Bonne nuit
Il paraît que la nuit porte conseil ...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
29 sept. 2007 à 10:00
29 sept. 2007 à 10:00
Bjr
j'ai beau essayé je n'arrive pas à reproduire le pb dont tu parles. Tout est ok sous IE et FF
Faudrait que tu postes le code complet de ta page ou mieux que tu la mettes en ligne
voilà
j'ai beau essayé je n'arrive pas à reproduire le pb dont tu parles. Tout est ok sous IE et FF
Faudrait que tu postes le code complet de ta page ou mieux que tu la mettes en ligne
voilà
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 776
29 sept. 2007 à 11:12
29 sept. 2007 à 11:12
Ben moi, je ne vois pas ce qu'une nouvelle polémique inutile sur les tableaux viens faire ici.
Il est question de fabriquer un en-tête avec un titre.
Quid des tableaux ?
Pour la largeur trop grande, comme tu l'as compris, elle vient simplement de l'utilisation du padding gauche de 190px qui s'ajoute à la largeur du bloc.
C'est comme ça que c'est interprêté par les navigateurs. Ce n'est pas forcément logique, mais il faut faire avec.
Pour ta 2e question, d'accord avec PhP. Il nous en faut plus.
++ bis
“Ici, dans ce forum, utilise ce bouton pour présenter le code.”
--
Il est question de fabriquer un en-tête avec un titre.
Quid des tableaux ?
Pour la largeur trop grande, comme tu l'as compris, elle vient simplement de l'utilisation du padding gauche de 190px qui s'ajoute à la largeur du bloc.
C'est comme ça que c'est interprêté par les navigateurs. Ce n'est pas forcément logique, mais il faut faire avec.
Pour ta 2e question, d'accord avec PhP. Il nous en faut plus.
++ bis
“Ici, dans ce forum, utilise ce bouton pour présenter le code.”
--
beate
Messages postés
166
Date d'inscription
dimanche 28 août 2005
Statut
Membre
Dernière intervention
7 juillet 2010
6
29 sept. 2007 à 12:32
29 sept. 2007 à 12:32
Merci pour vos réponses, PhP et Gihef!
Vous êtes sympas de me répondre.
Je comprends qu'il vous faut plus d'information. Voici donc:
J'ai mis provisoirement en ligne la page en question, il s'agit de la partie "contact" dans http://www.lesoiseauxdenuit.ch/essai.
Chez moi, sur Firefox, le cadre se termine dès que le tableau contenant les infos commence. Et je ne vois pas pourquoi. Sur IE pas de problème. Je peux metre toutes les infos les unes sous les autres, mais il devrait y avoir possibilité d'utiliser un tableau...
Il fait beau chez moi, j'espère aussi chez vous.
Vous êtes sympas de me répondre.
Je comprends qu'il vous faut plus d'information. Voici donc:
J'ai mis provisoirement en ligne la page en question, il s'agit de la partie "contact" dans http://www.lesoiseauxdenuit.ch/essai.
Chez moi, sur Firefox, le cadre se termine dès que le tableau contenant les infos commence. Et je ne vois pas pourquoi. Sur IE pas de problème. Je peux metre toutes les infos les unes sous les autres, mais il devrait y avoir possibilité d'utiliser un tableau...
Il fait beau chez moi, j'espère aussi chez vous.
warlix
Messages postés
1201
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
288
29 sept. 2007 à 12:56
29 sept. 2007 à 12:56
salut
D un autre coté le lien que tu fourni ne marche pas , enfin chez moi ^^
il fini par /essais , je pense que c est une erreur du au mode lecture interne (sur ton post)
c est : http://www.lesoiseauxdenuit.ch/essai/
Pour le reste je vais laisser les pros donner leurs avis :)
D un autre coté le lien que tu fourni ne marche pas , enfin chez moi ^^
il fini par /essais , je pense que c est une erreur du au mode lecture interne (sur ton post)
c est : http://www.lesoiseauxdenuit.ch/essai/
Pour le reste je vais laisser les pros donner leurs avis :)
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 776
29 sept. 2007 à 19:33
29 sept. 2007 à 19:33
Il finit surtout par un “.” point.
http://www.lesoiseauxdenuit.ch/essai
--
http://www.lesoiseauxdenuit.ch/essai
--
warlix
Messages postés
1201
Date d'inscription
mercredi 25 juillet 2007
Statut
Contributeur
Dernière intervention
21 février 2009
288
29 sept. 2007 à 13:03
29 sept. 2007 à 13:03
La seule difference que je vois entre ie et fx c est la taille
Si tu veux avoir un site plus centré , je te conseille de mettre en bg l image et de faire un <div>header
et d y inclure deux autres <div>logo et <div>titre
tu pourras donc régler l espace entre les deux sans pb , bon je ne suis pas fort pour expliquer , je parle de div interieur , mais c est surement un autre nom "u" l ou autre
et tu régles (de mémoire) le padding-rigth ou padding: rigth 50px
enfin un truc du style ; dsl pour mon manque de maitrise du truc :p
Si tu veux avoir un site plus centré , je te conseille de mettre en bg l image et de faire un <div>header
et d y inclure deux autres <div>logo et <div>titre
tu pourras donc régler l espace entre les deux sans pb , bon je ne suis pas fort pour expliquer , je parle de div interieur , mais c est surement un autre nom "u" l ou autre
et tu régles (de mémoire) le padding-rigth ou padding: rigth 50px
enfin un truc du style ; dsl pour mon manque de maitrise du truc :p
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 776
29 sept. 2007 à 19:47
29 sept. 2007 à 19:47
Une solution serait de corriger les erreurs de ta feuille de styles.
Il semble que ça suffise.
À quoi j'ajouterai, évite les tailles de texte en px, et, pour le HTML :
• pas de “px” dans les dimensions
• “»” plutôt que “»”
• “class” plutôt que “classe”
--
Il semble que ça suffise.
À quoi j'ajouterai, évite les tailles de texte en px, et, pour le HTML :
• pas de “px” dans les dimensions
• “»” plutôt que “»”
• “class” plutôt que “classe”
--
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
29 sept. 2007 à 20:54
29 sept. 2007 à 20:54
Bsr
Comme l'a très justement dit Gihef commence par corriger tes feuilles de styles.
Autrement ta page s'affiche très sensiblement de la même façon sous IE et FF sauf la page contact (voir ci-après)
Onglet Accueil : voici les petites différences que j'ai noté
Le titre Accueil de ton texte (pas celui de l'onglet) commence légèrement plus haut sur FF que sur IE : j'ignore quel navigateur fourni le bon affichage par contre
A la fin du texte après "... newsletter :" on finit par avoir un décalage total de 4mm en plus environ sur IE
La zone encadrée "La Contrebasse" est plus haute sous IE comme si les marges n'étaient pas les mêmes.
Idem pour la zone contenant l'image de la contrebasse : la marge du bas est différente des autres marges sur IE.
Quant aux autres zones contenant "mon adresse email" , "je m'incris" etc elles sont presque collées sous FF mais très espacées sous IE.
De plus les tailles des marges diffèrent entre IE et FF.
Onglet Contact :
là ça semble correct sous IE.
sous FF effectivement il y a un pb !
dans ta feuille de styles pour #page remplace heigth par height et ça va fonctionner bcp mieux forcément lol
IE 6.0.26 / FF 2.0.0.7
PS : je ne polémique pas sur les tableaux je les trouve toujours autant pratique pour mettre en page c'est tout. ;-)
Comme l'a très justement dit Gihef commence par corriger tes feuilles de styles.
Autrement ta page s'affiche très sensiblement de la même façon sous IE et FF sauf la page contact (voir ci-après)
Onglet Accueil : voici les petites différences que j'ai noté
Le titre Accueil de ton texte (pas celui de l'onglet) commence légèrement plus haut sur FF que sur IE : j'ignore quel navigateur fourni le bon affichage par contre
A la fin du texte après "... newsletter :" on finit par avoir un décalage total de 4mm en plus environ sur IE
La zone encadrée "La Contrebasse" est plus haute sous IE comme si les marges n'étaient pas les mêmes.
Idem pour la zone contenant l'image de la contrebasse : la marge du bas est différente des autres marges sur IE.
Quant aux autres zones contenant "mon adresse email" , "je m'incris" etc elles sont presque collées sous FF mais très espacées sous IE.
De plus les tailles des marges diffèrent entre IE et FF.
Onglet Contact :
là ça semble correct sous IE.
sous FF effectivement il y a un pb !
dans ta feuille de styles pour #page remplace heigth par height et ça va fonctionner bcp mieux forcément lol
IE 6.0.26 / FF 2.0.0.7
PS : je ne polémique pas sur les tableaux je les trouve toujours autant pratique pour mettre en page c'est tout. ;-)
beate
Messages postés
166
Date d'inscription
dimanche 28 août 2005
Statut
Membre
Dernière intervention
7 juillet 2010
6
29 sept. 2007 à 22:30
29 sept. 2007 à 22:30
Merci à vous tous!
Pourles marges avec les div, il y a des comportements parfois étonnants.
On se sent un peu bête lorsqu'il aurait fallu, surtout, corriger la feuille de style!!
Le plus grand problème était d'orthographe, height est juste, heigth non. IE l'a corrigé(?), FF non...
Il me semble qu'à part des détails, le problème principal est résolu.
Merci encore, et bon weekend!
Pourles marges avec les div, il y a des comportements parfois étonnants.
On se sent un peu bête lorsqu'il aurait fallu, surtout, corriger la feuille de style!!
Le plus grand problème était d'orthographe, height est juste, heigth non. IE l'a corrigé(?), FF non...
Il me semble qu'à part des détails, le problème principal est résolu.
Merci encore, et bon weekend!
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 776
30 sept. 2007 à 09:40
30 sept. 2007 à 09:40
Ces problèmes étant résolus, je me permets quand même de continuer la discussion.
Il reste une limitation qui pose problème, la “height:450px;” de #page ne permet pas à presentation de s'afficher complètement. Du texte déborde et se perd sur le fond de la page.
Supprime-le ou autorise un overflow.
Et utilise de préférence “background-color:#ffffff;” à “background:#ffffff;”.
--
Il reste une limitation qui pose problème, la “height:450px;” de #page ne permet pas à presentation de s'afficher complètement. Du texte déborde et se perd sur le fond de la page.
Supprime-le ou autorise un overflow.
Et utilise de préférence “background-color:#ffffff;” à “background:#ffffff;”.
--
beate
Messages postés
166
Date d'inscription
dimanche 28 août 2005
Statut
Membre
Dernière intervention
7 juillet 2010
6
30 sept. 2007 à 15:17
30 sept. 2007 à 15:17
Gihef,
Merci pour ta remarque et tes conseils.
J'ai donc augmenté la hauteur du div #page dans la feuille css à 500px. J'avais introduit cette hauteur pour qu'une page contenant un tableau soit affichée correctement. Ce que je ne comprends topujours pas, c'est pourquoi, sous FF, un div ne devienne pas automatiquement assez haut pour afficher tous les éléments qu'il contient, y compris tableaux et images ...Mystère.
Je vais commencer à étudier cet "overflow" dont tu parles.
Merci encore
Merci pour ta remarque et tes conseils.
J'ai donc augmenté la hauteur du div #page dans la feuille css à 500px. J'avais introduit cette hauteur pour qu'une page contenant un tableau soit affichée correctement. Ce que je ne comprends topujours pas, c'est pourquoi, sous FF, un div ne devienne pas automatiquement assez haut pour afficher tous les éléments qu'il contient, y compris tableaux et images ...Mystère.
Je vais commencer à étudier cet "overflow" dont tu parles.
Merci encore
