Guten Tag zusammen,

Ich habe mir kürzlich eine Webdesign mit Photoshop ausgetüftelt und wollte jetzt das ganze mit css zusammensetzten.
Hab das Design mal hochgeladen, damit euch mein Problem vllt besser kla wird:
http://rollbrettgurken.de/deeesign.jpg
Also meine Vorstellung ist die, dass Ich die einzelnen Bildelemente:
- Wassereffekt (als Footer mit repeat-x)
- Contentbereich, der den Footer teils überlagert (möglich?)
- Strahlen, die Content & Footer überlagern sollen (möglich?)
- Logo
die Ich aus dem Design separat extrahiert habe mit css als background-image elemente zusammensetze. Mein Problem dabei ist allerdings, dass ich ungefähr Null Ahnung im Umgang mit CSS habe es meiner Meinung nach aber die schönste Alternative wäre, da wenn möglich, die farbigen strahlen den Contentbereich überlagern, was ein tollen Effekt erzielen würde.

Konkret:
1. Wie definiere Ich wasser.png als Footer in meiner seperaten layout.css (an unteren Bildrand ausrichten und mit repeat-x wiederholen) und mit was für Elementen füge Ich es am besten in die HTML ein?
2. Wie richte ich den Content mittig aus, sodass (wie in deeesign.jpg zu sehen ist) er über dem footer liegt?
3. Wie lege ich die strahlen.png über Content & Footer?


Ich hoffe, dass es überhaupt möglich ist und freue mich über alle konstruktiven Antworten!

Hi,

vielleicht erleichtert dir hier der Artikel Slice & Umsetzung in HTML einer Webseite den Einstieg, dein Photoshop-Design in ein CSS-Layout umzusetzen.

Weitere Tutorials und Workshops kannst du dieser Liste entnehmen:

• andreas kalt.de: Ein CSS-Layout erstellen
• barrierefrei.e-workers.de: Workshop - temp
• CSS 4 You - The Finest in Stylesheets: Workshop: Layouten ohne Tabellen
• selfHTML: CSS-basierte Layouts
• Stichpunkt CSS: Layout ohne Tabellen

Viel Erfolg!

mfg Maik

Ist es denn überhaupt möglich?

Wovon redest du?

Es wäre zudem sehr hilfreich, in der Vorschaugrafik die einzelnen Segmente zu markieren und ihrer Verwendung in der Seite entsprechend zu beschriften.

Wenn man so einen konkreten (detailierten) Überblick vom angedachten Seitenaufbau gewinnt, lässt sich auch was zur möglichen Umsetzung sagen.

mfg Maik

Ich rede von der einzelnen Anrodung der Bildelemente:
- Footer
- Content
- Strahlen
- Logo

also ich will diese einzlenen Sachen, die ich noch in separaten png´s habe, so anordnen wie in dem Design (jetzt auch mit Markierungen ):
http://rollbrettgurken.de/deeesign_lay.jpg

Für die Navigation, wollt Ich einfach in die oberste Contentzeile ein paar horizontal nebeneinaderstehende Links einfügen...

Besitzt das spätere Seitenlayout eine feste Höhe? Oder soll die Höhe variabel sein, und sich dem Seiteninhalt entsprechend anpassen?

mfg Maik

Eigentlich hab ich mir das so gedacht, dass die Gesamthöhe variabel sein soll, sprich sich der Footer immer am unteren Bildrand orientiert.

Tja, dann hast du hier schon das erste Problem, bevor du deine Arbeit überhaupt richtig aufgenommen hast.

Denn wie soll sich deiner Meinung nach die schräge Rahmenführung des Inhaltbereichs nach unten fortsetzen?

Ein Hintergrundbild kann nur waagerecht und senkrecht wiederholt werden, womit sich der linke und rechte Rahmen mit jeder weiteren Inhaltszeile gegenüber der Ausgangssituation nach rechts verschiebt, und sich so ein "treppenartiges" Gebilde ergibt.

mfg Maik

Also der Content bereich ist im Prinzip nur ein Hintergrundbild welches transparente ränder hat.
Der eigentlicht Content befindet sich in einem Quadratischen Bereich innerhalb des Contents:
http://rollbrettgurken.de/content_lay.png

Außerdem soll sich dieser Komplette Bereich in der vertikalen & horizontalen Mitte des Bildes befinden, was bei meinem Design beispiel doch etwas schlecht rüberkommt

MfG Ede

Zitat von ede592

Also der Content bereich ist im Prinzip nur ein Hintergrundbild welches transparente ränder hat.
Der eigentlicht Content befindet sich in einem Quadratischen Bereich innerhalb des Contents:
http://rollbrettgurken.de/content_lay.png

Ja und?

Dass der eigentliche "Content"-Bereich quadratisch (rechtwinklig) ist, liegt in der Natur der Sache, da HTML-Elemente nur in diesem Format (Breite * Höhe) zur Verfügung stehen.

Der untere Abschluß des grauen Rahmens gehört zum Footer, und dieser soll nach unten geschoben werden, wenn der Inhalt zunimmt.

Bei der schrägen Rahmenführung hieße das, dass mit jeder weiteren Inhaltszeile der mittlere Rahmenbereich, der hierfür nach unten wiederholt wird, sich dem Steigungsverhältnis entsprechend nach links verschieben, aber auch der komplette Footerbereich entsprechend nach links wandern müsste, damit die drei Rahmensegmente (oben - miite - unten) nahtlos zueinander passen.

Und das lässt sich nicht umsetzen.

Zumal auch der Inhalt senkrecht verläuft, und ab einer gewissen Zeilenanzahl aus diesem Rahmen laufen würde.

Da wirst du dir ein anderes Layoutkonzept in Photoshop basteln müssen.

mfg Maik

Also der Contentbereich soll nicht mit dem Inhalt wachsen.
Der soll statisch bleiben bzw, mit Scrollbar die ich auch mit ein paar Befehlen dem Design entsprechend anpassen würde.

Dennoch bleibt's bei meiner geschilderten Problematik, denn nach deiner eigenen Aussage soll die Gesamthöhe des Layouts variabel sein, und der Footer-Bereich sich immer am unteren Fensterrand orientieren (Stichwort: "Sticky-Footer"), der deinem Designaufbau zufolge (http://rollbrettgurken.de/deeesign_lay.jpg) u.a. den unteren Abschluß des grauen Rahmens enthalten müßte.

mfg Maik

Achso jetzt versteh ich was du meinst, dass war ja gerade meine frage ob es nicht evtll auch möglich wäre die einzelnen Elemente nach einer Art "Ebenenprinzip" anzuordnen, wobei die "Content-Ebene" über der Footer-Ebene liegt und die Strahlen-Ebene über die Content- und Footer-Ebene ?
Wäre dies nicht mein Gedanke hätt ich das Design schon längst gesliced

Hierfür steht dir grundsätzlich die Eigenschaft z-index zur Verfügung, um für einzelne Elemente ihre Reihenfolge in der Schichtposition festzulegen.

An meinem erläuterten Problem ändert sie aber auch nichts, sofern ich dein illustriertes Seitenkonzept im Footerbereich richtig interpretiert habe, dass er den unteren Abschluß des grauen Rahmens beinhalten soll.

mfg Maik

Ahh ich glaube SELFHTML hat mir wieder aus der patsche geholfen :P
Ich checke ma ob es so funktioniert wie ich es denke dass es funktionieren könnte, wenn nicht mach ich wieder Meldung!

MfG Ede