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.
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:Op vrijdag 30 januari 2009 22:11 schreef veldmuis het volgende:
[..]
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
Daar stappen alle browsers op over (nou ja, Safari, Firefox, etc doen het al eeuwen natuurlijk), omdat het veel logischer is. Je kunt onmogelijk fontgroottes wijzigen zonder ergens een lay-out te breken, omdat je nou eenmaal beperkte ruimte e.d. hebt.quote:Op zaterdag 31 januari 2009 00:43 schreef n8n het volgende:
In Safari schaalt nu iig de hele lay-out mee als ik de fontgrootte wijzig, dat zou ook in IE6 zo moeten zijn.
IE6 doet het niet en zal dat ook niet meer gaan doen
Ik bedoel juist zonder ondersteuning van de browser. Probeer het eens zou ik zeggen (als je daar nog mogelijkheid toe hebt). Safari doet het namelijk niet, is ook niet nodig als je correct met em's werkt.
“Specialization is for insects”.—Robert Heinlein
True, maar ik had het idee dat n8n dat punt even vergat.quote:
[..]
Daar ben je zelf bij natuurlijk. Je kunt toch prima nagaan wat de fontgrootte van de parent is?
Ik weet niet wat een gebruiker doet met de instellingen, dus vind ik het handiger om een bekend punt als uitgangspunt te nemen. Daarbij kan die standaard ook nog browserafhankelijk zijn, en misschien zelfs fontafhankelijk.quote: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"?
Niet bedoeld als sneerquote:Toch wel, en die deze opmerking lijkt meer op een sneer dan op een steekhoudend argument (correct me if I'm wrong)
Ik heb hier geen IE (laat staan IE6) om mee te kijken. Nu.nl/tvgids gebruikt idd alleen em-fonts, dit in tegenstelling tot de gewone nu.nl site. Mooi vergelijkingsmateriaal.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
Dat ben ik ook nietquote:NB: Het design daarvan heeft niet altijd ruimte voor grote fonts, daar kan ik ook niks aan doen
Maar de site(s) van nu.nl heb ik niet gemaakt.
Ik welquote:Op zaterdag 31 januari 2009 01:05 schreef Light het volgende:
Dat ben ik ook niet
Tenminste: die TV-gids (of was dat al duidelijk?) Ik moet stiekem wel bekennen dat ik normaal ook liever px gebruik dan relatieve units
[ Bericht 7% gewijzigd door Roy_T op 31-01-2009 02:31:50 ]
Ik vind relatieve units wel erg handig bij dingen als line-height en bij margins en paddings van headers en paragrafen. Dan hoef je dat niet bij iedere aanpassing in de fontgrootte aan te passenquote:
Ik moet stiekem wel bekennen dat ik normaal ook liever px gebruik dan relatieve units
Eensch! Dat zijn inderdaad de uitzonderingen. Voor line-height gebruik ik dan vaak ook gewoon percentages ipv em, zoals "line-height: 150%".quote:Op zaterdag 31 januari 2009 08:45 schreef Light het volgende:
[..]
Ik vind relatieve units wel erg handig bij dingen als line-height en bij margins en paddings van headers en paragrafen. Dan hoef je dat niet bij iedere aanpassing in de fontgrootte aan te passen
Ik gebruik altijd em's, eerst zet ik wel de grootte van de em op 10 px, wat het rekenen een stuk makkelijker maakt. Dit doe je met html { font-size: 62.5%; }, zie hier voor meer uitleg. Het enige waarvoor ik tegenwoordig geen em's meer voor gebruik is de breedte van de lay-out (of ik gebruik een max-width) en de afmetingen van afbeeldingen omdat dit bij vegroting de kwaliteit teniet doet.
“Specialization is for insects”.—Robert Heinlein
Leuk stukje tekst, bij die link.quote:
Ik gebruik altijd em's, eerst zet ik wel de grootte van de em op 10 px, wat het rekenen een stuk makkelijker maakt. Dit doe je met html { font-size: 62.5%; }, zie hier voor meer uitleg. Het enige waarvoor ik tegenwoordig geen em's meer voor gebruik is de breedte van de lay-out (of ik gebruik een max-width) en de afmetingen van afbeeldingen omdat dit bij vegroting de kwaliteit teniet doet.
Misschien ligt het aan mij, maar ik heb nog geen standaard corpsgrootte gezien bij het W3C. Waar kan ik dat vinden?quote:Het eerste wat je moet weten is de standaard corpsgrootte, dus zonder dat jij er in je css iets aan veranderd hebt. Dit is door W3C vastgesteld op 16px.
Even een tussendoortje, want ik neem aan dat hier de css guru's rond hangen.
Willen jullie even kijken naar mijn topic in dezelfde sectie als deze?
Bedankt
Willen jullie even kijken naar mijn topic in dezelfde sectie als deze?
Bedankt
Waar het te vinden is weet ik niet, en ook niet of de w3c het wel heeft vastgelegd. Wat ik wel weet is dat (bijna?) elke browser een standaard corpsgrootte van 16px heeft voor platte tekst. Kijk maar bij elke wilekeurige browser in de voorkeuren. Het voordeel van em's is dan ook, als iemand de corpsgrootte op bijvoorbeeld 18px instelt, en alle developers zouden em gebruiken, alle websites voor die persoon direct een groter font en eventueel een grotere lay-out hebben. Maargoed de wereld is niet perfect, zeker niet in webdesign.quote:
Misschien ligt het aan mij, maar ik heb nog geen standaard corpsgrootte gezien bij het W3C. Waar kan ik dat vinden?
“Specialization is for insects”.—Robert Heinlein
