CSS tut - Deel 1

Door Jan Koehoorn, 18 jaar geleden, 4.300x bekeken

CSS positioning

Gesponsorde koppelingen

Inhoudsopgave

  1. Inleiding
  2. position: static;
  3. position: relative;
  4. position: absolute;
  5. Nuancering absolute
  6. position: fixed;
  7. Internet Explorer ellende
  8. Tot slot

 

Er zijn 21 reacties op 'Css tut deel 1'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Robert Deiman
Robert Deiman
18 jaar geleden
 
0 +1 -0 -1
@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.
Jan Koehoorn
Jan Koehoorn
18 jaar geleden
 
0 +1 -0 -1
@ 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.
Jan Koehoorn
Jan Koehoorn
18 jaar geleden
 
0 +1 -0 -1
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.
- SanThe -
- SanThe -
18 jaar geleden
 
0 +1 -0 -1
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.
Jan Koehoorn
Jan Koehoorn
18 jaar geleden
 
0 +1 -0 -1
Dank SanThe, ook voor de spellingcorrecties :-)
Winston Smith
Winston Smith
18 jaar geleden
 
0 +1 -0 -1
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?
Jan Koehoorn
Jan Koehoorn
18 jaar geleden
 
0 +1 -0 -1
Hoi Kasper,

die parallel met die knikkers heb ik uit mijn duim gezogen.
Winston Smith
Winston Smith
18 jaar geleden
 
0 +1 -0 -1
Goed gevonden dan!
Kalle P
Kalle P
18 jaar geleden
 
0 +1 -0 -1
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.


18 jaar geleden
 
0 +1 -0 -1
@Jan: Goeie tut!
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]-->
Lissy Pixel
Lissy Pixel
18 jaar geleden
 
0 +1 -0 -1
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!!
Hipska BE
Hipska BE
18 jaar geleden
 
0 +1 -0 -1
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
Jan Koehoorn
Jan Koehoorn
18 jaar geleden
 
0 +1 -0 -1
@ iedereen: bedankt voor de positieve reacties.
Pim Vernooij
Pim Vernooij
18 jaar geleden
 
0 +1 -0 -1
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
Roland Baas
Roland Baas
18 jaar geleden
 
0 +1 -0 -1
looking forward to the next!
Danielle
Danielle
18 jaar geleden
 
0 +1 -0 -1
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.
Michel
michel
18 jaar geleden
 
0 +1 -0 -1
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!
Jan Koehoorn
Jan Koehoorn
18 jaar geleden
 
0 +1 -0 -1
@ iedereen: erg blij met jullie reakties. Ik ben aan het broeden op deel 4 ;-)
Mebus  Hackintosh
Mebus Hackintosh
17 jaar geleden
 
0 +1 -0 -1
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>
Jan Koehoorn
Jan Koehoorn
17 jaar geleden
 
0 +1 -0 -1
@Mebus: heb je een voorbeeld online staan?
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jordy
Jordy
17 jaar geleden
 
0 +1 -0 -1
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...

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. Inleiding
  2. position: static;
  3. position: relative;
  4. position: absolute;
  5. Nuancering absolute
  6. position: fixed;
  7. Internet Explorer ellende
  8. Tot slot

Labels

  • Geen tags toegevoegd.

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.