Probleme de mise en page d'images

Bonjour tout le monde, je suis un nouveau venu dans le monde du XHTML-CSS et bien que j'ai lu les tutos attentivement et que j'ai patiemment essayé diverses combinaisons, j'échoue face au tout début d'un futur site web (la bannière! )
Donc pour ceux qui veulent bien m'aider voilà le blème :

J'ai 2 images, un logo et un bandeau qui vont former ma bannière. Le logo se place à gauche tout en haut de la page (c'est quasiment un carré) et le bandeau se place juste à droite du logo, il a la même hauteur que le logo.

mon code XHTML :

<div id="entete">
<span id="logo">
<img src="logo.gif" />
</span>
<span id="bandeau">
<img src="en-tete.jpg" />
</span>
</div>

Le CSS :

body {
        margin: 0;
        padding: 0;
        background: white;
}
#entete {
        position: relative;
}
#entete #logo {
        position: absolute;
        top: 0 px;
        left: 0 px;
}
#entete #bandeau {
        position: absolute;
        top: 0 px;
        left: 160 px;
}

(Le 160 px, c'est la largeur du logo)
Pour moi ça devrait marcher, mais le bandeau recouvre le logo!!

J'ai réussi à obtenir à peu près ce que je voulais en procédant d'autres manières(avec float par ex mais les images se chevauchaient si on reduisait la fenetre du navigateur) mais pas à avoir un résultat nickel, qui tourne à la fois sous Internet Explorer et Firefox.

Enfin bref si je poste ici c'est que je commence à désespérer...

Alors svp A L'AIDE!!
Si vous voulez récupérer les images pour tester de votre côté voila une adresse ou j'ai mis l'exemple :
http://ivan27.free.fr

Et merci d'avance

Bonjour,

Ton bandeau d'en-tête ayant un statut purement décoratif, sa place est dans ta feuille de style. En abandonnant toutes ces positions absolues et relatives injustifées et en optant pour une syntaxe sémantiquement adéquate, on obtient quelque chose comme ceci:

[b][#black]HTML[/#][/b]

<h1><img alt="Titre du site" src="logo.png" width="160" height="83"  /></h1>


[b][#black]CSS[/#][/b]

h1 {background:url(en-tete.jpg) no-repeat 160px 0;}

edit: un peu de lecture semble justifié:
Quel type de positionnement choisir ?


Cordialement,
Benjamin
Modifié par Benjamin D.C. (19 Jan 2007 - 20:06)

Bonjour.

J'ai peur de ne pas bien comprendre où est le problème. Si tu veux simplement que les images soient côte à côte c'est leur comportement d'origine donc pas besoin de positionnement absolu ou autre ...

Edit : grillé et en plus mieux expliqué.
Modifié par CNeo (19 Jan 2007 - 20:06)

Bonjour,

Sans revenir sur les explications ci-dessus tout à fait appropriée, un complément: le code CSS initial est ignoré par les navigateurs car incorrect. Il ne doit en effet pas y avoir d'espace entre la valeur et l'unité dans les règles du type top: 0px;...

Merci de vos réponses, surtout merci à laurent denis car je m'arrachais les cheveux de ne pas comprendre pourquoi les indications de positionnement ne fonctionnaient pas.
Par contre CNeo, bien que les balises <img> soient de type in-line, elles se comportent comme des blocs et se mettent l'une en dessous de l'autre sans spécifications css.

Enki a écrit :
Par contre CNeo, bien que les balises <img> soient de type in-line, elles se comportent comme des blocs et se mettent l'une en dessous de l'autre sans spécifications css.

Désolé de te dire çà mais j'ai essayé et elles se mettent côte-à-côte.

Enki a écrit :
Par contre CNeo, bien que les balises <img> soient de type in-line, elles se comportent comme des blocs et se mettent l'une en dessous de l'autre sans spécifications css.

CNeo a raison, elles devraient se placer l'une à côté de l'autre. Si elles passent à la ligne, c'est peut-être parce qu'elles n'ont pas assez de place pour faire autrement ?

Oui c'est ça, elles se mettent l'une en dessous de l'autre quand il n'y a pas assez de place(images trop grande ou réduction de la fenêtre)