tete,menu,texteet pied separés par bandes noires

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateurs : chinon37, Kazé, bobo

ChristianTrambly
Salamandre
Messages : 26
Inscription : 20 févr. 2010, 09:02

tete,menu,texteet pied separés par bandes noires

Message par ChristianTrambly » 26 déc. 2014, 18:40

Bonjour à tous ,
J'ai un souci : les parties tête, menu,texte et pied sont separées par des bandes noires ou plus justement ne sont pas jointes
le site est : http://elevage.l.gatille.free.fr
et voici la page CSS:
*#body {
margin: 0px auto;
background-color: #0e100d;
width: 918px;
}
*#conteneur {
border: 5px solid #003300;
margin: 10px auto 0px;
width: 750px;
opacity: 0.89;
}
*#entete {
border-left-style: solid;
background-position: center center;
height: 102px;
font-style: italic;
background-repeat: no-repeat;
width: 750px;
font-family: Arial;
margin-top: 10px;
background-image: url(images/audour_banniere_et_texte.gif);
}
*#entetepage1 {
border-style: none none solid;
border-color: red black red -moz-use-text-color;
height: 292px;
background-position: center center;
width: 750px;
background-repeat: no-repeat;
background-image: url(images/audour.gif);
}
*#menu {
border-style: hidden;
color: black;
float: none;
font-weight: bold;
text-align: center;
width: 750px;
font-style: italic;
background-color: #87876b;
}
*#texte {
border-style: none;
border-color: #ffccff;
background-color: #b8b893;
width: 750px;
font-style: oblique;
}
*#textepage1 {
border: none;
background-image: url(images/veau.jpg);
margin-left: 0px;
background-position: center center;
height: 488px;
background-repeat: no-repeat;
width: 750px;
}
*#pied {
border-style: solid none none;
border-color: black #ffcc66 #ffcc66 #ffcc33;
border-top: 5px solid black;
text-align: center;
margin-top: 10px;
background-color: #b8b893;
margin-bottom: 10px;
}
*h2 {
color: black;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
font-style: oblique;
}
*.imggauche {
border: 5px solid #336666;
margin: 20px;
float: left;
}
*.imgdroite {
border: 5px solid #336666;
margin: 20px;
float: right;
}
*.photomenu {
padding-top: 30px;
}
*p {
text-indent: 1000px;
}
*.tabmenu {
border: 5px groove #847094;
color: #339999;
}
*h1 {
margin-bottom: 0px;
margin-top: 0px;
color: black;
}

Merci d'avance pour votre aide

Bonne fêtes de fin d'année à tous

Christian
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4212
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: tete,menu,texteet pied separés par bandes noires

Message par Ymai » 26 déc. 2014, 19:49

Bonjour
Est-il possible d'avoir plus de précisions? Il me semble que les directives de styles concernant:
- tête (est-ce #entete?): n'est utilisé nulle part dans le code HTML
- menu (#menu): n'est utilisé nulle part
- texte (#texte): n'est utilisé nulle part (ou est-ce #textepage1 qui est appliqué à une "div" vide?)
- pied: n'existe pas dans la page (ou est-ce #piedpage1 qui n'a aucune directive de style dans la feuille CSS)
Est-ce la fatigue? Je ne comprends pas trop bien... :roll:
À quels endroits précis y a-t-il un souci? Un dessin vaut mille mots...
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:34.0) Gecko/20100101 Firefox/34.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

ChristianTrambly
Salamandre
Messages : 26
Inscription : 20 févr. 2010, 09:02

Re: tete,menu,texteet pied separés par bandes noires

Message par ChristianTrambly » 26 déc. 2014, 20:26

bonsoir,
merci de vous êtes arrêté sur ma question
La page d'accueil n'est pas concernée - quoique, il y a une bande noire tout en haut non voulue
ce sont toutes les suivantes où les blocks ne se joignent pas :
http://elevage.l.gatille.free.fr/lauren ... ation.html
http://elevage.l.gatille.free.fr/lauren ... endre.html
http://elevage.l.gatille.free.fr/lauren ... iales.html
http://elevage.l.gatille.free.fr/lauren ... Ormes.html

@+
Christian
Votre Navigateur : Mozilla/5.0 (Windows NT 6.1; WOW64; rv:34.0) Gecko/20100101 Firefox/34.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4212
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: tete,menu,texteet pied separés par bandes noires

Message par Ymai » 28 déc. 2014, 21:09

Bonjour
Pour l'entête, il me semble que le souci (?) provient du fait que celle-ci est déclarée en niveau de titre 1. Ce qui est fort judicieux, a priori. Mais les titres de niveau 1 sont, par défaut, munis d'une marge. Pour éviter la bordure noire supérieure, il faudrait donc demander de réduire cette marge à 0.
Au niveau du code HTML, on pourrait alors lire quelque chose comme:

Code : Tout sélectionner

<h1 style="text-align: center;margin: 0">
<span style="font-style: italic;">Présentation<br>
Laurent GATILLE<br>
et l'exploitation
</span></h1>
(j'ai supprimé quelques balises inutiles générées à l'aide de coups de clics malencontreux dans la barre de mise en forme).
Toute la magie est dans le "margin: 0".
Et, tant qu'à faire, et pour être tout à fait propre, pourquoi pas introduire une directive de style

Code : Tout sélectionner

#texte h1 {
  margin: 0;
  font-style: italic;
  text-align: center;
}
et ne conserver que

