Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1279 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] hover avec des images? Positionnement, FF, IE

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] hover avec des images? Positionnement, FF, IE

n°1392447
devilhunt
Posté le 21-06-2006 à 19:33:05  profilanswer
 

Bonjour tout le monde.
Alors depuis hier j'apprends le css, et "j'essay" de faire un site ( http://stepmania705.free.fr  :)  )
Voila en fait j'aimerais utiliser la fonction : hover, pour que quand quelqu'un passe sur les boutons (qui sons sous le header du site), que a ce momen la le bouton change.
Avec a fonction hover on peut faire changer les caractéristiques d'un lien, mais peut on faire sa pour une "image lien"?
PS: c'est mon premier site et j'ai passé que 40 minutes dessus, donc pour l'instant le design c'est pas le but, j'essay deja de m'occuper du reste :D)
 
Code xhtml:

Citation :


   <div id="menu">
<p id="image">
   <a href="accueil.htm"><img id="bout1" src="images/bouton1.jpg" alt="Lien pour l'accueil" title="GO Accueil!" /></a>
   <a href="tutoriaux.htm"><img class="bout2" src="images/bouton2.jpg" alt="Lien pour les tutoriaux" title="GO Tutoriaux!" /></a>
   <a href="team.htm"><img class="bout2" src="images/bouton3.jpg" alt="Lien pour la team" title="GO Team!" /></a>
   <a href="examens.htm"><img class="bout2" src="images/bouton4.jpg" alt="Lien pour les examens" title="GO Examens!" /></a>
   <a href="telechargement.htm"><img class="bout2" src="images/bouton5.jpg" alt="Lien pour les telechargements" title="GO Telechargement!" /></a>
   <a href="liens.htm"><img class="bout2" src="images/bouton6.jpg" alt="Lien pour les liens lol" title="GO Liens!" /></a>
</p>
</div>
 


 
 
MON CSS tout faux m'ai j'ai essayé sa lol

Citation :


 #image bout1:hover
{
   url("images/boutonhov.jpg" );
}


 
Merci  :)


Message édité par devilhunt le 24-06-2006 à 00:58:36
mood
Publicité
Posté le 21-06-2006 à 19:33:05  profilanswer
 

n°1392456
xtof_83
Freeride Spirit
Posté le 21-06-2006 à 19:48:03  profilanswer
 

Pas comme ça que ça marche...
 
:hover marche que sur un lien...
 
Ensuite là tout ton code est faux...
 
Bon alors on a aidé un mec comme toi il y a 2 jours ;)
 
Post:
 
http://forum.hardware.fr/hardwaref [...] 2333-1.htm
 
Résponse
 
http://www.masson-communication.com/accueil.htm
 
Regarde le code, et voilà ;)
 
Bonne soiré man

n°1392457
devilhunt
Posté le 21-06-2006 à 19:51:37  profilanswer
 

Ok merci, bon je go fête de la musique, je verrais se demain soir. ;)
Merci de vous ******** a aider des boulets comme moi :D
Mais bientôt c'est moi qui viendrai vous auder :p enfin j'espere, je commence mon DUT informatique en septembre :D

n°1392788
mIRROR
Chevreuillobolchévik
Posté le 22-06-2006 à 13:56:06  profilanswer
 

xtof_83 a écrit :

:hover marche que sur un lien...


sur ie [:aloy]

n°1392851
Shinuza
This is unexecpected
Posté le 22-06-2006 à 15:02:49  profilanswer
 
n°1392893
xtof_83
Freeride Spirit
Posté le 22-06-2006 à 15:46:44  profilanswer
 

Mouais je sais ça...Mais dans lhistoire on s'en fout ;)
Marche pas sous IE, donc à ne pas utiliser actuellement dans nos codes;)
 
sauf si on offre une solution alternative aux autres :D

n°1392931
mIRROR
Chevreuillobolchévik
Posté le 22-06-2006 à 16:48:40  profilanswer
 

xtof_83 a écrit :

sauf si on offre une solution alternative aux autres  :D

 

 
mettre ie a la poubelle ? :D

n°1393858
devilhunt
Posté le 23-06-2006 à 17:15:44  profilanswer
 

Merci, finalement  jai réussi, mais je galere pour faire un truc arondi autour de ma partie corps, j'ai réussi en placant le du cadre en position: relative; a partir du header, et le bas a partir du cadre ou il y a écrit copyright bordel, et en répetant une image de 1px de hauteur pr le centre, mais si maintenant je veut mettre une image de fond?
 
