Aufteilung einer Webseite in CSS funktioniert nicht

  • Hallo alle,


    mit meinem ersten Beitrag muss ich als HTML-Anfänger direkt um Hilfe rufen.


    Ich versuche mit einer CSS-Datei und einer HTML-Datei eine Seite mit zwei Spalten zu erzeugen, aber irgendwie will es nicht funktionieren. Ich habe schon ein paar Stunden vor dem Rechner verbracht und Tags hin und her geschoben, etc., aber irgendwie funktioniert es nicht. Ich bekomme immer eine weiße, leere Seite zurück. Kann mit bitte jemand sagen, was ich stundenlang übersehen habe? Hier sind die Inhalte der Dateien:




    CSS-Datei:


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Test-CSS</title>


    <style type="text/css">


    <div id="Wrapper">
    <div id="RightZone">
    </div>
    <div id="MainArea">
    </div>
    </div>


    #Wrapper {
    background-color: #E1E1E1;
    }


    #RightZone {
    background-color: #FFFFFF;
    width: 220px;
    }


    #MainArea {
    background-color: #E1E1E1;
    margin-left: 0px;
    width: 960px;
    }


    </style>


    </head>


    <body>
    </body>


    </html>




    Die HTML-Datei:


    <!DOCTYPE html>
    <html xmlns="
    http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <title>Test-HTML</title>


    <link rel="stylesheet" type="text/css" href="main.css" />


    </head>
    <body>
    #MainArea {
    background-color: #E1E1E1;
    margin-left: 0px;
    width: 960px;
    <h2>Testtext1</h2>
    <p>Testtext2</p>
    <h2>Testtext3</h2>
    }


    </body>
    </html>




    Das Ganze soll von der Notation dem HTML5-Standard entsprechen. Hat jemand eine Idee, was ich falsch gemacht habe? An dieser eigentlich recht simplen Sache hängt die ganze Homepage von mir.




    Vorab schon einmal vielen Dank für eure Hilfe!




    LG, Peter

  • Die css datei ist ne html datei mit style tag...?!
    bitte LESEN: Den eigenen Code lesbar im Forum präsentieren
    html


    css einfach so als datei speichern..! nix dazu!



    Grüße Wolf

  • Sorry für die späte Reaktion, aber ich bin viel unterwegs. Zuerst einmal Danke für die Antwort. Ich hatte (habe) ein grundlegendes Verständnisproblem mit CSS. Jetzt bin ich (etwas) schlauer.


    Allerdings will die div-Anweisung nicht so wie ich will. Aber ich will endlich mal kapieren, wie das Ding funktioniert.


    Ich möchte mit div den Bildschirm dreiteilen. In einen linken Rand 220px breite, der leer bleiben soll. Nur eine Hintergrundfarbe wird gesetzt. Rechts daneben soll ein 960px breiter Hauptteil kommen, der die Inhalte enthält. Der Rest des Browsers rechts neben dem Hauptteil soll bis zum Ende des Browsers gehen und die gleiche Hintergrundfarbe enthalten, die der linke Teil hat.


    Ich denke, dafür ist div der richtige Befehl, oder? Wenn nein, welchen Befehl sollte ich sonst dafür verwenden? Table?
    Wie auch immer, irgendwie funktioniert die div-Anweisung nicht. Die CSS-Datei ist korrekt eingebunden, das habe ich schon überprüft.




    Meine CSS sieht mittlerweile so aus:



    <div id="Wrapper">
    <div id="RightZone">
    </div>
    <div id="MainArea">
    </div>
    </div>


    #Wrapper {
    background-color: #E1E1E1;
    }


    #RightZone {
    background-color: #FFFFFF;
    width: 220px;
    }


    #MainArea {
    background-color: #E1E1E1;
    margin-left: 0px;
    width: 960px;
    }




    Die HTML-Datei sieht jetzt so aus:




    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">



    <head>
    <title>Test-Page</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
    </head>



    <body>
    </body>



    </html>




    Ich würde jetzt erwarten, dass die HTML-Seite gemäß obiger Beschreibung dreigeteilt ist und keinen Text, etc., enthält, aber die farbige Dreiteilung hat. Aber das Browserfenster ist leer.


    Was mache ich falsch?


    Ein Punkt, der mir auch noch nicht so ganz klar ist, ist wie ich in der HTML-Datei sage, das ich einen Text in der mit MainArea definierten Zone schreiben möchte. Wie referenziere ich das zur MainArea?




    VG, Peter

  • Hey!
    Zum CSS einbinden
    1) Guck mal hier: Den eigenen Code lesbar präsentieren. Das kam hier im Forum schon oft genug :/


    2) CSS und HTML sind zwei grundverschiedene Dinge. Die werden nicht (oder kaum, wenn man es ineffizient macht) durcheinandergeworfen. Das heißt, du hast einmal dein CSS, zB

    CSS
    #Wrapper {
    background-color: #E1E1E1;
    }

    und dann hast du dein HTML, zB

    HTML
    <body>
      <div id="Wrapper">
      </div>
    </body>

    Der Trick ist, zu lernen, wie man die zwei Dinge zusammenführt, dafür liest du am Besten nochmal das hier durch: CSS in HTML einbinden. Zum Lernen empfehle ich Variante 2.


    3) Absolute Angaben, wie Pixel, sind immer schlecht. Wenn du nämlich zB von einem 1920px breiten Bildschirm ausgehst (weil du selber einen hast) und deshalb den Inhaltsbereich der Seite 1500px breit machst, dann hätte ich schonmal ein Problem, weil bei nur 1366px vorhanden sind.
    Nimm am Besten Prozentangaben, wenn du beispielsweise einen Block 80% breit machst und mittig plazierst, hast du schonmal eine schöne Ausgangsposition, die bei mir genauso funktioniert, wie bei dir.


    Zum HTML-Problem
    HTML hat eine Baumhierarchie. Dh. wenn du sagen willst, dass der Text in den Wrapperbereich gehört, sieht das so aus:

    Hier zeigt sich die Baumhierarchie daran, dass Schrift- und Hintergrundfarbe vom #wrapper einfach an das Kindelement weitergegeben wurden.


    Ich würde dir empfehlen, dir das oben verlinkte Seminar anzuschauen, oder nochmal durchzugehen, je nachdem.

  • Danke für die schnelle Antwort! Ich schaue mir das alles mal an. Ich habe hier das Buch "HTML5" von Günter Born (Mart&Technik-Verlag) und die aktuelle Version SelfHTML zum Lernen.


    Zu 1) Ich hatte den Code von Hand schön formatiert, aber nach dem Absenden der Antwort hat das Portal vieles der Formatierung wieder entfernt. Keine Ahnung, woran das liegt.


    Zu 2) Das Grundsätzliche Einbinden der CSS-Datei hat bei meinen Versuchen funktioniert. Das habe ich mit anderen Beispielen getestet. Ich kämpfe im Augenblick eher mit der DIV-Anweisung. Ich würde gerne die DIV-Anweisung in die CSS-Datei schreiben, da sie das grundlegende Layout des Fensters bildet. Ist das angebracht? Oder muss die DIV-Anweisung im Body der HTML-Datei stehen?


    Zu 3) Die absoluten Angaben habe ich genommen, da in die Box einiges an Text und zwei Bilder hinein sollen. Relative Angaben würden ggf. das Layout zerstören. Im Zweifelsfall muss der Anwender die Scrollbars nutzen. Ich habe das Layout auf einen Bildschirm mit 1280x1024 Pixel festgelegt, wobei der vertikale Wert nicht soooo wichtig ist. Aber der horizontale Wert hat wegen der oben erwähnten Elemente eine gewisse Relevanz.


    Noch einmal Danke für eure Hilfe! Ich werde mich nachher an die gelieferten Links machen und mir das alles durchlesen - und hoffentlich auch verstehen.


    Edit:
    Eine Frage habe ich vergessen:


    Habe ich das richtig verstanden: Ich kann mehrere CSS-Dateien in einer HTML-Datei angeben? Dafür muss ich nur die CSS-Dateien einbinden, z. B. so:


    ....


    <linkhref="style1.css"type="text/css"rel="stylesheet">


    <linkhref="style2.css"type="text/css"rel="stylesheet">


    <linkhref="style3.css"type="text/css"rel="stylesheet">


    ....


    ...und was mir auch noch aufgefallen ist: Das hier so oft beschworene Scriptly unterstützt nur CSS bis Version 2.1 - falls ich mich nicht irre. Gibt es einen Freeware-HTML-Editor, der CSS 3.0 unterstützt? Was empfehlt und/oder benutzt ihr? Ich habe bisher immer Notepad++ verwendet.


    Edit:
    Das mit der DIV-Anweisung habe ich jetzt in sofern hinbekommen, dass ich die DIV-Anweisung in den Body der HTML-Datei gepackt habe und die Formatierung dazu in der CSS-Datei steht.


    Wie sage ich der DIV-Anweisung, dass sie bis zum Ende des Bildschirmes gehen soll, d. h. den Bereich farbig unterlegen soll, obwohl dort nichts (kein Text, etc.) steht? Bis jetzt habe ich nur eine Zeile, da ich dort ein paar Whitespaces eingebaut habe.


    LG, Jürgen


    LG, Peter

  • Hi, nun muss ich leider kurz etwas zum Beitrag sagen:


    Nachdem du bisher 2 mal darum gebeten wurdest den Beitrag zu lesen in dem kleinlich erklärt wird wie du deinen Code im Forum formatieren kannst, du dies aber nicht geschafft hast erhältst du von mir nun den klaren Auftrag eben diesen sorgfältig zu lesen und zu verstehen, wenn du dann noch Schwierigkeiten hast darfst du gerne nachfragen aber einfach gar nicht beachten ist für uns deutlich mehr Aufwand: Den eigenen Code lesbar im Forum präsentieren


    Zusätzlich der Hinweis auf die Nutzungsbestimmungen (bitte Absatz 2 sorgfältig lesen) in welchen wir festgelegt haben das wir mehrere Beiträge direkt hintereinander (Doppelpost, in diesem Fall schon Dreifachpost) nicht gerne sehen, für Änderungen und Ergänzungen nach kurzer Zeit hat das Forum einen Bearbeiten-Button am entsprechenden Beitrag.
    Ich fasse deine Beiträge zu einem zusammen, bitte dich dies in Zukunft jedoch selbstständig zu tun, wie gesagt: Bei Fragen kannst du dich gerne an uns oder auch mich persönlich wenden wir helfen dir dabei.


    Zu deinem Problem:
    Die Höhe eines Elements kannst du mit dem CSS-Befehl height festlegen, setzt du die Höhe auf 100% wird der Bereich (im Normalfall, es gibt Ausnahmen) auch 100% der Höhe ausfüllen.


    CSS
    div {
        height: 100%;
      }


    Du erhältst nun Abstände zu den Seiten, diese kannst du mit dem margin Befehl einstellen, Standardmäßig sind hier meist 5-10 Pixel eingestellt, beträgt der Wert 0 sind die Abstände verschwunden:

    CSS
    div {
      height: 100%;
      margin: 0;
    }


    Als Editor kann ich persönlich Sublime Text empfehlen. Anfangs braucht es 5 Minuten um gewisse Einstellungen zu finden, beim Coden nimmt die Software viel Arbeit weg. Ansonsten einfach mal einen Blick in diesen Beitrag werfen.


    Was denn nun eigentlich: Peter oder Jürgen? :whistling:

Jetzt mitmachen!

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