Website-Layout mit CSS3 - Boxverschachtelung

e X s i L e · #1 (**permalink**) 11.12.2012, 21:09

Guten Abend zusammen!

Ich habe ein kleines Problem: Ich schreibe an einer kleinen Website und will mich an aktuellen Standards orientieren, deswegen keine Tabellen sondern schön CSS3.
An sich kein Problem und die Aufteilung passt, allerdings habe ich ein Problem beim Verschachteln einiger div's ineinander...

Ich habe einen großen div-Container, der meine gesamte Website auf eine gewisse Breite formatiert, darin befinden sich alle anderen Objekte...

Nun habe ich, weil es zu einigen Problemen mit meinem Footer kam, nur zum Test einen Rahmen um meinen 'Container' gepackt, und festgestellt, dass nur der erste 'Unter-div' wirklich in dem großen Container ist.

Nun bin ich etwas arg verwirrt, da alle anderen Formatierung völlig korrekt auf die div's angewandt werden, die nicht im Container liegen, ich hoffe, hier kann mir geholfen werden!

Meine zweite Frage, bevor ich endlich den Quellcode schicke: Warum funktioniert margin-bottom nicht?

Link zur Website: Titel

Quellcode:

CSS (ausgelagert):

Code:

#container {
    width: 1000px;
    height: 100%;
    margin: 0 auto;
    border: 1px solid red;
}

#Header {
    height: 130px;
    width: 100%;
}

#Footer {
    width: 100%;
    margin: auto;
    margin-bottom: 0px;
    border: 1px solid blue;
}

#Ueberschrift {
    display: block;
}

#Logo {
    float: left;
    border: 1px solid black;
    width: 263px;
    height: 127px;
}

#border {
    border: 1px solid black;
}

#rBox {
    width: 300px;
    margin-right: 0px;
    margin-left: auto;
    margin-top: 5px;
    float: right;
}

#lBox {
    width: 250px;
    margin-left: 0px;
    margin-right: auto;
    margin-top: 5px;
    float: left;
}

#gelbTextmarker {
    background: yellow;
}

#rotTextmarker {
    background: red;
}

HTML-Code:

<!DOCTYPE html>

<html lang="de">
    <head>
        <meta charset="utf-8" />
        <title>Titel</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="container">
            <header id="Header">
                <img src="#" alt="Logo" id="Logo" /><a href="#" id="Ueberschrift">&Uuml;berschrift<br /><span class="">Unter&uuml;berschrift</span></a>
            </header>
            <nav id="lBox">
                <div id="border">
                    Linke Navigationsbox <br />Inhalt
                </div>
                <?php
                    
                ?>
            </nav>
            <article>
                    <?php
                        
                    ?>
            </article>
            <aside id="rBox">
                <div id="border">
                    Rechte Informationsbox.<br />Inhalt
                </div>
                <?php
                    
                ?>
            </aside>
            <footer id="Footer">
                <a href="#">Impressum</a> 
            </footer> 
            
        </div>
        
    </body>
</html>

Und: Ja, ich weiß, es gibt einige unnütze Definitionen, aber ich stehe auch noch ganz am Anfang... Und ich wette, es ist ein ganz simples Problem mit einer ganz simplen Lösung...

P.S.: position: absolute; bringt zwar, dass alles in dem Container ist, allerdings gehen dann alle anderen Formatierungen verloren...

Vielen Dank im Voraus!
e X s i L e

netbenni · #2 (**permalink**) 11.12.2012, 21:27

du floatest einige Elemente im #container-div, clearst danach aber nicht.
Dadurch fällt das Container-Element zusammen.

Wenn du dem #Footer-div noch clear:both; gibst, sollte es klappen.

Manfred62 · #3 (**permalink**) 11.12.2012, 21:28

du musst clearen --> im footer

MrMurphy · #4 (**permalink**) 11.12.2012, 21:48

Hallo

Zitat:

Warum funktioniert margin-bottom nicht?

Funktioniert doch.

Das Problem ist eher, das du dich noch nicht mal über die grundlegenden Befehle von HTML5 und CSS3 informiert und sie (bzw. ihre Auswirkungen) verstanden hast.

Mit einem seriösen Quelltext hat deiner jedenfalls nichts zu tun.

Gruss

MrMurphy

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Website erstellen - Layout Probleme	Jerry0022	CSS	3	14.06.2011 18:30
Bitte um Hilfe - CSS und Prozentangaben	sprefer	CSS	3	01.03.2011 04:11
Untermenü im IE	nici	CSS	10	22.06.2009 21:19
Website Layout K(r)ampf	unclesam	Site- und Layoutcheck	12	06.03.2006 16:28
CSS3: Multi-column layout \| Safari ?	ulle	CSS	13	07.01.2006 13:07