Hoverschaltflächen in Navibox (Snipet)

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
Stretch30
Mitglied
Beiträge: 30
Registriert: 22.04.2009 14:19

Hoverschaltflächen in Navibox (Snipet)

Beitrag von Stretch30 »

Hallo liebe PHP User,

ich stehe irgendwie auf dem Schlauch. Ich habe die Navibox (http://www.phpbb.de/community/viewtopic ... 5&t=159258) erfolgreich installiert. Nun habe ich bereits erfolgreich verschiedene Buttons gefertigt und möchte die nun als Hoverschaltflächen (mouseover Effekt) in der Box haben. Zuerst einmal eine grundsätzliche Frage: Gehe ich richtig in der Annahme, dass die images in den Ordner root/styles/prosilver/imageset müssen? Nun zur anderen Frage. Ich habe folgenden Code in der overall_header.html benutzt, es hat nicht geklappt:

Ich habe es geschafft! Hier der Code samt der Navigationsbox:

Code: Alles auswählen

<div style="float:left; width:100px;">
          <div class="headerbar">
             <span class="corners-top"><span></span></span>
                <br></br>
				<p align="center" style="font-size:150%; color:white"><b>Navigation</b></p>
				<a href="http://www.pennergame.de">
				<img src="styles/prosilver/imageset/de/hamburg1.png" onmouseover="this.src='styles/prosilver/imageset/de/hamburg2.png';" onmouseout="this.src='styles/prosilver/imageset/de/hamburg1.png';" target="_blank" width="90" height="50" alt="Hamburg" style="border:0 none" /></a>
				<a href="http://www.berlin.pennergame.de">
				<img src="styles/prosilver/imageset/de/berlin1.png" onmouseover="this.src='styles/prosilver/imageset/de/berlin2.png';" onmouseout="this.src='styles/prosilver/imageset/de/berlin1.png';" target="_blank" width="90" height="50 alt="Berlin" style="border:0 none" /></a>
				<a href="http://newboard.pennergame.de/">
				<img src="styles/prosilver/imageset/de/forum1.png" onmouseover="this.src='styles/prosilver/imageset/de/forum2.png';" onmouseout="this.src='styles/prosilver/imageset/de/forum1.png';" target="_blank" width="90" height="50 alt="Forum" style="border:0 none" /></a>
				<a href="http://www.dipshits.de/page.php?p=chat2&s">
				<img src="styles/prosilver/imageset/de/chat1.png" onmouseover="this.src='styles/prosilver/imageset/de/chat2.png';" onmouseout="this.src='styles/prosilver/imageset/de/chat1.png';" target="_blank" width="90" height="50 alt="Chat" style="border:0 none" /></a>
				<a href="http://www.youtube.de">
				<img src="styles/prosilver/imageset/de/youtube1.png" onmouseover="this.src='styles/prosilver/imageset/de/youtube2.png';" onmouseout="this.src='styles/prosilver/imageset/de/youtube1.png';" target="_blank" width="90" height="50 alt="Youtube" style="border:0 none" /></a>
				<a href="mailto:blablabla@web.de">
				<img src="styles/prosilver/imageset/de/kontakt1.png" onmouseover="this.src='styles/prosilver/imageset/de/kontakt2.png';" onmouseout="this.src='styles/prosilver/imageset/de/kontakt1.png';" target="_blank" width="90" height="50 alt="Youtube" style="border:0 none" /></a>
             <span class="corners-bottom"><span></span></span>
          </div>
       </div>	
	
	<a name="start_here"></a>
    <div style="float:right; width:89%;">
	<div id="page-body">
Ich habe die Breite der page-body auf 89% gesetzt, ursprünglich stand sie auf 90 Prozent.
Zuletzt geändert von Stretch30 am 06.05.2009 02:06, insgesamt 2-mal geändert.
Benutzeravatar
Tarken
Mitglied
Beiträge: 237
Registriert: 23.03.2009 21:05
Kontaktdaten:

Re: Hoverschaltflächen in Navibox (Snipet)

Beitrag von Tarken »

Du solltest doch erstmal nen .css Block anlegen.
Benutzeravatar
Dr.Death
Moderator
Moderator
Beiträge: 17475
Registriert: 23.04.2003 08:22
Wohnort: Xanten
Kontaktdaten:

Re: Hoverschaltflächen in Navibox (Snipet)

Beitrag von Dr.Death »

Noch ein kleiner Tipp: Das Forum auf http://newboard.pennergame.de/ ist nicht wirklich IE 8 kompatibel....
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“