Grafik als Link einfügen

[BeginnerBobo]

Hey Leute. Hab da nochmal ne kleine Frage die für euch eine leichtigkeit darstellen sollte. wollte langsam mal meine Menüpunkte durch grafiken ersetzen also durch Buttons. Habe mir welche erstellt. Einmal den Button wie es normal aussieht und dann nochmal wie es aussieht wenn man mit der maus drüber geht.

Im mom sieht das Menü in etwa so aus (in der index2.php):

Code: Alles auswählen

				<div id="menu">
					<ul id="navigation">
						<li class="neuigkeiten"><a href="index2.php">Neuigkeiten</a></li>
						<li class="events"><a href="events.php">Events</a></li>
					</ul>
				</div>

und in der dazu gehörigen css:

Code: Alles auswählen

/* Navigation von Menü 2 hellrot */

ul#navigation
{
font-family: arial;
color:#FFFFFF;
font-weight:bold;
font-size:9pt;
margin-left:-40px;
}

ul#navigation li
{
float:left;
top:-5px;
position:relative;
list-style-type:none;
}

ul#navigation li a
{
color: #FFFFFF;
text-decoration:none;
}

ul#navigation li a:hover
{
color: #FF0000; /*Hintergrundfläche soll sich verfärben wenn man mit maus drüber geht*/
text-decoration:none;
}

ul#navigation li.neuigkeiten
{
width:130px;
}

ul#navigation li.events
{
width:130px;
}

jetzt muss ich ja irgendwie die grafik einbinden. hatte mich gestern mal durch google gelesen und paar dinge versucht aber wirklich funktioniert hat es nicht. vielleicht könnt ihr mir ja nochmal helfen.. eilt jetzt nicht aber sieht schonmal gut aus wenn das erledigt ist.

noch ne frage zum abschluss. kann man auch .bmp dateien als "buttons" einfügen oder welche dateiendung sollte ich am besten nehmen? .jpg sieht immer so unscharf aus :/

schon mal danke und liebe grüße

[Xin]

Hi, das geht im Prinzip ganz einfach: Du gibst dem Element ein background-image:

Code: Alles auswählen

ul#navigation li a:hover
{
color: #FF0000; /*Hintergrundfläche soll sich verfärben wenn man mit maus drüber geht*/
background-image: url(buttons/button1hover.png)
text-decoration:none;
}

Entsprechend für "ul#navigation li a" das Bild ohne Hover.
Ggfs. noch mit width und height den Button anpassen.

PNG eignet sich gut für Webgrafiken oder bei Grafiken mit wenig Farben auch das alte GIF Format. Beide sind wie BMP verlustfrei, aber deutlich kleiner.

[BeginnerBobo]

hm teste ich morgen mal aus. dann war ich gar nicht weit davon entfernt ;D so würde ich ja allerdings nur einen button für die allgemeine navigation erstellen. ich muss ja aber einen für

Code: Alles auswählen

ul#navigation li.neuigkeiten

einen für

Code: Alles auswählen

ul#navigation li.events

also muss ich ja für jeden einzelnen menüpunkt irgenwie ein .png zuweisen. wie mache ich das am besten? reicht ja wahrscheinlich nicht wenn ich in der css datei
zb

Code: Alles auswählen

ul#navigation li.neuigkeiten a
background-image: url(buttons/button1.png)
text-decoration:none;

und

Code: Alles auswählen

ul#navigation li.neuigkeiten a:hover
background-image: url(buttons/button1hover.png)
text-decoration:none;

einfüge denke ich^^

[Xin]

Eigentlich sollte das reichen.
Aber es wäre halt pro Button eine eigene Klasse, bzw. 2 wenn man die :hover Geschichte dazupackt.

[BeginnerBobo]

Gleich morgen früh teste ich es nochmal aus. Vielen Dank auf jeden Fall. Du hilfst mir ja echt immer und das schnell so macht es doch Spaß

