CSS menu's

http://www.exploding-boy.com/2005/12/29/14-free-vertical-css-menus/ heeft een serie css menu’s gemaakt die u zonder meer kunt gebruiken.

Apple's aanpak

Hoe begin je? Alleen nog maar div’s of toch een tabel? Wat wil je?

U weet dat ik tabellen alleen wil gebruiken voor ‘tabulaire informatie’, bijvoorbeeld een vergelijking van drie zaken op verschillende aspecten. Op de x-as de zaken, op de y-as de aspecten. In het grid dat zo ontstaat kun je heel wat cijfertjes of gegevens kwijt.

Voor lay-out van pagina’s gebruik ik div’s die ik met css op hun plaats zet.

Dat zou een onderdeel van mijn ‘best practice’ zijn. Apple doet dat een stuk vollediger en misschien wel realistischer op een pagina die heet Web Page Development: Best Practices.

Horizontale verschuiving

In een ontwerp verschuift een pagina soms als de tekst niet lang genoeg is om een scrollbalk aan de rechterkant van het scherm op te roepen. De oplossing is om in het css-bestand het volgende op te nemen:

Buiten de grens

Vanochtend las ik op Fadtastic een bericht over ontwerp waar wordt gespeeld met de borders van de pagina. Dit effect komt tot stand door het oproepen van een plaatje in de achtergrond, en in dit plaatje de border opnemen.

Genoemde voorbeelden:

Lousco
Dev.upian.com

Fixed doosje

Ik vroeg me af of ik deze site al een keer had genoemd. De css-discussielijst bracht me er vandaag weer eens naar toe. Waar gaat het over? Het concept van een vak dat op dezelfde plek blijft staan als er naar beneden wordt gescrolld. Op veel websites wordt hiervoor javascript e.d. ingezet. Tagsoup maakt duidelijk dat het ook zonder kan.

Kolommen

De css-discussielijst houdt een wiki bij, wat een prima startpunt is bij het ontwerp van een pagina. Zo bracht een post me bij een fraaie lijst met links naar driekolommen ontwerpen.
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
De site van Alex Robinson biedt een handige tool om een basislayout te genereren:
http://www.fu2k.org/alex/css/layouts/3Col_OrderedAbsolute.mhtml

Verticaal centreren van afbeelding

Steve Clay is een ontwerper die vrijwel iedere dag aanwezig is op de discussielijst voor css-enthousiasten, met relevante antwoorden op soms minder terzake doende vragen. Zo ging hij deze week in op een vraag hoe een afbeelding verticaal kan worden gecentreerd als het plaatje zich in een omvattend element bevindt (‘fotolijstje’ of zoiets). Op zijn website http://mrclay.org/web_design/centered_image/ beschrijft hij een methode om dit te doen.

Snelmenu

In aanvulling op een eerdere webtip vond ik deze bij Zeldman. Op de onderstaande site zijn negen verschillende menu’s op te halen, gratis en voor niks.
http://www.e-lusion.com/design/menu/

Vast element in IE

Als het nodig is om een element een vaste positie op het scherm te geven, is position: fixed; de methode. Ook al scrollen we naar beneden, het gefixeerde element blijft op dezelfde positie staan in de viewport (het gedeelte van het scherm dat we daadwerkelijk zien). Alleen ondersteunt Internet Explorer aan dit alles, en laat het element in het niets verdwijnen wanneer naar beneden wordt gerold (of klikt u nog op dat balkje?).
De pagina van Eric Bednarz gaat in op de mogelijkheden om dit te verhelpen in zowel IE 6 als de oudere 5 versies.
http://devnull.tagsoup.com/fixed/

Rollover buttons

Methode voor het maken van rollover buttons, zonder javascript.
http://www.digitalmediaminute.com/article/89

Stileer een hr

De manier om een horizontale lijn op een pagina te plaatsen is tegenwoordig om een border om een element te plaatsen. De reden hiervoor is dat het hr-element in browsers op verschillende manieren weergegeven worden. Via css kunnen we zo’n lijn een kleur geven, en dat werkt in Mozilla maar niet in bijvoorbeeld Opera. Sommige browsers vinden het een ‘block’ element, andere weer zien het element als ‘inline’ of ‘inline-block’. Een helder artikel over het stileren van een hr-element is hier te vinden:
http://www.sovavsiti.cz/css/hr.html

Box model hacks

Er zijn een aantal methodes om de bekende ‘box model hack’ in te voeren, u weet wel de truc om Internet Explorer valse waarden te voeren, en toch de juiste door te geven aan browsers die wel hun best doen.
De eerste waar we op in gaan is de
Escaped character methode
De naam is wat het doet: een \ (escape) zorgt ervoor dat IE over de regel heenkijkt en pas weer bij de volgende selector begint te lezen. Andere browsers hebben geen last van de \ en interpreteren gewoon de laatste regel:

p {
        width: 200px;
        margin-left: 20px;
}
* html p {
        width: 200px;
        \width: 220px;
        w\idth: 200px;
}

De tweede methode is Alternate Box Model Hack. Dit is een vereenvoudiging van de eerste methode die er op neer komt dat de laatste regel gewoon wordt weggelaten. Werkt ook.

