[CSS] voor dummies - deel 11

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  dinsdag 27 januari 2009 @ 00:04:26 #2
230788 n8n
Pragmatisch
pi_65441663


Tevens TVP
“Specialization is for insects”.—Robert Heinlein
  dinsdag 27 januari 2009 @ 01:20:45 #3
134533 donroyco
dus niet Donroyco
pi_65443191
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. :'(
  FOK!-Schrikkelbaas dinsdag 27 januari 2009 @ 08:47:09 #4
1972 Swetsenegger
Egocentrische Narcist
pi_65445031
quote:
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
IE 8 beta 2 werkt ook
Opera 9.6x Windows ook

http://test.xploise.nl/align.html
 | FOK! Schrikkelbaasch
pi_65446185
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
In IE6 werkt het niet.
fokstok.nl
  dinsdag 27 januari 2009 @ 10:01:33 #6
26400 wijsneus
Radicaal Democraat
pi_65446526
12tvp
Siamo Tutti Antifascisti!
  FOK!-Schrikkelbaas dinsdag 27 januari 2009 @ 10:02:37 #7
1972 Swetsenegger
Egocentrische Narcist
pi_65446560
quote:
Op dinsdag 27 januari 2009 09:46 schreef Light het volgende:

[..]

In IE6 werkt het niet.
1
2
3
4
5		<script type="text/javascript">
   if (typeof document.body.style.maxHeight == "undefined") {
      document.write('<p class="emphasize">  Please update your browser!</p>')
   }
</script>
 | FOK! Schrikkelbaasch
pi_65448436
TVP
  dinsdag 27 januari 2009 @ 12:39:41 #9
230788 n8n
Pragmatisch
pi_65451370
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).
“Specialization is for insects”.—Robert Heinlein
pi_65453871
tvp, en de versie van swets werkt perfect (in de meeste browsers)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65455371
quote:
Op dinsdag 27 januari 2009 10:02 schreef Swetsenegger het volgende:

[..]
[ code verwijderd ]
Als iets niet werkt in IE6 maar de site wordt er niet onbruikbaar door, dan ga ik er geen workaround voor zoeken.
fokstok.nl
pi_65457062
ik heb een probleem.
hier heb ik wat tekst
1
2
3
4
5
6
7
8		   <style type="text/css">
.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?
pi_65460928
Wat is een tekstvak?
pi_65461389
quote:
Op dinsdag 27 januari 2009 16:56 schreef Roy_T het volgende:
Wat is een tekstvak?
laat maar ik ben er al uit
Het was een stukje HTML in een php stylesheet bestandje.
pi_65462511
tuvupu
pi_65521419
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!
pi_65522115
Gaat niet werken inderdaad. Google eens op "faux columns", heb zo'n idee dat dat het probleem weleens op zou kunnen lossen.
pi_65573729
Halp!



Hoe zorg ik ervoor dat de background van mijn content div netjes aansluit op mijn contentfooter div?
シ
pi_65575573
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)
pi_65575739
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?
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?
fokstok.nl
pi_65576109
quote:
Op vrijdag 30 januari 2009 19:01 schreef Light het volgende:

Of is er iets speciaals waardoor dat niet kan?
De onderste rand neem ik aan. De "content div" heeft een herhalend patroon, en de footer niet.
pi_65576444
In de contentdiv met de background-position rommelen?
pi_65576455
Of in de footerdiv natuurlijk, als die repeat.
pi_65576645
quote:
Op vrijdag 30 januari 2009 19:25 schreef veldmuis het volgende:
In de contentdiv met de background-position rommelen?
En dan het probleem naar de header verplaatsen
fokstok.nl
  vrijdag 30 januari 2009 @ 19:33:09 #25
230788 n8n
Pragmatisch
pi_65576686
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
pi_65579143
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:
SPOILER
Om 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.
シ
pi_65580528
Dan dus de footer in de contentdiv plaatsen.

Absolute op de bottom van de contentdiv zetten, geen background meegeven.
pi_65581811
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.
Maar dan zit te contentfooter div over de content div heen, en aangezien mijn achtergronden transparante gifs zijn is het alsnog een zooitje onderin.

Hmm, bedenk me net dat ik die ringen links ook als aparte div kan doen over de alle content divs heen...
シ
pi_65581826
Je kan de contentdiv toch een padding-bottom geven van 200px?

Dit oplossen met een extra div voor een achtergrondplaatje is niet nodig!
  vrijdag 30 januari 2009 @ 22:09:42 #30
230788 n8n
Pragmatisch
pi_65581884
Of de content en de footer desnoods samen in een container-div en deze de achtergrond geven.
“Specialization is for insects”.—Robert Heinlein
pi_65581927
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.
Lijkt me zelfs niet nodig.
Hoe minder elementen hoe mooier!
pi_65581944
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).
pi_65581987
Shit. Ik las niet goed.

Hij is trouwens een zij, gok ik. .
  vrijdag 30 januari 2009 @ 22:14:50 #34
230788 n8n
Pragmatisch
pi_65582003
quote:
Op vrijdag 30 januari 2009 22:11 schreef veldmuis het volgende:

[..]

Lijkt me zelfs niet nodig.
Hoe minder elementen hoe mooier!
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.
“Specialization is for insects”.—Robert Heinlein
pi_65582093
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.
Dat kan niet want de content div krijgt een variabele hoogte en heeft dus een herhalende achtergrond nodig.
quote:
Op vrijdag 30 januari 2009 22:06 schreef veldmuis het volgende:
Je kan de contentdiv toch een padding-bottom geven van 200px?

Dit oplossen met een extra div voor een achtergrondplaatje is niet nodig!
Dan zit de footer op de bodem van de viewport terwijl de content div nog verder doorloopt
シ
pi_65582127
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).
Hey, iemand die leest Ben alleen inderdaad een zij, tyvm
シ
  vrijdag 30 januari 2009 @ 22:20:42 #37
230788 n8n
Pragmatisch
pi_65582163
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.
[..]
Dan los je in ieder geval de overloop van #content naar #footer op. Maar heb je de vaste line-height al geprobeerd?
quote:
Dan zit de footer op de bodem van de viewport terwijl de content div nog verder doorloopt
Je maakt #content 200px langer dan 'natuurlijk' en daar komt #footer gewoon onder.


edit: aha had dit net gemist.
quote:
Op vrijdag 30 januari 2009 20:49 schreef Chanty87 het volgende:
M'n layout is als volgt opgezet:

- contenttop div
- content div
- contentfooter div
“Specialization is for insects”.—Robert Heinlein
pi_65582475
quote:
Op vrijdag 30 januari 2009 22:19 schreef Chanty87 het volgende:

[..]

Hey, iemand die leest Ben alleen inderdaad een zij, tyvm
Excusez-moi
pi_65582527
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?
pi_65582538
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).
Wordt het dan tijd om de em te introduceren in de CSS?
Heb ik nooit echt mee gewerkt eigenlijk, maar daar lijkt me dit dan juist ideaal voor?
pi_65582574
quote:
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?
Het wordt gewoon tijd voor CSS3, met meerdere backgroundimages

Ach, als IE dat ondersteunt zitten we bij Windows 20 service pack 15.
  vrijdag 30 januari 2009 @ 22:40:17 #42
230788 n8n
Pragmatisch
pi_65582648
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 */
}
“Specialization is for insects”.—Robert Heinlein
pi_65583052
quote:
Op vrijdag 30 januari 2009 22:40 schreef n8n het volgende:
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 */
}
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.
fokstok.nl
  vrijdag 30 januari 2009 @ 23:34:44 #44
230788 n8n
Pragmatisch
pi_65584170
3.0 em * 0.5em = 1.5em
“Specialization is for insects”.—Robert Heinlein
pi_65584577
quote:
Op vrijdag 30 januari 2009 22:56 schreef Light het volgende:

Je kunt ipv een procentuele grootte ook gewoon een grootte in pixels opgeven.
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.
pi_65585538
quote:
Op vrijdag 30 januari 2009 23:34 schreef n8n het volgende:
3.0 em * 0.5em = 1.5em
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.
fokstok.nl
pi_65585758
quote:
Op vrijdag 30 januari 2009 23:48 schreef Roy_T het volgende:

