kostenloser Webspace werbefrei: lima-city

DIV-Container über anderen wachsen lassen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   mermadalis

   

   mermadalis hat kostenlosen Webspace.

   14:14, 2.6.2012

   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

   14:38, 2.6.2012

   Das geht ganz einfach über Minuswerte bei margin-left.

4. imho

   

   imho hat kostenlosen Webspace.

   14:48, 2.6.2012

   Außerdem benötigst du evtl den z-index

5. cyclobox

   

   cyclobox hat kostenlosen Webspace.

   14:49, 2.6.2012

   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?