runde ecken und bild "zerschneiden"

[Snaq]

hallo,


ich habe zwei fragen.

ist es möglich mit einer einzigen Klasse ein abgerundete navi zu erstellen? ich mache das zur zeit mit drei Klassen nebeneinander. zuerst die linke Seite mit der oben abgerundeten ecke, dann der content und dann die rechte seite mit der rechts oben abgerundeten Ecke.

|------------------------------- linke Seite
| |----------------------------- Content
| |         |---------------------- rechte Seite
/--------\
|...........|
|...........|

Das soll dann ungefähr so wie hier aussehen.
http://de.eurosport.yahoo.com/


meine zweite Frage ist, wie man es schafft ein grosses Bild in seine einzelnen Bestandteile zu zerschneiden?
so wie das hier zum Beispiel.
http://static4.gigagfx.de/2008/grafik/base/header.jpg

ich sehe das in letzter Zeit immer mehr. aber mir stellt sich die Frage ob das nicht dumm ist, weil man beim ersten Seitenufruf immer so ein grosses Bild erstmal laden muss, mit Bildelementen die man vlt. nicht braucht.


Danke schon mal für die Hilfe.

Gruss Snaq

[TobiaZ]

ist es möglich mit einer einzigen Klasse ein abgerundete navi zu erstellen?

Prinzipiell ja, je nach umfang benötigst du aber zusätzliches Markup.

meine zweite Frage ist, wie man es schafft ein grosses Bild in seine einzelnen Bestandteile zu zerschneiden?

Das Bild wird nicht zerschnitten, sondern einfach als Hintergrund eingebunden und dann mittels background-position an die richtige Stelle positioniert.

Such einfach mal im Netzt nach CSS menu o.ä., ist ja wirklich keine neue Aufgabe.

aber mir stellt sich die Frage ob das nicht dumm ist, weil man beim ersten Seitenufruf immer so ein grosses Bild erstmal laden muss, mit Bildelementen die man vlt. nicht braucht.

Da es sich ja meist ums Design handelt, kann man schon davon ausgehen, dass (fast) alle Elemente benötigt werden.

Klar hat jede Variante ihre Vor- und Nachteile. Da versteht es sich aber von selbst, dass man die im individuellen Fall abschätzen muss und nicht generell bewerten kann.

[Snaq]

danke für die hilfe!