kostenloser Webspace werbefrei: lima-city

[CSS] Positionierung von zei divs nebeneinander

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

1. Autor dieses Themas

   limabone

   

   limabone hat kostenlosen Webspace.

   9:45, 6.4.2010

   Hallo,
   Ich hab da ein Problem, ich will nämlich eine Seite komplett mit CSS machen, also <table> fällt weg.
   Ich wollte eine Navi mit 260px breite, und einen content mit width:auto;

   #navi {
   position:relative;
   width:260px;
   }
   #content {
   position:relative;
   left:260px;
   }
   
   <div id="navi">
    NAVI
   </div>
   <div id="content">
    CONTENT
   </div>

   ^^ Der content richtet sich immer mit der höhe von der Navi aus, aber ich will, dass sich der content flexibel mit der seite mitbewegt, also position:absolute; fällt auch weg.

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

3. karpfen

   

   karpfen hat kostenlosen Webspace.

   9:48, 6.4.2010

   Versuchs doch mal mit float:left;(Navi) und float:right;(Content)
   
   Beitrag zuletzt geändert: 6.4.2010 9:48:51 von karpfen
4. Autor dieses Themas

   limabone

   

   limabone hat kostenlosen Webspace.

   10:25, 6.4.2010

   Wenn man noch die breite angibt, funktioniert das sogar (ohne breitenangabe hats nicht geklappt)
   Danke dir! Hat mir wirklich weitergeholfen

5. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   18:19, 6.4.2010

   ganz stumpf ist die navi ja vorgegeben und der content variabel, daraus folgt, dass man die navi links floaten kann und dem content danach einen margin-left von der breite der navi gibt alles weitere ist relativ egal,
   sprich das hier reicht schon aus:
   

   #navi { width:260px; float:left; }
   #content { margin-left:260px; }
   
   <ul id="navi">
     <li><a href="punkt1">punkt1</li>
     <li><a href="punkt2">punkt2</li>
   </ul>
   <div id="content">foo</div>

   
   
   ich habe die navi mal in eine Liste gesetzt, das ist einfach sinnvoller, da eine navigation i.d.R. ja einer Liste von Links entspricht!
   und um dann die Listenformatierung weg zu bekommen steht im css nur noch folgendes:
   

   ul, ul li { list-style:none; margin:0; padding:0; }

   
   diese vorgehensweise ist allgemein sinnvoll, da eine Liste von jedem Browser anders dargestellt wird undsomit eh neu formatiert werden muss...

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?