Bon pour l'instant j'aimerais que quand la partie centrale est trop importante, que au lieu que le design s'étire, que des barres de défilement apparaissent (comme là: http://stepmania705.free.fr/images/test.jpg).
 Et je n'y arrive pas, j'ai essayé d'utiliser ceci:
 

Citation :

p
   width: 20px;
   height: 50px;
}
.barres{
   overflow: scroll;
}


 
Oui la largeur et la hauteur c'est très petit, mais c'est pour réussir a le fair fonctionner, j'ajusterai apres, et scroll faudrai mieu mettre auto mais c'est aussi deja pour réussir sa :D
 
 
Mon code html:
 

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>StepMania 705 StepManiak Only</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="Essai" href="css.css" />
   </head>
   <body>
   
   <div id="en_tete">
   <img id="ho" src="images/ho.jpg" alt="Design haut" />
</div>
 
  <ul id="menu">
   <li><a href="index.html"  title="GO accueil ?">Accueil</a></li>
   <li><a href="tutoriaux.html"  title="Go tutoriaux">Tutoriaux</a></li>
   <li><a href="team.html"  title="Go voir la team">Team</a></li>
   <li><a href="examens.html"  title="Examens a passer">Examens</a></li>
   <li><a href="telechargement.html"  title="Oui bouffe la bp on s'en fout c'est gratuit"><span class="caca">Téléchargement</span></a></li>
   <li><a href="liens.html"  title="Liens divers">Liens</a></li>
   </ul>
 
   <div id="chat">
<!--Debut code shoutbox-->
<iframe src="http://www.i-tchat.com/13785" width="140" height="310" frameborder="0" allowTransparency="true">
<a href="http://www.i-tchat.com" onClick="window.open('http://www.i-tchat.com/h-13785')">Voir la shoutbox</a>
</iframe>
<!--Fin code shoutbox-->  
</div>
 
   <div id="corps">
<p class="barres">
<p>STEPMANIA705 VERSION 2.0 EN COURS DE PROGRAMMATION :D</p>
<p>dfljhg kjdfsnglk ndsfhkln dsfh nkqfhg qmefjh jdfhn lkqdfnhg mqernh jndfqhk jnqdfmngjfffffff llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
(SA UNE DIZAINE DE FOIS  :D )
 
</p>
</div>
 
   <div id="pied_de_page">
   <img id="ba" src="images/ba.jpg" alt="Design bas" />
   <p>StepMania705.free.fr © Copyright 2006 - Tous droits réservés</p>
</div>  
   
</body>


 
MON CODE CSS:

Citation :


p
   width: 20px;
   height: 50px;
}
.barres{
   overflow: scroll;
}
 
body
{
   width: 860px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 10px;    /* Idem pour le bas du navigateur */
   background-color: yellow;
}
 
 
#en_tete
{
   width: 860px;
   height: 142px;
   background-image: url("images/haut.jpg" );
   background-repeat: no-repeat;
   margin-bottom: 5px;
}
 
#menu
{
   width: 860px;
   height: 130px;
   margin-bottom: 10px;
}
 
#chat
{
   margin-left: 10px;
   float: left;
   width: 140px;
   height: 550px;
   background-color: orange;  
}
 
#corps
{
   background-image: url("images/centre.jpg" );
   background-repeat: repeat-y;
   height: 533px;
   text-indent: 5px;
   margin-left: 160px;
   margin-top: 10px;
   padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
   color: green;
   background-color: orange;    
}
 
#pied_de_page
{
   padding: 5px;
   text-align: center;
   color: black;
   background-color: orange;    
   margin-top: 10px;
}
 
a img
{
   border: none;
}
 
#bout1
{
margin-left: 60px;
}
 
.bout2
{
margin-left: 40px;
}
 
ul#menu
{
 height: 35px ;
 margin: 0 ;
 padding: 0 ;
 background: url(images/bouton1.png) repeat-x 0  -0px ;
 list-style-type: none ;
 margin-bottom:3px
}
 
ul#menu li
{
 float: left ;
 text-align: center ;
}
 
ul#menu li a
{
 width: 143px ;
 line-height: 25px ;
 font-size: 1.4em ;
 margin-top: 2px;
 font-weight: bold ;
 letter-spacing: 2px ;
 color: #fff ;
 display: block ;
 text-decoration: none ;
}
 
