nicht angemeldet
Design - Wie realisierbar in html?
0 0 Design - Sinnvoll nur mit CSS
-1 0
Design - Wie realisierbar in html?
Hallo,
ich will gerade unseren blog ein wenig aufpeppen und ein neues Design entwerfen.
Nun habe ich zumindest schon mal einen Entwurf, steh aber gerade auf dem Schlauch bei der Frage wie ich das in html so realisieren kann.
Hier der Entwurf als jpg:
http://www.digitales-lichtbild.de/Unbenannt-3.jpg
Bisher habe ich nur Erfahrung mit Tabellen-Layouts, also das Layout so zurecht schneiden, dass es in Tabellenzellen passt.
Allerdings ist diese Methode, wie ich hier erfahren habe, ja eigentlich eine Zweckentfremdung und nicht mehr wirklich sinnvoll durch die (neuen) Möglichkeiten von CSS.
Ich formatiere zwar meine html-elemente meist auch nur noch in CSS (lasse z.B. sowas wie align="center" weg und ersetze es durch ausgelagerten CSS-code)- allerdings bin ich immer noch in dieser Tabellen-Denkweise drin.
Und da tabellen-layout sich nicht unbedingt direkt mit einem CSS-Layout nachbauen lässt, wollte ich mal fragen ob dieser Design-Vorschlag so in "reinem" CSS realisierbar ist?
Und wenn ja, inwieweit muss ich dabei umdenken? ;)
Ist vielleicht alles ein wenig schwammig, aber ich hoffe ihr würdigt meine Bemühungen das ganze in solidem CSS zu machen und von diesen Tabellen wegzukommen und gebt mir ein wenig Starthilfe ;).
MfG,
Jörg
-
Moin!
Und wenn ja, inwieweit muss ich dabei umdenken? ;)
Eigentlich eher "back-to the roots". Genauer gesagt muss man beim Tabellen-Design "umdenken".
Der Rest steht in selfhtml unter CSS-Eigenschaften-Anordnung/Positionierung von Elementen. Ich empfehle html oder xhtml 'strict' zu verwenden.
MFFG (Mit freundlich- friedfertigem Grinsen)
fastix®
--
Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Seminare, Training, Development -
Hallo Jörg.
Nun habe ich zumindest schon mal einen Entwurf, steh aber gerade auf dem Schlauch bei der Frage wie ich das in html so realisieren kann.
Hier der Entwurf als jpg:
http://www.digitales-lichtbild.de/Unbenannt-3.jpgDie grüne Hintergrundgrafik für das html-Element, etwas Abstand zum body-Element, in diesem ein Header, eine Navigation und ein Inhaltsbereich. Mehr solltest du für dein Grundgerüst nicht benötigen. (Ob es einen Footer geben soll, kann man leider nicht erkennen, da deine Grafik frühzeitig aufhört.)
Und wenn ja, inwieweit muss ich dabei umdenken? ;)
Radikal. Du solltest vorerst einmal jegliche Layoutvorstellungen verwerfen, die auf tabellentypische Eigenschaften basieren. Danach solltest du dir überlegen, wie du die Inhalte sinnvoll strukturieren kannst. Erst zum Schluss solltest du wirklich anfangen, dir über das Layout Gedanken zu machen.
Ist vielleicht alles ein wenig schwammig, aber ich hoffe ihr würdigt meine Bemühungen das ganze in solidem CSS zu machen und von diesen Tabellen wegzukommen und gebt mir ein wenig Starthilfe ;).
Das entsprechende <http://de.selfhtml.org/css/layouts/index.htm@title=Kapitel zu CSS-basierten Layouts in SELFHTML> hast du bereits studiert?
Einen schönen Dienstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/ -
hallo,
mit Fireworks gemacht, hä?
-
mit Fireworks gemacht, hä?
Photoshop, warum?
-
k,
Photoshop, warum?
der Dateiname ließ auf Fireworks schließen. Sorry
-
der Dateiname ließ auf Fireworks schließen. Sorry
Macht ja nichts ;) - photoshop nimmt anscheinend auch solche Dateinamen.
-
-
-
-
Hallo Jörg,
als erstes würde ich die xhtml-Seite schreiben, in der alle Elemente, die Content haben auftauchen. Das scheint hier nur ein großer Header und eine Liste von zwei Links zu sein. (Liste -> <li>). Der Rest ist Schmuck. Validiere den Code. Fehlerfrei? – perfekt, dann weiter.
Wie sieht das Ganze denn aus. Beschreibe mal: Also, da ist so ne HINTERGRUNDgrafik (-> background), darauf ist ein großer Bereich, entweder ZENTRIERT (-> center) oder irgendwie anders POSITIONIERT (-> position). Darauf wieder unten so was grünes, auch eher im HINTERGRUND und LINKS (->left) sind das die Links (nein, das war kein Wortspiel) POSITIONIERT. Die haben eine bestimmte Breite (->width) und einen Abstand zueinander (->margin oder ->padding). Schau auch mal unter ->float. Vielleicht willst Du das benutzen.
Manchmal kann es sein, dass man zusätzliche neutrale xhtml-Elemente braucht, um bestimmte Dinge zu erreichen. Dafür sind dann <div> und <span>.
Und, hast Du bei der Analyse des Content und des Layout einmal an eine Tabelle mit Überschriften, Zeilen, Spalten etc. gedacht?
Gruß
Olaf