16 berichten aan het bekijken - 1 tot 16 (van in totaal 16)
  • Q:

    Bijdrager
    Martens

    CSS Vraag: Waarom doet Zeldman dit?

    Ik heb Zeldman’s boek “Designing With Web Standards” uit, maar ik heb er 1 vraag over, die hier misschien wel beantwoord kan worden of misschien een leuke discussie op kan leveren over CSS.

    In een voorbeeld voor een site beschrijft hij een layout die bestaat uit 2 kolommen. Links staat een kolom van 150 pixels breed met daarin het menu, en rechts daarvan hoort een kolom van 400 pixels breed te komen met daarin de content.

    Ik heb bij de CSS-voorbeelden alles behalve de positionerings-code gestript voor de duidelijkheid.

    Het menu heeft deze CSS:

    [code:1:f81976f3ef]
    position:absolute;
    left:0;
    [/code:1:f81976f3ef]

    Er is gekozen voor een absolute positioning omdat float in veel browsers problemen oplevert. De rechter kolom wordt nu echter met 2 divs geplaatst. De buitenste div maakt een blok-level element van de content, en de binnenste div zorgt ervoor dat de breedte netjes op 400 pixels wordt gezet.

    De code voor het buitenste blok is:

    [code:1:f81976f3ef]
    margin-left:150px;
    width:auto;
    [/code:1:f81976f3ef]

    En het binnenste blok:

    [code:1:f81976f3ef]
    width:400px;
    [/code:1:f81976f3ef]

    Volgens Zeldman is dit gedaan omdat als het buitenste blok een width van 400px krijgt, er van alles fout gaat met het positioneren van dat blok in verschillende browsers. Bij sommige wordt er rechts uitgelijnd, bij andere komt het door het menu te staan, dat zijn de voorbeelden die worden gegeven.

    Ik zit nu op mijn werk, dus ik kan jammer genoeg niet uitgebreid testen, maar voor zo ver ik kan zien werkt 1 div met deze code prima:

    [code:1:f81976f3ef]
    position:absolute;
    left:150px;
    [/code:1:f81976f3ef]

    Waarom gaat Zeldman dan toch voor het niet-structurele 2-div systeem?

    Voor mensen die het boek ook hebben: Het gaat om hoofdstuk 16, bladzijden 389 t/m 397. Voor de rest heb ik geprobeerd door de CSS voorbeelden alles zo duidelijk mogelijk uit te leggen. ;]


    Bijdrager
    roelboekel.nl

    Dit doet ie omdat er browsers zijn die zichh niet aan absoluut houden. Als je deze constructie maakt houdt ie alles bij elkaar. en krijg je dus geen vervormingen.

    Roel


    Bijdrager
    tennapel

    Staat er bij over welke browserversies we het hebben? Ik kan me voorstellen dat dit een truc is om Netscape 4 zich goed te laten gedragen.

    Daarnaast vermoed ik dat de buistente div ook een position : relative heeft meegekregen, om de absolute positioning binnen het buitenste blok te laten gebeuren.


    Bijdrager
    iBert

    De oplossing hiervoor vind je op pagina 393 onderaan. Omdat er nogal wat browsers zijn die problemen hebben met float, gaat hij float emuleren op deze manier zonder dat er JavaScript aan te pas moet komen.


    Bijdrager
    MacBeer

    Ik heb dit boek vaker zien verschijnen op dit forum. Kun je het aanraden aan iemand (moi) die vanuit het ‘niets’ met CSS wil beginnen? Of is dit meer een boek als verdieping in de CSS en moet je al kennis ervan hebben?
    Het is in het Engels, maar zijn er ook (goede) boeken in het Nederlands?


    Bijdrager
    tennapel

    Het Zeldman boek is geschreven voor webdesigners die gewend zijn om met spacer-gifs en tables te werken, dus kennis hebben van HTML, maar nog niet van CSS.

    Ik kan je geen Nederlandstalige boeken aanbevelen, maar veel van deze boeken worden ook naar het Nederlands vertaald. Misschien dat het Zeldman boek ook al vertaald is.


    Bijdrager
    MacBeer
    ”tennapel”

    Het Zeldman boek is geschreven voor webdesigners die gewend zijn om met spacer-gifs en tables te werken, dus kennis hebben van HTML, maar nog niet van CSS.

    Spacers-GIFS…… tables…. Yep, that’s me :D
    Maar toch, hoewel de mogelijkheden van CSS ver uitstijgen boven HTML merk ik dat als ik echt wil dat iets op een bepaalde afstand moet staan van een item, dat ik spacer-gif’s en tables gebruik.
    Maar goed, dit weegt niet op tegen de typografische mogelijkheden die CSS biedt.

    Ik denk dat ik het boek ga bestellen, kan ik ook snel meepraten (en vraagjes over CSS posten).


    Bijdrager
    iBert
    ”MacBjorn”

    Spacers-GIFS…… tables…. Yep, that’s me :D
    Maar toch, hoewel de mogelijkheden van CSS ver uitstijgen boven HTML merk ik dat als ik echt wil dat iets op een bepaalde afstand moet staan van een item, dat ik spacer-gif’s en tables gebruik.
    Maar goed, dit weegt niet op tegen de typografische mogelijkheden die CSS biedt.

    Ik denk dat ik het boek ga bestellen, kan ik ook snel meepraten (en vraagjes over CSS posten).

    Het boek is een echte aanrader Bjorn. Hiervoor zag ik CSS ook als muggezifterij. “Waarom iets doen met CSS terwijl ik het ook gedaan krijg met gewone HTML op de klassieke methodes?”

    Het is anders dan beginnersboeken. Het geeft ruime uitleg over de belangerijkste aspecten, en bouwt langzamerhand een goede kennis op. Dit is echt iets wat je niet kan aanleren door tutorials op internet en dergelijke.

    Als je er even mee bezig bent, ontdek je pas hoe groot de mogelijkheden wel niet zijn. Het is absoluut geen anti-design, gewoon een andere manier van design en denken.


    Bijdrager
    WebJ

    Misschien een domme vraag maar waar dienen spacer-gifjes voor? Ik zie ze af en toe nog wel maar ik heb het effect ervan nooit gesnapt en heb het zelf ook nooit gebruikt…


    Bijdrager
    MacBeer
    ”WebJ”

    Misschien een domme vraag maar waar dienen spacer-gifjes voor? Ik zie ze af en toe nog wel maar ik heb het effect ervan nooit gesnapt en heb het zelf ook nooit gebruikt…

    Als je perse wil dat een tabel een bepaalde maat houdt, dan kun je er een gifje in plaatsen met dezelfde kleur als de achtergrond. Op die manier kan je tabel nooit kleiner worden. Je kan dit ook gebruiken om tekst om een afbeelding te laten lopen. Maar dit is me een gehannes van jawelste. Hiervoor MOET je CSS weten te gebruiken, anders ziet het er niet uit. Je hebt uiteindelijk minder controle dan dat je denkt.


    Bijdrager
    Syndic

    Ik heb vanmiddag – uiteraard op kosten van de zaak – Zeldman’s boek besteld. Krijg ‘m deze week nog binnen. Echt zwaar verslavende materie is het :D Ik begin zoals bij meer freakdingen die ik heb nu ook alweer te denken in CSS, maar dan in het dagelijkse leven. Bureau opruimen in de vorm van <div> enzo. Als ik nu hier m’n urenbriefje neerleg dan past daar absoluut m’n liniaaltje nog wel:P


    Bijdrager
    Martens

    Thanks voor de reacties, CSS is wel flink opletten nog, maar ik wordt er steeds handiger in gelukkig. ;]

    Het boek is zeker een aanrader, hoewel het meer bedoeld is om je duidelijk te maken waar CSS voor is en waar je het voor kunt gebruiken. Naast CSS wordt ook accessibility besproken en verder staan er nog tal van tips over wat wel en niet te doen als je een site maakt. Er is een Nederlandse vertaling, maar het voorbeeldhoofdstuk op www.zeldman.com vond ik niet bijzonder fijn lezen.

    Nog een laatste vraag overigens, niet echt een nieuwe thread waard:

    Om duidelijk te houden welke <div> eindigt doe ik nu dit:

    [code:1:9ed7d8af05]
    <div id="wrapper">

    </div><!– wrapper –>
    [/code:1:9ed7d8af05]

    Wat ik me nu afvroeg is: Mag dit ook? (Zie onder:)

    [code:1:9ed7d8af05]
    <div id="wrapper">

    </div id="wrapper">
    [/code:1:9ed7d8af05]


    Moderator
    Adriaan Mol

    Mogen? De browsers zullen het best goed vinden.. maar HTML is hiërarchisch opgebouwd, dus is het niet nodig om te vertellen welke <div> je sluit.


    Bijdrager
    Jesper

    Waar ken ik dat boek kopen?:lol:


    Bijdrager
    Syndic

    Bijdrager
    Martens

    Ik heb hem zelf bij www.computerboek.nl gekocht. Voor 3 uur bestellen is de volgende dag in huis en het was met verzendkosten meegerekend iets goedkoper dan de andere winkels die ik had geprobeerd.

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

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