Wie bringe ich das Design richtig auf die Homepage (Hover-effekte und Umgang mit Reitern)

twister-duelmen

Routinier

Dabei seit: 09.11.2007

Beiträge: 487

1

Mittwoch, 14. Mai 2008, 15:58

Hi!
Ich habe folgendes Design mit dem Photoshop entworfen. Nun meine Frage: Oben habe ich "Reiter" eingeplant. Wie kann ich diese mit Hover-Effekten usw. auf die Homepage bringen? Der Reiter, auf dem man ist, soll wie hier im Beispiel Community Blau sein, und etwas größer als die anderen. Die anderen sind orange und ich möchte sie auch mit einem Hover-effekt belegen. Nur wie mache ich das (ich hab damit eher weniger Erfahrung). Die Seite soll auch nicht als Photoshop bleiben. Ich werde nur die Grafiken übernehmen und mittels div positionieren. Ich hoffe, Ihr versteht, was ich erreichen will.

Gruß

Twister

Wir freuen uns über jeden Besuch!
Sturmjagd im Münsterland
SCMSL

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

2

Mittwoch, 14. Mai 2008, 16:01

Wenn ich dich richtig verstehe, ist das nicht anderes als ein Austausch von Hintergrundbildern.

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

twister-duelmen

Routinier

Dabei seit: 09.11.2007

Beiträge: 487

3

Mittwoch, 14. Mai 2008, 16:06

Klappt das denn so? Ich hatte da die sorge, dass das laden der kompletten Bilddatei bei einem Hover-Effekt zu lange dauert...
Edit: Wie kann ich denn machen, dass sich durch dem Hover-Effekt der Hintergrund des Divs, in dem der Link drinnen ist, ändert?

Wir freuen uns über jeden Besuch!
Sturmjagd im Münsterland
SCMSL

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »twister-duelmen« (14. Mai 2008, 18:11)

tecker

Routinier

Dabei seit: 20.06.2003

Beiträge: 431

4

Mittwoch, 14. Mai 2008, 18:11

moin twister,

anders wirst du es wohl nicht hinbekommen. Und so lange sollte das Laden auch nicht dauern.

Ich würde hier mit Klassen vorgehen, ungefähr so:

	Quellcode
1	<div class="menu_out" onmouseover="this.className='menu_over'" onmouseout="this.className='menu_out'">Menüpunkt</div>

und dann die CSS-Datei entsprechend füllen:

Quellcode

.menu_out {
 background: url(out.png); // Hintergrundbildwechsel
 font-family: 'kp';
 font-color: blue;
 font-weight: bold;
}
.menu_over {
 background: url(over.png); // Hintergrundbildwechsel
 font-family: 'kp';
 font-color: orange;
 font-weight: bold;
}

Sehr übersichtlich. Welcher Reiter, also welche Seite, gerade ausgewählt ist (Im Screen Community), kannst du mit PHP ermitteln.

Gruß,
teck0r

BILDblog.

Rene82

Kaiser

Dabei seit: 08.08.2006

Beiträge: 1 231

5

Mittwoch, 14. Mai 2008, 18:13

Zitat von »twister-duelmen«

das laden der kompletten Bilddatei bei einem Hover-Effekt zu lange dauert...

na anders gehts doch nicht. Das sind nunmal Grafiken also musste diese auch als Grafiken speichern. ganz klar.
Einfach per CSS als hintergrund anlegen da nimmst du die Garfik die am höhsten ist als referenz und ein Hover css erstellen. Fertig!

FWK-ART [media] - Fotos & Videos der schönsten und größten (Musik)Feuerwerke

twister-duelmen

Routinier

Dabei seit: 09.11.2007

Beiträge: 487

6

Mittwoch, 14. Mai 2008, 18:28

Gut, dann ist ja alles in Ordnung.
@tecker: Vielen Dank für die Hilfe mit dem Code... ist so etwas leichter zu verstehen gewesen.

Edit: Doch ein Problem: Bei der Variante von Tecker. Wenn ich über eines der Felder gehe, verschwindet es. Es taucht auch beim wegfahren der Maus kein neues auf. Wo liegt der Fehler? Link
Gruß

Twister

Wir freuen uns über jeden Besuch!
Sturmjagd im Münsterland
SCMSL

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »twister-duelmen« (14. Mai 2008, 19:12)

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

7

Mittwoch, 14. Mai 2008, 20:29

