DIV, H1 et superposition

re-bonjour,
je continue a travailler avec les DIV pour faire mes cadres .. jen suis au stade de mettre un titre Hn sous forme d'images. (jessais en fait de reproduire exactement l'ancien tuto)

j'arrive donc a mettre mon titre :

echo "<div class='cadre'>";
echo "<img id='droitehaut' src='../images/tab_haut-droit.gif' alt='' />";
echo "<h1><img src='../images/commentaires.gif' alt='titre' /></h1>";
....
...<jai enlevé la suite du code pour alléger>....
....

avec en css :

h1 {
text-align: left;
margin:0;
position: absolute;
top: -1px;
}

Le but étant que le titre se superpose à la div class='cadre'.
le hic se trouve là .. dans la configuration actuelle, l'aligement est parfais sour Firefox mais sous ie, ya un decallage de 1px vers le haut (le titre est 1 px trop haut).

Ya une astuce ? car j'ai essayé beaucoup de chose et à chaque fois soit c'est pil poil sous ie ou sous firefox mais jamais les 2 en meme temps..

Merci d'avance.
Modifié le 15 Dec 2004 - 15:02

pourquoi "echo" ? tu pourrais faire:

[#red][b]?>[/b][/#]
<div class='cadre'>
<img id='droitehaut' src='../images/tab_haut-droit.gif' alt='[b][#blue]Manque un texte alternatif[/#][/b]' />
<h1><img src='../images/commentaires.gif' alt='titre' /></h1>
[#darkred][b][i]</div>[/i][/b][/#]

[#red][b]<?php[/b][/#]

J'ai rajouté le </div> qui manquait. ça peut peut-être aider. Je n'ai pas regardé précisément, mais il faut fermer les balises

@+, HoPHP

ce que j'ai paste c'est une partie du code, le début.. mais autant pour moi, je ne l'ai pas précisé

Petit conseil :

Au lieu de mettre une image entre des balises h1 mets du texte entre span que tu mettras en display:none et met ton image en background de ton h1

Shemu a écrit :
Petit conseil :

Au lieu de mettre une image entre des balises h1 mets du texte entre span que tu mettras en display:none et met ton image en background de ton h1

Tu vas te faire taper dessus : display none n'est pas accessible et pose des problèmes (faire une recherche pour confirmer). Voir les solutions avec clip et/ou positionnement absolu.
--> http://blog-and-blues.org/weblog/2004/08/19/277-mettre-un-titre-en-image : Mettre un titre en image tout en restant accessible.

j'y suis personnellement arrivé comme ça :

HTML :

<div class="cadre">
<img class="titre" src="Images/bordures/update.gif" alt="titre" />  

CSS

.titre {
position:absolute;
top:-8px;
left:10px;
}

Arnaud a écrit :
j'y suis personnellement arrivé comme ça :

HTML :

<div class="cadre">
<img class="titre" src="Images/bordures/update.gif" alt="titre" />  

CSS

.titre {
position:absolute;
top:-8px;
left:10px;
}

Dans ce cas le titre n'a plus aucun sens et n'apparait même plus en tant que tel, il faut à mon avis conserver au minimum hn. L'objectif n'est pas d'avoir par une indication détournée, une information sur la nature du texte ou de l'image (html a prévu hn pour cela) mais bien d'avoir un titre balisé comme il se doit et en plus de restituer le titre lui-même pour l'utilisateur, ce qui n'est pas le cas dans ton exemple.

Igor a écrit :


Dans ce cas le titre n'a plus aucun sens et n'apparait même plus en tant que tel, il faut à mon avis conserver au minimum hn. L'objectif n'est pas d'avoir par une indication détournée, une information sur la nature du texte ou de l'image (html a prévu hn pour cela) mais bien d'avoir un titre balisé comme il se doit et en plus de restituer le titre lui-même pour l'utilisateur, ce qui n'est pas le cas dans ton exemple.

moi et la sémantique ça fait deux

ok Igor, mais alors comment faire pour que la balise Hn se positione de la meme façon sous Ie et firefox .. car le decalge de 1px c'est pas beau ...