Code : Tout sélectionner

<h1>Présentation<br>
Laurent GATILLE<br>
et l'exploitation</h1>
Pour la bas de page, la feuille de style indique

Code : Tout sélectionner

#pied {
    background-color: #b8b893;
    border-bottom-color: #ffcc66;
    border-bottom-style: none;
    border-left-color: #ffcc33;
    border-left-style: none;
    border-right-color: #ffcc66;
    border-right-style: none;
    border-top: 5px solid black;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
}
et le souci devrait disparaître en supprimant la directive
border-top: 5px solid black

Bon courage.
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:34.0) Gecko/20100101 Firefox/34.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

ChristianTrambly
Salamandre
Messages : 26
Inscription : 20 févr. 2010, 09:02

Re: tete,menu,texteet pied separés par bandes noires

Message par ChristianTrambly » 23 oct. 2017, 17:10

Bonjour,
Merci pour votre réponse qui date de bientôt 3 ans
Je me replonge dans mes "réalisation"...
Je vous donnerais le résultat dès que j'aurais mis à jour tout cela (travail d'hiver...)
Merci encore

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4212
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: tete,menu,texteet pied separés par bandes noires

Message par Ymai » 23 oct. 2017, 22:04

Bonjour
Est-il vraiment raisonnable d'encore utiliser un logiciel aussi ancien ?
Pas sûr qu'il ait un remplaçant. Ce serait peut-être mieux de changer de paradigme ; soit passer à un éditeur de texte pur (ce n'est pas inabordable, loin de là), soit passer à un système de blog.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

ChristianTrambly
Salamandre
Messages : 26
Inscription : 20 févr. 2010, 09:02

Re: tete,menu,texteet pied separés par bandes noires

Message par ChristianTrambly » 24 oct. 2017, 07:54

Bonjour,
Je ne comprends pas votre réponse
Vous me conseillez de ne plus utilisé Kompozer ?
@+

Christian

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4212
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: tete,menu,texteet pied separés par bandes noires

Message par Ymai » 24 oct. 2017, 08:09

ChristianTrambly a écrit :
24 oct. 2017, 07:54
Vous me conseillez de ne plus utilisé Kompozer ?
C'est tout à fait précisément cela...
KompoZer a pu être considéré comme un bon outil d'apprentissage du codage HTML. Mais il est maintenant tout à fait dépassé. Il ne connaît ni HTML5, ni CSS3.
Pour diverses raisons, je n'ai jamais été fanatique de http://www.bluegriffon.org/ , mais c'est peut-être une alternative valable.
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

ChristianTrambly
Salamandre
Messages : 26
Inscription : 20 févr. 2010, 09:02

Re: tete,menu,texteet pied separés par bandes noires

Message par ChristianTrambly » 24 oct. 2017, 10:22

Bonjour
Merci pour votre aide
bandes noires en haut et en pied de page : problème resolu - super

j'ai changé le CSS pour le h1 et l'ai appliqué pour essai seulement à : http://elevage.l.gatille.free.fr/lauren ... ation.html
toutes les directives ne s'appliquent pas, notamment le centrage du texte que j'ai du forcer et j'ai mis texte blanc pour essai aussi).
cela vient-il d'autres instructions qui se trouvent ailleurs et qui sont prioritaires
Voici mon CSS:
*#body {
margin: 0px auto;
background-color: #0e100d;
width: 918px;
}
*#conteneur {
border: 5px solid #003300;
margin: 0px auto 0px;
width: 750px;
opacity: 0.89;
}
*#entete {
border-left-style: solid;
background-position: center center;
height: 102px;
font-style: italic;
background-repeat: no-repeat;
width: 750px;
font-family: Arial;
margin-top: 0px;
background-image: url(images/audour_banniere_et_texte.gif);
}
*#entetepage1 {
border-style: none none solid;
border-color: red black red -moz-use-text-color;
height: 292px;
background-position: center center;
width: 750px;
background-repeat: no-repeat;
background-image: url(images/audour.gif);
}
*#menu {
border-style: hidden;
color: black;
float: none;
font-weight: bold;
text-align: center;
width: 750px;
font-style: italic;
background-color: #87876b;
}
*#texte {
border-style: none;
border-color: #ffccff;
background-color: #b8b893;
width: 750px;
font-style: oblique;
}
*#textepage1 {
border: none;
background-image: url(images/veau.jpg);
margin-left: 0px;
background-position: center center;
height: 488px;
background-repeat: no-repeat;
width: 750px;
}
*#pied {
border-style: solid none none;
border-color: black #ffcc66 #ffcc66 #ffcc33;
text-align: center;
margin-top: 0px;
background-color: #b8b893;
margin-bottom: 0px;
}
*h2 {
color: black;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
font-style: oblique;
}
*.imggauche {
border: 5px solid #336666;
margin: 20px;
float: left;
}
*.imgdroite {
border: 5px solid #336666;
margin: 20px;
float: right;
}
*.photomenu {
padding-top: 30px;
}
*p {
text-indent: 1000px;
}
*.tabmenu {
border: 5px groove #847094;
color: #339999;
}
*#h1 {
margin: 0
font-style: italic;
color: white;
text-align: center;
}

Merci d'avance

Christian

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Google [Bot] et 2 invités