Beiträge von Skateb

  • 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;
    }

  • Div-container ineinander legen, Homepage

    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:confused:

    :arrow: 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="wrapper">

    <div id="navigation">

    <div id="header">

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

    </div> <!-- Ende Header -->
    Test für Navigation
    <p></p>
    home
    </div> <!-- Ende Navigation -->


    <div id="content">

    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.

    <img src="pictures/home/beginner-skateboard-tricks.jpg" />

    </div> <!-- Ende Content -->


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

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

    </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 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;
    }