CSS tut - Deel 1
Door Jan Koehoorn, 23 jaar geleden, 7.041x bekeken
CSS positioning
Gesponsorde koppelingen
Inhoudsopgave
- Inleiding
- position: static;
- position: relative;
- position: absolute;
- Nuancering absolute
- position: fixed;
- Internet Explorer ellende
- Tot slot
Er zijn 21 reacties op 'Css tut deel 1'
0 
-0 
-0
@Jan
COMPLETE EDIT:
Leuke tut, en duidelijk uitgelegd. Hopen dat csshulp.nl snel online is, dan daar ook posten :) Ben benieuwd naar je volgende tut.
En natuurlijk hopen dat dit inspireerd om meer met DIV's te gaan werken en minder met tables.
COMPLETE EDIT:
Leuke tut, en duidelijk uitgelegd. Hopen dat csshulp.nl snel online is, dan daar ook posten :) Ben benieuwd naar je volgende tut.
En natuurlijk hopen dat dit inspireerd om meer met DIV's te gaan werken en minder met tables.
0 -0
-0
@ Robert: aan lay-out voorbeelden heb je in deze tut nog niets, daarvoor is hij te basic. Ik wil graag dat mensen die de stap van tabellen naar CSS overwegen goed beslagen ten ijs komen. De hoogte van divs in CSS kom ik later op terug.
0 -0
-0
Ik snap wat je bedoelt, maar in een eerste kennismaking kun je nu eenmaal geen mooi uitziende resultaten behalen. Maar voor wie een voorproefje wil van wat je met CSS kunt doen: http://www.csszengarden.com.
Het principe van deze site is als volgt. De HTML is gegeven, daar mag je niet aan sleutelen. Het enige dat je mag doen, is het CSS bestand aanpassen. Alle pagina's daar hebben precies dezelfde HTML, maar zijn gekoppeld aan een ander stylesheet. Dat geeft wel ongeveer een indruk van de mogelijkheden.
Het principe van deze site is als volgt. De HTML is gegeven, daar mag je niet aan sleutelen. Het enige dat je mag doen, is het CSS bestand aanpassen. Alle pagina's daar hebben precies dezelfde HTML, maar zijn gekoppeld aan een ander stylesheet. Dat geeft wel ongeveer een indruk van de mogelijkheden.
0 -0
-0
Goede heldere tut. Ik heb zelf ook zitten stoeien met divs en inderdaad, vaak deden ze niet wat ik wilde. Door deze tut alleen al te lezen weet ik waarschijnlijk al waar het aan lag. Ben reuze benieuwd naar het vervolg.
0 -0
-0
Jan, jij maakt goede tutorials! Ik heb nu alweer dingen geleerd wat niet in mijn CSS boekje stond. Dat position: fixed bijvoorbeeld is reuze makkelijk. Ik had een oplossing om de footer ook in IE onderaan te krijgen wel makkelijk gevonden, aangezien ik daarmee nog wel eens heel erg heb lopen stoeien en IE toch nog de meest gebruikte browser is.
Hopelijk komt er ook iets meer uitleg over containers in de vervolgtutorial, evenals de @import regel (die was toch ook om specifieke regels te maken voor bijv. IE?)
En de parallel die je trekt met knikkers is grandioos gevonden! :) Zeer verhelderend! Heb je die zelf bedacht of ook uit je boek overgenomen?
Hopelijk komt er ook iets meer uitleg over containers in de vervolgtutorial, evenals de @import regel (die was toch ook om specifieke regels te maken voor bijv. IE?)
En de parallel die je trekt met knikkers is grandioos gevonden! :) Zeer verhelderend! Heb je die zelf bedacht of ook uit je boek overgenomen?
0 -0
-0
Hoi Kasper,
die parallel met die knikkers heb ik uit mijn duim gezogen.
die parallel met die knikkers heb ik uit mijn duim gezogen.
0 -0
-0
hartstikke bedankt Jan voor je duidelijke tutorial. Ben ook benieuwd naar het vervolg, dan pas ik mijn site er meteen op aan, want ik zit ook te klote met die tabellen.
0 -0
-0
@Jan: Goeie tut!
Maar misschien is het ook wel leuk om te vermelden dat Wikipedia ook de IE fixes gebruikt:
Maar misschien is het ook wel leuk om te vermelden dat Wikipedia ook de IE fixes gebruikt:
Quote:
<!--[if lt IE 5.5000]><style type="text/css">@import "/skins-1.5/monobook/IE50Fixes.css";</style><![endif]-->
<!--[if IE 5.5000]><style type="text/css">@import "/skins-1.5/monobook/IE55Fixes.css";</style><![endif]-->
<!--[if gte IE 6]><style type="text/css">@import "/skins-1.5/monobook/IE60Fixes.css";</style><![endif]-->
<!--[if IE]><script type="text/javascript" src="/skins-1.5/common/IEFixes.js"></script>
<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
<!--[if IE 5.5000]><style type="text/css">@import "/skins-1.5/monobook/IE55Fixes.css";</style><![endif]-->
<!--[if gte IE 6]><style type="text/css">@import "/skins-1.5/monobook/IE60Fixes.css";</style><![endif]-->
<!--[if IE]><script type="text/javascript" src="/skins-1.5/common/IEFixes.js"></script>
<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
0 -0
-0
Jan : Geweldige tut want wat ik weet van CSS is door trial and error zoals dit zo mooi heet (of haal ik nu weer twee gezegdes door elkaar hahaha) in iedergeval met dit soort tuts kom ik steeds een stapje verder en wellicht ga ik over om de totale site ook CSS te laten lopen i.p.v. de frames die ik nu heb :-)
Wat ik altijd prettig vind van jouw tuts is dat je dit zo herkenbaar schrijft zoals het voorbeeld met de knikkers!!
TOPPIES hoor!!
Wat ik altijd prettig vind van jouw tuts is dat je dit zo herkenbaar schrijft zoals het voorbeeld met de knikkers!!
TOPPIES hoor!!
0 -0
-0
hey fantastische tut zeg ;-) (y) wij wachten al op deel 2
eh, hoeveel delen schat je te maken?
hopelijk heel veel want ze zijn supergoed
eh, hoeveel delen schat je te maken?
hopelijk heel veel want ze zijn supergoed
0 -0
-0
Mooie tut :) ik gebruik zelf alleen nog maar css om te positioneren... het moet nu eindelijk eens duidelijk worden dat een tabel voor data is, niet voor lay-out :P
0 -0
-0
Zeer duidelijk. Boek wat mij ook enorm heeft geholpen enkele jaren terug was HTML Utopia: Designing Without Tables van Sitepoint. Vooral de appendix achterin is handig waarin alle properties van css 1 en grotendeels van 2 met omschrijving staan.
0 -0
-0
hey super leuke tutorial ! Ik ben me nu toch wat aan het verdiepen in CSS en dit (en die andere 2) zijn een goed begin. Ik kijk uit naar meer!
0 -0
-0
@ iedereen: erg blij met jullie reakties. Ik ben aan het broeden op deel 4 ;-)
0 -0
-0
hier iets leuks waardoor je transparante scrollbar hebt:)
{
scrollbar-arrow-color: #ff7849;
scrollbar-face-color: #54C900;
scrollbar-highlight-color: #54C900;
scrollbar-3dlight-color: #54C900;
scrollbar-shadow-color: #54C900;
scrollbar-darkshadow-color: #54C900;
scrollbar-track-color: #54C900;
}
<iframe src="" scrollbar="yes" width="100%" height="100%" frameborder="0" name="anime" allowtransparency=true style="filter: chroma(color=#54C900)"></iframe>
{
scrollbar-arrow-color: #ff7849;
scrollbar-face-color: #54C900;
scrollbar-highlight-color: #54C900;
scrollbar-3dlight-color: #54C900;
scrollbar-shadow-color: #54C900;
scrollbar-darkshadow-color: #54C900;
scrollbar-track-color: #54C900;
}
<iframe src="" scrollbar="yes" width="100%" height="100%" frameborder="0" name="anime" allowtransparency=true style="filter: chroma(color=#54C900)"></iframe>
0 -0
-0
deftige uitleg alleszins.
maar toch ??n opmerking, je spreekt over 5 mogelijke positions, je vernoemt inherit wel, maar legt niet uit wat het nu juist betekend...
maar toch ??n opmerking, je spreekt over 5 mogelijke positions, je vernoemt inherit wel, maar legt niet uit wat het nu juist betekend...
Om te reageren heb je een account nodig en je moet ingelogd zijn.
Inhoudsopgave
- Inleiding
- position: static;
- position: relative;
- position: absolute;
- Nuancering absolute
- position: fixed;
- Internet Explorer ellende
- Tot slot
PHP hulp
0 seconden vanaf nu