Seiteneinteilung funktioniert nicht

  • Ich habe versucht, eine Seite zu erstellen, die in zwei Bereiche eingeteilt ist. Die Seite soll sich aus einem linken und einem rechten Bereich zusammensetzen. Die Breiten sollen nicht durch eine Angabe von Pixelgrößen statisch festgelegt, sondern prozentual aufgeteilt sein. Um zu testen, ob mein Versuch funktionierte, habe ich jeweils eine Hintergrundfarbe für die Bereiche festgelegt sowie zwei Wörter in diese hineingeschrieben. Statt einer Nebeneinander-Anordnung der Wörter erhalte ich eine Untereinander-Anordnung und die Farben werden überhaupt nicht angezeigt. Was mache ich falsch?


    index.html


    index.css


    Ich danke für alle Antworten!

  • Zum Einen kann die language-Angabe bei script entfallen.
    Zum Anderen ist CSS anders einzubinden, z. B. so:

    HTML
    <link type="text/css" rel="stylesheet" href="style.css">
    • Dein CSS ist nicht wirksam, weil Du den divs IDs gegeben hast, im CSS jedoch Klassen verwendest.
    • divs sind Blockelemente und nehmen jeweils eine neue Zeile ein. Du musst entweder floaten oder "display:inline-block" verwenden.
    • Weil zwischen dem schließenden Tag des ersten divs und dem öffnenden des zweiten Zeilenumbrüche sind, wird dazwischen ein Leerraum eingefügt.


    So funktioniert es:

    Code
    <div id="linkeSeite">				Hallo			</div><div id="rechteSeite">				Hallo2			</div>        <style>            #linkeSeite            {                display: inline-block;	            width:20%;	            height:100%;	            background-color:blue;            }             #rechteSeite            {                display: inline-block;	            width:80%;	            height:100%;	            background-color:red;            }         </style>

Jetzt mitmachen!

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