Kleine CSS vraag

  • Hey,


    Ik ben dus voor de grap me 3e layout aan het slice en dat verloopt allemaal prima maar ik heb een klein vraagje.


    Ik heb een menu aan de linkerkant en dan daarnaast de content. Deze moeten naast elkaar staan maar ook met elkaar meerekken, ik weet alleen niet hoe ik dat moet maken.


    De linker menu staat gewoon gepositioneerd met alleen een margin-top maar de content die heeft een margin-top van -768px zodat hij naast de linker menu staat, als alleen de content langer wordt dan 768px dan zakt de content naar benenden, en dat moet niet, ze moeten beide naast elkaar staan en ook met elkaar meerekken, hoe doe ik dat?


    Het stukje code:



    Live demo van het probleem: http://www.vlieg.rapifia.nl/


    Ze staan nu gewoon naast elkaar maar als de menu 1px langer wordt dan gaat de content 1 px omlaag. Hoe fix ik dit?


    MVG.

  • Citaat van Joyeria

    De content en de left column zet je naast elkaar met een float. Niet met een margin-top: ...;


    Dus vervang deze door

    PHP
    float: left;


    Nu valt de content helemaal weg.

  • met margin-top: 10px komen ze naast elkaar op de zelfde hoogte te staan (ieder geval in chrome), daarnaast als je ze met elkaar mee wilt stretchen moet je een css hack in die richting doen aangezien dit niet standaard zit in gebakken,


    voor dat verwijs ik je even naar google met "stretch nav with content"

  • Citaat van Patrick

    met margin-top: 10px komen ze naast elkaar op de zelfde hoogte te staan (ieder geval in chrome), daarnaast als je ze met elkaar mee wilt stretchen moet je een css hack in die richting doen aangezien dit niet standaard zit in gebakken,


    voor dat verwijs ik je even naar google met "stretch nav with content"


    Daarmee kwam ik uit op position: absolute; alleen nu staat het heel raar. Kijk maar even op de live demo.

  • Waar gebruik je margin in de min?


    Wat je zou kunnen doen:


    <div> <!-- Deze div is dus met 1 lange BG -->
    <div></div> <!-- content -->
    <div></div> <!-- wrapper -->
    </div>


    Dan kom ik nog terug @Joyeria hij heeft gewoon gelijk.
    Zet in zowel #content als #menu float: left; Alleen moet je dan eerst een soort van wrapper maken

  • Citaat van Malik

    Waar gebruik je margin in de min?


    Wat je zou kunnen doen:


    <div> <!-- Deze div is dus met 1 lange BG -->
    <div></div> <!-- content -->
    <div></div> <!-- wrapper -->
    </div>


    Omdat anders de content helemaal laag staat en als ik hem in de min doet staat hij perfect alleen dan rekt hij niet uit.


    Die extra div toevoegen werkt niet.

  • @Sukel show is zonder margin-top in de min maar wel met float left.


    Want je gebruikt niet een juiste manier bij, btw waarom position absolute en geen relative?

  • Meestal ga ik zo ten werk:


    Ik maak een div die ik centreer, meestal noem ik hem 'Wrapper'. Dan heb je dus bijv 1000px width en height geef ik niet mee dus die is uitrekbaar.


    Dan maak ik VAKJES in de div en zorg ervoor dat met float: left; de vakjes netjes aan elkaar aansluiten.


    <div id="wrapper">
    <div id="vak1"></div>
    <div id="vak2"></div>
    </div>


    beiden vakjes krijgen float: left; mee.


    Wrapper is bij wijze van spreken 1000px, vak 1 = 250px en vak 2 = 750px; ze passen en ze gaan dan naast elkaar.


    (jij gebruikt ook border, dus dan moet je aftrekken 4px aan borders heb je wat ik nu zie dus vak 1 doe je 248px en vak 2 748px)

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!