Placement d'image en html5

Bonjour,

je suis en train de faire des tests et exercices en html 5 avec une structure sans <div>
le problème est que pour placer un logo ou une image, cela devient assez fastidieux. En clair je n'y arrive pas.

Auparavant j'envoyais mon logo via un CSS et maintenant le logo avec ses dimensions se situe dans le code html.
exemple :
<img src="image.png" alt="limage toto" width="120" height="60">

Faut-il créer un <div> pour le logo afin de le positionner en CSS comme avant?

J'écris ceci derrière ; position="absolute" top="0" lright="100" et rien ne se passe.

bref, je rame, alors est-ce que quelqu'un aurait une solution?

j'espère que mon explication est claire.

Merci d'avance.

Bonjour et bienvenue,

Utiliser HTML5 ne veut pas dire qu'il faut balancer les divisions à la poubelle !
Tu peux tout à fait englober ton logo dans une division pour le positionner.

Mais puisque tu parles du logo de la page, autant utiliser l'élément HTML5 <header>, qui peut être positionné et mis en forme comme une division
Par exemple :

HTML : 
<header role="banner">
<img src="…" alt="…" />
</header>
CSS :
header {
display: block;
position: absolute;
…
}

Modifié par audrasjb (05 Jan 2012 - 14:23)

Merci pour la réponse mais je crois que ce sera plus facile de transmettre mon code

alors en HTML :
<header>
<h2>Société </h2>
<img src="logo.png" alt="logo société" width="120" height="60">
<h3>nav
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">page 1</a></li>
<li><a href="#">page 2</a></li>
<li><a href="#">page 3</a></li></ul>
</h3>
</nav>
</header>

CSS

header, section, article, nav, footer, aside, menu, figcaption, figure, hgroup
{
display:block;
border:2px dashed #aaa;
margin:3px;
padding:3px;
}

header img
{
display: block;
position: absolute;
}

rien ne bouge...

Merci

salut,

je ne comprends pas tout ...
mais si tu veux positionner ton image dans ton header, déjà donne une règle du style :

header { position relative; }

et ensuite positionne l'image

header img { position:absolute; top:100px; left:100px; }

par exemple.

c'est ça ?

edit : et puis aussi pour IE n'oublies pas de créer les éléments, sinon tu vas devenir fou

pour le header par exemple :

<!--[if IE]>
        <script type="text/javascript">
            document.createElement("header");
        </script>
<![endif]--> 

Modifié par o06 (05 Jan 2012 - 15:30)

ah cool, tu m'as mis sur la voie...

j'avais juste à rajouter dans ce que tu m'as dit :

header img { position:absolute; top:100px; left:100px; }

ceci

header img { display:block; position: absolute; top: 0px; right: 0px; }

et ça marche.

Un grand merci mon ami

cedlam a écrit :
Faut-il créer un <div> pour le logo afin de le positionner en CSS comme avant?

Non, tu peux appliquer des styles CSS à l'image directement. D'ailleurs c'était déjà possible avant, en HTML4 (ou en HTML3...).

cedlam a écrit :
J'écris ceci derrière ; position="absolute" top="0" lright="100" et rien ne se passe.

Bah forcément, ça ne correspond à rien du tout cette syntaxe. Si c'est censé être du CSS, ce n'est pas du tout la bonne syntaxe. Si c'est censé être du HTML, alors ces attributs n'existent pas en HTML.

Edit: hmm, j'arrive après la guerre on dirait.
Modifié par fvsch (06 Jan 2012 - 14:57)