CSS - Ich will es lernen...

[Ashy]

Hallo,

ich habe mich jetzt durchgedrungen CSS zu lernen, sprich damit Layouts zu erstellen. Ich arbeite ja sonst schon mit CSS, externe Linkdatei mit diversen Inhalten, aber ich verstehe es einfach mit dem Layout nicht...

Ich ahbe zum Beispiel diese Homepage... die habe ich aus Tabellen gemacht, wie bitte müsste ich das jetzt in CSS umwandeln? Ich verstehe noch nicht so recht den Sinn mitd iesen div-Layern und Containern und wie ich sie ansetzen muss und mit diesen Margin-Angaben und Floating...

Habe mir schon diverse Workshops angesehen, aber die waren dann doch immer zu wenig erklärt, sodass ich es verstanden habe. Könnte mir hier wer weiterhelfen? Ganz besonders eben mit obigen Design, welches ich in CSS umerstellt hätte.

Liebs Grüessli,
Nadine

[Iunius]

Hi,
ich hab mal etwas in alte Bookmarks gestöbert:
Stichpunkt CSS: Layout ohne Tabellen
Workshops

als weitere Hilfe:
CSS 4 You - The Finest in Stylesheets

Denke mit den Seiten sollte man erstmal gut weiterkommen.

Gruß

[Ashy]

Danke für die Links... aber eben, damit komme ich kaum klar mit diesen Workshops, denn die sind nicht ausreichend erklärt, für mich zumindest.

Ich bräuchte etwas, dass mir das von Anfang an erklärt! Dieses Design fand ich auch toll: http://barrierefrei.e-workers.de/wor...lus/index.html

Aber einen Blick in den Quelltext und... ähm ja... da verstehe ich ja Null was! Und wie genau das aufgebaut worden ist, weiss ich ja auch nicht.

Liebs Grüessli,
Nadine

[Iunius]

Hi Du,
also wenn du eine Seite selbst erstellt hast, so sind die Grundbegriffe des HTML ja ein Begriff.
Auch was div, span, color, margin, background, text-align und Co angeht, oder??

So hast du bei dem drittem Link welche ich gepostet habe ein ideales Nachschlagewerk und beim ersten Link ein paar gute Beispiele zum nachbauen und verstehen lernen.

Gruß Iu

[Ashy]

Die letzte Seite kenne ich und die ist wirklich gut. Wie gesagt, ich nutze CSS schon, aber ich komme absolut nicht mit den Div-Layern und Containern klar... habe schon oft versucht was nachzubauen, aber dann komme ich an einer Stelle wo es nicht weitergeht und ich komme nicht draus, wie ich das auf mein persönliches Design beziehen solle.

Liebs Grüessli,
Nadine

[Magnifikatz]

Ich hab mir alles Wissenswerte zu .css mit Hilfe dieser website beigebracht:

W3Schools Online Web Tutorials

Ist zwar in englisch, aber sehr gut strukturiert. Meine statische homepage Franktireur Autorenseite
habe ich z.B. auf diese Art erstellen können (mit 3 spalten, die in nahezu jedem browser gleich funzen).
Vielleicht hilfts.

[infected]

Ich kenne Dein Problem. Auch ich steh noch ziemlich in den Anfängen was CSS & PHP und diese ganzen Geschichten angeht. Beim Thema CSS war mir das Buch "Little Boxes" sehr hilfreich. Da wird eigentlich alles was man zum Anfangen braucht gut und anhand von Beispielen erklärt. Kein Fachchinesisch oder sowas, sondern verständliche Erklärungen.

Gruß

infected

[paddya]

Also im Prinzip ist dieses Layout sehr einfach umzusetzen. Mal ein Beispiel:

<div id="header"><img src="dateien/header.jpg" alt="" height="100" width="650"> 

Um das jetzt zu platzieren nimmst du einfach im CSS:

#header {
          float: left; /* richtet den Header aus und sorgt dafür, dass das aüßere Bild neben dem Content dargestellt wird.*/
          margin-left: 200px; /* hält den Header auf Abstand */ 

und dann setzt du einfach die <div>s darunter und definierst deren margin-top.
Das seitliche Bild definierst du dann mit float: right; und vergibst wieder einen Abstand (margin). Wenn man mal verstanden hat, wie man mit float und margin Elemente platzieren kann, ist es eigentlich ganz einfach

Greetz

paddya

[Iunius]

Eine kleine Übersicht für "Fortgeschrittene",
welcher Browser mit bestimmten CSS wirklich umgehen kann, bzw. Sie nicht unterstützt.
Web Browser CSS Support

Hat mir schon so manchesmal weitergeholfen.