• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage DIV-Positionierung mittels CSS - ich pack's nicht!

E

EmmJay

Neues Mitglied
Hallo Allerseits,

versuche gerade, eine neue Homepage aufzubauen und scheitere schon gleich am Anfang. Das Ding soll so aussehen:

Hintergrundgrafik über die gesamte Bildschirmbreite. Die Grafik ist 3000 x 200 Pixel, deckt also auch noch größere Monitore ab.
Das will ich so realisieren:

CSS: 
body {
font-size: 0.95em;
font-family: Ubuntu;
background: url('../img/strand.jpg');
background-repeat: no-repeat;
background-position: top;
background-color: white;
text-align:center;
overflow:auto;
overflow-y:hidden;
}

Das funktioniert auch soweit.

Mittig soll auf dieser Grafik ein DIV-Container liegen (960 breit x 200 hoch), und darunter, genauso breit, weitere DIVS für Navigation, Content, Footer,

Wollte ich so machen:

HTML: 
        <div id="foreground">

            <header>
            header
            </header>

            <nav>
            nav
            </nav>

            <aside>
            aside
            </aside>

            <section>
            section
            </section>

            <footer>
            footer
            </footer>

        </div>

mit diesem CSS:
CSS: 
#foreground {
    max-width: 1200px;
    min-width:960px;
    margin:0px
    margin-left: auto;
    margin-right: auto;
}

header {
    margin: 0;
    background:red;
}

nav {
float: both;
width: 100%;
background:yellow;
}

aside{
float: left;
width: 200px;
background:brown;
min-height:600px;
}

section{
    background-color: grey;
    margin: 0x;
    min-height:600px;
}

footer {
background: green;
clear: both;
}

Der Effekt: Die Hintergrundgrafik wird soweit nach unten gestreckt, damit alle meine DIVS auf der Hintergrundgrafik liegen. Es soll aber nur der oberste DIV auf der Grafik liegen.
Also: Irgendwas ist faul an meiner CSS-Gestaltung: Wer schubst mich in die richtige Richtung?

Besten Dank an alle, die sich für mich Zeit nehmen!
 
CSS: 
#foreground {
    max-width: 1200px;
    min-width:960px;
    margin:0px /* hier fehlt am Ende das Semikolon */
    margin-left: auto;
    margin-right: auto;
}
/*...*/
nav {
float: both; /* both gibt es nicht - left, right, none, inherit sind gültige float-Werte */
width: 100%;
background:yellow;
}
Ansonsten bitte ein Demo inkl. dem Hintergrundbild strand.jpg im Web verlinken, um es sich live anschauen zu können - gerne auch per https://jsfiddle.net, sofern die Seite noch nicht online ist.

Beim Neuaufbau einer Webseite ist es aber empfehlenswert, mit der Zeit zu gehen, und anstelle der (mittlerweile in die Jahre gekommene) float-Eigenschaft auf Grid oder Flexbox in Kombination mit Media Queries zu setzen.

Diese CSS-Techniken bieten diverse Vorteile, insbesondere/vorzugsweise in puncto Responsive Design für die unterschiedlichen Endgeräte (PCs, Smartphones & Tablets) mit ihren diversen Bildschirmauflösungen, die heutzutage am Start sind.

Zur Gegenprobe einfach mal Dein vorgestelltes CSS-Konzept auf (D)einem Smartphone betrachten :wink:
 
Spicelab schrieb:
Beim Neuaufbau einer Webseite ist es aber definitiv empfehlenswert, mit der Zeit zu gehen, und anstelle der (mittlerweile in die Jahre gekommene) float-Eigenschaft auf Grid oder Flexbox in Kombination mit Media Queries zu setzen.
Zum Vergrößern anklicken....
... dennoch - in Anlehnung Deines gezeigten CSS-Codes habe ich die beiden markierten/kommentierten Fehler in einem jsfiddle-Demo korrigiert, und für den Dokumentkörper <body> alternativ eine "Dummy/Platzhalter"-Grafik gemäß Deinen An-/Vorgaben als Hintergrundbild eingesetzt:
<header> mit 200px-Höhe -entsprechend der Hintergrundbildhöhe und Deiner Fehlerbeschreibung bzgl. dieses Elements-:
Zum besseren Verständnis bitte im CSS auch auf meine gesetzten /* Kommentare */ achten - Danke dafür:smile:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben