3 berichten aan het bekijken - 1 tot 3 (van in totaal 3)
  • Q:
    Bijdrager
    Harryk

    hoe css je van de straat kan houden

    Geen vraag hoor, maar gewoon een voorbeeldje van hoe je uren kan zoeken naar iets wat dan uiteindelijk toch weer oplosbaar blijkt. CSS dus… en ik kan het mijn vriendin wel uitleggen maar die kijkt dan als een aap in een kapotte wekker dus daarom maar het forum..

    Na veel zoeken toch een werkbare css gevonden voor een fluid 2-kolommen layout, met een nav-kolom rechts en content links. Doet in alle browsers wat ik wil, nou ja IE en Safari 1.2 negeren de max width van 1024 maar alla.

    #container { position: absolute; top: 0; left: 0; width: 100%; max-width: 1024px }

    #sidebar { font-size: 11px; background-color: #eee8aa; float: right; margin: 0; padding: 2px 2px 0 4px; position: absolute; right: 0; width: 200px; height: auto }

    #content { text-align: left; padding: 0 212px 0 8px; position: absolute; top: 0; left: 0; height: auto;width:auto}

    Kom ik erachter dat in de nav-box rechts de links niet werken. Niet in Safari en Netscape, wel Opera en IE. Goed, inhoud verwijderen, uitproberen, kijken wat er gebeurt. Op een bepaald moment kom ik erachter dat in de navbox de links niet werken daar waar er in de ‘contentbox’ inhoud is. Daar waar de content geen inhoud meer heeft, vanaf dat punt naar beneden werken de links in de navbox wel.

    Enig zoeken op internet brengt me bij een gelijkaardig probleem van iemand anders, waarbij me opvalt dat er voor de content sectie dezelfde constructie is toegepast, namelijk een grote paddingwaarde. In feite overlapt de nav-sectie de content-sectie, al is die door een grote padding waarde naar links gedrukt. (Waarom niet margin gebruikt, dat werkt weer niet in IE)
    En zodra de content dan inhoud heeft, werken door deze overlap in de navigatie de links niet meer. Ze tonen wel, maar het muisje blijft een pijltje en er gebeurt niks.

    De oplossing is dan simpel, als je ‘m gevonden hebt. Enig doordenken bracht me bij de z-index, en jawel, als je de boxen stapelt, en zorgt dat de sidebar een hoge z-index heeft, dus altijd ‘on top’ staat, probleem opgelost! en ik weer blij.

    Weet de surfende buitenwereld wel wat webdesigers doormaken…8)

    #sidebar { font-size: 11px; background-color: #eee8aa; float: right; margin: 0; padding: 2px 2px 0 4px; position: absolute; z-index: 100; right: 0; width: 200px; height: auto }

    Bijdrager
    tennapel

    Ik wil niet vervelend doen, (maar doe het stiekem toch:-) ), maar margin werkt prima in IE. Sterker nog: margin geeft minder problemen dan padding in IE5/Win.

    Je hebt de padding ook helemaal niet nodig, aangezien je de content absoluut positioneert binnen #container. Haal de padding weg en de content blijft op z’n plek staan en je links doen het in de sidebar ineens wel. Kortom: als je het juiste 2-koloms voorbeeld had gekopieerd (en er zijn genoeg CSS sites die dat bieden:
    http://cssvault.com/resources.php ,
    http://www.inknoise.com/experimental/layoutomatic.php ,
    http://css.maxdesign.com.au/index.htm , http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html ) had je buiten in het mooie weer kunnen zitten:-)

    CSS leren is lastiger dan je denkt; je moet een knop in je hoofd omzetten en af en toe wat haren uit je hoofd trekken, maar het is de tijdsinvestering waard. Succes!

    Bijdrager
    hans dorsman

    Maar toch leuk zo’n voorbeeld. Dat zegt veel meer dan vragen op zich.

    Hans

3 berichten aan het bekijken - 1 tot 3 (van in totaal 3)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.