Marge
Résolu
beate
Messages postés
166
Date d'inscription
Statut
Membre
Dernière intervention
-
beate Messages postés 166 Date d'inscription Statut Membre Dernière intervention -
beate Messages postés 166 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voici mon problème:
Dans l'entête de ma page, j'aimerais voir le logo à gauche et le titre à droite du logo, mais ce titre pas collé au cadre du haut. C'est pourquoi j'ai muni le titre d'une marge de 45px en haut.
Mon code dans la feuille CSS:
body {margin:0; }
#cadre {border:2px solid #1E90FF; width:730px; position:relative;margin:0 auto;}
#entete {height:116px;border:0;}
#titre {font-size:23px;margin:45px 10px 0 190px;text-align:left;}
#logo {float:left;}
Mon code html de la page:
<div id="cadre">
<div id="entete">
<img id="logo" src="logo_reduit.jpg" alt="logo" width="180px" height="116px" />
<div id="titre">Titre</div>
</div>
</div>
Avec IE tout s'affiche comme désiré, mais avec Firefox cette marge de 45px du haut du titre se met aussi au-dessus du logo, cela ne va pas. J'ai lu plusieurs fois dans ce forum qu'il faut que cela marche sutout avec Firefox.
Qui peut m'ader? C'est peut-êtrte tout simple, mais je ne vois pas.
Merci d'avance
Voici mon problème:
Dans l'entête de ma page, j'aimerais voir le logo à gauche et le titre à droite du logo, mais ce titre pas collé au cadre du haut. C'est pourquoi j'ai muni le titre d'une marge de 45px en haut.
Mon code dans la feuille CSS:
body {margin:0; }
#cadre {border:2px solid #1E90FF; width:730px; position:relative;margin:0 auto;}
#entete {height:116px;border:0;}
#titre {font-size:23px;margin:45px 10px 0 190px;text-align:left;}
#logo {float:left;}
Mon code html de la page:
<div id="cadre">
<div id="entete">
<img id="logo" src="logo_reduit.jpg" alt="logo" width="180px" height="116px" />
<div id="titre">Titre</div>
</div>
</div>
Avec IE tout s'affiche comme désiré, mais avec Firefox cette marge de 45px du haut du titre se met aussi au-dessus du logo, cela ne va pas. J'ai lu plusieurs fois dans ce forum qu'il faut que cela marche sutout avec Firefox.
Qui peut m'ader? C'est peut-êtrte tout simple, mais je ne vois pas.
Merci d'avance
14 réponses
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.
--
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.
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
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
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à
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.”
--
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.
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 :)
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
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”
--
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. ;-)
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!
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;”.
--
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
