kostenloser Webspace werbefrei: lima-city


DIV-Container über anderen wachsen lassen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mermadalis

    Kostenloser Webspace von mermadalis

    mermadalis hat kostenlosen Webspace.

    Hallo zusammen

    Folgende Frage: Auf meiner Seite ist ein DIV-Container content. In content befindet sich ein weiterer Div-Container menu:

    <div id="content">
    <div id="menu">
    </div>
    </div>


    Nun soll der innere Container nach links hin über den äußeren Container hinauswachsen. Grafisch veranschaulicht ist das Ziel der auf diesem Bild zu sehende Effekt:

    http://imagr.eu/up/4fca00943ffaf6_maffi_eu_Personal_Website_by_slickmaff.jpg

    Wie kann man sowas via CSS lösen?

    Danke schonmal für alle Antworten!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. t*****b

    Das geht ganz einfach über Minuswerte bei margin-left.
  4. Außerdem benötigst du evtl den z-index
  5. In deinem Beispiel ist sowas jeweils einmal bei einem Artikel zu sehen. Man kann also grob von einer solchen Struktur ausgehen. Wenn der umgebende DIV-Container position:relative hat kann man Kindelemente dieses Containers abhängig von dessen Position per position:absolute positionieren.

    Weiterhin ist auch die Möglichkeit mit negativen margin-left möglich, wie bereits erwähnt. Dabei musst du dann aber bedenken, dass die größe diese zu verschiebenden Elements noch in dem "Textfluss" des Containers berücksichtigt werden muss.

    <div id="content">
    
    <div class="article" style="position:relative;">
      <div class="meta" style="position:absolute; left:-20px;">
        <p>2009<br />
        17.12</p>
      </div>
      <div class="entry">
        <!--post content-->
      </div>
    </div>
    
    <div class="article" style="position:relative;">
      <div class="meta" style="position:absolute; left:-20px;">
        <p>2009<br />
        17.12</p>
      </div>
      <div class="entry">
        <!--post content-->
      </div>
    </div>
    
    </div>


    Hier veranschaulicht als simple HTML-Seite:
    http://cyclobox.lima-city.de/examples/positionierung.html

    Beitrag zuletzt geändert: 2.6.2012 14:59:45 von cyclobox
  6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!