DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Vorige delen:
[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deeltje 8
[CSS] voor dummies - deel 9
[CSS] voor dummies - deel 10
En hier gaan we vrolijk verder
[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deeltje 8
[CSS] voor dummies - deel 9
[CSS] voor dummies - deel 10
En hier gaan we vrolijk verder
teevaupee
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
IE 8 beta 2 werkt ookquote:Op maandag 26 januari 2009 22:44 schreef Swetsenegger het volgende:
Met de doctype lijkt hij het nu op alle browsers goed te doen. Getest in
Safari 3.2.x Mac
Firefox 3.0.xx Mac
Opera 9.6x Mac
IE 7.0.x Windows
Chrome 1.0.x Windows
Opera 9.6x Windows ook
http://test.xploise.nl/align.html
In IE6 werkt het niet.quote:Op dinsdag 27 januari 2009 08:47 schreef Swetsenegger het volgende:
[..]
IE 8 beta 2 werkt ook
Opera 9.6x Windows ook
http://test.xploise.nl/align.html
12tvp
“There’s class warfare, all right, but it’s my class, the rich class, that’s making war, and we’re winning.”
― Warren Buffett
― Warren Buffett
quote:
| 1 2 3 4 5 | if (typeof document.body.style.maxHeight == "undefined") { document.write('<p class="emphasize"> Please update your browser!</p>') } </script> |
Misschien leuk om ook hier een wat uitgebreidere startpost te hebben met een aantal handige aan te vullen links.
Wat is CSS?
Cascading Style Sheets (afgekort tot CSS) is een manier om de vormgeving voor een serie webpagina's in één keer vast te leggen. De informatie over de vormgeving voor het hele document wordt toegevoegd aan de HTML-code ervan. Die informatie kan in het document zelf staan, maar ook in een extern document dat wordt geïmporteerd. Een dergelijk apart geïmporteerd document wordt ook wel stylesheet genoemd. Een stylesheet biedt de mogelijkheid inhoud en vormgeving van een document van elkaar te scheiden en op die manier een consistente vormgeving over meerdere documenten te bereiken.
Lees verder op Wikipedia.
Ontwikkeling
Tip: Concrete voorbeelden Css3 (en).
De huidige ontwikkelingen in Css (en).
Educatief
Tip: Css2 referenties (en).
Een introductieles CSS.
Een online cursus CSS (en).
Doe mee
Tip: Laat hier je Css valideren (en).
Stijleer hier een bestaand xHTML-document.
Stijleer hier een bestaand xHTML-document (en).
Wat is CSS?
Cascading Style Sheets (afgekort tot CSS) is een manier om de vormgeving voor een serie webpagina's in één keer vast te leggen. De informatie over de vormgeving voor het hele document wordt toegevoegd aan de HTML-code ervan. Die informatie kan in het document zelf staan, maar ook in een extern document dat wordt geïmporteerd. Een dergelijk apart geïmporteerd document wordt ook wel stylesheet genoemd. Een stylesheet biedt de mogelijkheid inhoud en vormgeving van een document van elkaar te scheiden en op die manier een consistente vormgeving over meerdere documenten te bereiken.
Lees verder op Wikipedia.
Ontwikkeling
Tip: Concrete voorbeelden Css3 (en).
De huidige ontwikkelingen in Css (en).
Educatief
Tip: Css2 referenties (en).
Een introductieles CSS.
Een online cursus CSS (en).
Doe mee
Tip: Laat hier je Css valideren (en).
Stijleer hier een bestaand xHTML-document.
Stijleer hier een bestaand xHTML-document (en).
“Specialization is for insects”.—Robert Heinlein
Als iets niet werkt in IE6 maar de site wordt er niet onbruikbaar door, dan ga ik er geen workaround voor zoeken.quote:
ik heb een probleem.
hier heb ik wat tekst
Het probleem is dat de tekst aan de bovenkant van m´n tekstvak aanzit. Maar ik zou graag willen dat ie tegen de onderkant aan komt te zitten. Hoe doe ik dat?
hier heb ik wat tekst
| 1 2 3 4 5 6 7 8 | .style1 {font-weight: bold} </style> <div class="footer"> <p>tekst <br/>tekst <br/><span class="style1">tekst</span></p> </div> |
Het probleem is dat de tekst aan de bovenkant van m´n tekstvak aanzit. Maar ik zou graag willen dat ie tegen de onderkant aan komt te zitten. Hoe doe ik dat?
laat maar ik ben er al uitquote:Op dinsdag 27 januari 2009 16:56 schreef Roy_T het volgende:
Wat is een tekstvak?
Het was een stukje HTML in een php stylesheet bestandje.
Volgens mij ben ik nu tegen een ontwerp aangelopen die onmogelijk is 
overal moet de layout aangepast worden in de breedte en hoogte volgens mij is dat haast onmogelijk met divs
heb je de breedte 100% goed.. werkt de hoogte niet en vica versa
of is er iemand die heel toevallig wel weet dat het kan en hoe het moet?
bvd!
overal moet de layout aangepast worden in de breedte en hoogte volgens mij is dat haast onmogelijk met divs
heb je de breedte 100% goed.. werkt de hoogte niet en vica versa
of is er iemand die heel toevallig wel weet dat het kan en hoe het moet?
bvd!
Gaat niet werken inderdaad. Google eens op "faux columns", heb zo'n idee dat dat het probleem weleens op zou kunnen lossen.
Halp!
Hoe zorg ik ervoor dat de background van mijn content div netjes aansluit op mijn contentfooter div?
Hoe zorg ik ervoor dat de background van mijn content div netjes aansluit op mijn contentfooter div?
シ
Hij sluit netjes aan zo te zien, alleen is de hoogte van je content div niet gelijk aan x keer de hoogte van je achtergrondafbeelding (waardoor je dus aan het einde een halve achtergrondafbeelding ziet)
Misschien de contentfooter-div in de content-div plaatsen? Dan hoeft de contentfooter-div geen achtergrond te hebben, je ziet gewoon die van de content-div. Of is er iets speciaals waardoor dat niet kan?quote:Op vrijdag 30 januari 2009 17:49 schreef Chanty87 het volgende:
Halp!
[ afbeelding ]
Hoe zorg ik ervoor dat de background van mijn content div netjes aansluit op mijn contentfooter div?
De onderste rand neem ik aan. De "content div" heeft een herhalend patroon, en de footer niet.quote:Op vrijdag 30 januari 2009 19:01 schreef Light het volgende:
Of is er iets speciaals waardoor dat niet kan?
En dan het probleem naar de header verplaatsenquote:Op vrijdag 30 januari 2009 19:25 schreef veldmuis het volgende:
In de contentdiv met de background-position rommelen?
Alles juist op line-heigt zetten en hopen dat alle browsere meewerken. Dan zou ik wel de css resetten.
“Specialization is for insects”.—Robert Heinlein
M'n layout is als volgt opgezet:
- contenttop div
- content div
- contentfooter div
Alleen de bg van de content div heeft een repeat. Het irritante is dat de inhoud van de content div variabel is/wordt...
M'n CSS trouwens:
- contenttop div
- content div
- contentfooter div
Alleen de bg van de content div heeft een repeat. Het irritante is dat de inhoud van de content div variabel is/wordt...
M'n CSS trouwens:
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.シ
Dan dus de footer in de contentdiv plaatsen.
Absolute op de bottom van de contentdiv zetten, geen background meegeven.
Absolute op de bottom van de contentdiv zetten, geen background meegeven.
Maar dan zit te contentfooter div over de content div heen, en aangezien mijn achtergronden transparante gifs zijn is het alsnog een zooitje onderin.quote:
Dan dus de footer in de contentdiv plaatsen.
Absolute op de bottom van de contentdiv zetten, geen background meegeven.
Hmm, bedenk me net dat ik die ringen links ook als aparte div kan doen over de alle content divs heen...
シ
Je kan de contentdiv toch een padding-bottom geven van 200px?
Dit oplossen met een extra div voor een achtergrondplaatje is niet nodig!
Dit oplossen met een extra div voor een achtergrondplaatje is niet nodig!
Of de content en de footer desnoods samen in een container-div en deze de achtergrond geven.
“Specialization is for insects”.—Robert Heinlein
Lijkt me zelfs niet nodig.quote:Op vrijdag 30 januari 2009 22:09 schreef n8n het volgende:
Of de content en de footer desnoods samen in een container-div en deze de achtergrond geven.
Hoe minder elementen hoe mooier!
Schiet je toch allemaal niks mee op? Hij heeft een repeterende afbeelding nodig voor de div met variabele hoogte, en een afbeelding voor de "onderrand". Een "lelijke aansluiting" is dan niet te vermijden, tenzij je met een grid based design werkt (zoals eerder gezegd: vaste line height en alle elementen een veelvoud van die hoogte geven, en de footer ook).
ik ben het met je eens, ik had niet gelezen of er nog iets in de footer kwam, omdat je over de 200px padding begon. maar anders vind ik het persoonlijk wel handig om bijvoorbeeld links te stijlen die in de content en footer anders vormgegeven zijn. Dan typ je gewoon #content a en #footer a, bijvoorbeeld.quote:
[..]
Lijkt me zelfs niet nodig.
Hoe minder elementen hoe mooier!
“Specialization is for insects”.—Robert Heinlein
Dat kan niet want de content div krijgt een variabele hoogte en heeft dus een herhalende achtergrond nodig.quote:
Of de content en de footer desnoods samen in een container-div en deze de achtergrond geven.
Dan zit de footer op de bodem van de viewport terwijl de content div nog verder doorlooptquote:
Je kan de contentdiv toch een padding-bottom geven van 200px?
Dit oplossen met een extra div voor een achtergrondplaatje is niet nodig!
シ
Hey, iemand die leestquote:
Schiet je toch allemaal niks mee op? Hij heeft een repeterende afbeelding nodig voor de div met variabele hoogte, en een afbeelding voor de "onderrand". Een "lelijke aansluiting" is dan niet te vermijden, tenzij je met een grid based design werkt (zoals eerder gezegd: vaste line height en alle elementen een veelvoud van die hoogte geven, en de footer ook).
Ben alleen inderdaad een zij, tyvm 
シ
Dan los je in ieder geval de overloop van #content naar #footer op. Maar heb je de vaste line-height al geprobeerd?quote:Op vrijdag 30 januari 2009 22:17 schreef Chanty87 het volgende:
[..]
Dat kan niet want de content div krijgt een variabele hoogte en heeft dus een herhalende achtergrond nodig.
[..]
Je maakt #content 200px langer dan 'natuurlijk' en daar komt #footer gewoon onder.quote:Dan zit de footer op de bodem van de viewport terwijl de content div nog verder doorloopt
edit: aha had dit net gemist.
quote:
M'n layout is als volgt opgezet:
- contenttop div
- content div
- contentfooter div
“Specialization is for insects”.—Robert Heinlein
Excusez-moiquote:Op vrijdag 30 januari 2009 22:19 schreef Chanty87 het volgende:
[..]
Hey, iemand die leest
Helder moment: probeer je contentfooter eens in je content div te zetten met de huidige achtergrondafbeelding (dan heb je in feite dus twee achtergronden over elkaar). Maak dan van de footer achtergrond de hoek linksboven transparant, ter breedte van zo'n ringband en tot net boven het de onderste afkadering).
Je kunt dan nog steeds een halve ring krijgen, maar dan wel helemaal onderaan, waar het misschien minder opvalt?
Je kunt dan nog steeds een halve ring krijgen, maar dan wel helemaal onderaan, waar het misschien minder opvalt?
Wordt het dan tijd om de em te introduceren in de CSS?quote:Op vrijdag 30 januari 2009 22:12 schreef Roy_T het volgende:
Schiet je toch allemaal niks mee op? Hij heeft een repeterende afbeelding nodig voor de div met variabele hoogte, en een afbeelding voor de "onderrand". Een "lelijke aansluiting" is dan niet te vermijden, tenzij je met een grid based design werkt (zoals eerder gezegd: vaste line height en alle elementen een veelvoud van die hoogte geven, en de footer ook).
Heb ik nooit echt mee gewerkt eigenlijk, maar daar lijkt me dit dan juist ideaal voor?
Het wordt gewoon tijd voor CSS3, met meerdere backgroundimagesquote:Op vrijdag 30 januari 2009 22:36 schreef Roy_T het volgende:
Helder moment: probeer je contentfooter eens in je content div te zetten met de huidige achtergrondafbeelding (dan heb je in feite dus twee achtergronden over elkaar). Maak dan van de footer achtergrond de hoek linksboven transparant, ter breedte van zo'n ringband en tot net boven het de onderste afkadering).
Je kunt dan nog steeds een halve ring krijgen, maar dan wel helemaal onderaan, waar het misschien minder opvalt?
Ach, als IE dat ondersteunt zitten we bij Windows 20 service pack 15.
em maakt volgens mij niet uit, em is fijner omdat het uitgaat van de browservoorkeuren, normaliter staat de standaard fontgrootte van een browser op 16px. 1em is standaard dus gewoon 16 pixels groot. Verdere voordelen zijn dat je het kan gebruiken om de lay-out schaalbaar te maken en dat IE fontgroottes in px niet schaalt.
Volgens mij moet je dan aan zoiets denken:
#content {
font-size: 62.5%; /* maakt 1em 10px groot */
line-height: 3.0em;
}
#content p {
line-height: 0.5em; /* anders heb je regelmarges van 30px */
}
Volgens mij moet je dan aan zoiets denken:
#content {
font-size: 62.5%; /* maakt 1em 10px groot */
line-height: 3.0em;
}
#content p {
line-height: 0.5em; /* anders heb je regelmarges van 30px */
}
“Specialization is for insects”.—Robert Heinlein
Je kunt ipv een procentuele grootte ook gewoon een grootte in pixels opgeven. Net zo duidelijk, en browseronafhankelijk. En een line-height van 0.5em zou ik niet doen, da's te klein voor de letters.quote:
em maakt volgens mij niet uit, em is fijner omdat het uitgaat van de browservoorkeuren, normaliter staat de standaard fontgrootte van een browser op 16px. 1em is standaard dus gewoon 16 pixels groot. Verdere voordelen zijn dat je het kan gebruiken om de lay-out schaalbaar te maken en dat IE fontgroottes in px niet schaalt.
Volgens mij moet je dan aan zoiets denken:
#content {
font-size: 62.5%; /* maakt 1em 10px groot */
line-height: 3.0em;
}
#content p {
line-height: 0.5em; /* anders heb je regelmarges van 30px */
}
Het hele idee van em is dat je dat juist wilt vermijdenquote:Op vrijdag 30 januari 2009 22:56 schreef Light het volgende:
Je kunt ipv een procentuele grootte ook gewoon een grootte in pixels opgeven.
Zoals gezegd kun je bijvoorbeeld in IE (iig IE6) als gebruiker de fonts niet groter/kleiner maken wanneer je px gebruikt. Wanneer je em gebruikt wel.
Maar zo wordt het niet berekend. Relatieve groottes (waaronder dus die em-eenheid) zijn ten opzichte van het betreffende element. Uitzondering is bij font-size, dan gaat het ten opzichte van omvattende element. Dan heeft het ook zin om font-size: 1.2em te doen.quote:
Aan de andere kant, je weet niet wat de fontgrootte is (die wordt vast eerder in het document voor een ander element ook al ergens ingesteld). En daarbij vind ik het geen handig idee om er maar blind op te vertrouwen dat een gebruiker z'n browserinstellingen niet heeft aangepast. Of definieer je ook geen achtergrondkleur als je een witte achtergrond wilt hebben?quote:
[..]
Het hele idee van em is dat je dat juist wilt vermijden
Zoals gezegd kun je bijvoorbeeld in IE (iig IE6) als gebruiker de fonts niet groter/kleiner maken wanneer je px gebruikt. Wanneer je em gebruikt wel.
Daar ben je zelf bij natuurlijk. Je kunt toch prima nagaan wat de fontgrootte van de parent is?quote:Op zaterdag 31 januari 2009 00:26 schreef Light het volgende:
Aan de andere kant, je weet niet wat de fontgrootte is (die wordt vast eerder in het document voor een ander element ook al ergens ingesteld).
Dat maakt toch niks uit? Het mooie van een relatieve unit is dat het dus meeschaalt (vandaar het "relatieve"). De browserinstelling van de gebruiker maakt dus niets uit. Of denk je liever "de gebruiker stelt z'n browser in op "grote letters", maar daar heb ik niets mee te maken, hij doet het maar met 10px"?quote:En daarbij vind ik het geen handig idee om er maar blind op te vertrouwen dat een gebruiker z'n browserinstellingen niet heeft aangepast.
Toch wel, en die deze opmerking lijkt meer op een sneer dan op een steekhoudend argument (correct me if I'm wrong)quote:Of definieer je ook geen achtergrondkleur als je een witte achtergrond wilt hebben?
Kijk anders eens hoe relatieve units (em) prima werken op de NU.nl TV-gids, ook in IE6. En daar heb ik echt geen halsbrekende toeren voor uit hoeven halen
NB: Het design daarvan heeft niet altijd ruimte voor grote fonts, daar kan ik ook niks aan doen
Maar dat doet niets af aan het prima bruikbare em. En ja, dit is ook een shameless plug om aan te geven dat ik echt geen n00b ben op dit gebied.
Klopt, heb het even geprobeer en ik kreeg het alleen voor elkaar 20px als maximale consistente afstand in te stellen waarbij de tekst nog leesbaar is.quote:
[..]
Maar zo wordt het niet berekend. Relatieve groottes (waaronder dus die em-eenheid) zijn ten opzichte van het betreffende element. Uitzondering is bij font-size, dan gaat het ten opzichte van omvattende element. Dan heeft het ook zin om font-size: 1.2em te doen.
http://n8n.nl/articles/line-height/zodanmaar.html
Als je dan het patroon om de 20 px laat herhalen zal het altijd uitkomen, met 40px heb je dus 50% kans dat de helft weg valt.
“Specialization is for insects”.—Robert Heinlein
Vind het bij mijn eigen site beter werken, als het inderdaad zo werkt als gedocumenteerd. in Safari schaalt nu iig de hele lay-out mee als ik de fontgrootte wijzig, dat zou ook in IE6 zo moeten zijn.quote:
Kijk anders eens hoe relatieve units (em) prima werken op de NU.nl TV-gids, ook in IE6. En daar heb ik echt geen halsbrekende toeren voor uit hoeven halen
“Specialization is for insects”.—Robert Heinlein
| Forum Opties | |
|---|---|
| Forumhop: | |
| Hop naar: | |