Homepage (Hilfe bei der Umsätzung)

macapple · 26.10.2011

Schön guten Abend zusammen,
Ich sitze seit einigen Tage an einem Homepage Design und beiße mir gerade die Zähne dabei aus, aus der Photoshop Datei eine Homepage zu machen.
Mein Design hat glaube ich keinen ganz typischen Aufbau, alleine schon weil ich einen Verlauf im Hintergrund habe und darauf einen Hintergrund meiner Seite mit einem Muster (also nicht einfarbig). Sämtliche Tutorials die ich gefunden habe, hier oder bei youtube, erläutern die Erstellung einer Homepage anhand der ganz einfachen Design's, sprich alles einfarbig, keine Muster und alles gradlinig. So kann man die Homepage relativ schnell mit Tabellen in Form bringen. Nur das Funktioniert bei mir nicht. Habe schon alles zerschnitten, und müsste so viele Tabellen anlegen um mein Bild da unter zu bekommen. Auch an Flash Catalyst habe ich mich ran gewagt, nur da bin ich mit dem Ergebnis überhaupt nicht zufrieden.
Ich vermute ich bräuchte eine Kombination aus html/css und Flash um den Hintergrund da rein zu bekommen.

Um euch eine groben Überblick zu verschaffen was ich mir vorgestellt habe, hier einmal eine kleine Skizze:

Ich hoffe das ist irgendwie realisierbar und das ihr mir hier weiter helfen könnt.

Schönen Abend,

Gruß Nils

gonzo6969 · 26.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Nix Tabellen, dies ist ein einfaches Boxmodell das du mit CSS realisieren kannst. Dein Muster wird als Hintergrundbild der Boxen angelegt.

Gockel mal nach CSS Boxen, dann wird dir geholfen

Herr_D · 26.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Naja 'n Verlauf im Hintergrund + Muster ist ja nun nicht so spektakulär...

Zeig mal deinen richtigen Entwurf, dann können wir dir sagen, wie viele Bilder du wirklich brauchst und was du allein mit html/css umsetzt...

knopfihund · 26.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

hallo nils,
das könnte dir für den farbverlauf helfen http://www.ohne-css.gehts-gar.net/0038.php
hast du schon ein grundgerüst, das man online sehen kann?

piepel · 26.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Was meinst du mit Muster? Den Trenner in dem roten Bereich? Und sollen die schwarzen Boxen genau so auf dem weißen Grund sein?
Falls das so ist:
Du brauchst 2 Hintergrundbilder. Einmal den Verlauf 1px breit, die Höhe die du brauchst, genauso auch für das rote Muster. Diese bindest du als Hintergrundbild per CSS ein - zwar so wie gonzo6969 schon sagte - in dein Boxmodell.
Du brauchst Photoshop höchstens um die Hintergrundbilder herzustellen, aber nicht für das Layout. Falls du dich mit PHP beschäftigst, brauchst du nicht mal ein Bild für den Verlauf.
Kann man auch per PHP erstellen.
Abgesehen davon, beschäftige dich mit HTML und CSS und wie du die Boxen erstellst.

lexip · 26.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Zum Beispiel den grauen nach weiß verlaufenden Hintergrund kann man mit purem CSS erstellen.
zB mal das lesen: http://www.homepage-total.de/tools/farbverlauf_css.php
Wie oben schon gesagt, ist es sinnvoller als einTabellenkonstrukt zu erstellen, dass Du Dich mit dem Boxmodell und CSS beschäftigst.

macapple · 27.10.2011

Erst einmal vielen Dank für die vielen Antworten.
Zu meinem Beispiel-Muster; Der rote Bereich steht für mein Musterhintergrund ( ein Wirrwarr aus kleinen strichen, die eine stoffähnliche Struktur bewirken ).
Auf diesem Hintergrund habe ich 2 Felder positioniert (die weißen Bereiche). In dem oberen habe ich links eine Grafik und rechts 3, ich nenne sie jetzt mal "Banner". ich möchte das die Banner anzuklicken sind und das wenn man mit der maus über eines der Banner geht sich das Bild links ändert. Also quasi ein Rollover-Effekt.
Im unteren Bereich habe ich links einen Rahmen vorgesehen, in dem ein Bild positioniert werden soll. Rechts ebenfalls ein Rahmen in dem ich dann den Text darstellen möchte.
Zwischen den zwei weißen Feldern habe ich zusätzlich noch Grafiken untergebracht die sich vom "Muster-Hintergrund" abheben. Ich weiß nicht ob das hier einen unterschied macht. Ich hoffe meine Grafik ist jetzt besser zu verstehen.

Ich habe mal nach dem Boxenmodell bei CSS gegoogelt und irgendwie hat mir das nicht weiter geholfen. Gelandet bin ich bei selfhtml und w3 usw. und hier gab es immer wieder das selbe zu lesen, nämlich der Aufbau von rahmen, Innenseite, abstand. Nur bekomme ich da keinen richtigen Ansatz hin, der mich meinem Problem näher bringt.
Um die Datenmenge gering zu halten habe ich meinen "Muster-Hintergrund" ausgeschnitten, d.h. die breite entspricht der Homepage große, allerdings nicht in der länge. Ich müsste also die Grafik in Y-Richtung wiederholen lassen nur das habe ich schon nicht geschafft.

Vielleicht könntet ihr mir das ganz etwas nähe beschreiben und Mithilfe meiner Skizze mich der Lösung meines Problemen näher bringen.

Kleiner Nachtrag. Auf Youtube bin ich fündig geworden, allerdings geht man hier bei der Überlagerung von Boxen immer von der linken oberen ecke aus. meine homepage soll allerdings zentriert sein und dann müssen sich die boxen quasi am Hintergrund orientieren. geht das auch?

adomait · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Um Dein Layout zu zentrieren, beginnst Du Dein Gerüst dann einfach mit einer zentrierten Box, in die Du dann alle anderen Inhalte (Boxen/Container/Divs, wie auch immer man das dann nennen mag...) einbaust.
Ich empfehle Dir, ein paar Stunden mit Little Boxes zu verbingen, danach bist Du zwar immer noch kein Profi, weißt aber, wie der generelle Aufbau funktioniert und was Du beachten musst.

Grüße,

Boris.

lexip · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Vielleicht auch einfacher, wenn Du erstmal Beispiele siehst und daran lernst.
Da gibt es zB folgende Website intensivstation :: CSS Templates
Relativ einfach nachvollziehbare Beispiele des Zusammenwirken von Css und Boxmodel.
(findbar dies und weiteres unter Suchworteingabe bei google: "website css layout templates")

piepel · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

http://www.thestyleworks.de/tut-art/centerblock.shtml

Diese Seite hat mir damals viel geholfen (nicht nur bei Box horizontal vertikal zentrieren)

macapple · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Also mit den Div Boxen komme ich jetzt langsam klar. Das Einzige was mir absolut nicht gelingt ist, das ich eine Box bündig mit dem oberen Browserrand schließen lasse. Egal ob ich 0px einstelle, es bleibt immer ein kleiner Abstand. Wie bekommt man den denn weg?

kaaaay · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

html,body {margin:0; padding:0}

ganz nach oben in die CSS.

macapple · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Super danke!
jetzt habe ich noch was. Und zwar habe ich einen verlauf im Hintergrund angelegt mit der Eigenschaft sich in x Richtung zu wiederholen und die Hintergrund Farbe auf weiß gestellt. jetzt habe ich die div box für den Hintergrund auf eine breite von 1024px und eine höhe von 2000px gestellt. was jetzt passiert ist, ist das ab der hälfte der Box sich der verlauf auf einmal wiederholt. Verstehe nicht ganz wieso das so ist und wie ich das ändere

kaaaay · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

du brauchst für den Hintergrund keine eigenen Div Container und wieso eine feste größe? Was bei Auflösungen jenseits der 1024px? Dort hört er dann einfach auf.

Das ganze kannst du genauso in die html, body schreiben.

z.B.:

background-image:url(images/background.jpg);
background-repeat:repeat-x;

Außerdem wäre da immer der Code und eventuell ein Screen von Vorteil um besser zu sehen wo dein Problem liegt.

Gruß

lexip · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

wie kaay sagt und da noch mal ne andere Quelle wie man sowas löst:
http://www.css4you.de/background-repeat.html

macapple · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

jetzt habe ich es, hatte das Semikolon vergessen, danke

lexip · 27.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

....der Teufel liegt im Detail

Für die Kontrolle der css immer gut:
http://jigsaw.w3.org/css-validator/
oder und und auch das firefox addon "firebug"

piepel · 28.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

Es geht auch noch kürzer

background: white url(images/background.jpg) repeat-x;

Wenn du dir TopStyle Lite lädst, hast du auf der rechten Seite einen Inspektor, wo du solche Sachen einstellen kannst.

dragobert · 29.10.2011

AW: Homepage (Hilfe bei der Umsätzung)

"Zum Beispiel den grauen nach weiß verlaufenden Hintergrund
kann man mit purem CSS erstellen.."
Habe den Test gemacht, habe mir den Standard-Verlauf
den die Seite anbietet erstellen lassen.

14,3 KB gross... Das muss man sich mal vorstellen.
Nur die CSS-Datei wird um 14 KB zusätzlich aufgebläht.
Eine Verlaufgrafik für den Hintergrund (jpg, gif, oder png)
ist etwa 1-2 KB gross und mir einem "Malprogramm" wie Photoshop
schnell erstellt.

14 KB ist nicht gross. Aber bei einer CSS-Datei, bei der es sich
um eine reine Textdatei handelt, spielen 14 KB eine grosse Rolle.
Das merkt man dann, wenn man die CSS-Datei bearbeiten will.

Oder wenn man den Verlauf ändern will, andere Farben...

macapple · 01.11.2011

AW: Homepage (Hilfe bei der Umsätzung)

Also ich bin habe es jetzt mit den div boxen geschafft meine startseite so zu erstellen, wie ich sie mit photoshop designt habe. Nur ich fände das jetzt ziemlich zeitaufwändig zumal mir noch einige Seiten fehlen. Gibt es eine Möglichkeit aus meinem design ein Template für CMS Systeme zu machen? damit ist die Pflege meiner Seite sicherlich einfacher.