Html 5 Positionner ses images [Fermé]

Signaler
Messages postés
18
Date d'inscription
lundi 24 mars 2014
Statut
Membre
Dernière intervention
20 septembre 2014
-
Messages postés
18
Date d'inscription
lundi 24 mars 2014
Statut
Membre
Dernière intervention
20 septembre 2014
-
Bonjour je suis actuellement en train de coder un site en HTML 5 et CSS 3 et je bloque car je souhaite mettre deux logo dans le "footer" Mais je n'arrive pas a les différencier dans le CSS l'un de l'autre et donc quand je règle un paramètre pour un ça me fait la même chose pour l'autre (ex: ils vont tout les deux au même endroit...), donc si quelqu'un saurais comment faire pour qu'ils soient indépendants je suis preneur ! :) Merci d'avance.

Cordialement pierre.

4 réponses

Salut,

je voit je voit... non en fait je ne voit pas...
Je suit magicien(hihi !!!) mais pas devin et je ne sait pas deviner ni votre HTML ni votre CSS.

Si vous ne savez pas différencier 2 propriétés de styles(le css) apprenez:

Votre CSS est "relié" à vos balises HTML par plusieurs "méthodes" possibles, 3 façon d'appliquer un style CSS:
_pour toutes les balises en utilisant une classe qui "décrit" les styles pour cette balise: .div{width:20%;} toutes les balises div auront une taille de 20%

_par une classe(attribut class dans le html):
.marcel{width:20%;} toutes les balises qui ont la classe marcel auront 20% de large
le css est appliqué comme ceci: <p class="marcel">Salut j'ai une classe CSS</p>

_par une identifiant(attribut id dans la balise):
#paul{width:20%;} une seule balise avec l'id aura la(ou les) propriétés de l'identifiant.
appliqué comme ceci <p id="paul">J'i une id CSS</p>

Si vous avez un soucis avec ceci je vous conseille de commencer par un cours de base sur le CSS.

Si vous ne savez pas ce qu'est un 'attribut' de balise HTML je vous conseille de commencer par les bases des balises HTML.
Messages postés
18
Date d'inscription
lundi 24 mars 2014
Statut
Membre
Dernière intervention
20 septembre 2014

J'arrive a différencier c'est juste que dans le html j'ai ça

<a href="https://twitter.com/DiviizZ"><img src="logo_twitter.png" /></a>

et ça

<a href="https://www.youtube.com/channel/UCr174sEhPeeYP9JvZRsuwPQ"><img src="logo_youtube.png" /></a>

Et quand dans le CSS je fais ça:

img {
width: 50px;
position:absolute;
top: 800px;
left: 300px;
}

Ça me fait bouger les deux mêmes logo aux mêmes endroits ( ce que je ne veux pas ^^ ) Et j'aimerais avoir un moyen de pouvoir les nommer autre que "img" pour pouvoir déplacer les deux logo librement !

Je m'étais peut-être mal exprimé j'espère que ça vous paraîtra plus clair ! Merci d'avance :) !
Attribue un "nom" à tes deux images.

Si deux personnes s'appelant Paul sont dans la rue et que tu appelles "Paul !", les deux vont se retourner...alors que tu en appelait une seule !

Donne donc des noms différents à tes images. Pour attribuer un nom, on utilise en HTML5 l'attribut "id".

Utilisation :

<img src="twitter.jpg" src="Mon image du logo Twitter" id="twitter"> (plus besoin de slash en HTML 5)

Dans le CSS, au lieu d'utiliser "img" tu utiliseras #twitter (#le_nom_id), soit :

#twitter
{

TES INSTRUCTIONS

}

La deuxième image, tu l'appelles YouTube (id="YouTube") et tu fait pareil.
Messages postés
18
Date d'inscription
lundi 24 mars 2014
Statut
Membre
Dernière intervention
20 septembre 2014

Ah Merci beaucoup a toi !! ça marche nickel :)