28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème innommable...

Bonjour à tous,

Je suis tout nouveau sur ce forum, ceci est mon premier post Smiley cligne . J'espère que je ne vais pas enfraindre quelques unes des règles qui le régissent.

Bon donc j'ai un problème extrêmement simple et étrange. Je désire placer une image dans un "div" et faire en sorte que le div entoure de toute part cette image en la collant. Pour ce faire, j'ai simplement écrit :


<body>
  <div id="header">
    <img alt="logo du BES" src="images/bes_web_logo.png" />
  </div>
</body>


Avec comme style ceci :

body, html, * {
  margin: 0;
  padding: 0;
}

#header {
  border-bottom: 1px solid #FFD62F;
  background-color: green;
}

#header a img {
  border: none;
}


Et ça ne marche pas sous firefox !! (Par contre sur IE bien).

Un exemple de ceci se trouve ici : http://student.ulb.ac.be/~palexis/test/

Au vu de cet exemple, ma question pourrait se résumée à : mais pourquoi y'a-t-il du vert sour l'image ?

Merci beaucoup d'avance !
Modifié par Piloutje (11 Jun 2005 - 10:16)
Salut

Piloutje a écrit :

Je suis tout nouveau sur ce forum, ceci est mon premier post Smiley cligne .


Bienvenue à toi donc!

Piloutje a écrit :

J'espère que je ne vais pas enfraindre quelques unes des règles qui le régissent.


Raté : posté dans la mauvaise section et il fallait utiliser la fonction recherche pour trouver réponse à cette question qui a déjà été posé un bon millier de fois.


#header img {
display:block;
}


Tu fera mieux la prochaine fois. Smiley cligne
ha merde alors, je vous présente toutes mes confuses...

bon et si j'ai bien compris je dois aller revoir mes notions de block et inline Smiley confused Smiley confused Smiley confused

merci beaucoup !
hum c'est encore moi... j'ai chercher un peu sur le forum et j'ai pas trouvé de thread similaire (pas facile de trouver les bons mots clés de recherche !).

En fait je ne comprend pas pourquoi le fait de passer l'image en block résud le problème... ou pourquoi en inline on a se comportement bizarre...

Merci beaucoup !
ha et aussi moi je vois ce code là sur la page d'accueil de http://css.alsacreations.com/

<div id="banner">
<a title="Aller à l'accueil" accesskey="1" href="/"><img alt="logo Alsacreations" src="../../../../xmedia/theme/design/titre.gif" /></a>
</div>


avec comme styles :

#banner {
	margin: 0px;
	padding: 0px;
	height: 80px;
	border: none;
}

#banner a img {
	margin: 5px 0 0 15px;
	border: none;
}


et donc pas de passge de l'image en block... et pourtant ça marche !
je crois tout simplement que l'image dont tu parles, est le titre " Alsacreations " qui doit etre realisé sur un fond transparent
donc la bordure est egalement transparente

c'est une bonne solution non ? Smiley smile
Administrateur
Piloutje a écrit :

Par contre pourquoi ça marche avec le code que j'ai copié de cet site... ?

Le problème se pose uniquement lorsque les images ont une hauteur inférieure à la hauteur de ligne de texte par défaut; ce qui semble être ton cas Smiley smile
Sujet clos
Aller à