[CSS] voor dummies - Deel 4 | Digital Corner (DIG)

zondag 14 mei 2006 @ 11:41:51 #176

Da_Koen

quote:
Op zondag 14 mei 2006 11:32 schreef the_disheaver het volgende:
1em = 16 pixels.

In feite is em dus overbodig?

Verstuur ringtones en Foto's gratis naar je mobiel

zondag 14 mei 2006 @ 12:00:00 #177

super-muffin

nee, want als je je font grootte in px definieert kan het niet geschaald worden in IE door de gebruiker.

Steam - SC2

zondag 14 mei 2006 @ 13:02:08 #178

Light

quote:
Op zondag 14 mei 2006 11:32 schreef the_disheaver het volgende:
1em = 16 pixels.

1em heeft niet een vaste grootte, het is relatief. 1em geeft aan dat de lettergrootte 100% van de lettergrootte op die plek is. Uitleggen is lastig, een voorbeeld helpt waarschijnlijk meer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html>
<head><title>Font size</title>
<style>
body {
 font-size: 1em;
}
.a {
 font-size: 1.5em;
}
.b {
 font-size: 0.8em;
}
.c {
 font-size: 1em;
}
</style>
</head>
<body>
XABCX 
XABCX 
XABCX 
</body>
</html>

Let op het verschil in grootte van de letters C, terwijl de ze allemaal in een class c staan en dus een grootte 1em hebben. De letters X zijn op iedere regel even groot.

fokstok.nl

zondag 14 mei 2006 @ 15:00:43 #179

Da_Koen

quote:
Op zondag 14 mei 2006 13:02 schreef Light het volgende:

[..]

1em heeft niet een vaste grootte, het is relatief. 1em geeft aan dat de lettergrootte 100% van de lettergrootte op die plek is. Uitleggen is lastig, een voorbeeld helpt waarschijnlijk meer:
[ code verwijderd ]

Let op het verschil in grootte van de letters C, terwijl de ze allemaal in een class c staan en dus een grootte 1em hebben. De letters X zijn op iedere regel even groot.

Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?

[ Bericht 5% gewijzigd door Da_Koen op 14-05-2006 16:24:51 ]

Verstuur ringtones en Foto's gratis naar je mobiel

zondag 14 mei 2006 @ 18:23:33 #180

Castor

Obey the rules, miss the fun

quote:
Op zondag 14 mei 2006 15:00 schreef Da_Koen het volgende:

[..]

Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?

Klopt, als je de hele site in "em" maakt dan is hij compleet resizable als de tekst vergroot wordt.

Castor's Photostream op Flickr

zondag 14 mei 2006 @ 19:17:34 #181

super-muffin

quote:
Op zondag 14 mei 2006 15:00 schreef Da_Koen het volgende:

[..]

Thx, dat is een duidelijk verhaal.

Maar waarom gebruikt men vaak width:4em;?? Heeft dit enkel te maken met het handmatig aanpassen van de fontsize in de browser? Dat de afstanden dan goed blijven?

edit:
Het beste zou dus zijn om je hele site in "em" te maken ipv "px"?

Als je zou willen dat alles mee schaalt wel.

Steam - SC2

FOK!-Schrikkelbaas maandag 15 mei 2006 @ 17:37:12 #182

Swetsenegger

Egocentrische Narcist

http://webshop.xploise.nl/test/menu.htm

Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera

Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

maandag 15 mei 2006 @ 20:08:43 #183

the_disheaver

quote:
Op maandag 15 mei 2006 17:37 schreef Swetsenegger het volgende:
http://webshop.xploise.nl/test/menu.htm

Bovenstaand voorbeeld is prima in FF. In zowel Opera als Internet explorer, zit er ruimte tussen de submenu's en ontbreekt de onderste border bij het laatste child. Het laatste wordt met een DOM object opgelost, maar werkt dusduidelijk niet op IE en Opera

Alle CSS en javascript staat in de html. Misschien dat iemand wat tips heeft om het menuutje crossbrowser mooi te krijgen.

1 ding: in opera 9 (beta 1) zit er geen ruimte tussen de submenu's. Wel geen border onderin

FOK!-Schrikkelbaas maandag 15 mei 2006 @ 23:25:46 #184

Swetsenegger

Egocentrische Narcist

quote:
Op maandag 15 mei 2006 20:08 schreef the_disheaver het volgende:

[..]

1 ding: in opera 9 (beta 1) zit er geen ruimte tussen de submenu's. Wel geen border onderin

Beta browsers trek ik me nog maar even niets van aan

Ik ben een stuk verder, menu komt nu volledig uit database. de nesting wordt correct geparsed dus dat is het probleem niet.
Een en ander ziet er nu prima uit onder FF en Opera. Onder IE is echter de background transparant (

) en en het menu valt steeds weg bij de onmouseover. Alleen als ik heeeeeeeeeeeeeel traag schuif gaat het goed.

url: http://webshop.xploise.nl/cart.php

relevante CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

#vertnav{
  list-style: none;
}

#vertnav{
     padding:0;
     margin:0;
}

#vertnav ul {
     padding: 0;
     margin:0;
     list-style: none;
     width:167px;
     z-index:99;
     position:absolute;
     overflow:visible;
}

#vertnav li {
     position: relative;
     cursor:pointer;
     cursor:hand;
     margin:0;
     width:171px;
     padding:0 2px;
     background-color:rgb(212,213,225);
     border-bottom:1px solid rgb(138, 139, 152);
     display:block;
     height:20px;
     line-height:20px;
}

#vertnav a {
     text-decoration:none;
     display:block;
     width:171px;
     height:20px;
}

#vertnav a:hover, #vertnav li:hover{
     background-color:rgb(179,181,196);
}
#vertnav ul li:hover, #vertnav ul li a:hover{
     background-color:rgb(179,181,196);
}

#vertnav ul, #vertnav ul ul, #vertnav ul ul ul{
     display:none;
     position:absolute;
     top:0;
     left:175px;
}

/* non-IE browsers see this */
#vertnav ul li>ul, #vertnav ul ul li>ul{
     margin-top:0;
}

#vertnav li:hover ul ul, #vertnav li:hover ul ul ul, #vertnav li:hover ul ul ul ul, #vertnav li:hover ul ul ul ul ul{
     display:none;
}

#vertnav li:hover ul, #vertnav ul li:hover ul, #vertnav ul ul li:hover ul, #vertnav ul ul ul li:hover ul, #vertnav ul ul ul ul li:hover ul{
     display:block;
}

li>ul {
     top: -1px;
     left: -5px;
}
/* Win IE only \*/
* html #vertnav li{float:left;}
/* end holly hack */

[ Bericht 1% gewijzigd door Swetsenegger op 15-05-2006 23:37:28 ]

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

FOK!-Schrikkelbaas dinsdag 16 mei 2006 @ 08:37:51 #185

Swetsenegger

Egocentrische Narcist

Iemand een idee?
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul

-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren

[ Bericht 55% gewijzigd door Swetsenegger op 16-05-2006 08:46:29 (Opgelost) ]

Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!

dinsdag 16 mei 2006 @ 12:22:28 #186

ExCibular

quote:
Op dinsdag 16 mei 2006 08:37 schreef Swetsenegger het volgende:
Iemand een idee?
Ik krijg hetzelfde effect in Firefox wanneer ik de z-index weghaal in #vertnav ul

-edit-
Opgelost. Het menu schuift over een floating div, die ik nog een 'position: relative' had mee gegeven. Position uit die float gehaald en het werkt naar behoren

Voor wat het waard is, in IE 7 beta werkt het ook goed!
Ik was naar je probleem aan het kijken terwijl dat je die al had opgelost

woensdag 17 mei 2006 @ 11:10:56 #187

super-muffin

Waarom is de div #inhoud niet tot de onderkant? maar issie 100% van het browser venster + header?
Ik snap niet waarom die dat doet

-edit-
linkje zou handig zijn

www.danielpunt.nl/akxifo

[ Bericht 19% gewijzigd door super-muffin op 17-05-2006 11:17:34 ]

Steam - SC2

woensdag 17 mei 2006 @ 11:25:38 #188

Desdinova

Olaa

als height 100% is, is hij de waarde van je hele website-toonbare deel van je browser. maar omdat je daarboven een header hebt, begint die div lager. terwijl hij wel de 100% hoogte heeft.

op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen

er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.

edit
in jouw geval zou ik de rode-witte-rode invulling een backgroundimage maken van 1px hoog, en die repeat-y doen in je body background, en je background-color dezelfde kleur maken als wat het nu is.

dan maak je je top-div daarbovenop met daarin je banner, zodat daar iig de background niet meer zichtbaar is. beetje spelen met afbeeldingmaat wanneer nodig.

waar je dan mee zit is de transparante afbeelding onderin je content-div. die zou je misschien in een eigen div kunnen zetten met een z-index lager dan je content-text. ofzo. het wordt een beetje spelen met float.

[ Bericht 37% gewijzigd door Desdinova op 17-05-2006 11:33:25 ]

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 17 mei 2006 @ 11:31:03 #189

qu63

..de tijd drinkt..

quote:
Op woensdag 17 mei 2006 11:10 schreef super-muffin het volgende:
Waarom is de div #inhoud niet tot de onderkant? maar issie 100% van het browser venster + header?
Ik snap niet waarom die dat doet

-edit-
linkje zou handig zijn
www.danielpunt.nl/akxifo

ik zou ook iig je alfabet-letters wat aanpassen in je lexicon. als ik nu op de E of de K ga staan blijven ze verspringen namelijk :'0

Als je er overheen gaat worden de letters groter, daardoor verspringt ie een regel naar beneden, dus staat mijn muis er niet meer op, en verspringt ie weer terug naar zn oorspronkelijke plekje, en begint het hele verhaal opnieuw

It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]

woensdag 17 mei 2006 @ 11:34:43 #190

super-muffin

