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

Bilder mit Hover Effekt nebeneinander

M

mutantenboss

Neues Mitglied
Hallo liebes Forum,
ich arbeite zurzeit an einer Homepage. Ich habe bis jetzt alles Perfekt geschafft auser das Menü. Ich habe ein Link mit einem Bild und einem Hover effekt bestückt nur wird diese nicht nebeneinander angezigt sondern untereinander.

Hier der CSS Code
HTML: 
.menübutton {
height:47px;
width:187px;
display:block;
}
.startseite
{
background: url(../images/menu/startseite.png) no-repeat;
}

.menübutton:hover
{
background: url(../images/menu/startseitehover.png) no-repeat;
}
.menübutton2 {
height:47px;
width:187px;
display:block;
}
.awards
{
background: url(../images/menu/awards.png) no-repeat;
}

.awards:hover
{
background: url(../images/menu/awardshover.png) no-repeat;

}
.menübutton3 {
height:47px;
width:187px;
display:block;
}
.anmelden
{
background: url(../images/menu/anmelden.png) no-repeat;
}

.anmelden:hover
{
background: url(../images/menu/anmeldenhover.png) no-repeat;

}
.menübutton4 {
height:47px;
width:187px;
display:block;
}
.übermich
{
background: url(../images/menu/übermich.png) no-repeat;
}

.übermich:hover
{
background: url(../images/menu/übermichhover.png) no-repeat;

}

Und hier die HTML Datei
HTML: 
<link rel="stylesheet" type="text/css" href="css/menü.css">

<a href="#" class="menübutton startseite"></a><a href="#" class="menübutton2 awards"></a><a href="#" class="menübutton3 anmelden"></a><a href="#" class="menübutton4 übermich"></a>
 
Hallo,
Um die Hintergrundbilder in den Menü-Links anzuzeigen hast du ja diesen per Klasse "menübutton" ein display:block; gegeben. Dadurch entsteht dann der Umbruch nach jedem dieser Blockelemente.
Deshalb würde ich die Links in eine Liste packen
Code: 
<ul>
<li><a href="#" class="menübutton startseite"></a></li>
<li><a href="#" class="menübutton  awards"></a></li>
<li><a href="#" class="menübutton  anmelden"></a></li>
<li><a href="#" class="menübutton  übermich"></a></li>
</ul>
Außerdem könntest Du doch statt "menübutto1" "menübutton2" usw einfach die Klasse "menübutton" allen links geben, anstatt immer eine neue Klasse mit den selben Eigenschaften zu erstellen
 
Okay habe jetzt allen die Gleiche Klasse zugewiesen. Und habe auhc das Display:Block entfernt. Jetzt kommt jedoch garnichts mehr, nurnoch die Punkte vom <li>
 
Hallo, tu das display:block; wieder rein.
Habe nur erläutern wollen warum der Umbruch entsteht und wofür Du ihn verwendet hast: Eben, um die Hintergrundbilder der Links anzuzeigen (ist dafür unbedingt nötig).

Und um bei den Listen die Punkte weg zu bekommen im CSS folgendes einfügen :
Code: 
ul li {
list-style-type:none;
}
 
mutantenboss schrieb:
Ok Gut die Punkte sind Weg nur wie mache ich jetzt das die Bilder nicht nebeneinander sind sondern Untereinander?
Zum Vergrößern anklicken....
Hm? Ich dachte du wolltest die Bilder nebeneinander haben?

Habe allerdings vergessen zu sagen wie man die listenpunkte nebeneinander packt, nämlich so mit float:

Code: 
ul li {
list-style-type:none;
float:left;
}
 
Hast du das mit deiner Seite denn jetzt hinbekommen?

Darf ich mich wenn ich Fragen hab an dich Wenden?
Zum Vergrößern anklicken....
Meinst du damit per Privatnachricht? Fragen solltest du eigentlich öffentlich im Forum stellen, da
1.) Andere Benutzer mit Ihrem Wissen zu optimalen und schnelleren Lösungen beitragen können. und 2.) Leute die auf der Suche nach einem Problem sind, im Thread eine Antwort finden können.
Für Sachen die der Allgemeinheit nicht viel bringen kannst du mich natürlich anschreiben :)
 
Ok ;D Dann habe ich jetzt was wo wahrrscheinlich Allgemein ist ;D
Und zwar möchte ich das das Design Mittig gesetzt ist

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Awards4You - Startseite </title>
<link rel="stylesheet" type="text/css" href="css/template.css">
</head>

<body>
<div class="headerbg"><img src="images/headbg.png"></div>
<div class="header"><img src="images/headline.png"></div>
<div class="navi">
<ul>
<li><a href="#" class="menübutton startseite"></a></li>
<li><a href="#" class="menübutton  awards"></a></li>
<li><a href="#" class="menübutton  anmelden"></a></li>
<li><a href="#" class="menübutton  übermich"></a></li>
</ul></div>
<div class="contentbg">lala</div>
</body>
</html>

und hier die CSS Datei

Code: 
body {
background-image: url(../images/bg.png);
}
div.headerbg {
position:absolute;
left:0%;
width:100%;
top:0px;
text-align:center;
height:350px;
}
div.header {
position:absolute;
left:0%;
width:100%;
top:35px;
text-align:center;
height:184px;
}
div.contentbg {
position:absolute;
background-image: url(../images/contentbg.png);
top:257px;
width:100%;
text-align:center;
min-height:400px;
background-repeat:repeat-y;
background-position:50%;
}
div.navi {
position:absolute;
top:194px;
width:100%;
text-align:center;
height:47px;
}
.menübutton {
height:47px;
width:186px;
display:block;
}
.startseite
{
background: url(../images/menu/startseite.png) no-repeat;
}

.startseite:hover
{
background: url(../images/menu/startseitehover.png) no-repeat;
}
.awards
{
background: url(../images/menu/awards.png) no-repeat;
}

.awards:hover
{
background: url(../images/menu/awardshover.png) no-repeat;

}
.anmelden
{
background: url(../images/menu/anmelden.png) no-repeat;
}

.anmelden:hover
{
background: url(../images/menu/anmeldenhover.png) no-repeat;

}
.übermich
{
background: url(../images/menu/übermich.png) no-repeat;
}

.übermich:hover
{
background: url(../images/menu/übermichhover.png) no-repeat;

}
ul li {
list-style-type:none;
float:left;
}

Aber ich möchte auch die TOP: noch ändern können ;D

mfg Julian
 
Hallo, ich weis nicht ob die Frage jetzt Off-Topic ist :o.
Aber mittig bekommst du die Seite indem Du um den Inhalt(außer deinem "contentbg") mal ein Div-container mit gewünschter Breite der Seite gibst und dem Ding in der klasse per Css noch
Code: 
margin:auto;
gibst.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben