Div-container ineinander legen, Homepage

Skateb

Hallo,

erstelle mir gerade eine eigene Homepage und brauche eure Hilfe. Wie bekomme ich es hin, dass der linke Balken, wo die Navigationsleiste ist sich mit dem Content nach unten bewegt, sich also relativ zum Content verlängert? Habe ich hier die Div-container richtig ineinander verschachtelt? Die Navigation soll sich später nicht mitbewegen.

Danke für eure Antworten!

Dennis

http://al.al.funpic.de/Sport%20Homepage/

<html>
<head>
<title>Sport Homepage</title>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>

<body>

<div id="header">

<img src="pictures/header/header_photo_2.jpg" />

</div> 
Test für Navigation
<p></p>
home
</div>

Test für einen Inhalt
Um ein Element relativ zu positionieren, wird die Eigenschaft position auf den Wert relative gesetzt. Der Unterschied zwischen absoluter und relativer Positionierung liegt in der Berechnung der Position.

Die Position eines relativ positionierten Elementes wird von der eigentlichen Stelle im Dokument aus berechnet. D.h. man verschiebt das Element nur nach rechts, links, oben oder unten. Das Element nimmt nach der Positionierung trotzdem noch seinen ursprünglichen Platz im Dokument ein, obwohl es woanders dargestellt wird.

</div>

<div id="footer">
Contact Info klick!

<p> http://www.homepage.de | Alle Rechte vorbehalten | © 2012 </p>
</div>

</div>

</body>
</html>

html * { margin: 0px; padding: 0px;}

body {background-color: #DEDEDE;}

#wrapper {
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;
padding: 20px 0px 20px 0px;
background-color: white;
z-index: 1; width: 1000px;
}

#header {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 120px 0px 40px 0px;
z-index: 3;
}

#navigation {
margin-top: 0px;
margin-right: 710px;
margin-bottom: 0px;
margin-left: 20px;
background-color: #DEDEDE;
z-index: 2;padding: 0px 0px 0px 20px;
}

#content {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 310px;
z-index: 4;
width: 530px
}

#footer {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 290px;
background-color: #838383;
z-index: 5; padding: 0px 0px 0px 130px;
width: 420px;
}

Grevas

Was du vorhast lässt sich am einfachsten über eine Grafik lösen die auf der y-Achse wiederholt wird. Hier wird das Konzept näher beschrieben: http://www.ohne-css.gehts-gar.net/0005.php

Es gibt noch andere Lösungen, das wäre aber für die Seite am einfachsten.

Pascal Kremp

Hi Skateb,

viel Spaß beim experimentieren

Code

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html,
    body {
        background: #DEDEDE;
        height: 100%;
        margin: 0;
        padding: 0;
    }


    #wrapper {
        background: #FFFFFF;
        height: 100%;
        margin: 0 auto;
        padding: 15px;
        width: 970px;
        position: relative;
    }


    #branding {
        position:absolute;
        top:150px;
        left:40px;
    }


    nav {
        background: #DEDEDE;
        float: left;
        height: 100%;
        width: 270px;
    }


    nav ul {
        position: relative;
        top: 450px;
    }




    div[role=main] {
        float: left;
        margin: 15px;
        position: relative;
        top: 450px;
        width: 665px;
    }


    footer {
        background: #838383;
        padding: 5px;
        position: relative;
        top: -50px;
        left: 285px;
        width: 655px;
    }




    footer p {
        margin: 0;
        padding: 0;
    }


    .clearfix:before, .clearfix:after {
      content: "\0020"; display: block; height: 0; visibility: hidden;    
    } 


    .clearfix:after { clear: both; }


    .clearfix { zoom: 1; } 
</style>




<div id="wrapper">
    <header id="branding">
        <img src="http://lorempixel.com/output/abstract-q-c-800-300-1.jpg" alt="">
    </header>
    <div class="row clearfix">
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Test</li>
                <li>Contact</li>
                <li>Imp</li>
            </ul>
        </nav>
        <div role="main">
            <article>
                <header>
                    <h1>Jetzt funktionierts!</h1>
                </header>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <!-- <img src="http://al.al.funpic.de/Sport%20Homepage/pictures/home/beginner-skateboard-tricks.jpg" alt=""> -->
            </article>        
        </div>        
    </div>
    <footer>
            <p>Contact Info klick!
            <p>www.homepage.de | Alle Rechte vorbehalten | © 2012
    </footer>
</div>

Alles anzeigen

Tags