da ich blutige Anfängerin bin undmich vorher noch nie mit dem Thema Webdesign und Umsetzung beschäftigt habe müsst ihr mir helfen.
Ich habe für eine Freundin ein Design erstellt und zwar dieses hier
Nur weis ich nun leider nicht weiter ich möchte gern den Code in validem CSS und Xhtml Trans erstellen. Ich weis aber nicht wo ich anfangen soll, Grundgerüst und co das fehlt mir irgendwie.
Und vor allem wie kann ich das obige Bild/Design in CSS umsetzen, muss ich da etwas beim slicen beachten?!
Vielen dank schonmal für Eure Hilfe
PS: Diese Seite soll nichts besonderes sein sondern nur für mich zum üben
Was wenn ich dir nun sage das ich kaum was verstanden habe ausser ein wenig was in den Links steht.
Ich weis einfach nicht wie man anfängt, das geht schon mit dem erstellen von Dateien los. Was brauche ich alles z.b eine xxx.css und eine index.html oder wie, kann ich nacher den Text den ich haben möchte ohne weiteres einfügen oder muss ich doch mehrere Seiten erstellen.
Etc pp sagte ja blutige Anfängerin die sich noch nie mit dem Code beschäftigt hat.
Ok, habe den ersten Satz überlesen. Du wirst du nicht um etwas Grundlagenwissen herumkommen, das müsstest du dir schon vorher aneignen, damit du das Konzept nachvollziehen kannst. Ich empfehle als Einstieg http://jendryschik.de/wsdev/einfuehrung/
Ok das hilft mir ja schonmal, nur eine frage bzgl des slicens hab ich noch gibts dazu auch ein Tut denn ich kann ja nun nicht einfach drauf los slicen wenn hinterher mit css zusammenspielen soll.
Das einzige was es da zu slicen gibt, sind die Rundungen der Box. Da kannst du so vorgehen, wie das die Runde-Ecken-Anleitung macht.
Die ganzen Frickel-Slice-Tutorials die man überall findet, kannst du in die Tonne hauen, damit baust du keine schlanke, skalierbaren Sites. Man sollte sich immer überlegen, wie man die grafische Vorlage am sinnvollsten semantisch aufteilen kann. Wenn man weiß, dass man mit CSS Hintergrundbilder in ihrer Kachelung einschränken kann und ihre Position frei bestimmen kann, reichen meist sehr kleine Grafikausschnitte. Vor allem bei einem eher schlichten Design.
Ok, nur müsste ich ja die Header Schrift, die Ecken, die Navigation und die rechte "wo befinde ich mich gerade" Navi slicen? Den rest kann ich dann mit CSS machen.
Ok, ich dachte dass es bei diesen Elementen mit einer ungewöhnlichen Schrift klar ist. Da schneidet man so knapp wie möglich zu und positioniert dann über margin. Die Navigation kann man doch aber komplett ohne Grafiken aufbauen. Der vertikale Trennstrich müsste dafür allerdings auch noch als Hintergrundbild eingebunden werden.
Wenn du wirklich an der Seite basteln willst und es quasi selber machen willst und nicht mit Dreamweaver oder so, dann kommst du, wie schon weiter oben gesagt, nicht um's Lernen herum. Schritt für Schritt ist am besten, so hat man immer kleine Erfolgserlebnisse. Der schlauere Weg ist das aber auf jeden Fall, dieses Dreamweaver-Zusammengekloppe hat seine Grenzen, weit kommt man damit nicht.
Der Selektor .inhalt passt nicht auf ein Element mit dem class-Attribut content.
Definier außerdem mal eine (maximale) Breite für die äußerste Box, dann sieht das schon recht ansehnlich aus. Die Bilder für die Ecken müssen übrigens nicht diese blauen Kanten enthalten. Das Blau müsste man eigentlich nur in den Ecken sehen, den Rest macht ja der Seitenhintergrund. Eigentlich müssten die Ecken nicht mal blau sein, transparent würde ja reichen. Aber das ist für den Anfang erstmal nicht so wichtig, bei transparenter Darstellung müsstest du noch einen Hack einbauen, wenn das im IE 6 gut aussehen soll.
Sorry für die doppelposts aber ich muss ja aufmerksam machen .
Es scheint nun zu gehen, puh ich habe eine kleine hürde genommen. Schaut zwar noch sehr unansehnlich aus aber wenn die CSS erstmal steht kann ich ja die slices sauber arbeiten.
Soweit habe ich nun schon einige Sachen hinbekommen und das ganz allein , aber eins macht mich nun doch ein wenig Stutzig. Wenn ich die Hintergrundfarbe auswähle die unter dem background.png angezeigt wir wegen dem Verlauf ist diese im IE unterschiedlich, passe ich diese für den IE an ist sie im FF anders.
Und dann bräuchte ich nun noch ein paar Hilfestellungen zum Thema Schatten um die Box (aber weichen keinen kantigen) und wie ich die Böx mit Inhalt fülle.
Wenn ich die Hintergrundfarbe auswähle die unter dem background.png angezeigt wir wegen dem Verlauf ist diese im IE unterschiedlich, passe ich diese für den IE an ist sie im FF anders.
Ja also bei dem Satzbau werd ich auch stutzig kp was du meinst.
Zitat:
Und dann bräuchte ich nun noch ein paar Hilfestellungen zum Thema Schatten um die Box (aber weichen keinen kantigen) und wie ich die Böx mit Inhalt fülle.
Weichen Schatten um die Böx bekommst du mit Photoshop (o.ä.) hin, d.h. die entsprechenden Grafiken enhalten dann die Schatten (geht sogar mit Transparenz), mit CSS geht das (noch) nicht.
Die Böx mit Inhalt füllen? Einfach in der .html was reinschreiben, alles was außerhalb der "< blablabla >"-Tags steht wird angezeigt. Deine Page ist grad down, kann nicht sehen wie weit du bist.
Und wie gesagt, ausführliche Hilfestellungen findest du hier:
Mal Spass beiseite also zum Problem Eins. Wenn du dir die Seite im FF anschaust ist der Hintergrund regelmäßig, schau dir aber mal den Hintergrund im IE an dort sieht man ganz unten eine andere Farbe im Übergang. Änder ich nun diese Farbe und passe sie an den IE an ist sie logischer Weise im FF falsch...
Problem Zwei ist nicht die Seite mit Content zu füllen das weis ich wie das geht (alles nur weil ich Blond bin?! ), es geht mir Vielmehr darum wie ich den Balken noch einbinde das Menu/Navigation und den rechts bzw. linksbündigen Text.
Da der URI derzeit nicht verfügbar ist, kann ich dir keine vernünftige Antwort geben, aber wenn im IE die Farben nicht stimmen, wird es vermutlich an einem Gamma-, Chroma- oder Farbmanagement-Chunk in dem PNG liegen. Die ignoriert afaik zumindest der IE völlig. Abhilfe: Diese Chunks entfernen. Wenn dein Bildbearbeitungsprogramm die schreibt, wird es auch eine Option haben, das zu unterbinden.
Alternativ kann man ihn sehr ähnlich wie die Ecken erzeugen, dazu kann man die Elemente durchaus auch für Rundung und Schatten gemeinsam verwenden. Siehe http://www.alistapart.com/articles/onionskin/ - Damit das dann aber über deinem nicht einfarbigen Hintergrund skalierbar und flexibel funktioniert, benötigst du PNGs mit Alpha-Kanal. Den unterstützt der IE 6 allerdings nicht und zeigt in den nicht völlig opaken Bereichen die Hintergrundfarbe der PNG-Grafik an. Dafür benötigst du dann den angesprochenen Hack, etwa in Form von http://www.twinhelix.com/css/iepngfix/ Wenn du den Code per Conditional Comment für IE 6 und älter einbindest, ist das auch valide.
Nachteil: im IE 6 geht durch den Hack keine Kachelung mehr. Also entweder Transparenz oder Kacheln. Alternativ könntest du ja für den ollen IE 6 auch den Schatten weglassen (andere Bilder in dem eh meist nötigen Workaround-Stylesheet als Hintergrundbilder einbinden) oder aber je nach Zielgruppe die beeinträchtigte Darstellung einfach das Problem der IE-6-Nutzer sein lassen.
Ok warum die Seite down weis ich leider nicht, liegt wohl an dem Hoster. Könnte ich nicht auch das Design einfach mit .gif anstelle der .png Dateien erstellen?
Zum Schatten, werde ich einfach so lösen das ich den direkt in den neuen Grafiken einbinden werde auf trasnparentem Hintergrund, sollte reichen für mein Vorhaben.
Beim Thema Inhalt stehe ich auf dem Schlauch , wenn ich mir deine Links ansehe soll ich mich also eines Layouts bedienen, würde ich gerne tun nur muss ich dort nicht meine gesammte jetzige Stellung über Board werfen?
neela
PS: http://neela.xho.st/ wegen dem 9gb ausfall erstellt.
GIF unterstützt nur binäre Transparenz, das hilft für einen weichen Schatten nicht weiter. Und wenn man keine Alpha-Transparenz nutzt, hat der IE wiederum auch kein relevantes Problem mit der Darstellung. Merke: GIF hat im Web nur noch für animierte Bilder eine begrenzte Bedeutung. Für alle anderen Zwecke eignet sich PNG besser (Echtfarben verfügbar, bessere Kompression, Alpha-Transparenz, ...)
Zitat:
muss ich dort nicht meine gesammte jetzige Stellung über Board werfen?
Nein, keineswegs. Du kannst doch in HTML (unter Einhaltung der sonstigen Regeln) beliebig viele Elemente ineinander schachteln. Steck also die Elemente für das zweispaltige Layout in deine vier Elemente, die du für die Ecken benötigst.
Wie vermutet, die Datei enthält ein gAMA-Chunk, also Gamma-Daten. Die ignoriert der IE wie gesagt. Moderne Browser wenden die Gammakorrektur dagegen korrekt an und kommen so zu der gewünschten Darstellung. Lass die Datei ohne Gamme-Daten direkt beim Speichern abmischen, dann zeigt auch der IE das gewünschte Ergebnis.
Die weiße Box würde ich übrigens ganz einfach mit margin:auto; margin-top:länge; positionieren, position macht dir nur das Designen unnötig schwer, auch wenn es zunächst einfach aussieht. Spätestens wenn andere Elemente hinzu kommen und die sich dann überlappen, weißt du warum.
, aber eins macht mich nun doch ein wenig Stutzig. Wenn ich die Hintergrundfarbe auswähle die unter dem background.png angezeigt wir wegen dem Verlauf ist diese im IE unterschiedlich, passe ich diese für den IE an ist sie im FF anders.
kp was du meinst.
.