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

Marsh Posté le 21-06-2006 à 19:33:05

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 )

Code xhtml:

Citation :

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

Reply

Marsh Posté le 21-06-2006 à 19:33:05

Reply

Marsh Posté le 21-06-2006 à 19:48:03

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

Message cité 1 fois

Reply

Marsh Posté le 21-06-2006 à 19:51:37

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

Reply

Marsh Posté le 22-06-2006 à 13:56:06

xtof_83 a écrit :

:hover marche que sur un lien...

sur ie [:aloy]

Message cité 1 fois

Reply

Marsh Posté le 22-06-2006 à 15:02:49

mIRROR a écrit :

sur ie [:aloy]

+1

Reply

Marsh Posté le 22-06-2006 à 15:46:44

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

Message cité 1 fois

Reply

Marsh Posté le 22-06-2006 à 16:48:40

xtof_83 a écrit :

sauf si on offre une solution alternative aux autres

mettre ie a la poubelle ?

Reply

Marsh Posté le 23-06-2006 à 17:15:44

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

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">

<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>

</div>

<div id="corps">
<p class="barres">
<p>STEPMANIA705 VERSION 2.0 EN COURS DE PROGRAMMATION </p>
<p>dfljhg kjdfsnglk ndsfhkln dsfh nkqfhg qmefjh jdfhn lkqdfnhg mqernh jndfqhk jnqdfmngjfffffff llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
(SA UNE DIZAINE DE FOIS )

</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

Reply

Marsh Posté le 23-06-2006 à 18:00:13

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

Reply

Marsh Posté le 23-06-2006 à 18:26:01

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

Reply

Marsh Posté le 23-06-2006 à 18:26:01

Reply

Marsh Posté le 23-06-2006 à 18:35:07

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 </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

Reply

Marsh Posté le 23-06-2006 à 18:42:53

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 :

p
width: 20px;

Reply

Marsh Posté le 23-06-2006 à 19:45:09

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 :

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

Reply

Marsh Posté le 23-06-2006 à 20:43:39

Code :

p {
width: 20px;

c est y pas mieux comme ca ?

Message édité par mIRROR le 23-06-2006 à 20:44:24

Reply

Marsh Posté le 23-06-2006 à 21:49:34

Pas vraiment

Reply

Marsh Posté le 23-06-2006 à 21:56:54

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

Reply

Marsh Posté le 23-06-2006 à 22:08:16

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 STEPMANIA705 VERSION 2.0 EN COURS DE PROGRAMMATION ................................................................</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
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

Reply

Marsh Posté le 23-06-2006 à 22:37:01

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

maintenant on peut bosser

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

Reply

Marsh Posté le 23-06-2006 à 23:03:13

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

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

Message édité par devilhunt le 23-06-2006 à 23:14:51

Reply

Marsh Posté le 24-06-2006 à 14:08:56

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

Reply

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

Sujets relatifs:

Leave a Replay