[..]

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.
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?
fokstok.nl
pi_65586033
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).
Daar ben je zelf bij natuurlijk. Je kunt toch prima nagaan wat de fontgrootte van de parent is?
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.
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:
Of definieer je ook geen achtergrondkleur als je een witte achtergrond wilt hebben?
Toch wel, en die deze opmerking lijkt meer op een sneer dan op een steekhoudend argument (correct me if I'm wrong)

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.
  zaterdag 31 januari 2009 @ 00:39:44 #49
230788 n8n
Pragmatisch
pi_65586070
quote:
Op zaterdag 31 januari 2009 00:18 schreef Light het volgende:

[..]

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.
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.

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
  zaterdag 31 januari 2009 @ 00:43:38 #50
230788 n8n
Pragmatisch
pi_65586155
quote:
Op zaterdag 31 januari 2009 00:37 schreef Roy_T het volgende:

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
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.
“Specialization is for insects”.—Robert Heinlein
pi_65586309
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.
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.

IE6 doet het niet en zal dat ook niet meer gaan doen
  zaterdag 31 januari 2009 @ 00:52:55 #52
230788 n8n
Pragmatisch
pi_65586341
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
pi_65586623
quote:
Op zaterdag 31 januari 2009 00:37 schreef Roy_T het volgende:

[..]

Daar ben je zelf bij natuurlijk. Je kunt toch prima nagaan wat de fontgrootte van de parent is?
True, maar ik had het idee dat n8n dat punt even vergat.
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"?
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:
Toch wel, en die deze opmerking lijkt meer op een sneer dan op een steekhoudend argument (correct me if I'm wrong)
Niet bedoeld als sneer
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
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:
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.
Dat ben ik ook niet Maar de site(s) van nu.nl heb ik niet gemaakt.
fokstok.nl
pi_65587831
quote:
Op zaterdag 31 januari 2009 01:05 schreef Light het volgende:

Dat ben ik ook niet Maar de site(s) van nu.nl heb ik niet gemaakt.
Ik wel 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 ]
pi_65589225
quote:
Op zaterdag 31 januari 2009 02:26 schreef Roy_T het volgende:

Ik moet stiekem wel bekennen dat ik normaal ook liever px gebruik dan relatieve units
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
fokstok.nl
pi_65589873
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
Eensch! Dat zijn inderdaad de uitzonderingen. Voor line-height gebruik ik dan vaak ook gewoon percentages ipv em, zoals "line-height: 150%".
  zaterdag 31 januari 2009 @ 10:44:27 #57
230788 n8n
Pragmatisch
pi_65590231
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
pi_65590774
quote:
Op zaterdag 31 januari 2009 10:44 schreef n8n het volgende:
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.
Leuk stukje tekst, bij die link.
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.
Misschien ligt het aan mij, maar ik heb nog geen standaard corpsgrootte gezien bij het W3C. Waar kan ik dat vinden?
fokstok.nl
pi_65591284
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
  zaterdag 31 januari 2009 @ 11:52:55 #60
230788 n8n
Pragmatisch
pi_65591449
quote:
Op zaterdag 31 januari 2009 11:16 schreef Light het volgende:
Misschien ligt het aan mij, maar ik heb nog geen standaard corpsgrootte gezien bij het W3C. Waar kan ik dat vinden?
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.
“Specialization is for insects”.—Robert Heinlein
pi_65844077
Wie weet waarom ik het kleine gekleurde balkje heb tussen het menu bovenin en het logo? In IE heb ik hem niet maar in alle andere browsers wel. Ik vermoed dat het heel erg simpel is, maar ik vind het niet

http://www.yeuxmarrons.com



1
2
3
4
5
6
7
8
9
10
11
12
13		#globalnav{padding-top:.1em;text-align:right;color:#999;font-size:92%;font-color:#bb6e00; font-size: 10px;
background-color:#ffffff; width:960px;}
#globalnav li{display:inline;margin-left:0.5em;padding-right:0.7em;border-right:1px solid #D4D4D4;}
#navigation {
    float:right;
    text-align: right;
    background-color:#985e04; 
    margin-right: 0%;
    width: 100%;
    font-size: 10px;
    background:url('logo.gif');
   height:100px;
    }


