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

donderdag 10 maart 2005 @ 10:22:09 #1

markiemark

FR 1908

ja hoor... daar gaan we weer!
Deel 1 vind je hier:
[CSS] voor dummies.

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 10 maart 2005 @ 10:25:04 #2

markiemark

FR 1908

ik heb het nu zo

1
2
3
4
5
6
7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Language" content="en-us"><link rel="stylesheet" type="text/css" href="files/style.css">
<title>Untitled Document</title>
</head>

maar dat werkt ook niet in IE...

ik kan de style code toch wel gewoon in mn css file laten staan?

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 10 maart 2005 @ 10:42:38 #3

SuperRembo

Sinds 1998

Ja hoor, dat moet gewoon werken. Dan doe je waarschijnlijk toch iets anders fout.

donderdag 10 maart 2005 @ 14:02:57 #4

Vince-E

je reference naar je style is wel goed? files/style.css klopt dus hier?

donderdag 10 maart 2005 @ 15:47:38 #5

markiemark

FR 1908

@vinc-e: file is goed gelinkt..

@superrembo: jou file uit deel 1 werkt idd goed als ik het zo gebruik.. dan ga ik het stukje bij beetje om vormen naar de site waar ik het in wil gebruiken..

ik laat wel weten of ik er uit kom..

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 10 maart 2005 @ 17:51:01 #6

markiemark

FR 1908

hmmz ik heb het nu zo gedaan...

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <meta http-equiv="Content-Language" content="en-us">
   <style type="text/css">

html {
   margin: 0;
   padding: 0;
}
body {
   margin: 95px 10px 10px 190px;
   padding: 0;
}

div.content {
   height: 100%;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   border: 1px solid #000;
}

div.nav {
   position: absolute;
   top: 5px;
   left: 0px;
   right: 0px;
   height: 50px;
   border-top: 1px solid #FF0000;
   border-bottom: 1px solid #FF0000;
   width: 100%;
}
   </style>
</head>
<body>

<div class="content">
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

<div class="nav">
nav
</div>

</body>
</html>

de div content is nu goed.. maar dat is niet het enige divje in de pagina. er is ook nog een div nav.. deze wordt wel weergegeven, maar houdt op voordat deze de rechter zijde van het scherm heeft bereikt, terwil ik wil dat ie het hele scherm bedekt.. dan zit ik toch met de attributen die bij de body zijn mee gegeven denk ik.. of niet?

in firefox doet ie het wel...:s

[ Bericht 0% gewijzigd door markiemark op 10-03-2005 18:21:48 ]

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 10 maart 2005 @ 17:58:09 #7

Vince-E

als je de width van de html en body eens op 100% zet?

donderdag 10 maart 2005 @ 18:21:26 #8

markiemark

FR 1908

quote:
Op donderdag 10 maart 2005 17:58 schreef Vince-E het volgende:
als je de width van de html en body eens op 100% zet?

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 10 maart 2005 @ 18:55:09 #9

Vince-E

dit moet het wel doen... waarschijnlijk geven die marges toch wat problemen in de body...
verander die 190px marge eens, en zet deze op de content... dus...

body {
margin: 95px 10px 10px 0;
padding: 0;
}

div.content {
height: 100%;
margin-left:190px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #000;
}

donderdag 10 maart 2005 @ 19:00:25 #10

markiemark

FR 1908

quote:
Op donderdag 10 maart 2005 18:55 schreef Vince-E het volgende:
dit moet het wel doen... waarschijnlijk geven die marges toch wat problemen in de body...
verander die 190px marge eens, en zet deze op de content... dus...

body {
margin: 95px 10px 10px 0;
padding: 0;
}

div.content {
height: 100%;
margin-left:190px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #000;
}

als je een meisje was hee!!

..dank je wel..

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 10 maart 2005 @ 19:01:26 #11

markiemark

FR 1908

maar..... dit is dus niet xhtml strict?

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

donderdag 10 maart 2005 @ 19:10:45 #12

SuperRembo

Sinds 1998

Als je strict mode wil dan moet je die laatste mogelijkheid van Quirksmode.org nemen.

donderdag 10 maart 2005 @ 20:37:38 #13

markiemark

FR 1908

hmmz ok, ga ik dat nog even bestuderen..

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

FOK!-Schrikkelbaas zaterdag 12 maart 2005 @ 15:59:34 #14

Swetsenegger

Egocentrische Narcist

Ik heb een wazige bug gevonden:

1
2
3
4
5
6
7
8
9
10

<html>
<head>
</head>
<body>
<div style="height:125px; width:500px; filter:alpha(opacity=20);-moz-opacity:0.20;">
<span style="font-size:10pt; color:black;">Test <br />
Zodra ik in IE 6 een div met een vaste height en een filter alpha instel
zien de letters er zo uit wanneer windows op 'cleartype' ingesteld staat voor character smoothing.
</div>
</body></html>

