1. Dashboard
  2. Artikel
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team
    4. Mitgliedersuche
  4. Forum
    1. Unerledigte Themen
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. HTML - Webmaster Forum
  2. HTML / Webmaster Forum
  3. HTML & CSS Forum

Layerproblem

  • siggi67
  • 18. Februar 2015 um 19:01
  • siggi67
    Anfänger
    Beiträge
    5
    • 18. Februar 2015 um 19:01
    • #1

    Hallo,

    ich hoffe mir kann einer helfen.
    Folgendes Problem.
    Ich habe eine Layer in der Mitte, der bis ganz unten gehen soll.
    Dann ein Layer links, einen in der Mitte und einen rechts.
    Ist nun aber der Linke von der Höhe her voller als der in der Mitte, wird der Hintergrund nicht
    ganz nach unten geschoben. Der Layer in der Mitte richtet sich von der Höhe her immer an
    dem Mittleren Layer aus.

    Hier mal der Code:

    Code
    body  {
    background-color:#e7ac67;
    margin:0;
    padding:0;
    height:100%;
    min-height:100%;
    }
    #layer_middle    {
        z-index:1;
        width:1108px;
        display: run-in;
        background-image:url(../layout/bg_gesamt.png);
        background-repeat:repeat-y;
        margin:0px auto;
        height:100%;
        min-height:100%;
        padding-bottom:10%;
        box-shadow:10px 0px 6px rgba(123, 44, 29, 0.6), -10px 0px 6px rgba(123, 44, 29, 0.6);
    }
    #layer_left    {
        z-index:1;
        display:inline-block;
        margin:0px auto;
        float:left;
        width:260px;
        height:100%;
        min-height:100%;
        padding-bottom:5%;
    }
    #layer_right    {
        z-index:1;
        float:right;
        width:150px;
        margin-top:10px;
        margin-right:12px;
        padding-top:10px;
        padding-right:10px;
        text-align:center;
    }
    #bg_layer    {
        z-index:1;
        width:510px;
        background-color:#ecbe88;
        margin-top:10px;
        margin-left:290px;
        padding-top:10px;
        padding-left:15px;
        padding-right:15px;
        padding-bottom:10px;
        border:2px solid #784d22;
        border-radius: 12px 0px 12px 0px;
        box-shadow: 3px 5px 7px rgba(123, 44, 29, 1.0);
    }
    Alles anzeigen

    Dann noch der HTMl Code:

    Code
    <div id="layer_middle">
    <div id="title"><div itemscope itemtype="http://data-vocabulary.org/Organization">
         <span itemprop="name"><div id="ueberschrift">Meine  Geschichte, zu dem was ich heute  bin!</div></span></div>
        </div>
    <div id="layer_left" style="clear:right;">
    <div id="navi_left">Layer Links mit Inhalt
    </div>
    <div id="layer_right">Layer Rechts mit Inhalt</div>
    </div>
    <div id="bg_layer">Layer in der Mitte, der den Hintergrund nach unten schiebt.</div>
    </div>
    </body>
    </html>
    Alles anzeigen

    Hab auch noch einen Scrteenshot gemacht, zur besseren Verständnis:

    Ich hoffe mir kann jemand helfen.
    Danke schon mal im voraus

  • Bazs
    Teeny
    Beiträge
    34
    • 18. Februar 2015 um 19:15
    • #2

    Hast du es mal mit position:fixed versucht? Wäre auch schön wenn du es irgendwo mal hochlädst bzw. den Link hier postest.

  • siggi67
    Anfänger
    Beiträge
    5
    • 18. Februar 2015 um 20:13
    • #3

    Hab ich gerade gestest. Geht auch nicht.
    Hier mal der Link zur Testseite.
    http://test.klang-des-windes.de/werdegang/

  • Bazs
    Teeny
    Beiträge
    34
    • 18. Februar 2015 um 20:24
    • #4

    Also wenn ich richtig sehe, ist es auf http://test.klang-des-windes.de/index.php alles so wie du es wolltest.

    /e mach es sonst erstmal mit <br>'s, mir fällt gerade nichts zu ein.

    Einmal editiert, zuletzt von Bazs (18. Februar 2015 um 20:28)

  • siggi67
    Anfänger
    Beiträge
    5
    • 18. Februar 2015 um 20:38
    • #5

    Das seltsamte ist aber , das der Layer in der Mitte den Hintergrund nach unten schiebt. Das müsste doch mit dem Layer mit der Navogation auch gehen?
    Das ist es was ich will. Das mit den <br> ist eingentlich keine schöne Lösung, da ich ja nie weiß wie groß der Bildschirm ist, sonst könnte ich ja uch
    das min-height mit einer Pixelzahle versehen.
    Hab mal gerade den Layer Navbi mit einer Hintergrundfarbe versehen. Er geht bis unten. Aber war geht dann der Hintergrund nicht bis runter?

    Einmal editiert, zuletzt von siggi67 (18. Februar 2015 um 20:42)

  • Bazs
    Teeny
    Beiträge
    34
    • 18. Februar 2015 um 20:45
    • #6

    vlt. position:relative und overflow: hidden sprich

    #layer_middle {
    z-index:1;
    width:1108px;
    display: run-in;
    background-image:url(../layout/bg_gesamt.png);
    background-repeat:repeat-y;
    margin:0px auto;
    height:100%;
    min-height:100%;
    position:relative
    overflow: hidden
    padding-bottom:10%;
    box-shadow:10px 0px 6px rgba(123, 44, 29, 0.6), -10px 0px 6px rgba(123, 44, 29, 0.6);
    }

  • siggi67
    Anfänger
    Beiträge
    5
    • 18. Februar 2015 um 20:54
    • #7

    Eh, super danke es klappt.
    Hab wieder was gelernt.
    Ich Danke dir.

Tags

  • html
  • color
  • http
  • links
  • style
  • body
  • text
  • hintergrund
  • layout
  • problem
  • code
  • auto
  • bot
  • bottom
  • div
  • border
  • png
  • inline
  • image
  • repeat
  • box
  • layer
  • align
  • float
  • name
  1. Datenschutzerklärung
  2. Impressum
Community-Software: WoltLab Suite™
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Artikel
  • Seiten
  • Forum
  • Erweiterte Suche
Zitat speichern