Rundes Design (Kreis) richtig slicen?

[Black_Scorpion]

Hi leute,

ich sitze jetzt schon 2 Tage bei folgendem Problem:

Mein Design sieht wie folgt aus (extremes Beispiel):

Ich habe eine "runde" fläche für den Content:


Die weiße Fläche wird von einem Hintergrundbild gefüllt.

Weiters ist die HP Flexibel aufgebaut wobei Header und Footer fixiert sind und der Inhalt beim scrollen hinter dem Schwarzen Rand "verschwinden" soll.

gewünscht:


Lösungsansatz 1:
Header und Footer sind PNGs und der weiße Teil ist zu 100% transparent.

Das problem was ich habe wenn ich es so löse alle links nicht mehr anklickbar sind, da ja der Header und Footer über dem Content-Layer liegen.

(Ich weiß über das PNG-Transparenz des IE Bescheid)

Lösungsansatz 2:
Ich verwende den üblichen "runde Ecken Aufbau" (9 divs (top-left, top, top-right, left, center ...)
wobei der Content im Center liegt. Dabei habe ich den gewünschten effekt nicht mehr, dass der Text beim Scrollen hinter dem "Halbkreis" verschwindet:



Wäre über etwas hilfe sehr erfreut bzw wie ihr dieses Problem lösen würdet.

 

[taffrot]

AW: Rundes Design (Kreis) richtig slicen?

Ich steig nicht 100%ig durch, aber könntest du Lösungsvorschlag 2 nicht mit z-index beheben?

 

[Black_Scorpion]

AW: Rundes Design (Kreis) richtig slicen?

also ich möchte die seite so aufbauen wie unter gewünscht.

Lösungsansatz 1 erreicht dies, jedoch kann man alle links in die tonne kloppen, da sie "unter" den 2 Bildern (header und footer) liegen und somit nicht anklickbar sind.

wenn ich mit dem z-index arbeite sieht das wie folgt aus:

 

[MyBad]

AW: Rundes Design (Kreis) richtig slicen?

Mit HTML + CSS wird das auch nichts werden. In Flash könntest du es so lösen. Mit reinem HTML + CSS wirst du wohl nur den Lösungsvorschlag 2 umsetzen können.

 

[Talassos]

AW: Rundes Design (Kreis) richtig slicen?

> transparte ebene ... du kannst ja ne shwarze elipse erzeugen und die mitte in PS transparent (karriert) lassen und als gif abspeichern ... so bleibt die mitte frei und man kann durchgucken ... wobei ich jetzt gerade nicht einschätzen kann wie das dann programmiert wird ... als background oder als <img> ... probiers mal aus ...

 

[MyBad]

AW: Rundes Design (Kreis) richtig slicen?

> transparte ebene ... du kannst ja ne shwarze elipse erzeugen und die mitte in PS transparent (karriert) lassen und als gif abspeichern ... so bleibt die mitte frei und man kann durchgucken ... wobei ich jetzt gerade nicht einschätzen kann wie das dann programmiert wird ... als background oder als <img> ... probiers mal aus ...

Grundsätzlich eine Methode... allerdings lässt sich der Text dahinter nicht mehr selektieren und es können auch keine Links mehr angewählt werden.

 

[Talassos]

AW: Rundes Design (Kreis) richtig slicen?

ok andere idee ...

man nimmt eine ecke vom schwarzen als einzelnes bild (siehe "gewünscht:")

> dann geh man hin dreht es so dass die beiden Spitzen der Elipse die links und rechts dran sind so liegen, dass die gedachte linie zwischen beiden Punkten waagerecht liegt
> die Fläche unterhalb der Elipse die dann nach konvex nach oben zeigt wird transparent gemacht

> nun geht man hin und positioniert die Elipse über CSS und dreht sie wieder so, dass es eine ganze Ellipse ergebn würde ...
> das macht man mit allen 4 Seiten ...

> dadurch sind nur die "kleinen" flächen an den elipsen nicht nutzbar, aber alles da drin schon ... da muss man halt den inhalt anpassen ...


Edit:
-->