Retour à Forum de site web

CSS rollover problème...

  • DeadBolt
  • Novice
  • Novice
  • No Avatar
  • Inscription: Mai 12, 2005
  • Messages: 31
  • Status: Offline

Message Octobre 2nd, 2009, 1:56 pm

Salut,

J'ai essayé de faire ce travail pour de nombreuses heures, et je suis tout à fait désorienté. J'utilise Coda pour construire le site (html et css)

J'utilise un fichier PNG avec les deux boutons dans un graphique, et une fois plané au-dessus, pourrait déplacer l'image pour révéler le plus de l'Etat. J'ai essayé plusieurs trucs css différents - en vain. Quelqu'un peut-il jeter un oeil à ce code et me dire si vous remarquez quelque chose qui est contradictoire.

Le bouton apparaît, mais il ne sera pas de changement d'état ni de déclaration sera faite qu'il existe même un lien relié au bouton.

css
Code: [ Select ]
* {
    padding: 0px;
    margin: 0px;
}
body {
    font-size: 0.5em;
    font-family: Verdana, Arial, "Lucida Grande", sans-serif;
    background-repeat: repeat;
    background-image: url(images/bg_wallpaper2.gif);
}
#container {
    margin-left: auto;
    margin-bottom: 5em;
    margin-right: auto;
    margin-top: 0px;
    position: relative;
    width: 906px;
}
h1 {
    text-align: center;
    background-repeat: no-repeat;
    background-image: url(images/balmer_building.png);
    font-family: "Lucida Grande", Verdana, Arial, sans-serif;
    font-size: large;
    background-position: center top;
    margin-right: auto;
    margin-left: -9999px;
}
#buildingDIV {
    left: 50%;
    margin-left: -472px;
    text-align: center;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 4;
    background-repeat: no-repeat;
    background-image: url(images/balmer_building.png);
}
#header {
    height: 231px;
    width: 100%;
}
#content {
    margin-left: -453px;
    left: 50%;
    text-align: center;
    position: absolute;
    z-index: 3;
    clear: both;
    background-image: url(images/content_bg.png);
    height: 500px;
    width: 906px;
}
#sidebar_left {
    margin-top: 65px;
    height: 100%;
    width: 171px;
    float: left;
}
#content_main {
    float: left;
    height: 100%;
    width: 668px;
    background-color: #fffcfb;
}
#content_right {
}
#sidebar_right {
}
#logo_sidebar {
    display: block;
    margin-bottom: 50px;
    margin-left: -17px;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(images/logo_sidebar.png);
    z-index: 2;
}