1
2
3
4
5
6
7
8
9
10
11
12
13
14		<div id="page">
    <div id="globalnav">
      <ul>
         <li><a href="http://www.flickr.com/photos/rcsmit/" target="_blank">Photos@FlickR</a> </li>

         <li><a href="http://petitmonde.yepcheck.com/" target="_blank">Lifelog</a></li>
          <li><a href="http://www.yeuxmarrons.com/contact.php" class="contact">Contact(er)</a></li>
      </ul>
   </div><!-- #globalnav -->
   <div id="navigation"  onclick="location.href='http://www.yeuxmarrons.com';" style="cursor:pointer;">
      <ul>
         <li><a href="http://www.yeuxmarrons.com/photos/B2614">B2614</a></li>ETCETERA</ul>

   </div>
De wijze houdt zich op de achtergrond, in werkelijkheid staat hij vooraan
pi_65844111
Een margin die meekomt van bijvoorbeeld de ul?
Doe eens een URL?
pi_65844122
Jij bent er snel bij ! Toegevoegd, is http://www.yeuxmarrons.com
De wijze houdt zich op de achtergrond, in werkelijkheid staat hij vooraan
pi_65844155
De UL van je bovenste menu (rechtsboven die 3 links). Daar even de margin-bottom op 0px zetten en het is over
pi_65844295
Het is gelukt! en als ik die ruimte wel wil hebben, maar dan wit?

Het is trouwens raar dat ik in het fototabel gedeelte geen achtergrond kan plaatsen, maar in het logogedeelte wel. Ik heb http://www.webmasterworld.com/forum83/6991.htm daarover gevonden, maar ken je nog een simpeler walkaround?
De wijze houdt zich op de achtergrond, in werkelijkheid staat hij vooraan
pi_65844487
quote:
Op zondag 8 februari 2009 11:45 schreef tim2308 het volgende:
Het is gelukt! en als ik die ruimte wel wil hebben, maar dan wit?
#globalnav een margin-top van x pixels geven?
quote:
Het is trouwens raar dat ik in het fototabel gedeelte geen achtergrond kan plaatsen, maar in het logogedeelte wel. Ik heb http://www.webmasterworld.com/forum83/6991.htm daarover gevonden, maar ken je nog een simpeler walkaround?
Ik zie dat zo snel niet eigenlijk. Je kunt de background wel aan de UL meegeven, maar ik weet niet of dat is wat je wilt?
pi_65847175
Ik vraag me trouwens nog iets af. Ik heb vaak last van waardeloze marges als ik iets zo opzet:
1
2
3
4
5		<ul>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>

Dit werkt dan wel
1
2
3		<ul>
<li>bla</li><li>bla</li><li>bla</li>
</ul>


Het verschilt per browser hoe daarmee omgegaan wordt. Voor de duidelijkheid en netheid van de HTML heb ik liever het eerste, maar het tweede is helaas wel eens nodig.

Is daar een oplossing voor?
pi_65855115
Heb je een testcase veldmuis? Ik heb het namelijk nog nooit gedaan met lists
pi_65856505
quote:
Op zondag 8 februari 2009 14:16 schreef veldmuis het volgende:
Ik vraag me trouwens nog iets af. Ik heb vaak last van waardeloze marges als ik iets zo opzet:
[ code verwijderd ]

Dit werkt dan wel
[ code verwijderd ]

Het verschilt per browser hoe daarmee omgegaan wordt. Voor de duidelijkheid en netheid van de HTML heb ik liever het eerste, maar het tweede is helaas wel eens nodig.

Is daar een oplossing voor?
Op het werk gebruiken wij Smarty voor het schrijven van de templates. Dat heeft een functie {strip} die alle witruimte in je code weg haalt. Als je dus in je templates aan het werk bent krijg je keurig net ingesprongen code te zien, maar zodat het ingelezen wordt door de browser wordt alle witruimte verwijderd... Aangezien Smarty PHP-based is voor zover ik weet, zal er ook best een PHP-functie zijn waarmee je hetzelfde bereikt..?
Nee.
pi_65859112
Ik gebruik de lists altijd voor de menu's. Ik heb zo snel geen voorbeeld bij de hand, ik ga wat in elkaar flansen. Krijg het zo 1-2-3 niet voor elkaar, dus moet even wat bedenken
pi_65863500
Hmmm lists blijven toch altijd lastig. Kan iemand mij op weg helpen?

Ik heb een UL met daarin een aantal items. Nu wil ik twee dingen:
1) Het tekentje ervoor weg (geen probleem; list-style-type: none;)
2) De margin/padding ervoor weg.

Dat tweede lukt me dus niet. Ik krijg het niet voor elkaar om het geheel niet meer in te laten springen en dus gewoon links uit te lijnen. Any thoughts?
pi_65863587
ul, li {
margin: 0px;
padding: 0px;
}
pi_65863609
En waarom typ ik altijd die px erachter als het 0 is? .
pi_65863720
quote:
Op zondag 8 februari 2009 22:01 schreef veldmuis het volgende:
En waarom typ ik altijd die px erachter als het 0 is? .
Thnx!
Op het moment dat ik het hier lees vind ik net een site met de info (het hoeft alleen maar op de UL en niet ook op de LI). Ik zocht eerst op de verkeerde termen.

http://css.maxdesign.com.au/listutorial/sub03.htm
pi_65864892
quote:
Op zondag 8 februari 2009 22:01 schreef veldmuis het volgende:
ul, li {
margin: 0px;
padding: 0px;
}
Alleen op de UL is voldoende
pi_65865075
Een li heeft standaard helemaal geen margin/padding?
pi_65976563
Hallo,

Ik heb mijn site gemaakt met CSS, maar wat ik opeens ontdek bij heel veel pagina's is dat de DIV waar ik thumbnails in laadt opeens een pixel of 30 hoger staat, zonder dat ik een verandering heb aangebracht!!

Bij sommige, vooral nieuw aangemaakte pagina's staat ie gewoon goed waar ik hem ook neergezet heb, maar bij andere, vooral oudere pagina's staat ie niet meer op de plek waar ik hem in 1e instantie neergezet heb.

Ik zal een voorbeeld geven, hoop niet dat dat als spam word gezien:
http://www.e30fansite.nl/325i/Arjanos.html

Hele oude pagina's die ik gemaakt heb toen ik net begon met CSS waar ik elke foto in een aparte DIV zette ( stom... ) zijn ook ontregeld en staan allemaal hoger dan in eerste instantie:
http://www.e30fansite.nl/325i/Beamer.html

Pagina's die ik pas geleden heb aangemaakt, staan wel gewoon goed:
http://www.e30fansite.nl/318is/BMWDriver.html

Ik hoop dat iemand me kan helpen?? Nogmaals, ik heb op de bewuste pagina's NIKS veranderd

Thx alvast!

Grtz Tim
&lt;a href="http://www.bmwe30club.nl" target="_blank" rel="nofollow"&gt;BMW E30 Club Nederland&lt;/a&gt;
&lt;a href="http://www.e30fansite.nl/Forum/viewtopic.php?f=24&t=8185" target="_blank" rel="nofollow"&gt;BMW E30 M-Tech II 325i&lt;/a&gt;
pi_65976809
Ik kan daar echt geen wijs uit. Sorry, maar dat is echt een gevalletje terminale divitus.
pi_65976969
Daar is inderdaad niets meer aan de doen De HTML is zo ruk (sorry ), dat je beter fatsoenlijk opnieuw kunt beginnen. Sleutelwoord daarbij: semantiek.
pi_65977727
wow! (mist bek valt open smilie)
sorry zou je graag willen helpen, maar zelfs firebug in FF gaat over de zeik van de code
  donderdag 12 februari 2009 @ 10:42:24 #81
136730 PiRANiA
All thinking men are atheists.
pi_65977956
quote:
Op donderdag 12 februari 2009 09:54 schreef metallicattim het volgende:
Hallo,

Ik heb mijn site gemaakt met CSS, maar wat ik opeens ontdek bij heel veel pagina's is dat de DIV waar ik thumbnails in laadt opeens een pixel of 30 hoger staat, zonder dat ik een verandering heb aangebracht!!

Bij sommige, vooral nieuw aangemaakte pagina's staat ie gewoon goed waar ik hem ook neergezet heb, maar bij andere, vooral oudere pagina's staat ie niet meer op de plek waar ik hem in 1e instantie neergezet heb.

Ik zal een voorbeeld geven, hoop niet dat dat als spam word gezien:
http://www.e30fansite.nl/325i/Arjanos.html

Hele oude pagina's die ik gemaakt heb toen ik net begon met CSS waar ik elke foto in een aparte DIV zette ( stom... ) zijn ook ontregeld en staan allemaal hoger dan in eerste instantie:
http://www.e30fansite.nl/325i/Beamer.html