.caca
{
 letter-spacing: 0px ;
 font-size: 0.8em ;
}
 
ul#menu li:hover
{
 height: 35px ;
 margin: 0 ;
 padding: 0 ;
 background: url(images/boutonhov.png) repeat-x 0 0px ;
 list-style-type: none ;
}
 
#ho
{
   position: relative;
   left: 160px;
   top: 185px;
}
 
#ba
{
   position: relative;
   left: 80px;
   bottom: 39px;
}


 
:S

Message cité 1 fois
Message édité par devilhunt le 23-06-2006 à 17:18:17
n°1393906
mIRROR
Chevreuillobolchévik
Posté le 23-06-2006 à 18:00:13  profilanswer
 

premier truc : un paragraphe est un paragraphe donc tu ne peux pas mettre un paragraphe dans un paragraphe
donc ton #barres  tu le transformes en div
et essaie overflow auto
 
sinon petit truc un peu hs
http://www.lipsum.com/
 
ca genere du texte de remplissage et pour faire des tests c est beaucoup plus agreable que de laisser ton chat ecrire a ta place des "ùldjgkfgmldfmg d" * 24

n°1393920
devilhunt
Posté le 23-06-2006 à 18:26:01  profilanswer
 

Ok, jvais voir sa merci, et les DHFMSHDMGHDSMLGH sa me va :D mais ok c'est col merci

mood
Publicité
Posté le 23-06-2006 à 18:26:01  profilanswer
 

n°1393923
devilhunt
Posté le 23-06-2006 à 18:35:07  profilanswer
 

j'ai essayé sa mais j'arrive sa marche pas:
 
CSS

Citation :


#corps
   width: 20px;
   height: 50px;
}
#barres{
   overflow: auto;
}


 
 
XHTML:

Citation :


   <div id="corps">
<div id="barres">
<p>STEPMANIA705 VERSION 2.0 EN COURS DE PROGRAMMATION :D</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin at justo sed libero hendrerit vulputate. Cras est sapien, molestie ut, faucibus at, condimentum in, lorem. Fusce fringilla tellus at est. Vestibulum interdum ullamcorper orci. Sed nonummy justo a lorem. Nam tincidunt. Sed vitae sapien quis eros egestas tempus. Nunc vel risus. Etiam purus. Donec vehicula ligula ac odio. Aliquam mattis. Maecenas at metus. Vivamus consectetuer eleifend dui. Nullam feugiat, lectus vitae cursus volutpat, mi orci blandit massa, venenatis feugiat purus leo id lectus.</p>
<p>Aliquam diam urna, commodo at, pretium sit amet, semper at, risus. Aenean hendrerit dictum eros. Etiam aliquam accumsan dui. Nulla luctus turpis nec nulla volutpat aliquam. Ut eget odio ut dolor lacinia vestibulum. Vivamus sed tortor. Aliquam facilisis elementum ligula. Ut ligula. Aliquam erat. Aliquam nec tellus. Praesent vel urna sit amet nisl suscipit venenatis. Curabitur vestibulum, sem eleifend gravida feugiat, lacus risus rhoncus nunc, eu pulvinar nulla turpis fringilla magna. Etiam porttitor gravida purus. Phasellus interdum, massa eu cursus pharetra, ligula velit congue justo, vitae suscipit orci dui et dui. Maecenas commodo, quam auctor iaculis vulputate, velit justo vehicula tortor, eget feugiat magna augue sed dui. Cras sit amet erat eget sem porta pretium. Proin a felis. Nullam sit amet dolor. Ut ullamcorper tellus eu arcu. Maecenas tempus tempus elit.</p>
<p>Integer lobortis, justo et sodales hendrerit, nisl erat gravida sapien, quis bibendum metus ipsum vel dolor. Donec elementum scelerisque odio. Aenean odio orci, rutrum a, molestie sed, interdum a, turpis. Duis lobortis nisi sit amet diam. Aenean auctor est. Praesent eget pede eget nibh mattis blandit. Cras sed nibh at dui aliquet pretium. Integer eros velit, pharetra vel, auctor ac, tristique at, quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent nec mauris ut eros placerat laoreet. Etiam lectus turpis, aliquet sit amet, tincidunt quis, gravida eget, quam. Suspendisse fermentum justo sit amet augue. Fusce ut ante id enim fringilla fermentum. Morbi egestas eros et libero. Nulla non erat vitae lectus dignissim porta. Vivamus suscipit lacus quis erat. Mauris a quam. Proin semper accumsan ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam metus mi, lacinia at, ornare sit amet, vestibulum ut, turpis.</p>
<p>Curabitur mattis. Aliquam mauris pede, rutrum quis, dictum vel, semper ac, ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In facilisis turpis et ante. Cras eleifend ligula quis lacus. Vestibulum sit amet dolor. Sed auctor ante quis purus. Donec malesuada, est a lacinia suscipit, ligula mauris malesuada ipsum, elementum sodales sapien magna non mi. Maecenas et tellus nec ligula molestie porttitor. Ut ligula nulla, facilisis vitae, varius a, eleifend ut, urna. Vestibulum sit amet nisi id felis iaculis viverra. Duis vitae leo id mauris ultricies tristique. Vestibulum justo diam, consequat sit amet, aliquet sit amet, malesuada quis, risus. Cras scelerisque, ipsum id tempor posuere, justo dolor iaculis risus, nec blandit augue nisl sed massa. Donec malesuada. Sed non tortor. Aliquam et ligula. Integer vestibulum lacus a sem.</p>
<p>Nullam augue orci, euismod vitae, luctus nonummy, rhoncus vel, est. Vestibulum rhoncus, nisl ac suscipit ultricies, odio magna scelerisque lectus, id vehicula elit ligula a risus. Mauris venenatis nibh sit amet risus. Vivamus condimentum mauris et purus. Cras quis nibh viverra lacus dapibus vehicula. Duis tortor. Donec porttitor eleifend purus. Aliquam egestas congue enim. Nunc odio neque, fermentum et, mollis ac, accumsan vitae, purus. Sed molestie tellus ut erat. Etiam consectetuer elit nec ante. Suspendisse tristique. Nunc dolor quam, vehicula ut, iaculis sed, aliquet sed, tortor. Sed suscipit turpis nec dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus interdum nulla sed arcu. Nullam luctus justo sit amet augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
 


 
 
SI j'utilise les paragraphes, sa va me faire une fenetre par paragraphes, et moi je voudrais une pour toute la partie centrale


Message édité par devilhunt le 23-06-2006 à 18:36:23
n°1393925
mIRROR
Chevreuillobolchévik
Posté le 23-06-2006 à 18:42:53  profilanswer
 

devilhunt a écrit :

Et je n'y arrive pas, j'ai essayé d'utiliser ceci:

 


 


et pour cause
concentrons nous sur cette partie du code

Code :
  1. p
  2.    width: 20px;
 

n°1393940
devilhunt
Posté le 23-06-2006 à 19:45:09  profilanswer
 

hein?
 
J'ai essayé plein de truc mais rien n'y fait, je suis vraiment trop nul  :(  
Mais j'abandonnerai pas :pfff: , enfin sans aide sa va 'êt dur  ;)
 
Mais c'est cette partie la que je veut "overflower auto"  :heink:  :
 

Citation :

<div id="corps">


 
Donc
 

Citation :

Et pour cause
concentrons nous sur cette partie du code


Jsé pa trop quoi faire


Message édité par devilhunt le 23-06-2006 à 19:57:46
n°1393954
mIRROR
Chevreuillobolchévik
Posté le 23-06-2006 à 20:43:39  profilanswer
 

Code :
  1. p {
  2.    width: 20px;
  

c est y pas mieux comme ca ?


Message édité par mIRROR le 23-06-2006 à 20:44:24
n°1393972
devilhunt
Posté le 23-06-2006 à 21:49:34  profilanswer
 

Pas vraiment

n°1393975
devilhunt
Posté le 23-06-2006 à 21:56:54  profilanswer
 

Si je met pas de largeur fixe, et que je n'utilise que un paragraphe sa marche, mais le problème c'est que j'aimerais bien pouvoir avoir plus que un paragraphe :S

n°1393981
devilhunt
Posté le 23-06-2006 à 22:08:16  profilanswer
 

Voila donc  voici le résultat: http://stepmania705.free.fr/
 
Mon code CSS:
 

Citation :


#corps p {
   height: 500px;  
}
#barres{
   overflow: auto;
}


 
 
Mon code HTML:

Citation :


   <div id="corps">
   <div id="barres">
<p> STEPMANIA705 VERSION 2.0 EN COURS DE PROGRAMMATION :D  STEPMANIA705 VERSION 2.0 EN COURS DE PROGRAMMATION :D................................................................</p>
</div>
</div>
 


 
Je peut faire sa mais des que dans mon corps je met un Deuxièmep aragraphe, sa les supperpose, c'est en gros mon problème depuis le début mais je cherchais d'autresm oyen pour contourner ce problème, que faire???
 
 
EDIT: dsl pour le triple post
 
PS: je sais que je pourrais me passer de faire plusieur paragraphes, enfin quoique... Ou que je pourrais faire s'allonger le design, mais je débute ds le programmation, et mon but principal c'est de progresser :D
Sinon vous connaisser des bons truc a faire (du genre des TP sur le net) pour m'améliorer? ;)


Message édité par devilhunt le 23-06-2006 à 22:12:49
n°1393989
mIRROR
Chevreuillobolchévik
Posté le 23-06-2006 à 22:37:01  profilanswer
 

en fait je te disais juste d ouvrir ton accolade sur p parce que ca foutait le boxon

 

maintenant on peut bosser  :D

 

deja pas de hauteur prédéfinie a tes paragraphes ca fout la merde
et ensuite cette hauteur c est dans #barres que tu dois la definir

 

edit:
par contre ca va etre la mission de passer ton code sur ie :/


Message édité par mIRROR le 23-06-2006 à 22:37:37
n°1393995
devilhunt
Posté le 23-06-2006 à 23:03:13  profilanswer
 

Oui merci, la hauteur je l'ai mise comme ceci et sa marche:
 

Citation :


#barres
{
   height: 500px;  
}  
#corps p {
}
#barres{
   overflow: auto;
}


 
Le seul probleme avec IE c'est que mes 2 barres du contour du menu je les ait placé comme ceci:
 
CSS:

Citation :


#ho
{
   position: relative;
   left: 160px;
   top: 185px;
}
 
#ba
{
   position: relative;
   left: 80px;
   bottom: 39px;
}


 
HTML:

Citation :


   <div id="en_tete">
   <img id="ho" src="images/ho.jpg" alt="Design haut" />
</div>
 
....
 
   <div id="pied_de_page">
   <img id="ba" src="images/ba.jpg" alt="Design bas" />
   <p>StepMania705.free.fr © Copyright 2006 - Tous droits réservés</p>
</div>  
 


 
Et sous ie il y a un décallage, comment faire pour les placer d'une autre façon, ou le rendre compatible correctement sous ie??
 
merci :)  
 
Microsoft: XXXmilliards de dollars, et pas capable de mettre a jour un logiciel en 7 ans, ils abusent!
 
Par contre le caht marche mieu sous ie, ils ont pa du faire trop attentino aux autres navigatuer, et avant j'ai testé ma page, il trouve 8 erreur, les 8 sur les 2 lignes du code pour le chat :) Mais je pense pas qu'il y a de problèmes, il disait sa pr des giueileileilkeeillemet  :D
 
Modif pour ie que j'ai pas encore mise sur le ftp:
aigmenter de 10px le margin top du centre, c encore potable sur FF et mieu sur IE, rest a décaller vers la droite, sa va êt' plus dur
 
Il n'y aurais pas une fonction qui marche sous IE et FF et qui fasse:
"Place cette image, en haut de ce bloc!"  ?
 
 
PS: pour ie il faudrait que je déplace mon centre de 3px vers la gauche, mais alors c plus trop potable sous FF  :D


Message édité par devilhunt le 23-06-2006 à 23:14:51
n°1394140
devilhunt
Posté le 24-06-2006 à 14:08:56  profilanswer
 

En modifiant pas mal le code, et en faisant des truc "a l'arrache", j'ai réussi a règler le pb pour IE et FF, en fait j'ai rajouté des DIV dans mon corps, un en haut, un en bac, et je leur ait mi l'image pour background ;)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] hover avec des images? Positionnement, FF, IE

 

Sujets relatifs
CSS lien image[Résolu] [DOM Scripting] Afficher/masquer des images
Custom Trac / Casse tête CSSImage modifiable via CSS
Boutons en ligne qui se comportent comme des blocs (CSS)CSS et DIV
Optimisation d'imagesAvoir deux styles d'images différentes
[Résolu] [CSS] Comment justifié ?[Php] Miniatures d'images (à la imageshack)
Plus de sujets relatifs à : [CSS] hover avec des images? Positionnement, FF, IE


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR