CSS Frage !!Update!!

Dieses Thema im Forum "Webentwicklung" wurde erstellt von eVeReSt, 27. Mai 2007 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 27. Mai 2007
    Hallo!

    Ich möchte gerne mehere Rollovers auf meiner Homepage mit CSS machen. Geht das, dass ich:

    a:hover1
    a:hover2
    a:hover3

    mache, natürlich mit den entsprechenden Div's?

    Zweite Frage, gibt es bei CSS ein Parameter, mit dem ich ein Bild laden kann (also für das Rollover statt die Textfarbe zu ändern ein anderes Bild zu laden)?

    thx für die Antworten! BW ist selbsverstäntlich!

    gruss eVeReSt
     
  3. 27. Mai 2007
    Zuletzt von einem Moderator bearbeitet: 15. April 2017
    AW: CSS Frage

    Zum Link Problem: Stylesheet Link Problem - RR:Board

    Keine Zeit mehr fürs andre.


    mfg,
    m00pd00p
     
  4. 27. Mai 2007
    AW: CSS Frage

    Bild laden: background-image: url('url.jpg'); ?

    hover1 etc geht imo nicht, aber dafür ginge sowas in der Art:

    a:hover.class1 {

    }
    a:hover.class2 {

    }

    und so.. (wenn ich nich grad was vertausch)

    Und dann <a class="class1" href="...">..</a>
     
  5. 27. Mai 2007
    AW: CSS Frage

    Vielen Dank für die schnellen Antworten! BW's sinsd raus!

    Update:

    Das mit dem background-image ist ja gut und recht, aber ich will es nicht im hintergrund, sondern im vordergrund, da der Text (z.B. Home) schon auf das Bild geschrieben ist. Gibt es für das ein CSS Parameter, oder muss ich zu einem Java Script greifen?
     
  6. 27. Mai 2007
    AW: CSS Frage

    Wo liegt das Problem, wenn das Bild als Hintergrund definiert ist? Du wirst ja nichts drübergelegt haben oder?...Lass es als Hintergrund und mach halt keinen Content an die Stelle.
     
  7. 27. Mai 2007
    AW: CSS Frage

    Dann läd es aber das Bild nicht...naja egal ich probiers sonst halt mit Java.
     
  8. 27. Mai 2007
    AW: CSS Frage

    Normalerweise laedt es dann auch ohne Probleme, insofern du keinen Fehler im CSS hast. Ausserdem meinst du JavaScript, denke ich.
     
  9. 27. Mai 2007
    AW: CSS Frage

    Vielleicht weil du weder width noch height bestimmt hast und deine Fläche somit 0x0 Px groß ist?
    Würde mir so einfallen was du da "falsch" machen könntest..
     
  10. 27. Mai 2007
    AW: CSS Frage

    Außerdem: Wenn du das Bild in einer Tabelle hast und nur dein Bild als Background und keinen Content, kann es sein, dass die Zelle gar nicht angezeigt wird > <td>&nbsp;</td>
     
  11. 27. Mai 2007
    AW: CSS Frage !!Update!!

    so sollte es funktionieren ...

    HTML:
    <script type="text/css">
a:hover.class1 {
 background: url('button1.jpg');
 height: 100px;
 width: 20px;
 border: 0;
}
a:hover.class2 {
 background: url('button2.jpg');
 height: 100px;
 width: 20px;
 border: 0;
}
</script>

<a class="class1" href="link1.html"></a>
<a class="class2" href="link2.html"></a>
     
  12. 27. Mai 2007
    AW: CSS Frage !!Update!!

    Geht aber leider nicht... Solang ich nichts in den <a></a> teil schreibe kommt nichts...

    Vielleicht zur Info: Das ganze ist in einer Tabellenkonstruktion, da ich ein Photoshopbild gesliced habe...
     
  13. 27. Mai 2007
    AW: CSS Frage !!Update!!

    hast du denn auch den link ohne :hover definiert ?
    HTML:
    <script type="text/css"> 
a.class1 { 
 background: url('button1.jpg'); 
 height: 100px; 
 width: 20px; 
 border: 0; 
} 
a.class2 { 
 background: url('button2.jpg'); 
 height: 100px; 
 width: 20px; 
 border: 0; 
} 

a.class1:hover { 
 background: url('button1_hover.jpg'); 
 height: 100px; 
 width: 20px; 
 border: 0; 
} 
a.class2:hover { 
 background: url('button2_hover.jpg'); 
 height: 100px; 
 width: 20px; 
 border: 0; 
} 

</script> 

<a class="class1" href="link1.html"></a> 
<a class="class2" href="link2.html"></a>
    wenn das auch nicht geht mach mal wie m00pd00p schon sagte <a class="class1" href="link1.html">&nbsp;</a>


    habs selber nicht getestet aber sollte so funktionieren
     
  14. 27. Mai 2007
    AW: CSS Frage !!Update!!

    Da fehlt ein display:block, sonst wird es nur als inline-Element dargestellt.
     
  15. 27. Mai 2007
    AW: CSS Frage !!Update!!

    hast recht, da hab ich jetzt gar nicht dran gedacht
     
  16. 27. Mai 2007
    AW: CSS Frage !!Update!!

    such dir wat aus:

    HTML:
    <html>
<head>
<style type="text/css">
.links {
font-family: arial;
}

/*## normaler link ##*/
.links #a {
color: black;
}

.links #a:hover {
color: blue;
}

/*## erst text dann bild ##*/
.links #b #imgb {
color: red;
line-height: 120px;
width: 200px;
vertical-align: middle;
display: inline;
}

.links #b:hover {
background-image: url("http://board.raidrush.ws/images/a_rr_style/misc/head_03.gif");
width: 200px;
height: 120px;
display: block;
}

.links #b:hover #imgb {
display: none;
}

/*## hintergrundfarbe ändern ##*/
.links #c {
background-color: #FF007F;
color: #FF007F;
width: 200px;
height: 120px;
display:block;
}

.links #c:hover {
background-color: #FF7F7F;
color: #FF7F7F;
}

/*## erst bild dann text ##*/
.links #d {
background-image: url("http://board.raidrush.ws/images/a_rr_style/misc/head_01.gif");
width: 300px;
height: 100px;
display: block;
}

.links #d #text {
display: none;
}

.links #d:hover {
background-image: url("");
background-color: white;
line-height: 100px;
vertical-align: middle;
text-align: center;
}

.links #d:hover #text {
display: block;
}

/*## bild wechseln ##*/
.links #e {
background-image: url("http://board.raidrush.ws/customavatars/avatar2786_1.gif");
width: 100px;
height: 100px;
display:block;
}

.links #e:hover {
background-image: url("http://board.raidrush.ws/customavatars/avatar21801_2.gif");
}
</style>
</head>
<body class="links">
<a href="#" id="a">aaaaa</a><br/>
<a href="#" id="b"><span id="imgb">bbbbb</span></a>
<a href="#" id="c"></a>
<a href="#" id="d"><span id="text">CSS ROCKZZ!!</span></a>
<a href="#" id="e"></a>
</body>
</html>
     
  17. 27. Mai 2007
    AW: CSS Frage !!Update!!

    Vielen Dank Murdoc-4D für dein Script, es funktioniert endlich. Natürlich auch allen anderen vielen Dank für die kompetenten Hilfen!!! BW's sind raus!
     
  18. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.