Une bande parasite
Bernd
Je commence un petit site sans importance mais voilà qu'une difficulté
imprévue commence :
Qui pourrait me dire ce que vient faire ici la bande parasite grise
juste sous la banière :
http://italiasev.free.fr/bande2
J'ai cherché à l'éliminer et y suis parvenu en mettant une bordure à la
boite <div id="env"> qui entoure le site.
Résultat :
http://italiasev.free.fr/bande1
Mais pourquoi un simple "border" supprime cette bande qui normalement
n'a rien à faire là ?
Je ne comprends pas du tout.
CSS simplifié de bande 1 ----------------------
#env{
width:820px;
margin:0 auto;
background-color:#969696;
border: 1px solid #ccc;} <-- La bordure qui résoud le problème est là
body {font-family:"Comic Sans MS";
font-size:1em;}
#contenu {margin:0;
margin-left:10em;
background-color:#fff;
padding:0 1.5em;
border: 1px solid #ccc;
}
CSS simplifié de bande 2 ----------------------
#env{
width:820px;
margin:0 auto;
background-color:#969696;}
body {font-family:"Comic Sans MS";
font-size:1em;}
#contenu {margin:0;
margin-left:10em;
background-color:#fff;
padding:0 1.5em;
}
html simplifié -------------------------------
<body>
<div id="env">
<div id="ban"><img src="image/ban.jpg"></div>
<div id="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="p2.html">On a préféré</a></li>
<li><a href="p3.html">Par Arleston</a></li>
<li><a href="p4.html">Par Jarry</a></li>
</ul>
</div>
<div id="texte">
<h2> La bande dessinée fantastique </h2>
Il n'y a pas plus basique et pourtant cette bande apparaît bien où il ne
faudrait pas...
Merci
--
A+
Romer
Pascale
news:1iw7o66.1bfn8j8isfjcN%ro...@bernd.invalid:
> Je commence un petit site sans importance mais voilà qu'une difficulté
> imprévue commence :
>
> Qui pourrait me dire ce que vient faire ici la bande parasite grise
> juste sous la banière :
Il y a peu de chances que je sois capable de t'aider, néanmoins, je
remarque au moins un truc qui me paraît bizarre : pourquoi le fond gris
s'applique-t-il à l'ensemble de la div nommé env, et non pas seulement au
menu de gauche (div nommée menu) ?
--
Pascale
Bernd
> Il y a peu de chances que je sois capable de t'aider, néanmoins, je
> remarque au moins un truc qui me paraît bizarre : pourquoi le fond gris
> s'applique-t-il à l'ensemble de la div nommé env, et non pas seulement au
> menu de gauche (div nommée menu) ?
Bonne remarque - en fait, c'est une astuce qui permet de colorer le menu
et la boite dans lequel il se trouve quelle que soit la hauteur de la
page. Je ne vois pas d'autres solutions pour faire cela, utilise cela
depuis longtemps et ça marche mais il est possible que le
dysfonctionnement que j'évoque vienne de là - cela dit, je ne vois pas
pourquoi l'ajout d'une bordure remette tout en place...
--
A+
Romer
Pascale
news:1iw7tu3.gwyn0g1n5f5rcN%ro...@bernd.invalid:
> et la boite dans lequel il se trouve quelle que soit la hauteur de la
> page. Je ne vois pas d'autres solutions pour faire cela, utilise cela
> depuis longtemps et ça marche mais il est possible que le
> dysfonctionnement que j'évoque vienne de là - cela dit, je ne vois pas
> pourquoi l'ajout d'une bordure remette tout en place...
J'espère tout d'abord que des gens plus qualifiés que moi vont se pencher
sur ton cas, sinon c'est mal barré (-:
Comme je ne sais pas répondre à ta question, je fais une autre remarque :
pourquoi justement ce div qui englobe tout ? Ce que tu mets dedans tu
pourrais tout aussi bien l'appliquer au body, non ?
Un autre truc que je trouve curieux (mais j'ai peut-être tort) : margin:0
auto; C'est auto ou 0 ?
--
Pascale
SAM
> Bonjour,
>
> Je commence un petit site sans importance mais voilà qu'une difficulté
> imprévue commence :
>
> Qui pourrait me dire ce que vient faire ici la bande parasite grise
> juste sous la banière :
>
> http://italiasev.free.fr/bande2
C'est le titre h2 qui fait ça.
Ça se répare avec :
#texte h2 { margin-top: 0 }
ou :
#texte { border: 1px solid }
Au moins pour Firefox.
Pourquoi les H ou P continuent à vouloir de l'air en dehors de leur
conteneur s'il n'est pas bordé (ou limité), je ne sais.
Un autre "truc" est :
#texte { overflow: auto }
La marge naturelle haute du H2 est ainsi intégrée au div 'texte'
(devrait fonctionner aussi dans IE)
Morale : la bordure (qui troublera IE) n'est pas nécessaire
--
sm
Bernd
> J'espère tout d'abord que des gens plus qualifiés que moi vont se pencher
> sur ton cas, sinon c'est mal barré (-:
> Comme je ne sais pas répondre à ta question, je fais une autre remarque :
> pourquoi justement ce div qui englobe tout ? Ce que tu mets dedans tu
> pourrais tout aussi bien l'appliquer au body, non ?
Non car le body c'est tout le fond du site et on peut de même lui
appliquer ce cette façon une couleur différente.
> Un autre truc que je trouve curieux (mais j'ai peut-être tort) : margin:0
> auto; C'est auto ou 0 ?
C'est bien margin:0 auto; cela permet de centrer automatiquement le site
après lui avoir évidemment obligatoirement attribué une largeur fixe -
j'ai choisi 820px mais cette valeur va grandir avec le temps au fur et à
mesure que les écran s'agrandissent.
La largeur fixe du site est une option. On peut choisir aussi la largeur
maxi de l'écran par ex.
--
A+
Romer
SAM
> Pascale <chaton.t...@alussinan.org> wrote:
>
>> J'espère tout d'abord que des gens plus qualifiés que moi vont se pencher
>> sur ton cas, sinon c'est mal barré (-:
#texte { overflow: auto }
cf: autre post
Bernd
Merci de l'info.
> Un autre "truc" est :
>
> #texte { overflow: auto }
>
> La marge naturelle haute du H2 est ainsi intégrée au div 'texte'
> (devrait fonctionner aussi dans IE)
Je verrai cela lundi au travail.
--
A+
Romer