Positionnement image et filets noirs indésirables - CSS

Le
Nikita Calvus-Mons
Bonjour,

Je ne comprends pas pourquoi l'image titre a une marge au-dessus d'elle,
ici : http://transe.idiomatique.org/ (elle est dans un body avec marges
à 0, puis un div "wrapper" avec marges à zéro, puis un div "header" avec
marges à zéro.

Et je ne comprends pas non plus pourquoi elle a un filet noir au-dessus
et en dessous, ces filets ne faisant d'ailleurs pas la largeur du div ou
de l'image (et n'étant pas dans l'image, of course)

Idéalement j'aimerais pas de filets du tout, vu que j'ai spécifié
border: none;

Un peu incompréhensible pour moi !

N.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
rm
Le #22043951
Le Sun, 13 Dec 2009 20:32:19 +0100, Nikita Calvus-Mons

Bonjour,



Salut,

Je ne comprends pas pourquoi l'image titre a une marge au-dessus d'elle,
ici : http://transe.idiomatique.org/ (elle est dans un body avec marges
à 0, puis un div "wrapper" avec marges à zéro, puis un div "header" avec
marges à... zéro.

Et je ne comprends pas non plus pourquoi elle a un filet noir au-dessus
et en dessous, ces filets ne faisant d'ailleurs pas la largeur du div ou
de l'image... (et n'étant pas dans l'image, of course)

Idéalement j'aimerais pas de filets du tout, vu que j'ai spécifié
border: none;

Un peu incompréhensible pour moi !



Je ne suis pas un champion du débug mais en jouant 30 secondes avec
l'extension Dragonfly de mon Opera préféré, et en visant bien, on tombe
sur un bout de CSS qui fait :

.image {
display: inline-block;
width: 510px;
border-top: 1px solid #000000;
border-right: 0 solid #000000;
border-bottom: 1px solid #000000;
border-left: 0 solid #000000;
margin: 15px 0 5px;

et qui pourrait expliquer, j'espère, les 15 pixels de marge haute
"inattendue"

@+
--
rm - http://opera-fr.com
Anne G
Le #22043941
Le 12/13/09 12:32 PM, Nikita Calvus-Mons a écrit :
Bonjour,

Je ne comprends pas pourquoi l'image titre a une marge au-dessus d'elle,
ici : http://transe.idiomatique.org/ (elle est dans un body avec marges
à 0, puis un div "wrapper" avec marges à zéro, puis un div "header" avec
marges à... zéro.

Et je ne comprends pas non plus pourquoi elle a un filet noir au-dessus
et en dessous, ces filets ne faisant d'ailleurs pas la largeur du div ou
de l'image... (et n'étant pas dans l'image, of course)

Idéalement j'aimerais pas de filets du tout, vu que j'ai spécifié
border: none;

Un peu incompréhensible pour moi !



Pas de filet dans SeaMonkey, demi-filets dans Safari, filets complets
dans Internet Explorer.

Pas de bande jaune en haut non plus dans SeaMonkey

Je comprends votre désarroi, ayant passé deux jours à refaire
entièrement une page pour éviter ce genre de trucs...
Nikita Calvus-Mons
Le #22043931
rm a écrit :

Je ne suis pas un champion du débug mais en jouant 30 secondes avec
l'extension Dragonfly de mon Opera préféré, et en visant bien, on tombe
sur un bout de CSS qui fait :

.image {
display: inline-block;
width: 510px;
border-top: 1px solid #000000;
border-right: 0 solid #000000;
border-bottom: 1px solid #000000;
border-left: 0 solid #000000;
margin: 15px 0 5px;

et qui pourrait expliquer, j'espère, les 15 pixels de marge haute
"inattendue"



Ouais, incroyable mais vrai. Je l'ai virée.

C'est ça de reprendre des thèmes existants !

Cela dit ça n'explique pas mes drôles de filets "partiels" (qui ont
disparu aussi, du coup).

Ah si !!

Bien sûr, ce "width: 510px;", que j'ai viré également, était débile vu
que mon image fait 860...

Comprends pas d'ailleurs pourquoi un div avec largeur forcée comme ça ne
redimensionne pas l'image, mais bon.

Tout va bien, sans border et sans width débile.

Merci,

N.
SAM
Le #22043921
Le 12/14/09 11:07 AM, Nikita Calvus-Mons a écrit :

Comprends pas d'ailleurs pourquoi un div avec largeur forcée comme ça ne
redimensionne pas l'image, mais bon.



Pour forcer l'image / au div :

div { width: 580px }
div img { width: 100% }

sinon, bien entendu,
c'est la taille naturelle de l'image qui commandera.


(sauf à autre css débile ;-) )
(ou pire: html du même tonneau)
--
sm
Publicité
Poster une réponse
Anonyme