Quellcode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
 <title>i-netcash</title>
 <style type="text/css">
	* { /* setzt pauschal alle Abstände auf 0 */
		margin:0;
		padding:0;
	}
	#rand { /* Randdiv um besser floaten zu können */
		width:900px;
		margin:0 auto;
	}
	h1 { /* Logo als Hintergrundbild. text-indent versteckt den Text. Wir nach links gefloatet, margin-bottom sorgt für abstand zur blauen linie */
		margin-bottom:1px;
		width:236px;
		height:60px;
		float:left;
		text-indent:-9999px;
		background:#FFF url(http://stormchasing-muensterland.wmw.cc/netcash/logo.jpg) no-repeat;
	}
	#menu { /* Menü, wird nach links gefloatet. Abstand ergibt sich aus 900-(5*120) */
		width:600px;
		margin-left:64px;
		float:left;
		list-style:none;
	}
	#menu li { /* damit die Listenpunkte nebeneinander liegen sind diese nach links gefloatet. line-height zentriert den text horizontal, margin-top setzt diese an den unteren rand (25+35 = gesamthöhe) */
		float:left;
		width:120px;
		height:25px;
		line-height:25px;
		text-align:center;
		margin-top:35px;
	}
	#menu li a {
		display:block;
		width:120px;
		height:25px;
		background:#FFF url(http://stormchasing-muensterland.wmw.cc/netcash/bilder/menueout.jpg) no-repeat;
	}
	#menu li a:hover {
		background:#FFF url(http://stormchasing-muensterland.wmw.cc/netcash/bilder/menueon.jpg) no-repeat;
	}
	#rahmen { /* Blaue linie ... sollte diese irgendwelche Farbübergänge gehabt haben, dann konnt ich die nicht erkennen, weil mein Monitor unscharf wie die Hölle ist */
		clear:both;
		height:22px;
		background:#00F;
	}
 </style>
</head>
<body>
<div id="rand">
	<h1>i-netcash</h1>
	<ul id="menu">
		<li><a href="#">Community</a></li>
		<li><a href="#">Geld verdienen</a></li>
		<li><a href="#">Gewinnen</a></li>
		<li><a href="#">Shopping</a></li>
		<li><a href="#">Service</a></li>
	</ul>
	<hr id="rahmen" />
</div>
</body>
</html>

sollte selbsterklärend sein ...

EDIT: ich habs dir jetzt schon mehrmals gesagt, lass den Mist mit position, wenn nicht zwingend nötig!
EDIT 2: Kleinen Fehler entfernt

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Skittles« (14. Mai 2008, 20:46)

twister-duelmen

Routinier

Dabei seit: 09.11.2007

Beiträge: 487

8

Mittwoch, 14. Mai 2008, 20:46

Viiiiiielen Dank!
An die Möglichkeit hatte ich gar nicht gedacht (kannt ich ja von meiner Navigation). Habs auf jeden Fall verstanden! Aber kann jetzt vielleicht noch jemand sagen, WARUM die andere Möglichkeit nicht geklappt hat?

Gruß

Twister

Wir freuen uns über jeden Besuch!
Sturmjagd im Münsterland
SCMSL

Skittles

Moderator

Dabei seit: 14.02.2004

Beiträge: 3 014

9

Mittwoch, 14. Mai 2008, 20:48

Zitat von »twister-duelmen«

Viiiiiielen Dank!
An die Möglichkeit hatte ich gar nicht gedacht (kannt ich ja von meiner Navigation). Habs auf jeden Fall verstanden! Aber kann jetzt vielleicht noch jemand sagen, WARUM die andere Möglichkeit nicht geklappt hat?

Gruß

Twister

dürfte daran liegen, dass die onmouseout-klassen nicht richtig übernommen werden.

Achja, nur mal für dich am Rande: http://www.webmasterpro.de/coding/articl…v-wahnsinn.html

durchaus lesenswerter Artikel ... (ist ja auch von mir)

~!__/
..o.o

This is Einkaufswagen.
Copy Einkaufswagen into your signature to help him on his way to world domination.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Skittles« (14. Mai 2008, 20:49)

twister-duelmen

Routinier

Dabei seit: 09.11.2007

Beiträge: 487

10

Mittwoch, 14. Mai 2008, 20:55

Das das mit dem div nicht schlau war, war mir diesmal auch klar, doch mein Hauptziel war es erst mal die Geschichte ans laufen zu bringen, aber der Artikel ist echt gut (hab ich schon mal gelesen). Gut, Deine Möglichkeit erscheint mir sinnig, warum das von Tecker nicht funktionierte. Vielen Dank!

Gruß

Twister

Wir freuen uns über jeden Besuch!
Sturmjagd im Münsterland
SCMSL

andreaskeil

König

Dabei seit: 28.09.2007

Beiträge: 967

11

Mittwoch, 14. Mai 2008, 20:58

Zitat

Achja, nur mal für dich am Rande: http://www.webmasterpro.de/coding/articl…v-wahnsinn.html

durchaus lesenswerter Artikel ... (ist ja auch von mir)

wirklich guter artikel :thumbup:

kann man nur weiterempfehlen