quote:
Op woensdag 17 mei 2006 11:25 schreef Desdinova het volgende:
als height 100% is, is hij de waarde van je hele website-toonbare deel van je browser. maar omdat je daarboven een header hebt, begint die div lager. terwijl hij wel de 100% hoogte heeft.

op mijn resolutie klopt je site helemaal niet verwacht ik, maar dat kan misschien door de nog-in-ontwikkeling-fase komen

er is geen manier om 100% - header te doen. tenzij je javascript zou gebruiken maar dat is weer omslachtig.

hoe doe ik het met javascript? Ik ken zelf niet echt veel javascript, maar kan het wel gebruiken.
Tenzij iemand anders nog een oplossing heeft

maar wat klopt er niet op jou resolutie? Ik zit hier op 1024x768 en daar is alles oké.

qu63: dat weet ik, daar moet ik nog wat aan doen ja.

Steam - SC2

woensdag 17 mei 2006 @ 11:37:35 #191

RM-rf

1/998001

Om compleet te zijn... een percentuele hoogte betekent dat de hoogte bepaald wordt door het parent-element met 'layout' (wat betekent dat dat element een opgegeven breedte, hoogte of positionering moet kennen, eventueel gewoon hard 'position: relative;')..

In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)

Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:

1
2
3

#head {
position: relative;
}

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

woensdag 17 mei 2006 @ 11:38:36 #192

Desdinova

Olaa

ik zit op een laptop met 1400xnogiets. maar op 1600x1200 zal hij het ook niet prima doen. hij is geen 100% bij mij, maar houdt ongeveer 200px eerder op. in internet explorer dan. heb hem niet bekeken met opera/netscape/firefox

ik zou het probleem niet oplossen met javascript. je zou dan een of andere functie moeten hebben die het toonbare deel van je browser checkt (is 100%), en aan de hand daarvan de div-height aanpast door je header-height eraf te trekken.

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 17 mei 2006 @ 11:46:44 #193

CraZaay

prettig gestoord

quote:
Op woensdag 17 mei 2006 11:37 schreef RM-rf het volgende:
viewbox

viewport

woensdag 17 mei 2006 @ 12:24:34 #194

super-muffin

quote:
Op woensdag 17 mei 2006 11:37 schreef RM-rf het volgende:
Om compleet te zijn... een percentuele hoogte betekent dat de hoogte bepaald wordt door het parent-element met 'layout' (wat betekent dat dat element een opgegeven breedte, hoogte of positionering moet kennen, eventueel gewoon hard 'position: relative;')..

In het geval van het element #content lijkt dat de viewbox te zijn, dat is het browservenster, eigenlijk te vertalen met het element HTML (in msie dacht ik de BODY tag, iig in quirky mode)

Volgens mij is dit probleem op te lossen door je element #head een position: relative; te geven:
[ code verwijderd ]

nee, position: relative doet niks.

Is er echt geen andere oplossing

Trouwens, nog iets geks, het achtergrondplaatje in #content doet het niet in FF

Steam - SC2

woensdag 17 mei 2006 @ 12:25:51 #195

super-muffin

quote:
Op woensdag 17 mei 2006 11:38 schreef Desdinova het volgende:
ik zit op een laptop met 1400xnogiets. maar op 1600x1200 zal hij het ook niet prima doen. hij is geen 100% bij mij, maar houdt ongeveer 200px eerder op. in internet explorer dan. heb hem niet bekeken met opera/netscape/firefox

Dat kwam om dat #box een height heeft van 600px; dat is nu al opgelost.

Steam - SC2

woensdag 17 mei 2006 @ 12:33:21 #196

Desdinova

Olaa

dan heb je waarschijnlijk backslashes gebruikt (\) in plaats van forward (/) bij je link naar het plaatje

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 17 mei 2006 @ 12:43:32 #197

super-muffin

nee, hij staat gewoon in de root.

1	background: url(bg-content.gif) fixed no-repeat bottom right #fff;

Steam - SC2

woensdag 17 mei 2006 @ 12:50:26 #198

the_disheaver

quote:
Op woensdag 17 mei 2006 12:43 schreef super-muffin het volgende:
nee, hij staat gewoon in de root.
[ code verwijderd ]

quottjes omheen?

woensdag 17 mei 2006 @ 12:52:10 #199

Desdinova

Olaa

dan wordt je div waarschijnlijk niet geshowd (IE is wat flexibeler daarin). zet er maar even een border-width, border-style en border-color bij. effe tjekke wattie doet.

As a rule, I never touch anything more sophisticated and delicate than myself.

woensdag 17 mei 2006 @ 13:44:11 #200

super-muffin

De DIV word wel geshowd, want het is die #content waar ik het hier boven over had

Als ik de property fixed weghaal doetie het wel.

-edit-

moet je kijken, als ik mn browserventer zo schaal komtie in eens te voorschijn

Wat is dit nu voor gekkigheid.

[ Bericht 41% gewijzigd door super-muffin op 17-05-2006 14:02:24 ]

Steam - SC2

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

[CSS] voor dummies - Deel 4

» digital corner

» digital corner