Pagina's die ik pas geleden heb aangemaakt, staan wel gewoon goed:
http://www.e30fansite.nl/318is/BMWDriver.html

Ik hoop dat iemand me kan helpen?? Nogmaals, ik heb op de bewuste pagina's NIKS veranderd

Thx alvast!

Grtz Tim
SPOILER
Om 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.
Dag Google!
pi_65977988
pi_65978031
quote:
Op donderdag 12 februari 2009 10:42 schreef PiRANiA het volgende:

[..]
SPOILER
Om 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.
Hey,
Ik heb ook een webbrowser, ik had het al gezien.

Groetjes,

veldmuis
pi_65978048
haha ben ik zo slecht?

Het is ooit de bedoeling de site in PHP te (laten) maken, maar dat duurt nog wel eff, dus voorlopig kan ik hier niks aan doen? Vind het maar een vreemd voorval, want in het begin stond alles goed en opeens staat de div hoger...
&lt;a href="http://www.bmwe30club.nl" target="_blank" rel="nofollow"&gt;BMW E30 Club Nederland&lt;/a&gt;
&lt;a href="http://www.e30fansite.nl/Forum/viewtopic.php?f=24&t=8185" target="_blank" rel="nofollow"&gt;BMW E30 M-Tech II 325i&lt;/a&gt;
pi_65978084
Vraagje: Waarom heb je in vredesnaam voor vrijwel elk plaatje een aparte div?
シ
pi_65978131
quote:
Op donderdag 12 februari 2009 10:45 schreef metallicattim het volgende:
haha ben ik zo slecht?

Het is ooit de bedoeling de site in PHP te (laten) maken, maar dat duurt nog wel eff, dus voorlopig kan ik hier niks aan doen? Vind het maar een vreemd voorval, want in het begin stond alles goed en opeens staat de div hoger...
neuh slecht niet want de validator zegt dat je op 1 foutje na valid bent. En dat is je alt tags in je plaatjes

Je hebt alleen de divaritus
Maar dat maakt niets uit hoor Zo ben ik ook begonnen
pi_65978141
PHP leeft alleen op de server. In je browser zie je altijd HTML, of je nou PHP, ASP, Ruby, Python of whatever gebruikt

Er is ongetwijfeld ergens iets veranderd in de code, maar zoals miss_bleu al zei: dit debuggen is gewoon onmogelijk
pi_65978174
quote:
Op donderdag 12 februari 2009 10:48 schreef miss_bleu het volgende:

neuh slecht niet want de validator zegt dat je op 1 foutje na valid bent. En dat is je alt tags in je plaatjes
Wel slecht imo, en zo zie je maar dat slecht gebruikte maar syntactisch correcte HTML gewoon door de validator komt
pi_65978215
Zet op de http://www.e30fansite.nl/325i/Beamer.html eens op de tumbs de div met ID foto's en geef die ID eens een margin-top mee van 25px;

Misschien dat je het probleem dan verhelpt. Kan ook zijn dat op pagina's waar het nu dus goed staat je meer ruimte gaat krijgen. Maar probeer het eens. Verder kan ik heel moeilijk zien wat het wel kan zijn. Bughunten gaat niet echt, tis meer nu gokken en houtje touwtje oplossingen bedenken
pi_65978221
quote:
Op donderdag 12 februari 2009 10:50 schreef Roy_T het volgende:

[..]

Wel slecht imo, en zo zie je maar dat slecht gebruikte maar syntactisch correcte HTML gewoon door de validator komt
Op zich best briljant
pi_65978531
quote:
Op donderdag 12 februari 2009 10:47 schreef Chanty87 het volgende:
Vraagje: Waarom heb je in vredesnaam voor vrijwel elk plaatje een aparte div?
Sjah, ik had geen enkel verstand van CSS en heb het met en met een beetje geleerd, kdacht dat dit de methode was, maar niet dus haha

Wel fijn om te horen dat mijn "levenswerk" zo geweldig in mekaar steekt
&lt;a href="http://www.bmwe30club.nl" target="_blank" rel="nofollow"&gt;BMW E30 Club Nederland&lt;/a&gt;
&lt;a href="http://www.e30fansite.nl/Forum/viewtopic.php?f=24&t=8185" target="_blank" rel="nofollow"&gt;BMW E30 M-Tech II 325i&lt;/a&gt;
pi_65979684
Sorry metallicattim, het was niet denigrerend bedoeld

