nicht angemeldet
Hi!
Ich wollte mal fragen, ob es irgendeine Möglichkeit gibt, eine Art Frameset zu erzeugen, welches nicht durch Geraden unterteilt wird, sondern durch geschwungene Formen. Um das mal grafisch darzustellen:
Nicht:
+---------------------------------+
| |
| Frame 1 |
| |
+---------------------------------+ <= Gerade
| |
| |
| Frame 2 |
| |
| |
| |
+---------------------------------+
sondern:
+---------------------------------+
| Frame 1 |
| |
| o o o o o o o o |
| o o | <= Kurve, geschwungen
| o o |
| o Frame 2 o |
| o |
| |
| |
| |
+---------------------------------+
Die Frames sollen also nicht rechteckig sein, sondern geschwungene Formen annehmen. Ist sowas irgendwie möglich (wenn auch nicht mit Frames)?? (...)
Es gäbe da eine Möglichkeit, die aber den Nachteil hat, daß sie weder im
Internet Explorer noch im 4.7er Netscape den gewünschten Effekt hätte:
Du definierst zwei DIVs:
+---------------------------------+
| DIV 1 |
| |
| o o o o o o o o |
| o *1* o | <- oberer Rand von DIV 2
| o o |
| o o |
|...............................o | <- Unterer Rand von DIV 1
| |
| DIV 2 |
| |
+---------------------------------+
DIV 2 (der eigentliche Seiteninhalt) ist absolut positioniert, und zwar
ist die Oberkante dort, wo im obigen Bild *1* steht.
DIV 1 ist (mit z-index > z-index von DIV 2) fix am oberen Rand positioniert.
Die Form der geschwungenen Trennungslinie wird durch ein halb transparentes
GIF vorgegeben, das als Hintergrundbild in DIV 1 steht:
+---------------------------------+
|GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG|
|GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG|
|GGGGGGGGo o o o o o o oGGGGGGGGGG|
|GGGGGo oGGGGGGG| <- oberer Rand von DIV 2
|GGGo oGGGGG|
|Go oGGG|
|...............................oG| <- Unterer Rand von DIV 1
G kennzeichnet hier den nicht transparenten Teil des Hintergrund-GIFs,
der weiße Bereich ist transparent.
Oben in DIV 1 kannst Du dann die Navigation reinmachen.
Natürlich darf der Inhalt von DIV 2 nicht von vornherein verdeckt werden!
Die Stylesheet-Definition sähe dann mit Beispieldaten in etwa so aus:
div.navigation {
top: 0px;
left: 0px;
position: absolute;
position: fixed;
z-index: 2;
background-image: url(teilweise_transparentes_hintergrundbild.gif);
}
div.inhalt {
top: 150px;
left: 0px;
position: absolute;
z-index: 1;
}
Sollte in Opera und Mozilla wunderbar klappen,
und IE und Netscape sollten beide DIVs an ihrer Anfangsposition lassen...
Schönen Gruß
Rainer