Discussion :

[michel delorme]

bonjour

Débutant en css, je voudrais positionner sur ma page html, 2 images indépendantes l'une de l'autre
actuellement j'ai 2 images mais elles sont imbriquées l'une dans l'autre

voici mon script:
feuille css

Code :

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

1
2
3
4
5
6
7
8
.boussole { 
position:absolute; top:400px; left:1000px; 
} 
 
 
.velo {
    position:absolute; top:01; left:01;
}

page html

Code html :

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

1
2
3
4
5
6
7
    <DIV CLASS="boussole">     
    <IMG SRC="images/boussole.jpg" width="250"height="250"
 
 
    <DIV CLASS="velo">     
    <IMG SRC="images/velo2.png" width="400"height="300"
 </DIV>

pouvez vous me dire ce qui devrait être modifié

Dans les feuilles css on a des fois un . et j'ai vu aussi des #
Quelle diférence?
avec tous mes remerciements
Michel Delorme

[Invité]

Bonjour,

1- Quand on débute, la première chose à faire est de LIRE des tutos, pour connaitre au minimum les bases du langage.

• Les meilleurs cours et tutoriels pour apprendre le CSS

Pour répondre à ta question :

• .aaa : classe (<... class="aaa">)
• #bbb : identifiant unique (<... id="bbb">)

2- D'autre part (et c'est un conseil) : il ne faut pas abuser des position:absolute;.
Il existe suffisamment de moyens de positionner les éléments.

3- Autre conseil : pour que le site soit "responsive" (= s'adapte au média), on préfèrera généralement définir les largeurs en % (plutôt qu'en pixels).

4- Enfin, concernant ton code HTML : on mets, par convention, les noms de balises et attributs en minuscules.

[Invité]

Bonjour,

Je rajouterai que sur le code que tu as renseigné tes divs de sont pas immédiatement fermées après tes images c'est pour cela qu'elles sont imbriquées :

Code html :

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

1
2
3
4
5
6
<div class="div1">
      <img>
      <div class="div2">
            <img>
      </div>
</div>

Ici la "div2" est imbriquée dans la "div1", il faut bien penser à fermer ses balises et dans le bon ordre !

Cordialement,