Discussion :

[manchette]

Hello

Dans mon code xhtml j'ajoute une image en .jpg mais ensuite comment gérer sa position ?

pour gérer la taille de l'image j'ajoute width et height dans la balise img , le html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p>
Venez découvrir une solution qui vous rendra répondra à vos questions :<br /><br />
<div id="logo"><a href="http://www.google.fr"><img src="images/test.jpg" alt="logo test" title="test" width="50" height="50"/></div>
</p>

Mais ensuite comment gérer la position de l'image ?

exple : j'utilise ce css mais ca ne va pas : seul bottom left permet de voir l'image et je me retrouve avec 2 images (celle du html et celle du css) .

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#logo{
background: url("images/test.jpg") no-repeat bottom left fixed;
position: absolute;
width: 150px;
height: 200px;
margin: 0px;
padding: 0px;
z-index: 999;
}

Faut t'il passer par le html, par le css pour modifier à loisir la position ?

merci

[sebhm]

Bonjour,

il ne faut pas répéter l'image.
Soit tu l'insères dans ta page avec du HTML, tu utilises alors la balise <img>.
Soit tu la définis en background d'un autre élément HTML, tu utilises alors le CSS.
C'est l'un ou l'autre.

pour gérer la taille de l'image j'ajoute width et height dans la balise img

tu peux gérer tout cela en CSS, c'est meme mieux.

Mais ensuite comment gérer la position de l'image

en CSS.
Dis nous exactement ce que tu veux faire. Où veux tu afficher ton image ? Est-ce un arriere-plan ?

[HiRoN]

Bonjour,

Si l'image est juste décorative, il vaut mieux privilégier son inclusion le CSS.
Si elle est porteuse d'informations alors privilégier la balise img.

[manchette]

Hello


Je fais des tests en fait : un logo que je balade de gauche à droite

j'ai utilisé ca en css :
position:absolute; top:10px; left: 1175px; /*relative;*/

- "position:relative;" me le met à droite, mais là je ne vois pas comment rapprocher le logo du 1er titre h2 qui est juste en dessous.

- "position:absolute; top:10px; left: 1175px;" me le met à gauche car
"position:absolute; top:10px; right:0px;" ne le mettait pas assez à droite

une vraie usine à gaz le css ...


aprés j'ai mis des titres h2 avec un border-bottom pour faire un souligné.
Puis je joue avec margin et padding pour voir l'influence sur mon logo.
exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
h2
{
border-bottom: medium solid black;
padding: 10px;
}

[sebhm]

une vraie usine à gaz le css

peut etre que c'est ton code HTML l'usine à gaz ...

"position:absolute; top:10px; right:0px;" ne le mettait pas assez à droite

difficile de faire plus à droite pourtant.
mais c'est le conteneur de ton logo qui est peut etre mal positionné/dimensionné

Montre nous le code HTML+CSS du logo et du H2 pour qu'on puisse mieux t'aider

[midnnight]

manchette

"position:absolute; top:10px; left: 1175px;"

Ouahouh, avec un margin-left à 1175px; tu t'adresses à de "grands écrans"... non ?