p {
        width: 200px;
        margin-left: 20px;
}
* html p {
        width: 220px;
        w\idth: 200px;
}

Dan is er een manier die wat minder net is (maar geen hacks nodig heeft): ‘Div’ities’, die inhoudt dat we in één div de breedte en hoogte aangeven, en in een andere padding (‘bladvulling’ zou ik moeten schrijven, maar begrijpt u het dan?) en marge. Als volgt:

#div1 { float: left; width: 300px; }
.innerdiv { padding: 10px; }

Het bepalen van marge en padding kan natuurlijk direct op een element (bijvoorbeeld een paragraaf) dat in die div zit, zonder een aparte div te maken:

#div { float: left; width: 300px; }
p { padding: 10px; }

Een div centreren

Het is vrij eenvoudig om een div te centreren. De opzet bestaat eigenlijk uit twee stappen. De eerste is het aangeven dat zowel de linker- als de rechtermarge van de div ‘automatisch’ moeten worden bepaald, door margin: 0 auto; te declareren. Als het niet al te snuggere jongetje uit de klas begrijpt IE dit niet. Om deze browser een handje te helpen zetten we de volgende stap door text-align: center; aan de body toe te voegen. En klaar is onze gecentreerde div.

body {
text-align: center;
min-width: 600px;
}
#wrapper {
margin:0 auto;
width:600px;
text-align: left;
}

Door te schrijven dat de tekst in de body gecentreerd moet worden, geldt dit vanzelfsprekend - door het erven van eigenschappen - ook voor de tekst in de div. Door het toevoegen van text-align:left aan het doosje wordt dit verholpen.
De vraag is nu waarom de body een min-width aan zijn broek krijgt. Dit heeft te maken met gedrag in Mozilla. Als we dit niet vermelden, steekt de helft van de gecentreerde div aan de linkerkant uit de pagina. Het opgeven van een minimale breedte is de oplossing.
Voor meer informatie over de auto-margin methode: http://www.andybudd.com/…/centering_a_div

Editor op het web

Wie een snelle editor zoekt om een tekst te hmtl-en, kan terecht op http://daringfireball.net/projects/markdown/dingus. De Perl-module kan ook worden geïntegreerd met Movable Type, en dat is nu precies de tool waarmee deze pagina's worden bijgehouden. De link vond ik op de pagina van Todd Dominey. Aanbevolen kost!

Wrap tekst rond afbeelding

Op Big Baer (vraag me niet naar het waarom van de 'ae' in beer) is een tutorial te vinden over het plaatsen van tekst naast een afbeelding. Het werkt met 'sandbag' div's. Sandbag is naast zandzak ook een werkwoord, dat dwingen betekent. De divs dwingen de tekst om zich te voegen naar de afbeelding.
http://www.bigbaer.com/css_tutorials/css.image.text.wrap.htm

In de roos

Wanneer je een layout wil maken met een "http://www.wpdfd.com/editorial/thebox/deadcentre4.html":kader precies in het midden.

De familie Font

Bij de keuze voor de volgorde van lettertypes in een font-declaratie lijkt een keuze voor de door Microsoft geïnstalleerde fonts gerechtvaardigd. Dat is nu eenmaal het platform waar de meeste bezoekers van uw site mee werken. Maar welke zijn aanwezig is een vraag die wordt opgelost op twee pagina's van Microsoft zelf. Daar wordt meer informatie gegeven over het lettertype en aangegeven bij welke MS-producten het standaard wordt geïnstalleerd.
http://www.microsoft.com/typography/fonts/default.asp
Lettertypes op de Mac:
http://www.microsoft.com/typography/fonts/mac.htm

Aan de hand van deze lijsten is gemakkelijk een overzicht te krijgen van de meest 'aanwezige' lettertypes.
Bij een voorkeur voor een weinig voorkomend lettertype, kan deze gerust op de eerste plek in een declaratie worden gezet, zolang er in diezelfde declaratie maar een algemener font wordt aangegeven.

Om een voorbeeld te geven:

body {
font-family: "Sassoon Primary", "Lucida Grande", Verdana, Helvetica,
Arial, sans-serif;
}

In deze code wordt eerst een afwijkend font genoemd, gevolgd door een veel voorkomend font op de Mac, een font dat op vrijwel alle Win en Mac-systemen voorkomt, en afgesloten door de default sans-serif.

jpg versus gif

Wanneer het om tekst gaat in een afbeelding (of andere ‘line art’) is gif de beste keuze. Jpegs zijn lossy, of het nu een groot of een klein bestand is, waardoor het er minder goed uit ziet. Bovendien zijn ze altijd gerasterd. Probeer hoge resolutie gif, met een anti-alias voor tekst. In bijvoorbeeld Fireworks wordt er standaard een ‘smooth anti-alias’ toegepast, wanneer er tekst wordt ingevoegd.

Tutorial over Float

Een uitgebreide tutorial over het floaten van een plaatje en tekst is te vinden op:
http://css.maxdesign.com.au/floatutorial/index.htm