We zouden je echt met liefde en plezier helpen (daarom zitten we in dit topic), maar we kunnen hier weinig mee. Het werkt in principe, dat is duidelijk, maar omdat het zo sterk ingaat tegen de gangbare technieken zien wij het ook niet.

Maar misschien is dit een mooie incentive om eens te kijken naar hoe je het aan de basis beter aan zou kunnen pakken? Je slaat dan 3 vliegen in 1 klap: je leert fatsoenlijke HTML & CSS gebruiken, je hebt goede templates die je gewoon kunt hergebruiken wanneer je voor de achterkant overstapt op PHP en je lost hiermee je huidige probleem op
pi_65987664
@Roy_T: Ik weet dat jullie proberen te helpen, ik was een beetje sarcastisch

Ik zit inmiddels over de 600 pagina's heen, dus zomaar eff opnieuw beginnen zit er niet in Dat zal weken/maanden in beslag nemen, doe dit ook maar in mijn vrije tijd.

Maar wat heb ik nou precies verkeerd gedaan? Verkeerde code gebruikt? Verkeerde opbouw? ... ?
&lt;a href="http://www.bmwe30club.nl" target="_blank" rel="nofollow"&gt;BMW E30 Club Nederland&lt;/a&gt;
&lt;a href="http://www.e30fansite.nl/Forum/viewtopic.php?f=24&t=8185" target="_blank" rel="nofollow"&gt;BMW E30 M-Tech II 325i&lt;/a&gt;
pi_65987755
Ik ga er vanavond mee beginnen. Wil mijn website ook met CSS gaan maken, totaal geen ervaring mee. Heb een aantal dvd's van lynda gevonden, van dreamweaver en een afzonderlijk van CSS maar dat is alleen codevorm. En ik ga het toch echt eerst via dreamweaver doen

tevens tvp
pi_65987797
Als je handmatig 600 pagina's hebt gemaakt, ben je niet handig bezig. Dan is een database + serversides scripting een miljoen keer handiger.
pi_65991695
quote:
Op donderdag 12 februari 2009 15:24 schreef Khadgar het volgende:
Als je handmatig 600 pagina's hebt gemaakt, ben je niet handig bezig. Dan is een database + serversides scripting een miljoen keer handiger.
Kijk, die website begon met 0 pagina's
En met en met ( dik 2,5 jaar ondertussen ) kwamen nieuwe aanmeldingen binnen en die heb ik idd met de hand toegevoegd.

Ik heb helaas de kennis niet om dit zelf te doen, php + mysql, en laten doen is ook niet goedkoop, vandaar dat ik zelf ben gaan kloten en ik dacht dat ik het redelijk voormekaar had, totdat ik deze fout vorige week ontdekte
&lt;a href="http://www.bmwe30club.nl" target="_blank" rel="nofollow"&gt;BMW E30 Club Nederland&lt;/a&gt;
&lt;a href="http://www.e30fansite.nl/Forum/viewtopic.php?f=24&t=8185" target="_blank" rel="nofollow"&gt;BMW E30 M-Tech II 325i&lt;/a&gt;
pi_66025998
Hoe laat ik een div helemaal tot onderaan het beeld doorlopen zonder met een aantal pixels te werken? Bij de header heb ik in de breedte 100% aangegeven. Maar bij de div die naar onder moet werkt dit niet..
pi_66027191
html en body 100% hoogte geven, en dan kun je een div ook 100% hoogte geven.

Maar waarom wil je dat precies? Vaak zijn er andere oplossing voor hetzelfde visuele effect.
pi_66027349
Ik wil dat omdat ik heel het beeld wil gebruiken. Zowel in Firefox als IE moet dat goed zijn.
pi_66027475
quote:
Op vrijdag 13 februari 2009 17:02 schreef Roy_T het volgende:
html en body 100% hoogte geven, en dan kun je een div ook 100% hoogte geven.
Hmm had ik gedaan. Hij gaat wel tot onder door inderdaad, maar nu te ver naar onder zodat je moet scrollen. Dat komt waarschijnlijk omdat ie ruimte heeft overgeslagen bovenaan (hij begon onder de header).
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 11
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')