Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Une bande parasite

7 réponses
Avatar
romer
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

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

7 réponses

Avatar
Pascale
(Bernd) écrivait
news:1iw7o66.1bfn8j8isfjcN%:

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
Avatar
romer
Pascale <chaton.tigre+ wrote:

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
Avatar
Pascale
(Bernd) écrivait
news:1iw7tu3.gwyn0g1n5f5rcN%:

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
Avatar
SAM
Le 3/7/09 2:52 PM, Bernd a écrit :
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
Avatar
romer
Pascale <chaton.tigre+ 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é (-:
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
Avatar
SAM
Le 3/7/09 4:53 PM, Bernd a écrit :
Pascale <chaton.tigre+ 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
Avatar
romer
SAM wrote:

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