Problème insertion d'image avec le css
Résolu/Fermé
TOONIE
Messages postés
130
Date d'inscription
vendredi 5 octobre 2007
Statut
Membre
Dernière intervention
29 octobre 2012
-
21 oct. 2009 à 15:32
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 - 23 oct. 2009 à 21:46
le hollandais volant Messages postés 4998 Date d'inscription samedi 8 mars 2008 Statut Membre Dernière intervention 23 décembre 2023 - 23 oct. 2009 à 21:46
A voir également:
- Problème insertion d'image avec le css
- Insertion liste déroulante excel - Guide
- Image iso - Guide
- Insertion sommaire word - Guide
- Insertion filigrane word - Guide
- Acronis true image - Télécharger - Sauvegarde
6 réponses
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
21 oct. 2009 à 16:37
21 oct. 2009 à 16:37
Salut !
Lorsque tu met une image dans le HTML, tu dois mettre le lien relatif de l'image depuis la page HTML. Mais si tu l'affiche en CSS comme tu veux le faire, le lien doit être relatif depuis le CSS !.
En gros ce que tu veux faire, c'est afficher l'image en background via CSS. L'image est 2 fois plus grande que le LI et on ne voit que le haut.
Dés que tu places la souris dessus, (:hover) c'est le bas de l'image qui est affiché.
C'est la technique des portes coulissantes.
Lorsque tu met une image dans le HTML, tu dois mettre le lien relatif de l'image depuis la page HTML. Mais si tu l'affiche en CSS comme tu veux le faire, le lien doit être relatif depuis le CSS !.
En gros ce que tu veux faire, c'est afficher l'image en background via CSS. L'image est 2 fois plus grande que le LI et on ne voit que le haut.
Dés que tu places la souris dessus, (:hover) c'est le bas de l'image qui est affiché.
C'est la technique des portes coulissantes.
TOONIE
Messages postés
130
Date d'inscription
vendredi 5 octobre 2007
Statut
Membre
Dernière intervention
29 octobre 2012
21 oct. 2009 à 17:33
21 oct. 2009 à 17:33
Salut !
J'ai fait une recherche sur cette technique (avec ce mot clé), et j'ai avancé dans le code, merci. Mais mes images ne s'affichent toujours pas. Je ne vois pas ce qui ne va pas...
le css est devenu (j'ai mis sur une ligne chaque élément pensant simplifier sur le forum) :
#header { float:left; display:block; width:830px; margin-right:10px; }
#header a { clear:right; float:left; display:block; padding:5px 50px; }
#header ul li { float:left; }
#header ul li a{ overflow:hidden; clear:none; float:none; display:block; height:30px; text-indent:300px; background-position:left top; }
#nav_ac_1 a:link, #nav_ac_1 a:visited{ width:120px; background-image:url(img/associations.jpg) left top;}
#nav_ac_2 a:link, #nav_ac_2 a:visited{width:139px; background-image:url(img/professionnels.jpg) left top; }
#nav_ac_1 a:hover, #nav_ac_1 a:active, #nav_ac_1 a.selected:link, #nav_ac_1 a.selected:visited{ background-position:0 -30px; }
#nav_ac_2 a:hover, #nav_ac_2 a:active, #nav_ac_2 a.selected:link, #nav_ac_2 a.selected:visited{ background-position:0 -30px;}
et le html est devenu :
<div id="header">
<ul>
<li id="nav_ac_1"><a href="#" class="selected"></a></li>
<li id="nav_ac_2"><a href="#" class="selected">texte, pour voir s'il s'affiche quelque chose, mais non, ni image, ni texte</a></li>
</ul>
</div>
Toujours besoin d'aide.
J'ai fait une recherche sur cette technique (avec ce mot clé), et j'ai avancé dans le code, merci. Mais mes images ne s'affichent toujours pas. Je ne vois pas ce qui ne va pas...
le css est devenu (j'ai mis sur une ligne chaque élément pensant simplifier sur le forum) :
#header { float:left; display:block; width:830px; margin-right:10px; }
#header a { clear:right; float:left; display:block; padding:5px 50px; }
#header ul li { float:left; }
#header ul li a{ overflow:hidden; clear:none; float:none; display:block; height:30px; text-indent:300px; background-position:left top; }
#nav_ac_1 a:link, #nav_ac_1 a:visited{ width:120px; background-image:url(img/associations.jpg) left top;}
#nav_ac_2 a:link, #nav_ac_2 a:visited{width:139px; background-image:url(img/professionnels.jpg) left top; }
#nav_ac_1 a:hover, #nav_ac_1 a:active, #nav_ac_1 a.selected:link, #nav_ac_1 a.selected:visited{ background-position:0 -30px; }
#nav_ac_2 a:hover, #nav_ac_2 a:active, #nav_ac_2 a.selected:link, #nav_ac_2 a.selected:visited{ background-position:0 -30px;}
et le html est devenu :
<div id="header">
<ul>
<li id="nav_ac_1"><a href="#" class="selected"></a></li>
<li id="nav_ac_2"><a href="#" class="selected">texte, pour voir s'il s'affiche quelque chose, mais non, ni image, ni texte</a></li>
</ul>
</div>
Toujours besoin d'aide.
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
21 oct. 2009 à 17:56
21 oct. 2009 à 17:56
Voila le code utilisé pour mes testes est qui marche :
#header { float:left; width:830px; margin-right:10px;}
#header a { clear:right; float:left; display:block; padding:5px 50px; width: 100px; height: 30px;}
#header ul li { float:left; }
#header ul li a{ display:block; height:30px; }
#nav_ac_1 a { width:120px; background: url(img/associations.jpg) top left;}
#nav_ac_2 a { width:139px; background: url(img/professionnels.jpg) left top; }
#nav_ac_1 a:hover { background-position:0 -30px; }
#nav_ac_2 a:hover { background-position:0 -30px;}
(j'ai optimisé le tout : pour les a:link, c'est inutile. Il suffit juste de mettre les background sur le "a" seul (pas tous les a:link et a:visited puis de le décaler sur le hover. Inutile de mettre le "focus" : si on est en "focus" on est forcément en "hover".)
Le problème était en fait que tu avais mis :
#nav_ac_2 a {width:139px; background-image:url(img/professionnels.jpg) left top; }
alors que la propriété "background-image" n'accepte QUE l'image, pas le "left top". Il faut mettre la "super-propriété" background seul :
#nav_ac_2 a {width:139px; background: url(img/professionnels.jpg) left top; }
voili voilou.
Tant que je suis dans l'optimisation du code, inutile de mettre un "display:block" au div : les div sont déjà des block !
#header { float:left; width:830px; margin-right:10px;}
#header a { clear:right; float:left; display:block; padding:5px 50px; width: 100px; height: 30px;}
#header ul li { float:left; }
#header ul li a{ display:block; height:30px; }
#nav_ac_1 a { width:120px; background: url(img/associations.jpg) top left;}
#nav_ac_2 a { width:139px; background: url(img/professionnels.jpg) left top; }
#nav_ac_1 a:hover { background-position:0 -30px; }
#nav_ac_2 a:hover { background-position:0 -30px;}
(j'ai optimisé le tout : pour les a:link, c'est inutile. Il suffit juste de mettre les background sur le "a" seul (pas tous les a:link et a:visited puis de le décaler sur le hover. Inutile de mettre le "focus" : si on est en "focus" on est forcément en "hover".)
Le problème était en fait que tu avais mis :
#nav_ac_2 a {width:139px; background-image:url(img/professionnels.jpg) left top; }
alors que la propriété "background-image" n'accepte QUE l'image, pas le "left top". Il faut mettre la "super-propriété" background seul :
#nav_ac_2 a {width:139px; background: url(img/professionnels.jpg) left top; }
voili voilou.
Tant que je suis dans l'optimisation du code, inutile de mettre un "display:block" au div : les div sont déjà des block !
TOONIE
Messages postés
130
Date d'inscription
vendredi 5 octobre 2007
Statut
Membre
Dernière intervention
29 octobre 2012
22 oct. 2009 à 07:59
22 oct. 2009 à 07:59
Bonjour !
J'ai également solutionné le sujet hier soir vers la même heure ! Mais je vais retoucher le code suivant tes indications d'optimisation car il est vrai que plus léger c'est beaucoup mieux !
Pour ce qui est du background, j'avais corrigé ainsi : background-image:url('../img/associations.jpg);background-position:left top;} mais si effectivement un simple background suffit, je gagne une ligne à chaque fois !
Pour ce qui est du focus et du hover, je reconnais ne pas trop voir de différence entre les deux, mais je l'avais mis car je me suis dit que si ça existe, c'est qu'il doit y avoir une raison... Je l'enlève donc et un jour j'irais chercher la différence entre les deux ! Bien compris pour les les a:link, merci. c'est sûr que #nav_ac_2 a:hover { background-position:0 -30px;} est plus léger que #nav_ac_2 a:hover, #nav_ac_2 a:active, #nav_ac_2 a.selected:link, #nav_ac_2 a.selected:visited{background-position:0 -30px;}, idem pour #nav_ac_1 a au lieu de #nav_ac_4 a:link, #nav_ac_4 a:visited.
Par contre je crois que je vais garder le display:block pour la div; effectivement, sauf erreur de ma part, les MAC ou une version des navigateurs des MAC devraient non pas afficher les puces en inline mais verticalement. Et si j'ai bien compris les tutos sur les onglets avec la techniques des portes coulissantes, il faudrait rajouter ce display:block pour qu'ils les affichent horizontalement.
Merci pour ton aide précieuse qui m'a permis d'aboutir, ainsi que pour l'optimisation qui me permet d'avancer !
Bonne journée,
tOOnie
J'ai également solutionné le sujet hier soir vers la même heure ! Mais je vais retoucher le code suivant tes indications d'optimisation car il est vrai que plus léger c'est beaucoup mieux !
Pour ce qui est du background, j'avais corrigé ainsi : background-image:url('../img/associations.jpg);background-position:left top;} mais si effectivement un simple background suffit, je gagne une ligne à chaque fois !
Pour ce qui est du focus et du hover, je reconnais ne pas trop voir de différence entre les deux, mais je l'avais mis car je me suis dit que si ça existe, c'est qu'il doit y avoir une raison... Je l'enlève donc et un jour j'irais chercher la différence entre les deux ! Bien compris pour les les a:link, merci. c'est sûr que #nav_ac_2 a:hover { background-position:0 -30px;} est plus léger que #nav_ac_2 a:hover, #nav_ac_2 a:active, #nav_ac_2 a.selected:link, #nav_ac_2 a.selected:visited{background-position:0 -30px;}, idem pour #nav_ac_1 a au lieu de #nav_ac_4 a:link, #nav_ac_4 a:visited.
Par contre je crois que je vais garder le display:block pour la div; effectivement, sauf erreur de ma part, les MAC ou une version des navigateurs des MAC devraient non pas afficher les puces en inline mais verticalement. Et si j'ai bien compris les tutos sur les onglets avec la techniques des portes coulissantes, il faudrait rajouter ce display:block pour qu'ils les affichent horizontalement.
Merci pour ton aide précieuse qui m'a permis d'aboutir, ainsi que pour l'optimisation qui me permet d'avancer !
Bonne journée,
tOOnie
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
TOONIE
Messages postés
130
Date d'inscription
vendredi 5 octobre 2007
Statut
Membre
Dernière intervention
29 octobre 2012
22 oct. 2009 à 08:17
22 oct. 2009 à 08:17
Je crois avoir dit une bêtise, et donc tu avais raison, le display block est effectivement indispensable pour les raisons que j'ai évoquées, mais pour les puces, or il est question ici des div. Donc j'enlève le display:block !
Encore merci !
tOOnie
Encore merci !
tOOnie
le hollandais volant
Messages postés
4998
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
23 décembre 2023
1 057
23 oct. 2009 à 21:46
23 oct. 2009 à 21:46
Ok !
Sinon, pour le Hover / active / focus…
Hover = souris qui passe au dessus
Focus = clic maintenu au dessus.
Active = sélection via un clic.
Pour le dernier, qui est dificile à voir, sur ton bureau, clic sur une icone. Il apparait entouré. C'est cela.
Sinon, pour le Hover / active / focus…
Hover = souris qui passe au dessus
Focus = clic maintenu au dessus.
Active = sélection via un clic.
Pour le dernier, qui est dificile à voir, sur ton bureau, clic sur une icone. Il apparait entouré. C'est cela.