#home
{
 z-index: 10;
 margin-top: 125px;
 display: block;
 width: 171px;
 height: 46px;
 background: url("images/buttons/home2.png") no-repeat 0 0;
}
#home:hover
{
 background-position: 0 -171px;
}
#home span
{
 display: none;
  1. * {
  2.     padding: 0px;
  3.     margin: 0px;
  4. }
  5. body {
  6.     font-size: 0.5em;
  7.     font-family: Verdana, Arial, "Lucida Grande", sans-serif;
  8.     background-repeat: repeat;
  9.     background-image: url(images/bg_wallpaper2.gif);
  10. }
  11. #container {
  12.     margin-left: auto;
  13.     margin-bottom: 5em;
  14.     margin-right: auto;
  15.     margin-top: 0px;
  16.     position: relative;
  17.     width: 906px;
  18. }
  19. h1 {
  20.     text-align: center;
  21.     background-repeat: no-repeat;
  22.     background-image: url(images/balmer_building.png);
  23.     font-family: "Lucida Grande", Verdana, Arial, sans-serif;
  24.     font-size: large;
  25.     background-position: center top;
  26.     margin-right: auto;
  27.     margin-left: -9999px;
  28. }
  29. #buildingDIV {
  30.     left: 50%;
  31.     margin-left: -472px;
  32.     text-align: center;
  33.     position: absolute;
  34.     height: 100%;
  35.     width: 100%;
  36.     z-index: 4;
  37.     background-repeat: no-repeat;
  38.     background-image: url(images/balmer_building.png);
  39. }
  40. #header {
  41.     height: 231px;
  42.     width: 100%;
  43. }
  44. #content {
  45.     margin-left: -453px;
  46.     left: 50%;
  47.     text-align: center;
  48.     position: absolute;
  49.     z-index: 3;
  50.     clear: both;
  51.     background-image: url(images/content_bg.png);
  52.     height: 500px;
  53.     width: 906px;
  54. }
  55. #sidebar_left {
  56.     margin-top: 65px;
  57.     height: 100%;
  58.     width: 171px;
  59.     float: left;
  60. }
  61. #content_main {
  62.     float: left;
  63.     height: 100%;
  64.     width: 668px;
  65.     background-color: #fffcfb;
  66. }
  67. #content_right {
  68. }
  69. #sidebar_right {
  70. }
  71. #logo_sidebar {
  72.     display: block;
  73.     margin-bottom: 50px;
  74.     margin-left: -17px;
  75.     background-repeat: no-repeat;
  76.     position: absolute;
  77.     background-image: url(images/logo_sidebar.png);
  78.     z-index: 2;
  79. }
  81. #home
  82. {
  83.  z-index: 10;
  84.  margin-top: 125px;
  85.  display: block;
  86.  width: 171px;
  87.  height: 46px;
  88.  background: url("images/buttons/home2.png") no-repeat 0 0;
  89. }
  90. #home:hover
  91. {
  92.  background-position: 0 -171px;
  93. }
  94. #home span
  95. {
  96.  display: none;



et html
Code: [ Select ]
<body>


<div id="header">
    <span>
        <div id="buildingDIV"><span></span>
        </div>
    </span>
</div>

<div id="content">
    <span>
        <div id="sidebar_left"><span>
            <br><img id="logo_sidebar" src="images/logo_sidebar.png">
                <a id="home" href="index.html" title="Home"><span>Home</span></a>
    </span>
        </div>
    
        <div id="content_main">
            <span>
            </span>
        </div>


    </span>
</div>




</body>
  1. <body>
  4. <div id="header">
  5.     <span>
  6.         <div id="buildingDIV"><span></span>
  7.         </div>
  8.     </span>
  9. </div>
  11. <div id="content">
  12.     <span>
  13.         <div id="sidebar_left"><span>
  14.             <br><img id="logo_sidebar" src="images/logo_sidebar.png">
  15.                 <a id="home" href="index.html" title="Home"><span>Home</span></a>
  16.     </span>
  17.         </div>
  18.     
  19.         <div id="content_main">
  20.             <span>
  21.             </span>
  22.         </div>
  25.     </span>
  26. </div>
  31. </body>



Merci une tonne comme toujours,
-Dave
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Octobre 2nd, 2009, 1:56 pm

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de l’utilisateur
  • Inscription: Aoû 04, 2008
  • Messages: 846
  • Status: Offline

Message Octobre 2nd, 2009, 9:01 pm

#Accueil: hover
(
background-position: 0-171px;
)

Modifiez cette ligne hors CSS à ceci:

#Accueil: hover
(
background-position: 0 px -171px;
)

En remarque, vous avez un z-index fixé pour #maison, mais pas de position. Par conséquent, votre z-index ne sera pas pour effet de rien.

Pas sûr que ce soit de vous coller votre code, ou si sa part de votre css réelle doc, mais votre " #span maison "sélecteur n'a pas de crochet fermant.
Use your words like arrows to shoot toward your goal.
  • DeadBolt
  • Novice
  • Novice
  • No Avatar
  • Inscription: Mai 12, 2005
  • Messages: 31
  • Status: Offline

Message Octobre 5th, 2009, 8:13 am

Merci de votre réponse Mindfull mais cela ne semble toujours pas fonctionner.

D'autres idées. J'ai même simplifié le code pour tester et c'est encore de ne pas travailler. Im absolument perplexe.
  • DeadBolt
  • Novice
  • Novice
  • No Avatar
  • Inscription: Mai 12, 2005
  • Messages: 31
  • Status: Offline

Message Octobre 5th, 2009, 9:42 am

OK, je trouve que cela fonctionne si elle n'est pas située dans une autre div. Pourquoi serait-ce?

Je l'ai mis au début de la balise BODY et cela a fonctionné sans problèmes. Dès que je le place dans un div - l'effet de survol & lien ne fonctionne plus.

Toute aide est grandement appréciée.

Merci
Dave

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 4 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 120 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC