• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hovereffekt - auf einmal gar keine Grafiken mehr!

Status
Für weitere Antworten geschlossen.
F

flaexx

Guest
Hallo,

so sieht die Seite aus: Link
Und in der Mitte sollen die Grafiken der Navigation sein. Das die anneinander sind, hab ich ja hinbekommen, aber jetzt will ich einen hovereffekt einbauen, aber jetzt zwerschießt der mir die seite. Ich hab von CSS4YOU den vorschlag als vorlage genommen. aber warum wird jetzt gar nix mehr angezeigt?

HTML: 
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html>
<head>
<title>Coming into Effect</title>
<meta name="description" content="Die Bandhomepage von Coming into Effect">
<meta name="author" content="Sebastian">
<meta name="keywords" content="Coming, into, Effect, Coming into Effect">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

<div id="banner"></div>

<div id="navi">
<a class="home" href="#"></a><a class="band" href="#"></a><a class="gigs" href="#"></a><a class="media" href="#"></a><a class="forum" href="#"></a><a class="gb" href="#"></a><a class="kontakt" href="#"></a><a class="links" href="#"></a></div>

<div id="content"><br><br><br>Hier entsteht der Content Bereich</div>

</body>
</html>

HTML: 
body
    {
         background-color:    #bbbbbb;
         text-decoration:    none;
         font-family:        Verdana, Helvetica, sans-serif;
    font-size:        12pt;
         }

#banner
    {
         background-image:    url(images/banner.jpg);
         width:             750px;
         height:            200px;
    margin-left:        250px;
         margin-top:        20px;
    }

#navi
    {
         background-color:    #C0C0C0;
         width:             750px;
         height:            23px;
         top:                    770px;
    margin-left:        250px;
         float:            left;
         text-align:        center;
    }

#content
    {
         background-color:    #5F5F5F;
         width:            750px;
         height:            500px;
         top:                793px;
         margin-left:        250px;
         text-align:        center;
         }

a.home
    {
         background-image:url(../images/home.jpg);
         display:    block;
    width:        80px;
    height:        23px;
     }

a.band
    {
         background-image:url(../images/band.jpg);
         display:    block;
    width:        80px;
    height:        23px;
     }

a.gigs
    {
         background-image:url(../images/gigs.jpg);
         display:    block;
    width:        80px;
    height:        23px;
     }

a.media
    {
         background-image:url(../images/media.jpg);
         display:    block;
    width:        80px;
    height:        23px;
         }

a.forum
    {
         background-image:url(../images/forum.jpg);
         display:    block;
    width:        80px;
    height:        23px;
     }

a.gb
    {
         background-image:url(../images/gb.jpg);
         display:    block;
    width:        80px;
    height:        23px;
     }

a.kontakt
    {
         background-image:url(../images/kontakt.jpg);
         display:    block;
    width:        80px;
    height:        23px;
     }

a.links
    {
         background-image:url(../images/links.jpg);
         display:    block;
    width:        80px;
    height:        23px;
     }

a.home:hover
    {
         background-image:url(../images/home2.jpg);
     }

a.band:hover
    {
         background-image:url(../images/band2.jpg);
     }

a.gigs:hover
    {
         background-image:url(../images/gigs2.jpg);
     }

a.media:hover
    {
         background-image:url(../images/media2.jpg);
         }

a.forum:hover
    {
         background-image:url(../images/forum2.jpg);
     }

a.gb:hover
    {
         background-image:url(../images/gb2.jpg);
     }

a.kontakt:hover
    {
         background-image:url(../images/kontakt2.jpg);
     }

a.links:hover
    {
         background-image:url(../images/links2.jpg);
     }
 
in der stylesheet.css steht etwas anderes:
HTML: 
a.home
    {
    margin:     0px;
         border:        0;
     }
Wechsel ich das gegen dienen geposteten Code aus erscheint ein Menü mit blauschwarzen Bildchen.
 
Bei mir nicht, kannst du mir deinen Script mal hier rein posten, bitte? Aber bitte den kompletten CSS Script.
 
flaexx schrieb:
Jo okay, besser spät als gar nicht!
Zum Vergrößern anklicken....
Hier hat ja tatsächlich niemand geantwortet.

Das css was du gepostet hast, ist ein ganz Anderes als das auf deinen Webspace:
http://comingintoeffect.co.funpic.de/stylesheet.css
Wenn ich dein gepostetes css in der web-developer von Firefox einfüge sehe ich das Menü.
Du hast vielleicht eine alte Datei hochgeladen oder den Pfad in der html-Datei
nicht geändert:
HTML: 
<link rel="stylesheet" type="text/css" href="stylesheet.css">
 
neuroleptika schrieb:
Hier hat ja tatsächlich niemand geantwortet.

Das css was du gepostet hast, ist ein ganz Anderes als das auf deinen Webspace:
http://comingintoeffect.co.funpic.de/stylesheet.css
Wenn ich dein gepostetes css in der web-developer von Firefox einfüge sehe ich das Menü.
Du hast vielleicht eine alte Datei hochgeladen oder den Pfad in der html-Datei
nicht geändert:
HTML: 
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Zum Vergrößern anklicken....

Nein, ich hab bisher noch gar keine neue datei hochgeladen...moment!

schaut wies aussieht!
Coming into Effect

du weißt ja, wie ich das meine, und wie das aussehen soll...kannst du das vielleicht mal bitte für mich machen? :)
 
Nein! Die Buttons sollen alle nebeneinander sein, und der hovereffekt soll eingebaut sein...die grafiken heißen immer z.B. home.jpg und die dazugehörige hoverdatei dann home2.jpg ....
 
flaexx schrieb:
Nein! Die Buttons sollen alle nebeneinander sein
Zum Vergrößern anklicken....
Nebeneinander:
HTML: 
a.home
    {
float: left;
background-image:url(/images/home.jpg);
display:    block;
width:      80px;
height:     23px;
margin:     0px;
border:      none;
     }
Farbe der Navigation schwarz?
HTML: 
#navi
    {
         background-color:    #000000;
         width:             750px;
         height:            23px;
         top:                    770px;
         margin-left:        250px;
         float:            left;
         text-align:        center;
    }
, und der hovereffekt soll eingebaut sein...die grafiken heißen immer z.B. home.jpg und die dazugehörige hoverdatei dann home2.jpg ....
Zum Vergrößern anklicken....
hover :
HTML: 
a.home:hover
    {
         background-image:url(/images/home2.jpg);
     }
Ich hab das nur in der web-developer von Firefox ausprobiert. wie das in anderen Browsern dargestellt wird mußt du ausprobieren.
Die weißen Linien sind in den Grafiken. Die müßtest du noch schwärzen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben