[RESOLU] Une boite DIV flottante sur une image ?

D'après mes première recherches sur le forum, je n'ai rien trouvé.
Mon problème : arriver à créer une DIV flottante à droite sur une image.
je sais que je ne n'ai peut-être pas utilisé la bonne méthode, mais j'imerais avoir votre avis d'expert. Cela concerne mon blog http://neosting.net/

Comme un peu de code vaut mieux qu'un long discours : voici la petite partie html

<h1>
<a accesskey="h" href="http://neosting.net/" title="Page d'accueil du blog de NeoSting">
<img src="/wp-content/themes/neo/images/Header_NeoSting_cc-Kreiion.jpg" id="header" alt="logo neosting.net dessiné par Kreiion" width="660" height="140" />
<span class="texthidden">NeoSting.net</span></a>
</h1>

J'ai trouvé cette méthode pour essayer de rendre mon entête accessible. Peut-être faut-il que je m'y prenne autrement.
Ensuite, j'aimerais dans la partie haut -droite de l'image ajouter mon formulaire de recherche que je peux entourer d'une DIV.
Je ne veux absolument pas utiliser la propriété absolute, j'aimerais que ce soit placé naturellement.

Est-ce possible, et avez-vous une idée ? Merci par avance. Au passage, le thème est entièrement réalisé par mes soins.
Modifié par NeoSting (11 Apr 2011 - 12:03)

Bonjour,

dans la mesure où ton header est une image purement décorative (au sens où elle ne contient pas de contenu textuel vital à un screenreader), pourquoi ne pas mettre l'image dans la css, celà resterait accessible (je pense après je peux me planter). Ca te donnerait un code html du style :

 <h1> <a accesskey="h" href="http://neosting.net/" title="Page d'accueil du blog de NeoSting"> Titre de ton blog </a> </h1> 

Peut-être pourrais-tu également donner à ton blog un titre un peu plus "précis" que l'url pour des questions de référencement et donner une meilleur idée du contenu aux screenreaders. Exemple : "NeoSting.net, blog de Kreiion". Ca reste une suggestions. Voir rajouter un span avec un soustitre (blog description de wordpress)
Ensuite, tu vas placer ton image en css

h1{
width: /* taille de ton image */ ;
height:  /* taille de ton image  */;
background : url('tonimage') no-repeat;
text-indent: -9999px  /*là on cache le texte à l'autre bout de l'écran */
}

Du coup quand tu désactiverais la css et pour les screenreaders tu aurais les informations importantes dans le h1.

Ensuite, tu peux très bien placer ton autre div avec le formulaire au dessus de ton h1 dans le html en jouant sur un gros margin-left, margin top et z-index (quoi que si dans le html il est plus bas le z-index ne sera même pas obligatoire)

Voilà c'est comme ça que je ferais, mais il doit surement y avoir plusieurs possibilités

Par contre pourquoi tu ne veux absolument pas utiliser la propriété absolute ? (curiosité féminine ^^)
Modifié par InpIxelItrust (11 Apr 2011 - 09:49)

Je tenais tout d'abord à te remercier beaucoup pour ta précieuse aide.
J'ai écris un peu trop vite ; en fait, je ne voulais pas utiliser la propriété fixed, et non pas absolute, puisque justement, c'est à elle que je pensais (pour l'utiliser) quand j'ai écris mon post (je viens de m'en apercevoir).
Si je n'ai pas mis l'image dans le css, c'est parce que de souvenir, sur certains navigateurs, le ALT indispensable pour l'accessibilité, était affiché, chose que je ne voulais pas, lorsque je mettais l'image en base64 (je crois que c'est logique en fait). C'est un peu tordu, je te l’accorde. Il me manque bien une mini description (merci au passage).
<br />
Par contre pour mon span, plutôt que de mettre un display none, je vais plutôt mettre ton text-indent, que je n'avais pas pensé.

A la base, je voulais utiliser un float right, mais sur une image, dans ce type de configuration, je crois que ça sert à rien. Il semble que absolute réponde parfaitement au bon positionnement..