Ergebnis 1 bis 3 von 3

Thema: Div-container ineinander legen, Homepage

  1. #1
    Teeny
    Registriert seit
    04.07.2012
    Beiträge
    22
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage 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

    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> 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;
    }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Div-container ineinander legen, Homepage

    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.

  3. #3
    Teeny
    Registriert seit
    03.07.2012
    Ort
    Wuppertal
    Alter
    29
    Beiträge
    20
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Div-container ineinander legen, Homepage

    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>
    Geändert von Pascal Kremp (05.07.2012 um 10:20 Uhr)

Ähnliche Themen

  1. Laminatboden legen
    Von Bimbel im Forum Off Topic und Quasselbox
    Antworten: 31
    Letzter Beitrag: 31.01.2009, 18:08
  2. Laminat legen???
    Von Hase im Forum Off Topic und Quasselbox
    Antworten: 1
    Letzter Beitrag: 07.05.2007, 13:25
  3. Mehrere ineinander verschachtelte Formulare
    Von Soft-ICE-Crack im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 24.06.2006, 16:31
  4. Ineinander verschachtelte Variablen
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 22.03.2006, 23:48
  5. Tabellen ineinander Html
    Von Sakuraba im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 08.05.2004, 15:52

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •