CSS - Ich will es lernen...

  • 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

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • 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/workshops/dreiplus/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

  • 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

  • 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

  • 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 ;-)

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

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

    Um das jetzt zu platzieren nimmst du einfach im CSS:

    HTML
    #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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!