[BeginnerBobo]

na so funktioniert es leider nicht. irgendwo habe ich einen fehler.. habe in der css datei nun es so eingebaut:

Code: Alles auswählen

ul#navigation li.searchfor
{
width:130px;
}

ul#navigation li.searchfor a
{
background-image: url(buttons/search_for_button115x24.png);
text-decoration:none;
}

ul#navigation li.searchfor a:hover
{
background-image: url(buttons/search_for_button115x24hover.png);
text-decoration:none;
}

und im .php ist es so drin:

Code: Alles auswählen

		<div id="menu">
			<ul id="navigation">
				<li class="searchfor"><a href="searchfor.php"></a></li>
			</ul>
		        </div>

aber im endergebnis ist dieses searchfor nun einfach ganz weg. (is ja logisch schhließlich steht es ja im .php nicht mehr drin bei "<li class="searchfor"><a href="searchfor.php">!!!!!!!!!</a></li>"... aber stattdessen soll ja das bild da sein. aber das ist irgendwie gar nicht da.. ist bestimmt wieder nur ein doofer fehler aber ich steh aufm schlauch^^


edit:

fehler gefunden. habe bei

Code: Alles auswählen

background-image: url(buttons/search_for_button115x24hover.png);

einfach nur die "" vergessen also

Code: Alles auswählen

background-image: url("buttons/search_for_button115x24hover.png");

.

allerdings zeigt er mir anstatt dem bild nun sowas an

[Xin]

fehler gefunden. habe bei

Code: Alles auswählen

background-image: url(buttons/search_for_button115x24hover.png);

einfach nur die "" vergessen also

Code: Alles auswählen

background-image: url("buttons/search_for_button115x24hover.png");

.

Soweit mit bekannt kommen da eben keine Anführungszeichen hin.

Du siehst das Bild (vermutlich) nicht, weil Du das <li> das Bild hat, der Anchor aber keine Fläche besitzt, sich das li am Anchor orientiert und damit auch keine Fläche hat. Ohne Fläche, kein Bild.
Beschreibe den Anchor mit min-width: 115px; min-height:24px

allerdings zeigt er mir anstatt dem bild nun sowas an

Offenbar möchte er Dir mitteilen, dass er ein Bild mit Anführungszeichen im Namen nicht gefunden hat.

[BeginnerBobo]

hm irgendwie egal wie ich es schreibe. es will einfach nicht auftauchen das bild.

Code: Alles auswählen

ul#navigation li.searchfor
{
min-width:115px;
min-height:24px;
}

ul#navigation li.searchfor a
{
min-width:115px;
min-height:24px;
background-image:url(buttons/search_for_button115x24.png);
text-decoration:none;
}

ul#navigation li.searchfor a:hover
{
min-width:115px;
min-height:24px;
background-image: url(buttons/search_for_button115x24hover.png);
text-decoration:none;
}

Code: Alles auswählen

		<div id="menu">
			<ul id="navigation">
				<li class="searchfor"><a href="searchfor.php"></a></li>
			</ul>
		</div>

:/ ich bin da gerade zu kacke für

edit: hab auch mal sicherheitshalber mit z-index:2000; das bild nach ganz oben gelegt falls es sich wieder irgendwo drunter verstecken sollte.aber hat auch nicht geholfen. firebug sagt mir auf jeden fall dass es an der richtigen stelle ist aber dort ist einfach nichts ^^

[Xin]

Ich weiß momentan nichtmals wie's aussieht. Kann man die Website irgendwo sehen?

[BeginnerBobo]

Also so sah es vorher aus:
http://www.directupload.net/file/d/3592 ... ai_jpg.htm

Nun sieht es so aus:
http://www.directupload.net/file/d/3592 ... jp_jpg.htm

und so soll es aussehen:
http://www.directupload.net/file/d/3592 ... ni_jpg.htm

Anstatt der einzelnen Wörter sollen halt kleine .png dateien als button/link dienen.