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.
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:Op vrijdag 30 januari 2009 21:26 schreef veldmuis het volgende:
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: | |