Text nicht auf Höhe der Navigation

    Hallo,

    könnt ihr mir sagen wie ich es hinbekomme, dass mein contend div Inhalt (Text) auf gleicher Höhe wie meine Navigationsleiste steht (horizontal)? Bisher wird er nach unten, ans Navigationsende geschoben.

    Vielen Dank:!:

    Navigation
    Text


    :arrow:Navigation Text


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

    <body>

    <div id="wrapper">

    <div id=logo>
    <img src="pictures/logo/versuch Farbe.JPG"/>
    </div> <!-- Dies ist das Logo -->

    <div id="navigation">

    <div id="header">

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

    </div> <!-- Ende Header -->


    <table>
    <tr>
    <td><a href="http://www.html.net/">home</a><hr class="naviline" /></td>
    <td><a href="http://www.html.net/">handstand</a><hr class="naviline"

    /></td>
    </tr>
    <tr>
    <td><a href="http://www.html.net/">home</a><hr class="naviline" /></td>
    <td><a href="http://www.html.net/">handstand</a><hr class="naviline"

    /></td>
    </tr>
    </table>

    </div> <!-- Ende Navigation -->


    <div id="content">

    <h1 id="headline1" > New System </h1>

    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 id= picturehome>
    <img src="pictures/home/beginner-skateboard-tricks.jpg" />
    </div>

    Standardmäßig werden nachfolgende Elemente herangezogen, um freien Platz neben dem schwimmend

    positionierten Element aufzufüllen. Schauen Sie in das obige Beispiel, wo der Text automatisch

    neben das Bild von Bill Gates gezogen wird.

    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> <!-- Ende Content -->


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

    <p> http://www.homepage.de | Alle Rechte vorbehalten | © 2012 </p>
    </div> <!-- Ende footer -->
    <div style="clear: both;"></div>
    </div> <!-- Ende wrapper -->


    </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 0px 0px;
    background: white url(../pictures/wrappernavi/grau.JPG) repeat-y left top;
    z-index: 1; width: 840px;border:20px solid white;
    }


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


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


    #content {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 20px;
    margin-left: 292px;
    z-index: 4;
    width: 520px;
    font-family: tahoma, geneva, verdana, arial, sans-serif;
    font-size: 90%;
    color: #616161;
    }


    #footer {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-left: 272px;
    background-color: #2E2E2E;
    z-index: 5; padding: 0px 0px 0px 130px;
    width: 424px;
    font-family: tahoma, Geneva, verdana, arial, sans-serif;
    font-size: 90%;
    color: white;
    }


    #logo {
    position:relative;
    top: 20px;
    left: 130px;
    }


    table, tr, td {
    font-family: tahoma, Geneva, verdana, arial, sans-serif;
    font-size: 90%;
    table-layout: fixed;
    width: 80px;
    padding: 0px 12px 8px 0px;
    }


    a:link {
    color: #616161;
    text-decoration:none;
    }


    a:visited {
    color: #616161;
    }


    a:active {
    color: #DE5A51;
    }


    a:hover {
    color: #DE5A51;
    border-bottom: 1px solid grey;
    }


    .naviline {
    margin: 8px 0px 0px 0px;
    high: 1px;
    border-color : #B0B0B0;
    border-width : 1px 0 0 0;
    border-style : solid;
    }


    #picturehome {
    margin: 20px 0px 20px 0px;
    }


    #headline1 {
    font-family: tahoma, Geneva, verdana, arial, sans-serif;
    font-size: 110%;
    color: #616161;
    padding: 0px 0px 20px 0px;
    }

    Ein Link zur Seite, damit man sich das ansehen kann, wäre nicht schlecht.

    Du hast einen falschen Aufbau, das sollte so aussehen:

    Weiß = Wrapper
    Rot = Header
    Grün = Navigation
    Blau = Content

    Navigation und Content mit float versehen, dann sollte das passen.

    Super, funktioniert. Aber man braucht nur die Navigation auf float left zu setzen, der content füllt dann von alleine den leeren Bereich auf. Sonst bekomme ich Probleme mit meinem footer, da die Hintergrundfarbe von ihm den contend ausfüllt.:-)

    In deinem BeispielLink funktioniert nichts. Will mal hoffen, dass du noch einen anderen Link hast, wo alles funktioniert. Ansonsten mal die bereits vorgestellte Aufteilung nutzen.

    @Edit: Ah, jetzt funktioniert's.

    Einmal editiert, zuletzt von djheke (10. Juli 2012 um 21:22)