Kortom, wanneer in XP bij de beeldeigenschappen smooth edges op 'cleartype' staat (op twee tft's getest, beide samsung).
en ik heb een div met fixed height of width EN een filter alpha... krijg je bovenstaand te zien.

Ik heb het bv ook bij games.fok.nl (button bar)

Nu is het zo dat ik een div met fixed height nodig heb.
Iemand een workaround voor dit probleem?

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

zaterdag 12 maart 2005 @ 16:04:37 #15

Roonaan

Strictly

Wat doet:

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
</head>
<body>
<div style="height:125px; width:500px; filter:alpha(opacity=20);-moz-opacity:0.20;">
</div>
<div style="position:relative;top:-125px;height:125px;width:500px;">
<span style="font-size:10pt; color:black;">Test <br />
Zodra ik in IE 6 een div met een vaste height en een filter alpha instel
zien de letters er zo uit wanneer windows op 'cleartype' ingesteld staat voor character smoothing.
</div>
</body></html>

FOK!-Schrikkelbaas zaterdag 12 maart 2005 @ 16:16:10 #16

Swetsenegger

Egocentrische Narcist

quote:
Op zaterdag 12 maart 2005 16:04 schreef Roönaän het volgende:
Wat doet:
[ code verwijderd ]

Geen filter meer laten zien

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

zaterdag 12 maart 2005 @ 16:43:03 #17

Roonaan

Strictly

Grin. Moet je een beetje kleurtjes invoegen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
</head>
<body style="background:green;">
<div style="height:125px; width:500px; position:relative;">
  <div style="position:absolute;height:100%;width:100%;top:0;left:0; filter:alpha(opacity=20);-moz-opacity:0.20; background:white;">
  </div>
  <div style="position:absolute;height:100%;width:100%;top:0;left:0; ">
    <span style="font-size:10pt; color:red;">Test <br />
    Zodra ik in IE 6 een div met een vaste height en een filter alpha instel
    zien de letters er zo uit wanneer windows op 'cleartype' ingesteld staat voor character smoothing.
    </span>
  </div>
</div>
</body></html>

FOK!-Schrikkelbaas zaterdag 12 maart 2005 @ 18:42:21 #18

Swetsenegger

Egocentrische Narcist

quote:
Op zaterdag 12 maart 2005 16:43 schreef Roönaän het volgende:
Grin. Moet je een beetje kleurtjes invoegen:
[ code verwijderd ]

Ja, de div fade wel, maar de content niet!

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

zaterdag 12 maart 2005 @ 19:32:57 #19

Roonaan

Strictly

Mijn fout. Wat happens als je de fading div over die ander laat zetten? (volgorde omdraaien in code)

FOK!-Schrikkelbaas zaterdag 12 maart 2005 @ 21:39:13 #20

Swetsenegger

Egocentrische Narcist

quote:
Op zaterdag 12 maart 2005 19:32 schreef Roönaän het volgende:
Mijn fout. Wat happens als je de fading div over die ander laat zetten? (volgorde omdraaien in code)

Same.

Maar nogmaals, alleen in IE op een flatpanel met 'cleartype' aan.
Zet ik smooth edges uit of op 'standard' werkt het prima.

Anyway, ik heb het plan maar omgegooid, dus op korte termijn is geen workaround meer nodig.

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

zondag 13 maart 2005 @ 17:47:50 #21

markiemark

FR 1908

ik zit met een klein iets waari k niet uit kom.. ik zit iets te maken en ik kom er niet uit met de border van een div.. ik heb een div gemaakt op de volgende manier:
css:

1
2
3
4
5
6
7
8
9

div.nav_element_links {
   position: relative;
   margin: 0px;
   padding: 0px;
   top: 0px;
   left: 0px;
   width: 143px;
   border: 1px solid #FF0000;
}

html

1
2
3
4
5
6

      <div class=\"nav_element_links\">
      links<br />
      links<br />
      links<br />
      links<br />
      </div>

nu kom ik er achter dat in firefox de border buiten de div om heen gaat (breedt wordt 2px meer..) terwijl bij IE de border binnen de breedte van de div valt.. hoe is dit op te lossen?

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

zondag 13 maart 2005 @ 18:05:30 #22

SuperRembo

Sinds 1998

Dat komt door de foute (maar handige) interpretatie van IE. Dit zou \'t op moeten lossen

1 2	box-sizing: border-box -moz-box-sizing: border-box;

Zie http://www.quirksmode.org/css/box.html

zondag 13 maart 2005 @ 18:11:19 #23

markiemark

FR 1908

quote:
Op zondag 13 maart 2005 18:05 schreef SuperRembo het volgende:
Dat komt door de foute (maar handige) interpretatie van IE. Dit zou \\\'t op moeten lossen
[ code verwijderd ]

Zie http://www.quirksmode.org/css/box.html

heb je me weer geholpen! dank je!

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

maandag 14 maart 2005 @ 08:25:07 #24

Roonaan

Strictly

quote:
Op zondag 13 maart 2005 18:05 schreef SuperRembo het volgende:
Dat komt door de foute (maar handige) interpretatie van IE. Dit zou \'t op moeten lossen
[ code verwijderd ]

Zie http://www.quirksmode.org/css/box.html

Ik denk dat box-model redelijk uit de tijd is, omdat je doormiddel van een goede doctype Internet Explorer ook gewoon uit quirksmode kan halen. Enige wat je hoeft te doen is een doctype te gebruiken waar de uri naar een dtd ook in staat, zoals bijv:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
of een xhtml variant
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-r-

maandag 14 maart 2005 @ 22:49:59 #25

markiemark

FR 1908

@ Roonaan: thnx.. ik ga nog ff verder spelen..

waarom is het box model niet meer gebruikelijk? het werkt goed en wordt bij mijn weten door vrijwel alle browsers goed geinterpreteerd...

Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..

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

[CSS] voor dummies - Deel 2

» digital corner

» digital corner