Photoshop Layout in HTML umsetzten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Photoshop Layout in HTML umsetzten

    Hallo zusammen!

    Ich habe mich mal durch gerungen und habe für meine eigene Homepage ein Layout in Photoshop erstellt. Nun ist es fertig und jetzt geht es ans Umsetzten in ein HTML-Gerüst. Bei dem Layout gibt es eine Schwierigkeit, die ich aber gerne mit einbauen würde! Das sind die Halb Tranzperenten Hintergründe. Vielleicht habt ihr ja eine Idee wie ich das ohne Flash erstmal umsetzten kann.

    Gruß
    Stephan
    Bilder

    • Layout-2007-v1.1.gif

      59,81 kB, 1.024×786, 845 mal angesehen

  • Semitransparenz ist mit PNG und CSS (ich glaube schon 2.0) möglich, allerdings gibt es derzeit noch keinen Browser der das Rendern kann. Deine einzige Möglichkeit ist momentan dass du die Transparenz mit Photoshop machst wie in deinem Screenshot und dann das gesamte als Hintergrund benutzt.
    ~ mfg SeBa

    Ich beantworte keine PMs zu Computer-/Programmierproblemen. Bitte wendet euch an das entsprechende Forum.

    [Blockierte Grafik: http://i.creativecommons.org/l/by-sa/3.0/80x15.png]

  • Hmm, was machst du mit dem Hintergrund, wenn die Breite des Fenster größer als dein Bild ist?

    Zur Transparnz:
    Wie SeBa gesagt hat, einfach das so als Hintergrundbild nehmen. Falls der Content länger als das Feld wird, einfach per iFrame oder sonstwie mit Scrollbalken versehen.
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • Transparenzen kann man auch mit CSS (<2.0) erzeugen. Allerdings habe ich bisher nur Möglichkeiten für den Firefox und den InternetExplorer gefunden. Somit kommst du auch an Browserweichen nicht vorbei.

    Eine andere Möglichkeit wären die angesprochenen png-Dateien, wobei es da Probleme mit dem IE gibt. Der kann die Transparenz nicht richtig darfstellen, auch nicht in der 7er Version.
    Allerdings gibt es dafür einen WorkAround, den ich bei Bedarf rauskramen könnte.

    Allgemein zum Problem Transparenz: Ich hatte sowas auch mal vor mit Boxen, die einfach den Hintergrund durchscheinen lassen. Momentan ist die effektivste Lösung aber Flash oder die "Vorgaukelung" der Transparenz (soll heißen: man nimmt ein Hintergrundbild und legt das durch Photoshop erstellte Vordergrundbild drauf, sodass es genauso aussieht wie mit Transparenz)

    Naja im Groben und Ganzen, immernoch ein Problem denk ich...


    cya

  • Hallo,

    erstmal viele Dank. Ich habe es mit Hintergrundbilder versucht. Die untere Box ist so gar dynamisch. Muss nur eine Mindesthöhe einhalten. Nur der IE macht noch Problem, irgendwas mit der Positonierung funktioniert da anderes als beim Firefox. Habt ihr eine Idee?

    kalunki.de/muetze/

    Der Code ist im Seiten Quelltext zusehen.

    Gruß
    Stephan

    PS: Wie findet ihr das Layout den überhaupt?

  • Das alte Problem... :)
    Einfach eine 2. CSS Datei für d en IE einbinden mit der Browserweiche:

    Quellcode

    1. <!--[if IE]>
    2. <stylesheet />
    3. <![endif]-->



    Das Layout sieht nett aus, aber ch finde das, was du mit dem oberen Bereich vorhast etwas übertrieben. Dafür wirkt er mir zu groß / die Überschrift zu klotzig.
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • hm also ich finde das von dir irgendwie total umständlich gemacht, du kannst doch dein Layout einfach mit Photoshop Slicen, dann Optimiert für Web speichern, und dann machst du da wo der Inhalt rein soll nen Div Container mit overlay:auto höhe und breite und passt die Navigation an. Photoshop macht die HTML Struktur zwar in Tabellen aber das kann man ja umschreiben ;) oder sehe ich da was falsch ?

    Hab auf jedenfall das Slicen vermisst, wenn du dazu fragen hast wennde dich ruhig an mich :)

  • Hallo Remix[a]holic

    die Technik mit Slicen kenne ich. Sie kommt bei mir immer dann zum Einsatz wenn man das Layoutgerüst auf Tabellen aufbauen kann. Dies war in diesem Fall etwas schwierig, da der Hintergrund sich immer zentriert soll und die Boxen sich am Hintergrund ausrichten! Die zweite Box unterhalb, soll seinen Rahmen auch Dynamisch anpassen können d.h. um so mehr Inhalt um so großer wird die Box.

    Vielleicht gibt es auch ein Lösung mit Tabellen, aber ich wollte solangsam von den alten Layout Techniken verabschieden und den neuen den vorzug geben.

    Aber Interessiern würde ich es schon ob man das ganze auch nur mit Tabellen umsetzten kann.

    Gruß
    Stephan

  • "Matrixstyle" schrieb:

    Hallo Remix[a]holic

    die Technik mit Slicen kenne ich. Sie kommt bei mir immer dann zum Einsatz wenn man das Layoutgerüst auf Tabellen aufbauen kann. Dies war in diesem Fall etwas schwierig, da der Hintergrund sich immer zentriert soll und die Boxen sich am Hintergrund ausrichten! Die zweite Box unterhalb, soll seinen Rahmen auch Dynamisch anpassen können d.h. um so mehr Inhalt um so großer wird die Box.

    Vielleicht gibt es auch ein Lösung mit Tabellen, aber ich wollte solangsam von den alten Layout Techniken verabschieden und den neuen den vorzug geben.

    Aber Interessiern würde ich es schon ob man das ganze auch nur mit Tabellen umsetzten kann.

    Gruß
    Stephan



    Achso na dann geht das natürlich nicht, obs da was mit Tabellen gibt weiß ich dann leider auch nicht :(

  • "BennyBunny" schrieb:

    Hm also ich würde heutzutage auch nicht mehr auf ein Tabellenlayout zurückgreifen. Ist einfach zu altbacken. Die Trennung von Äußerer Form und Inhalt hat schon seinen Sinn.


    Ausserdem kannste dann keinen coolen xhtml-valid-button auf die Seite klatschen ;)


    Doch, darfst du - der Validator bemerkt es nicht. Aber keinen Barrierefrei-Button.

    @mad: Halbtransparenzen bekommst du nicht hin, der Alpha-Kanal von PNG wird noch von kaum einem Browser richtig unterstützt und CSS-seitige halbtransparenzen gehen nicht mit CSS < 2.0 und volltransparenzen würden sogar mit .gif gehen, sehe ich aber nirgends eine Verwendung bei seinem Problem.
    ~ mfg SeBa

    Ich beantworte keine PMs zu Computer-/Programmierproblemen. Bitte wendet euch an das entsprechende Forum.

    [Blockierte Grafik: http://i.creativecommons.org/l/by-sa/3.0/80x15.png]

  • "Matrixstyle" schrieb:

    Hallo Max123

    Das alte Problem... Smile


    Welches Problem ist es den genau? Wo macht der IE ein unterschied bei der Berechnug der Position der DIV Container?

    Gruß
    Stephan


    Da ist beim margin oder padding irgendwo ein Unterschied.
    Wo genau frag mich nicht, hab mich shcon lange nicht mehr mit dem Problem auseinander gesetzt, aber hier im Forum solltest du ein paar Threads dazu finden... :P
    Die Japaner glauben jetzt auch, sie könnten den Superrechner verkaufen. Das wäre
    so, als würde man einen Jumbo-Jet nehmen, vorne und hinten die Spitzen absägen,
    davon 10 Stück zusammenschweißen und als ultimativen Super-Jet verkaufen.

  • SeBa schrieb:


    @mad: Halbtransparenzen bekommst du nicht hin, der Alpha-Kanal von PNG wird noch von kaum einem Browser richtig unterstützt und CSS-seitige halbtransparenzen gehen nicht mit CSS < 2.0 und volltransparenzen würden sogar mit .gif gehen, sehe ich aber nirgends eine Verwendung bei seinem Problem.


    Hmm, ok, vielleicht ist es kein CSS < 2.0

    aber man bekommt sie hin die Transparenzen, auch wenn nur mit FF und IE (klick)

    Aber du hast schon recht, hier kann man es umgehen und das würde auch ich tun. Ich wollte ja nur ausdrücken, dass ich es schon einmal probiert hatte. Hab es damals auch wegen der Browser, die es nicht unterstützen sein gelassen...

    cya