[CSS] voor dummies

FOK!forum / Digital Corner / [CSS] voor dummies - Deel 2

markiemark

donderdag 10 maart 2005 @ 10:22

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

markiemark

donderdag 10 maart 2005 @ 10:25

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?

SuperRembo

donderdag 10 maart 2005 @ 10:42

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

Vince-E

donderdag 10 maart 2005 @ 14:02

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

markiemark

donderdag 10 maart 2005 @ 15:47

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

markiemark

donderdag 10 maart 2005 @ 17:51

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 ]

Vince-E

donderdag 10 maart 2005 @ 17:58

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

markiemark

donderdag 10 maart 2005 @ 18:21

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?

Vince-E

donderdag 10 maart 2005 @ 18:55

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;
}

markiemark

donderdag 10 maart 2005 @ 19:00

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

markiemark

donderdag 10 maart 2005 @ 19:01

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

SuperRembo

donderdag 10 maart 2005 @ 19:10

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

markiemark

donderdag 10 maart 2005 @ 20:37

hmmz ok, ga ik dat nog even bestuderen..

Swetsenegger

zaterdag 12 maart 2005 @ 15:59

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?

Roonaan

zaterdag 12 maart 2005 @ 16:04

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>

Swetsenegger

zaterdag 12 maart 2005 @ 16:16

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

Geen filter meer laten zien

Roonaan

zaterdag 12 maart 2005 @ 16:43

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>

Swetsenegger

zaterdag 12 maart 2005 @ 18:42

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!

Roonaan

zaterdag 12 maart 2005 @ 19:32

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

Swetsenegger

zaterdag 12 maart 2005 @ 21:39

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.

markiemark

zondag 13 maart 2005 @ 17:47

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?

SuperRembo

zondag 13 maart 2005 @ 18:05

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

markiemark

zondag 13 maart 2005 @ 18:11

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!

Roonaan

maandag 14 maart 2005 @ 08:25

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-

markiemark

maandag 14 maart 2005 @ 22:49

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

Chandler

dinsdag 15 maart 2005 @ 17:52

Ik wordt echt gek van CSS m.b.t de verschillen in IE en FF (moz)

Het volgende heb ik

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

<html>
<head>
<title>testje1</title>

<style type="text/css">

</style>

</head>
<body>

<div class="middle">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

</body>
</html>

Dit resulteert in IE een perfecte gecentreerde pagina met een linker en rechter gedeelte, echter is dit niet het geval in FF, daar staat het rechter gedeelte wel rechts maar net even onder het linker gedeelte.

Iemand die een oplossing weet?

markiemark

woensdag 16 maart 2005 @ 23:06

probeer bij de div "right" ook eens float: left; ...

SuperRembo

donderdag 17 maart 2005 @ 07:22

Nee het ligt aan de verschillende boxmodels. In FF zijn left en right net te breed zodat ze niet naast elkaar passen.

zorg dat IE in standard mode draait zodat het w3-boxmodel wordt gebruikt. Voor IE5 lukt dat niet, daar heb je een hack voor nodig.

laat IE in quirks mode, maar geef voor IE en FF verschillende breedtes op

gebruik geen borders

Chandler

donderdag 17 maart 2005 @ 17:12

SuperRembo:

1. Hoe kan ik IE in standaard mode laten draaien?
2. Hoe kan ik per brouwser dit laten verschillen dan? de maten?
3. Haha, ja ik ben helaas wel borders nodig anders zou ik het wel anders oplossen

SuperRembo

donderdag 17 maart 2005 @ 18:09

quote:
Op donderdag 17 maart 2005 17:12 schreef Chandler het volgende:
SuperRembo:

1. Hoe kan ik IE in standaard mode laten draaien?

Box model tweaking: http://www.quirksmode.org/css/box.html

quote:
2. Hoe kan ik per brouwser dit laten verschillen dan? de maten?

Met een CSS Hack: http://www.quirksmode.org/css/csshacks.html
De underscore hack: http://wellstyled.com/css-underscore-hack.html

quote:
3. Haha, ja ik ben helaas wel borders nodig anders zou ik het wel anders oplossen

Je kan de borders van .left en .right wel laten. Om er dan toch een border bij te kijgen zet je er dan een extra div in die wel een border heeft.

DISCLAIMER: ik ben niet verantwoordelijk voor het gebruik van de mogelijk niet al te nette oplossingen in dit bericht.

DutchBlood

donderdag 17 maart 2005 @ 19:20

tvp

ikke_ook

vrijdag 18 maart 2005 @ 19:53

Ik heb het eerder voorbij zien komen in deze reeks, maar ik kan het even niet vinden.
ik wil graag een gecentreerde pagina (zoals het forum hier bijvoorbeeld) Alleen dan zodanig dat de content 90% is van de pagina, met een minimumbreedte van 800 bijvoorbeeld.
Dat gecentreerde gaat alleen goed in in IE omdat ik text-align gebruik.
Hoe krijg ik dit goed voor elkaar voor alle browsers?

-edit-

ff in de source van Fok gekeken en opgelost

Alleen ik heb SuperR wel s horen zeggen dat t niet netjes is om je site uit alleen een tabel op te bouwen ofzo... Is dat zo?En is het alleen niet netjes?of werkt t ook niet goed?

[ Bericht 29% gewijzigd door ikke_ook op 18-03-2005 20:00:09 ]

Roonaan

vrijdag 18 maart 2005 @ 19:59

doctype instellen.

voor min-width kan je expression() gebruiken om dat in explorer draaiende te krijgen.

1
2
3
4
5
6

div#center {
margin:0 auto;
width:90%;
min-width:800px;
width:expression(document.body.clientWidth < 800? "800px": "90%" );
}

ikke_ook

zaterdag 19 maart 2005 @ 13:54

ik heb een cel in mijn tabel (een <td> dus) en ik wil graag dat hij een cellpadding heeft van 5, behalve aan de linkerkant, daar moet de cellpadding 0 zijn... Ik kan niet echt vinden of, en zo ja hoe je dat kunt maken....

-edit-

Wat is dat toch met dat posten hier van mij... Ik zoek een uur, ik vind niet hoe het moet...ik post hier, en binnen 5 minuten heb ik het gevonden...
padding-left dus....

[ Bericht 31% gewijzigd door ikke_ook op 19-03-2005 14:03:25 ]

SuperRembo

zaterdag 19 maart 2005 @ 14:03

quote:
Op vrijdag 18 maart 2005 19:53 schreef ikke_ook het volgende:
Alleen ik heb SuperR wel s horen zeggen dat t niet netjes is om je site uit alleen een tabel op te bouwen ofzo... Is dat zo?En is het alleen niet netjes?of werkt t ook niet goed?

Ik ben niet de enige. Why avoiding tables (for layout) is important

ikke_ook

zaterdag 19 maart 2005 @ 14:18

quote:
Op zaterdag 19 maart 2005 14:03 schreef SuperRembo het volgende:

[..]

Ik ben niet de enige. Why avoiding tables (for layout) is important

Best interessant!En ik merkte inderdaad ook al dat bepaalde tabellen bij mij langzaam laden, maar dat ligt dus aan het feit dat je niet aangeeft hoe breed kolommen moeten zijn...(dat zijn trouwens grote tabellen die informatie in tabelvorm weergeven dus die moeten wel tabel blijven)
Maar om nou helemaal af te stappen van tabellen... ze zijn juist zo superhandig......

ikke_ook

donderdag 31 maart 2005 @ 20:16

ik heb een tabel cel waarbij ik de tekst links wil centreren, en een plaatje rechts. Kan dit op een of andere manier of moet ik de cel dan per se opdelen in 2 cellen?

ikke_ook

donderdag 31 maart 2005 @ 20:37

Ander probleem...........

-edit-
Opgelost......

[ Bericht 61% gewijzigd door ikke_ook op 31-03-2005 21:59:35 ]

SuperRembo

donderdag 31 maart 2005 @ 21:01

quote:
Op donderdag 31 maart 2005 20:37 schreef ikke_ook het volgende:
-edit-
Opgelost......

Hoe? Met floats?

ikke_ook

donderdag 31 maart 2005 @ 21:59

quote:
Op donderdag 31 maart 2005 21:01 schreef SuperRembo het volgende:

[..]

Hoe? Met floats?

Daar stond een ander probleem

Heliospan

vrijdag 8 april 2005 @ 15:20

In IE doet een rollover op de volgende pagina het goed, in FF begint alles te flikkeren, waarschijnlijk omdat alles opnieuw opgebouwd wordt. De rollover is javascript, maar ik gok dat de fout in de CSS zit.

http://www.jaydee.net -> pics

De CSS komt niet geheel door de validator heen, maar er is inmiddels geen tijd meer om het compleet op te bouwen. Als dit werkt zijn doet alles het in ieder geval goed, ook in Firefox. Any advice?

BabeWatcher

maandag 11 april 2005 @ 22:26

Ik heb een klein probleempje:
de optie

max-width : 150px;
max-height : inherit;

in FF werkt dat dus prima: plaatje wordt keurig 150 pixels breed en de verhouding blijft behouden. In IE gebeurt er helemaal niks.
mijn oplossing heel simpel: een stukje javascript, maar mijn (gratis) host gebruikt javascript voor advertenties waar -hoe professioneel- fouten inzitten zodat de rest van de scripts niet meer worden uitgevoerd. (FF negeert de fout en gaat verder, IE stopt scripts)

Toepassing: fotogallery, waarbij niet voor elk plaatje een thumbnail beschikbaar is.

Weet iemand de IE variant voor max-width . Ik kan het niet vinden

SuperRembo

maandag 11 april 2005 @ 22:41

Je kan de errorhandling uitzetten met

1	window.onerror = function() { return true; }

SuperRembo

maandag 11 april 2005 @ 22:51

Of met css

1 2	max-width:800px; width:expression(document.body.clientWidth > 800? "800px": "auto" );

De complete uitleg

BabeWatcher

dinsdag 12 april 2005 @ 20:22

SuperRembo

Ik wist niet dat Error Handling uit kon. Nu werkt het op beide browsers.

[ Bericht 57% gewijzigd door BabeWatcher op 12-04-2005 20:28:25 ]

SuperRembo

dinsdag 12 april 2005 @ 20:47

Werkt die css oplossing met expression() ook?

BabeWatcher

dinsdag 12 april 2005 @ 20:52

Heb ik nog niet geprobeerd, maar dat ga ik eerst offline doen.
http://pix4u.coolfreehost.com/babe.php?babe=-ASI
voorbeeld, (popup blocker aan!) , klikken op plaatje met gebloktkader (dit is de script-versie, werkte al, maar liep vast in IE)

SqueaK

woensdag 13 april 2005 @ 12:10

Ik ben ook begonnen met css....

het eerste probleempje: ik heb een cel die ik #kop heb genoemd...maar hoe centreer ik die in het midden ??

markiemark

donderdag 14 april 2005 @ 09:40

een cel van een tabel? die staat toch al uitgelijnd in de tabel zeg maar? wil je de inhoud centreren? dast doe je met:

1	text-align: center;

hoop dat je dat bedoelde..

SqueaK

donderdag 14 april 2005 @ 12:07

gewoon de hele inhoud van de site... ik heb dit als container, waar vervolgens 3 cellen in staan:

quote:
#container {
margin: auto;
padding: 0px;
width: 670px;
position: relative;
}

in FireFox staat die tabel wel in het midden, maar in IE staats alles links uitgelijnd...ik bedoel dus de text niet maar gewoon de container waar de inhoud in staat

SuperRembo

donderdag 14 april 2005 @ 12:51

quote:
Op donderdag 14 april 2005 12:07 schreef SqueaK het volgende:
gewoon de hele inhoud van de site... ik heb dit als container, waar vervolgens 3 cellen in staan:
[..]

in FireFox staat die tabel wel in het midden, maar in IE staats alles links uitgelijnd...ik bedoel dus de text niet maar gewoon de container waar de inhoud in staat

quote:
As we know, Explorer Windows doesn't support margin: auto, so it doesn't center the site horizontally yet. Fortunately it allows us to center blocks by the (incorrect) use of text-align: center.

bron

Je moet dus de container van je #container (dat zal waarschijlijk de body zijn) op text-align: center zetten.

MouseInteractive

donderdag 14 april 2005 @ 13:27

quote:
Op donderdag 14 april 2005 12:51 schreef SuperRembo het volgende:

[..]

[..]

bron

Je moet dus de container van je #container (dat zal waarschijlijk de body zijn) op text-align: center zetten.

En zat dan wel in je andere div's weer de text-align op left, want anders is al je tekst gecentreerd.

SuperRembo

donderdag 14 april 2005 @ 17:01

quote:
Op donderdag 14 april 2005 13:27 schreef MouseInteractive het volgende:

[..]

En zat dan wel in je andere div's weer de text-align op left, want anders is al je tekst gecentreerd.

Klopt. Maar dat merk je snel genoeg.
Een text-align: left in #container zou voldoende moeten zijn.

SqueaK

zaterdag 16 april 2005 @ 14:45

ik heb dit nu:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>NHome</title>

<style type="text/css">
body {
font: normal 10pt Trebuchet MS, Arial, sans, sans-serif, monospace;
color: black;
margin: auto;
padding: 0px;
background-image: url(images/achtergrond.jpg);
margin: auto;
}
</style>
</head>

Maar hij pakt die font-size niet....die blijft standaard op 12... ook al verander ik het naar bijvoorbeeld 24, hij blijft gewoon hetzelfde...

waar kan dat aan liggen ?

[ Bericht 5% gewijzigd door SqueaK op 16-04-2005 15:03:07 ]

SuperRembo

zaterdag 16 april 2005 @ 15:02

Opspliten in de losse attributen wil nog wel eens helpen

1
2
3
4
5

body {
   font-family: "Trebuchet MS", Arial, sans-serif;
   font-size: 18pt;
   font-style: normal;
}

BaggerUser

dinsdag 19 april 2005 @ 20:12

heb een probleem

als content_left meer content krijgt wordt in firefox alleen content_left langer maar content_splitter niet. (en daardoor content_right ook niet)

FireFox

in explorer gebeurd dit wel
alleen werkt inherit voor content_right niet ..
explorer

index.html

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
</head>

<body>
<center>
  <div id="main">
    <div id="header">
    </div>
    <div id="balk">
    </div>
    <div id="content_splitter">
      <div id="content_left">
     L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br>L<br></div>
    <div id="content_right">
   </div>
   </div>
  </div>
</center>
</body>
</html>

stylesheet.css

/* CSS Document */
body
{
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  background-color: #000000;
}

#balk
{
  width: 768px;
  height: 20px;
  display: block;
  background-color: #868686;
}

#content_splitter {
  width: 768px;
  min-height: 230px;
  background-color: #C9C9C9;
  display: block;
}
* html #content_splitter {
  height: 230px;
}

#content_left {
  width: 506px;
  min-height: 130px;
  background-color: #FFC9C9;
  display: block;
  float: left;
}

* html #content_left {
  height: 130px;
}

#content_right {
  width: 222px;
  min-height: inherit;
  background-color: #FFC9C9;
  display: block;
  float: right;
}

* html #content_right {
  height: inherit;
}

#main {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  margin:0 auto;
  display: block;
  top: 20px;
  width: 768px;
  min-height: 150px;
  text-align: left;
  border-style:solid;
  border-bottom-color:#FFFFFF;
  border-left-color:#FFFFFF;
  border-right-color:#FFFFFF;
  border-top-color:#FFFFFF;
  border-width:1px;
  background-color: #FFFFFF;
  float: center;
}
* html #main {
  height: 230px;
}

#header
{
  width: 768px;
  height: 178px;
  display: block;
  background-image: url(images/header.gif);
  background-color: #FFD110;
}

MouseInteractive

dinsdag 19 april 2005 @ 21:05

quote:
Op dinsdag 19 april 2005 20:12 schreef BaggerUser het volgende:
heb een probleem
als content_left meer content krijgt wordt in firefox alleen content_left langer maar content_splitter niet. (en daardoor content_right ook niet)

FireFox
[[url=http://img151.echo.cx/img151/8296/werktniet14mf.th.jpg]afbeelding][/URL]

in explorer gebeurd dit wel
alleen werkt inherit voor content_right niet ..
explorer
[[url=http://img151.echo.cx/img151/862/werktniet27fd.th.jpg]afbeelding][/URL]

index.html
[ code verwijderd ]

stylesheet.css
[ code verwijderd ]

Schijnt erg moeilijk te zijn om dit met CSS te realiseren

Ik kreeg het in ieder geval ook niet voor elkaar met mijn pagina.

BaggerUser

dinsdag 19 april 2005 @ 21:20

quote:
Op dinsdag 19 april 2005 21:05 schreef MouseInteractive het volgende:

[..]

Schijnt erg moeilijk te zijn om dit met CSS te realiseren
Ik kreeg het in ieder geval ook niet voor elkaar met mijn pagina.

hoe heb je het opgelost ?

SuperRembo

dinsdag 19 april 2005 @ 21:44

Je kan 't oplossen mer een background image. Zie AListApart.

idiotforaliving

donderdag 28 april 2005 @ 16:23

Beste mensen, ik heb een probleempje met mn css, ik heb een iframe en de tekst daarvan heb ik een style gegeven maar nu valt mn tekst over de scrollbalk en dat is dus net niet de bedoeling....

quote:
<div>
<iframe scrolling="yes" src="tekst.htm" width="700" height="349" frameborder="0">
</iframe>
</div>

dit staat dus in mn index2.htm

<link href="file:///I|/thinkquest/Thinkquest/css/thinkquest.css" rel="stylesheet" type="text/css">
</head>

<body class="inhoud" "style="margin: 0; padding: 0" width="700" height="349">
Portretfotografie.

dit is wat in mn iframe src staat, tekst.htm

Iemand misschien een idee hoe ik dit op kan lossen?

SuperRembo

donderdag 28 april 2005 @ 17:48

En wij mogen raden wat er in thinkquest.css staat?

idiotforaliving

donderdag 28 april 2005 @ 21:26

quote:
Op donderdag 28 april 2005 17:48 schreef SuperRembo het volgende:
En wij mogen raden wat er in thinkquest.css staat?

quote:
.bannerbg {
background-image: url(../afbeeldingen/banner.gif);
background-repeat: no-repeat;
position: relative;
background-color: #000000;
border: none;
}
.inhoud {
background-image: url(../afbeeldingen/inhoud.gif);
background-repeat: no-repeat;
position: relative;
left: auto;
top: auto;
width: 700px;
height: 350px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
border: none;
background-attachment: fixed;
background-position: 0px 0px;
text-align: left;
text-indent: 3pt;

}
.menu_bg {
background-color: #000000;
}
.inspring {
text-indent: 3pt;
}

sry

Berkery

donderdag 28 april 2005 @ 22:44

Kan je de boel niet even online zetten? Ik zie rode tekst in het screenshot, maar enkel een color: #fff in je stylesheet. Volgens mij hou je iets achter

idiotforaliving

donderdag 28 april 2005 @ 23:10

ja man, het is een samenzwering

, ik had de tekst rood gemaakt omdat het anders niet zo duidelijk was

ik kijk morgen wel of ik de site online gooi

idiotforaliving

vrijdag 29 april 2005 @ 10:03

OK, kleine update: Ik heb de tekst voor elkaar. Ik heb in het bronbestand van mn iframe een tabel gezet die 670 px breed is ipv 700 en de tekst blijft nu netjes. Nu heb ik echter wel een horizontale scrollbalk die nutteloos is maar wel in beeld blijft

ik heb trouwens een .zip online gezet voor de diehards: http://members.lycos.nl/whitestripe/Thinkquest.zip

SuperRembo

vrijdag 29 april 2005 @ 12:00

Kolere wat een bende frames.
Waarom al die frames? Wat is er mis met een layout met een paar divjes voor header, menu en content? Dat is zooo veel eenvoudiger.

Het zal wel een IE-bug zijn dat de tekst over de scollbars loopt.

sop

maandag 2 mei 2005 @ 09:40

quote:
Op vrijdag 29 april 2005 12:00 schreef SuperRembo het volgende:
Het zal wel een IE-bug zijn dat de tekst over de scollbars loopt.

Ik denk eerder een FF-probleem. Firefox & scrollbars in frames/div's met overflow werken niet fatsoenlijk.

SuperRembo

maandag 2 mei 2005 @ 12:39

quote:
Op maandag 2 mei 2005 09:40 schreef sop het volgende:

[..]

Ik denk eerder een FF-probleem. Firefox & scrollbars in frames/div's met overflow werken niet fatsoenlijk.

In IE loopt de tekst over de scrollbars heen, in FF niet. Dan noem ik het een IE-bug.

sop

maandag 2 mei 2005 @ 13:48

quote:
Op maandag 2 mei 2005 12:39 schreef SuperRembo het volgende:

[..]

In IE loopt de tekst over de scrollbars heen, in FF niet. Dan noem ik het een IE-bug.

Ik krijg met de code die de TS heeft aangeleverd nergens problemen. Niet bij IE en niet bij FF.

Net ff dat zipje bekeken. Die CSS die daarin staat lusten de honden geen brood van

de code van tekst.htm zou moeten zijn:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="../css/thinkquest.css" rel="stylesheet" type="text/css">
</head>

<body class="inhoud">
....hier de body content....
</body>
</html>

en de CSS:

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

.inhoud {
   background-image: url(../afbeeldingen/inhoud.gif);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 0px 0px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: normal;
   color: #FFFFFF;
   border: none;
   text-align: left;
   text-indent: 3pt;
        margin:0;
        padding:0;
}

Ik heb alle floats en breedte bepalingen weggehaald. Nu ook geen hor. scrollbar meer in FF. Die lelijke fixed table om de content heb ik ook weggehaald.

[ Bericht 37% gewijzigd door sop op 02-05-2005 14:01:27 ]

SuperRembo

maandag 2 mei 2005 @ 19:31

Testkeesje: http://www.superrembo.com/css/IframeOverflow/.
Bij mij scollt de tekst voor de scrollbars langs met IE (IE6, Win2k).
Valid HTML en CSS.

DionysuZ

maandag 2 mei 2005 @ 20:16

met scrolling="auto" ipv scrolling="yes" werkt het wel

SuperRembo

maandag 2 mei 2005 @ 20:32

position: relative weghalen werkt ook, en/of width en height weg halen.

SuperRembo

dinsdag 3 mei 2005 @ 21:21

Weet iemand hoe je een pagina 100% hoogte geeft MET een border?

Ik heb hier een uitgekleed voorbeeld staan.
Als er veel content is (meer dan de hoogte van het window), dan ziet het er goed uit.
Maar als er weinig content is (klik op content voor demo), dan heb je zo'n irritante scrollbar

DionysuZ

dinsdag 3 mei 2005 @ 23:43

ik heb het idee dat het aan de margins ligt. 100% hoogte en dan nog eens de margins erbij zorgt voor een scrollbartje

SuperRembo

woensdag 4 mei 2005 @ 08:21

quote:
Op dinsdag 3 mei 2005 23:43 schreef DionysuZ het volgende:
ik heb het idee dat het aan de margins ligt. 100% hoogte en dan nog eens de margins erbij zorgt voor een scrollbartje

Ja dat klopt. Maar hoe los ik dat op?

DionysuZ

woensdag 4 mei 2005 @ 13:55

je #wrap <div> al geprobeerd in een andere div te zetten met 100% hoogte die geen margins heeft? Dus zeg maar n div met hoogte 100% zonder borders, met daarin je div MET borders met hoogte 100% en een bepaalde margin. Body uiteraard margin:0; geven dan.

BaggerUser

maandag 9 mei 2005 @ 22:04

ik heb 2 divs:

<div id="div1"></div>
<div id="div2"></div>

nu moet div2 onder de border van div 1 zitten
ik heb relatief gepositioneerd en top: -1;

maar omdat div2 later dan div1 komt wordt div2 over div1 heengezet
hoe kan ik zorgen dat div1 boven div2 zit ?..

Roonaan

maandag 9 mei 2005 @ 22:44

style="z-index:nummertje"

BaggerUser

maandag 9 mei 2005 @ 23:22

http://img52.echo.cx/img52/8740/gek5gg.jpg

ik word geeeeeeek

de linker lukt me wel.. maar die rechter totaal niet...
100% neemt ie 100% van het scherm.. niet 100 procent van het overige etc

maar 100%-150 werkt ook niet in ie was het me gelukt... firefox niet

hoe is dit voor melkaar te krijgen ik wordt gek

BaggerUser

maandag 9 mei 2005 @ 23:40

ik geef het op

stylesheet.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

html {
    height: 100%;
}

body {
   font-family: Arial, Helvetica, sans-serif;
    text-align: left;
   background-color:#F9F9F9;
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
    margin-bottom: 0px;
    height: 100%;
}

#content {
   width: 100%;
   background-color:#F9F9F9;
}

#content_bottom {
   position: relative;
   top: 5px;
   height: 30px;
   background-color:#FFFFFF;

   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: none;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #FABD23;
   border-right-color: #FABD23;
   border-bottom-color: #FABD23;
   border-left-color: #FABD23;
}

#content_center {
   height: auto;
   background-color:#FFFFFF;

   border-top-width: 1px;
   border-right-width: 0px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: none;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #999999;
   border-right-color: #999999;
   border-bottom-color: #999999;
   border-left-color: #999999;
}

#content_top {
   background-color:#F9F9F9;
}

.font_navigatie {
font-size:11px;
}

#main_left {
   width: 150px;
   background-color:#F9F9F9;
   float: left;
}

#main_right {
   width:auto;
   background-color:#F9F9F9;
   float: right;
}

#menu_top {
   width: 100%;
    height: 100px;
   background-color:#F9F9F9;
}

#menu_center {
   width: 100%;
    height: auto;
   background-color:#FFFFFF;

   border-top-width: 1px;
   border-right-width: 1px;
   border-bottom-width: 1px;
   border-left-width: 1px;
   border-top-style: solid;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-top-color: #999999;
   border-right-color: #999999;
   border-bottom-color: #999999;
   border-left-color: #999999;
}

#menu_navigatie_head {
   position:relative;
   left:5px;
}

#top {
   width: 95%;
   background-color:#F9F9F9;
    text-align: right;
}

#wrapper {
   width: 100%;
}

index

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>-</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <link href="stylesheet.css" type="text/css" rel="stylesheet" />
</head>

<body>

<div id="top">login</div>
<div id="wrapper">
  <div id="main_left">
    <div id="menu_top"></div>
   <div id="menu_navigatie_head"><font class="font_navigatie">navigatie</font></div>
    <div id="menu_center">A</div>
  </div>
  <div id="main_right">
    <div id="content">
     <div id="content_top">
         <div class="menu_top_selected">selected</div>
     </div>
     <div id="content_center">kkk</div>
       <div id="content_bottom">kkk</div>
   </div>
  </div>
</div>

</body>
</html>

SuperRembo

maandag 9 mei 2005 @ 23:43

CSS Layout Generator

BaggerUser

maandag 9 mei 2005 @ 23:53

quote:
Op maandag 9 mei 2005 23:43 schreef SuperRembo het volgende:
CSS Layout Generator

ja dat werkt ook niet voor mijn probleem

en ik ben zo dichtbij maar dat laatste stukje lukt niet

in ie is het goed in firefox nog niet...

BaggerUser

dinsdag 10 mei 2005 @ 11:33

kickje

SuperRembo

dinsdag 10 mei 2005 @ 12:47

Hieraan heb je genoeg om #main_left en #main_right naast elkaar te krijgen. Ik weet niet wat je verder nog wil.

1
2
3
4
5
6
7

#main_left {
   float: left;
   width: 150px;
}
#main_right {
   margin-left: 150px;/* groter of gelijk aan #main_left:width */
}

BaggerUser

dinsdag 10 mei 2005 @ 15:23

ja nee zo wil ik het

alleen nu klop thet in interne texplorer nog niet, want de content zit onder de navigatie (vergelijk het maar eens met hoe het er uitziet in FF ) en hij gaat als het menu langer wordt nog verder omlaag
in firefox is het nu wel goed

BaggerUser

dinsdag 10 mei 2005 @ 16:36

en dat is dus op te lossen door float: right; aan #main_right toe te voegen maar dan wekrt het in firefox niet meer ...dilemma

BaggerUser

dinsdag 10 mei 2005 @ 19:21

opgelost soort van

* html #main_right {
float: right;
margin-left: 3px;/* groter of gelijk aan #main_left:width */
}

SqueaK

donderdag 12 mei 2005 @ 13:26

ik heb dus een lap tekst maar ik wil dat die regels niet te dicht op elkaar staan... hoe zorg ik ervoor dat er een kleine ruimte tussen die regels komt... een hele <br> is iets te veel...

DionysuZ

donderdag 12 mei 2005 @ 15:40

pleur in je css line-height, daar kun je de hoogte van de regels mee bepalen. Voorbeeldje:

1
2
3

body {
line-height: 1.6em;
}

GSMboy

zondag 15 mei 2005 @ 14:07

http://dev.treinenplace.nl. Iemand een idee wat er fout aan is als je van resoutie veranderd of browser inkrimpt dat alles overelkaar overlapt?
Iemand een idee?

Roonaan

zondag 15 mei 2005 @ 14:08

je hebt position absolute gebruikt neem ik aan?

GSMboy

zondag 15 mei 2005 @ 14:13

Jep..

SuperRembo

zondag 15 mei 2005 @ 20:01

Als je absoluut positioneert in combinatie met relatieve breedtes en hoogtes, dan krijg je dat.

wijsneus

zondag 15 mei 2005 @ 23:20

Het centreren van de site:

Zorg dat je in standards mode bent door een doctype declaratie.

body
{
/*IE 5 en 5.5 vertellen dat de box in het midden moet*/
text-align:center;
}

#contatiner
{
/*Voor IE6 FF opera en al het andere*/
margin-left: auto;
margin-right: auto;
/*Helaas hebben we ook nog een text-align geerft van <body>*/
text-align:left;
width: 670px;
}

Werkt altijd - overal

DionysuZ

woensdag 18 mei 2005 @ 18:24

ok mensen, deze vraag zal wel al meerdere keren langs zijn gekomen, maar goed. Tijdje op google gezocht maar niet gevonden wat ik nodig heb.

Ik ben nu een site aan het maken en die is zeg maar gecentreerd met breedte 780. Nu wil ik hem ook verticaal centreren met hoogte 520, hoe krijg ik dat voor elkaar met divjes?

Berkery

woensdag 18 mei 2005 @ 20:22

http://gilbert.quickhost.nl/temp/div-gecentreerd.html

En dan de getallen aanpassen

DionysuZ

donderdag 19 mei 2005 @ 00:26

ja ja, heel mooi, het werkt ook nog. Alleen krijg ik nu een probleem als het venster kleiner wordt dan de grootte van mijn div.

Mijn div is 520 hoog, dus een margin-top van -260px. Als ik het venster nu kleiner maak dan de DIV hoog is, krijg ik wel scrollbalken, maar slechts om mee naar beneden te scrollen. Het midden van de DIV blijft altijd in beeld, de bodem van de div kan ik naartoe scrollen, maar de top van de div valt weg.

Kan ik dit op een of andere manier oplossen?

DionysuZ

donderdag 19 mei 2005 @ 00:47

laat maar heb al n hack gevonden. Een div eromheen met als min-height de hoogte van de gecentreerde div.

edit:
nee dus. Het werkt nu niet goed in Internet Explorer en _height gebruiken werkt ook niet goed. Grrrrr.. in firefox werkt het perfect nu.

[ Bericht 44% gewijzigd door DionysuZ op 19-05-2005 01:01:05 ]

curry684

donderdag 19 mei 2005 @ 02:02

Kan niet portable.

DionysuZ

donderdag 19 mei 2005 @ 17:29

er is dus geen enkele css mogelijkheid om een DIV een hoogte van 100% te geven met een minimale hoogte van x pixels?

SuperRembo

donderdag 19 mei 2005 @ 17:47

quote:
Op donderdag 19 mei 2005 17:29 schreef DionysuZ het volgende:
er is dus geen enkele css mogelijkheid om een DIV een hoogte van 100% te geven met een minimale hoogte van x pixels?

en dat alles ook nog verticaal gecentreerd?

DionysuZ

donderdag 19 mei 2005 @ 17:49

verticaal gecentreerd heb ik al. Probleem daarmee was dat als ik mijn venster verkleinde dat het bovenste deel wegviel. Dus ik heb die DIV in een andere DIV geplaatst en die zou ik graag een minimum hoogte geven, en voor de rest 100% hoogte.

DionysuZ

donderdag 19 mei 2005 @ 17:51

het zit dus ongeveer zo

1
2
3
4
5

met css

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

  #container {
    height: 100%;
    min-height: 520px;
  }

  #alignment {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -260px;
    margin-left: -370px;
  }

ff snel uit mijn hoofd

SuperRembo

donderdag 19 mei 2005 @ 18:08

Het verticaal centreren doe je met behulp van een margin-top die de helft is van de hoogte. Dat werkt alleen als de hoogte vast is.

DionysuZ

donderdag 19 mei 2005 @ 18:12

jah dat heb ik. Verticaal centreren werkt perfect. Bovenstaande CSS is ook niet helemaal volledig.

ik heb zeg maar dit:

1
2
3
4
5
6
7
8
9

------------------------

         ______
         |  p  |
         |  a  |
         |  g  |
         |__e__|

------------------------

maar als ik het venster verklein krijg ik zeg maar dit:

1
2
3
4

------------------------
| a |
| g |
------------------------

met een scrollbalk waar ik wel naar beneden kan scrollen maar de contents wegvallen wat boven het midden staat.

Dit heb ik proberen op te lossen met die container div, die dan de hoogte van die gecentreerde div als minimum heeft en voor de rest hoogte 100% moet hebben

SuperRembo

donderdag 19 mei 2005 @ 18:44

Misschien dat 't met wat javascript erbij wel lukt. Maar is zie eigenlijk nog niet voor me wat je precies wil bereiken.

DionysuZ

donderdag 19 mei 2005 @ 18:56

hier een stukje code wat ik bedoel.

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

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>
    <title>Voorbeeldje</title>
    <style type="text/css">
      body, html {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #alignment {
        position: relative;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        min-height: 522px;
        /* IE Hack */
        _height: 522px;
      }

      #container {
        position: absolute;
        background: #ff0000;
        border: 1px solid #000000;
        left: 50%;
        top: 50%;
        width: 760px;
        height: 522px;
        margin: 0px auto;
        margin-left: -380px;
        margin-top: -261px;
        text-align: center;
        color: #ffffff;
      }
    </style>
  </head>

  <body>
    <div id="alignment">
      <div id="container">
        Nu werkt het goed in Firefox, maar niet in IE.
      </div>
    </div>
  </body>
</html>

Als ik bij bovenstaande de "alignment" div weg haal, dan staat hij mooi gecentreerd in beide browsers, maar als ik dan mijn browserwindow verklein valt de tekst weg. Daarom voeg ik die div "alignment" toe, maar dan werkt het weer niet goed :S

SuperRembo

donderdag 19 mei 2005 @ 19:07

Met veel tekst gaat dat in FF niet goed.
Dat ie in IE niet goed werkt is logisch omdat je met _height: 522px de waarde height: 100% overschrijft.

DionysuZ

donderdag 19 mei 2005 @ 19:18

daar komt ook zeg maar niet veel tekst in, dat is zeg maar de container waarin de site opgebouwd wordt met menu, titel en een scrollable div voor de contents zeg maar.

Ik wil hem mooi gecentreerd hebben, en wel zo dat als ik het scherm kleiner maak dat ik de top blijf zien. Dat het niet werkt met _height had ik al gezien

. Had op google gezocht en daar stond dat _height een IE hack was voor min-height, maar het werkt dus niet

. En ik wil het juist wel werkend hebben natuurlijk

maar weet niet hoe

SuperRembo

donderdag 19 mei 2005 @ 19:22

quote:
Op donderdag 19 mei 2005 19:18 schreef DionysuZ het volgende:
Had op google gezocht en daar stond dat _height een IE hack was voor min-height, maar het werkt dus niet .

2 dingen:
- IE behandeld height alsof het min-height is. Dat wil zeggen dat het element meegroeit met de inhoud.
- IE negeert underscores in properties, in plaats van _height ziet IE dus height, en gebruikt dan de waarde die er bij staat voor height. Andere browsers zien _height maar kennen die property niet en negeren 'm dus.

DionysuZ

vrijdag 20 mei 2005 @ 17:11

maar is er een mogelijkheid om een DIV hoogte 100% te geven en een minimumhoogte van 250px bijvoorbeeld?

SuperRembo

vrijdag 20 mei 2005 @ 17:52

Hmm, je zou dit kunnen proberen

1
2
3

height: 100%;/* FF */
min-height: 250px;/* FF */
_height: expression(document.body.clientHeight < 250 ? "250px" : "100%");/* IE */

(niet getest)

DionysuZ

vrijdag 20 mei 2005 @ 18:02

het werkt \o/ eindelijk

dankjewel SuperRembo, had helemaal niet aan expression() gedacht.

DionysuZ

dinsdag 24 mei 2005 @ 19:49

Ik gebruik nu image swapping voor het menu (er staat nog meer css voor #menu a in, maar dat is niet relevant):

1
2
3
4
5
6

      a#menuitem1 {
        background-image : url(menu/test.gif);
      }
      a#menuitem1:hover {
        background-image : url(menu/test_selected.gif);
      }

En als ik nu bij het menu boven de link hover dan swapt hij mooi het plaatje. Probleem is dat hij het plaatje pas laadt als ik erboven hang. Moet ik hiervoor een javascript image preload script gebruiken of is daar ook nog iets voor?

sop

dinsdag 24 mei 2005 @ 21:19

Je kunt ook de 2 plaatjes naast elkaar plakken en m.b.v. CSS het background-image naar links of rechts verschuiven m.b.v. negatieve positionering, zoiets dus

1
2
3
4
5
6
7
8

      a#menuitem1 {
        background-image : url(menu/test.gif);
        background-position: -100px 0;
     }
     a#menuitem1:hover {
        background-image : url(menu/test.gif);
        background-position: 0 0;
     }

dit verhaal dus: http://wellstyled.com/css-nopreload-rollovers.html

[ Bericht 4% gewijzigd door sop op 24-05-2005 21:24:20 ]

DionysuZ

woensdag 25 mei 2005 @ 01:39

tnx, dat werkt. Mooie oplossing zo

DionysuZ

woensdag 25 mei 2005 @ 02:40

FF een frustratie

Ik gebruik een ordered list:

1
2
3
4
5

<ol>
  <li>listitem 1</li>
  <li>listitem 2</li>
  <li>listitem 3</li>
</ol>

Nu is het resultaat:

1
2
3

1. listitem 1
2. listitem 2
3. listitem 3

Maar eigenlijk wil ik dat het resultaat is:

1
2
3

1 listitem 1
2 listitem 2
3 listitem 3

Dus zonder die punt. Die punt die irriteert me nu al een hele tijd. Is er een simpele manier om die punt weg te krijgen?

sop

woensdag 25 mei 2005 @ 08:46

er bestaan ook dingen als een numbered list

SuperRembo

woensdag 25 mei 2005 @ 09:00

quote:
Op woensdag 25 mei 2005 08:46 schreef sop het volgende:
er bestaan ook dingen als een numbered list

Er is een ordered list (ol) en een unordered list (ul)

Dit zou je met css moeten kunnen doen, maar volgens mij werkt 't in FF en IE niet eens.

1
2
3

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

big_al

donderdag 26 mei 2005 @ 14:25

Ik heb meerdere links in me html bestandje zitten, de kleuren van links heb ik opgegeven tussen de style codes boven aan me pagina. Maar nu krijgen alle links die kleur, terwijl ik verschillende kleuren aan links wil geven. Hoe doe ik dat?

DionysuZ

donderdag 26 mei 2005 @ 14:39

verschillende classes introduceren. Je kunt bijv. classes gebruiken voor links:

a.menulink { color: #ff0000; }
a.menulink:hover { color:#0000ff; }
a.mainlink { color: #00ff00; text-decoration: none; }

en dan in je code <a class="menulink" of <a class="mainlink" gebruiken.
Je kunt ook de classes van de parent veranderen, zeg dat je bijv. voor alle links in een div genaamd menu (<div id="menu">) een bepaalde kleur wilt hebben dan doe je:

#menu a {
color: #ff0000;
}

big_al

vrijdag 27 mei 2005 @ 09:02

dankjewel DionysuZ

gieling

vrijdag 27 mei 2005 @ 23:09

Gegevens:
URL pagina: http://www.statingtheobvious.nl/wed/
URL css: http://www.statingtheobvious.nl/wed/static/main.css

Probleem:

Ik wil dus graag dat #info naar de onderkant v/d pagina doorgaat. Dit lukt me echter niet en ik snap niet waarom, heb overal height: 100% geprobeert maar niks werkt (behalve bij #centreren maar die geeft vervolgens alleen de border aan óf de hele pagina (dus ook buiten de middelste tabel waar het moet) word een donkere kleur)). Heeft iemand enig idee hoe dit op te lossen zou zijn? Alvast heel erg bedankt

gieling

zaterdag 28 mei 2005 @ 18:48

Ok dit bovenstaande is opgelost, alleen is er met de oplossing een nieuw probleem ontstaan...

1. Zelfs zonder de bottom marge van 20px is loopt de .info class teveel door naar beneden.

2. De tekst in de .info staat in het midden van het donkergrijze veld (.info) deze hoort hier niet en hoort gewoon netjes bovenaan te staan. Ik kom er alleen niet uit waarom deze opeens in het midden van .info staan.

Iemand hier (wel) een oplossing voor? Alvast tnx

DionysuZ

zaterdag 28 mei 2005 @ 19:50

2. je gebruikt tables. Standaard vertical align van een table cell (TD) is in het midden. je kunt dit oplossen door <td align="top"> te gebruiken of vertical-align op top te zetten voor de TD class. In je .main class dus: vertical-align: top pleuren

Kamigot

maandag 6 juni 2005 @ 17:58

Ff een hele domme vraag. Ten eerste moet ik me nog heel erg verdiepen in webdesign. Ik kan wel een site maken, maar meer met progsels als frontpage en dreamweaver

. Nu ben ik een site aan het bouwen in CSS. Ik heb een van de style sheets van Dreamweaver MX gebruikt. NU heb ik alles redelijk goed staan maar wil een bepaalde indeling maken. Vroeger werkte ik vooral met frames en tables maar nu heb je cells (??) in CSS.

Ik kan in links bovenin een targetframe aangeven. Moet ik nu zelf een nieuw frame creeeren in de cell of iets dergelijks. Ik wil dus gewoon dat het menubalkje op dezelfde plaats blijft en dat de textcontent van de cell verandert.

Hier is de opzet : http://www.omegamc.nl

Ik wil dus dat met het aanklikken van de bovenstaande links de content in het witte gedeelte onder ingeladen wordt. Wat moet ik aangeven als target bij die links ?

curry684

maandag 6 juni 2005 @ 18:06

quote:
Op maandag 6 juni 2005 17:58 schreef Kamigot het volgende:
Ff een hele domme vraag. Ten eerste moet ik me nog heel erg verdiepen in webdesign. Ik kan wel een site maken, maar meer met progsels als frontpage en dreamweaver . Nu ben ik een site aan het bouwen in CSS. Ik heb een van de style sheets van Dreamweaver MX gebruikt. NU heb ik alles redelijk goed staan maar wil een bepaalde indeling maken. Vroeger werkte ik vooral met frames en tables maar nu heb je cells (??) in CSS.

Wtf is een cell?

quote:
Ik kan in links bovenin een targetframe aangeven. Moet ik nu zelf een nieuw frame creeeren in de cell of iets dergelijks. Ik wil dus gewoon dat het menubalkje op dezelfde plaats blijft en dat de textcontent van de cell verandert.

Dat kan niet. Dat zijn nu net die frames die obsolete, deprecated, pointless, irritant en lelijk zijn.

quote:
Ik wil dus dat met het aanklikken van de bovenstaande links de content in het witte gedeelte onder ingeladen wordt. Wat moet ik aangeven als target bij die links ?

Gewoon een nieuwe pagina die wederom de code van de hele pagina bevat. Kijk maar eens hoe Fok en Tweakers.net en eigenlijk iedere grote site het doen. 95% van de professionele websites "can't be wrong"

Kamigot

maandag 6 juni 2005 @ 18:14

quote:
Op maandag 6 juni 2005 18:06 schreef curry684 het volgende:

[..]

Wtf is een cell?
[..]

Dat kan niet. Dat zijn nu net die frames die obsolete, deprecated, pointless, irritant en lelijk zijn.
[..]

Gewoon een nieuwe pagina die wederom de code van de hele pagina bevat. Kijk maar eens hoe Fok en Tweakers.net en eigenlijk iedere grote site het doen. 95% van de professionele websites "can't be wrong"

Ok dus ik moet voor elk linkje een compleet nieuwe pagina aanmaken ? dat vind ik niet echt efficient werken

Dus ik kan het niet zo maken dat als ik op een linkje klik, er in een bepaald gedeelte van de pagina andere text verschijnt ?

DionysuZ

maandag 6 juni 2005 @ 18:15

ik heb nu een css file met valid css erin. Maar aangezien internet explorer het niet altijd goed doet, heb ik wat hacks voor IE erin moeten bouwen. Vervolgens is het niet meer w3c valid. Dit heb ik opgelost door de IE hacks uit de CSS file te halen en vervolgens in de head de IE specific css geplaatst hiertussen:

1
2
3

Wat ik me afvraag is of dit een beetje een valid methode is

curry684

dinsdag 7 juni 2005 @ 13:19

quote:
Op maandag 6 juni 2005 18:14 schreef Kamigot het volgende:
[..]

Ok dus ik moet voor elk linkje een compleet nieuwe pagina aanmaken ? dat vind ik niet echt efficient werken

Daar heb je serverside scripting en serverside includes voor

Dan wordt het plots gruwelijk efficient juist

quote:
Dus ik kan het niet zo maken dat als ik op een linkje klik, er in een bepaald gedeelte van de pagina andere text verschijnt ?

Gelukkig niet. Hoe zouden mensen moeten deeplinken naar die pagina of bookmarken?

Voor enkel een andere tekst overigens kun je Javascript gebruiken, maar dat heeft ook niet iedereen.

curry684

dinsdag 7 juni 2005 @ 13:20

quote:
Op maandag 6 juni 2005 18:15 schreef DionysuZ het volgende:
ik heb nu een css file met valid css erin. Maar aangezien internet explorer het niet altijd goed doet, heb ik wat hacks voor IE erin moeten bouwen. Vervolgens is het niet meer w3c valid. Dit heb ik opgelost door de IE hacks uit de CSS file te halen en vervolgens in de head de IE specific css geplaatst hiertussen:
[ code verwijderd ]

Wat ik me afvraag is of dit een beetje een valid methode is

Perfect valide: voor andere browsers is het gewoon HTML comment, en alleen IE snapt de equation die je uitvoert

Kamigot

dinsdag 7 juni 2005 @ 13:46

Ok bedankt voor de tips. Is het nu verstandig om eerst alle pagina's aan te maken (simpel html met alleen de naam) 1 standaard met alle links goed erin en die dan doorkopieren naar alle andere. Dan hoef ik alleen steedss de tekst te veranderen.

Kamigot

dinsdag 7 juni 2005 @ 14:04

Sorry nog even een vraagje. Hoe maak ik zo'n uitklapmenutje net zoals ze op tweakers hebben ?

Ziet er nu zo uit

quote:
<div id="subglobal8" class="subglobalNav">
<a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8 link</a> | <a href="#">subglobal8
link</a> | <a href="#">subglobal8 link</a>
</div>

[ Bericht 60% gewijzigd door Kamigot op 07-06-2005 14:33:12 ]

curry684

woensdag 8 juni 2005 @ 14:36

quote:
Op dinsdag 7 juni 2005 14:04 schreef Kamigot het volgende:
Sorry nog even een vraagje. Hoe maak ik zo'n uitklapmenutje net zoals ze op tweakers hebben ?

Ziet er nu zo uit
[..]

Doe gewoon View Source bij op Tweakers

En de DOM inspector van Firefox is ook erg handig om te ontdekken hoe anderen dingen doen

curry684

woensdag 8 juni 2005 @ 14:39

quote:
Op dinsdag 7 juni 2005 13:46 schreef Kamigot het volgende:
Ok bedankt voor de tips. Is het nu verstandig om eerst alle pagina's aan te maken (simpel html met alleen de naam) 1 standaard met alle links goed erin en die dan doorkopieren naar alle andere. Dan hoef ik alleen steedss de tekst te veranderen.

Ik zou je HTML files gewoon als extensie .php geven en iedere file zo bouwen:

1
2
3
4
5
6

<?php require_once "include/pageheader.php"; ?>
<div id="feitelijkecontent">
<h1>Onderwerp van de pagina</h1>
<p>Wat toelichtende tekst</p>
</div>
<?php require_once "include/pagefooter.php"; ?>

Dan hoef je helemaal niets te kopieren, heb je feitelijk alleen de content per pagina uitgesplitst staan, ben je klaar voor een eventuele DB-koppeling later, hoef je de header en footer maar op 1 plek te wijzigen als je iets wil veranderen etc. etc. etc.

Copy/paste is evil, write code once and use it forever

DionysuZ

woensdag 8 juni 2005 @ 17:34

ok kom ik weer met een vraagje

. Ben bezig met een site en daarin heb ik een <div> geplaatst over een andere div heen en die moet een bepaalde alpha waarde krijgen (wit, 40% alpha). Dit had ik eerst opgelost met opacity, -moz-opacity en filter:alpha(opacity). Maar toen kreeg ik in sommige browsers (mac IE bijv.) een wit vlak ipv een 40% doorzichtig vlak. Deze wijze is dacht ik ook nog niet css valid en nog niet door veel browsers ondersteund (?).

Dus ik heb het op een andere manier opgelost. ik heb een .png gemaakt van 2px*2px die wit is en 40% doorzichtig. Dit is de CSS code in mijn css file:

1
2
3
4

#chapter_background {
background: transparent url(/px/alpha.png) 0% 0% repeat;
....
}

met de bijbehorende div:

Maar omdat Internet Explorer voor windows .png klote behandelt nog een aparte IE hack toegevoegd boven in de head van de index pagina:

1
2
3
4
5
6
7
8

dan werkt het allemaal mooi in IE voor windows etc. maar nu krijg ik een groen vlak als ik Mac IE gebruik :S. Wat doe ik fout of hoe kan ik dit beter oplossen?

SuperRembo

woensdag 8 juni 2005 @ 18:58

Er is een css hack voor mac ie 5:

1
2
3
4

#foo { background: red; }
/* commented backslash hack \*/
#foo { background: green; }
/* end hack */

Dan is #foo in mac ie 5 rood, in alle andere browsers groen.

Nietmachine

woensdag 8 juni 2005 @ 21:20

Ik heb net dit hele topic even doorgelezen en kwam het stukje over geen tabellen gebruiken voor de lay out dus ook tegen. Nu snap ik de nadelen er wel van natuurlijk, maar bij vrijwel (ben eigenlijk nog geen site tegengekomen waar het niet zo is) zie ik dat er voor de opmaak wel gewoon tabellen gebruikt worden en geen div's. Nu vraag ik me af waarom dat zo is

. Vallen de nadelen gewoon mee van tabellen als je je aan wat regels houdt of zijn div's gewoon teveel werk en/of te lastig?

Berkery

donderdag 9 juni 2005 @ 13:04

quote:
Op woensdag 8 juni 2005 21:20 schreef Nietmachine het volgende:
Ik heb net dit hele topic even doorgelezen en kwam het stukje over geen tabellen gebruiken voor de lay out dus ook tegen. Nu snap ik de nadelen er wel van natuurlijk, maar bij vrijwel (ben eigenlijk nog geen site tegengekomen waar het niet zo is) zie ik dat er voor de opmaak wel gewoon tabellen gebruikt worden en geen div's. Nu vraag ik me af waarom dat zo is . Vallen de nadelen gewoon mee van tabellen als je je aan wat regels houdt of zijn div's gewoon teveel werk en/of te lastig?

Dat div's teveel werk zou zijn is onzin, het levert juist minder werk op omdat je html veel simpeler wordt. Als je gewend bent om met tabellen te lay-outen dan vergt het wel een omschakeling in je denkwijze (je moet structuur en opmaak scheiden), en het vergt wat studie. Die omschakeling hebben nog lang niet alle webdesigners gemaakt.

Leshy

donderdag 9 juni 2005 @ 13:14

Bovendien gedragen tables zich iets consistenter in verschillende browsers dan divs dat doen. Dit komt met name omdat Internet Explorer op het gebied van CSS nog een jaar of vier achterloopt bij moderne browsers als Opera, Safari en Mozilla. Het vereist dus een klein beetje extra kennis en werk om een div-based layout cross-browser werkend te krijgen, en veel webdesigners laten zich hierdoor afschrikken.

DionysuZ

donderdag 9 juni 2005 @ 14:59

quote:
Op woensdag 8 juni 2005 18:58 schreef SuperRembo het volgende:
Er is een css hack voor mac ie 5:
[ code verwijderd ]

Dan is #foo in mac ie 5 rood, in alle andere browsers groen.

jah ben bekend met de mac ie hack

maar wist niet waar ik dat zou moeten gebruiken. Ik heb een oplossing gevonden op het groene vlak: de PNG met 40% alpha channel moest een formaat hebben van minstens 64x64, vond ik via google. Na de resize werkt het opeens goed :S.

curry684

donderdag 9 juni 2005 @ 21:55

quote:
Op woensdag 8 juni 2005 21:20 schreef Nietmachine het volgende:
Ik heb net dit hele topic even doorgelezen en kwam het stukje over geen tabellen gebruiken voor de lay out dus ook tegen. Nu snap ik de nadelen er wel van natuurlijk, maar bij vrijwel (ben eigenlijk nog geen site tegengekomen waar het niet zo is) zie ik dat er voor de opmaak wel gewoon tabellen gebruikt worden en geen div's. Nu vraag ik me af waarom dat zo is . Vallen de nadelen gewoon mee van tabellen als je je aan wat regels houdt of zijn div's gewoon teveel werk en/of te lastig?

Als je deze vraag durft te stellen snap je de nadelen ervan niet

Nadelen: je semantiek klopt niet, mensen met een niet-PC-screen browser kunnen je site niet gebruiken, searchengines kunnen je site niet fatsoenlijk indexeren, printen werkt niet fatsoenlijk, maintainability is nul, je HTML is 3 keer te groot, opmaak wijzigen is enorme kutklus.

Voordelen: noone knows, maar helaas wordt 90% van de websites op het internet niet door webdesigners maar door omhooggevallen prutsers met een boek 'HTML 2.0 for dummies' uit 1995 gemaakt. En dus zijn er veel tablebased sites.

Nietmachine

donderdag 9 juni 2005 @ 22:06

quote:
Op donderdag 9 juni 2005 21:55 schreef curry684 het volgende:

[..]

Als je deze vraag durft te stellen snap je de nadelen ervan niet

Nadelen: je semantiek klopt niet, mensen met een niet-PC-screen browser kunnen je site niet gebruiken, searchengines kunnen je site niet fatsoenlijk indexeren, printen werkt niet fatsoenlijk, maintainability is nul, je HTML is 3 keer te groot, opmaak wijzigen is enorme kutklus.

Voordelen: noone knows, maar helaas wordt 90% van de websites op het internet niet door webdesigners maar door omhooggevallen prutsers met een boek 'HTML 2.0 for dummies' uit 1995 gemaakt. En dus zijn er veel tablebased sites.

De nadelen snappen is niet moeilijk. Snappen waarom er dan alsnog zoveel gebruik van gemaakt wordt is lastiger. Als ik in de bron van veeeeel sites (en dan niet de standaard huis/tuin en keuken sites natuurlijk) kijk zie ik dus dat die gewoon gebruik maken van tables, vandaar mijn vraag dus.

Roonaan

donderdag 9 juni 2005 @ 23:14

quote:
Op donderdag 9 juni 2005 21:55 schreef curry684 het volgende:
Voordelen: noone knows, maar helaas wordt 90% van de websites op het internet niet door webdesigners maar door omhooggevallen prutsers met een boek 'HTML 2.0 for dummies' uit 1995 gemaakt. En dus zijn er veel tablebased sites.

Lichtelijk overdreven maar de main line klopt wel. Overigens hebben programma's als dreamweaver en consorten ook geen positief effect op het flowed designs.

curry684

vrijdag 10 juni 2005 @ 14:30

quote:
Op donderdag 9 juni 2005 22:06 schreef Nietmachine het volgende:

[..]

De nadelen snappen is niet moeilijk. Snappen waarom er dan alsnog zoveel gebruik van gemaakt wordt is lastiger. Als ik in de bron van veeeeel sites (en dan niet de standaard huis/tuin en keuken sites natuurlijk) kijk zie ik dus dat die gewoon gebruik maken van tables, vandaar mijn vraag dus.

Voor mensen die HTML/CSS niet snappen is het ook een logischer manier van werken: je hebt een browser enerzijds en een plaatje met gewenste layout anderzijds, dan is het het handigste voor de leek om het gewoon in blokjes op te snijden en zo te bouwen.

Dat zijn echter zoals ik zeg de leken die onterecht beweren verstand te hebben van webdesign. En daar zijn er veel te veel van, helaas ook hier en daar met veel te dikke salarissen.

sop

vrijdag 10 juni 2005 @ 16:07

Je winst om een site te ontwikkelen met een layout zonder tables, pak je eigenlijk ook pas zodra je onderhoud op je site gaat plegen.

Leshy

vrijdag 10 juni 2005 @ 20:02

quote:
Op vrijdag 10 juni 2005 16:07 schreef sop het volgende:
Je winst om een site te ontwikkelen met een layout zonder tables, pak je eigenlijk ook pas zodra je onderhoud op je site gaat plegen.

Of uit de bandbreedte die je bespaart, alhoewel dat uiteraard pas een argument wordt bij grotere pagina's met veel bezoekers.

DutchBlood

vrijdag 10 juni 2005 @ 20:50

Ik ben ook weer aan het cssen.
Het gaat om deze site: http://matthijs.info/rmrt/

Ik heb 2 div's naast elkaar. #vakjes en #content, ik krijg alleen de grijze lijn in IE niet weg.

Padding: 0xp;
Opgeven heeft geen nut.

Iemand enig idee hoe ik dit oplos, behalve nog een andere div er achter te maken met dezelfde achtergrond?

Nietmachine

vrijdag 10 juni 2005 @ 23:20

Ik ben nu zelf ook wat gaan spelen aan de hand van wat ik hier tegen gekomen ben o.a..

Nu heb ik een vraag mbt dit:

1
2
3
4
5
6
7
8
9

#content_splitter {
  width: 768px;
  min-height: 230px;
  background-color: #C9C9C9;
  display: block;
}
* html #content_splitter {
  height: 230px;
}

In #content_splitter staat dus min-height: 230px;, als je dat er neer zet zonder

* html #content_splitter {
height: 230px;
}

wordt de hoogte geen 230px. Met bovenstaande * html... is dat wel het geval. Ook als je min-height: 230px; weghaalt en * html... laat staan.

Nu ik erbij nadenk lijkt het me een methode om cross browser te werken?

Leshy

zaterdag 11 juni 2005 @ 13:17

quote:
Op vrijdag 10 juni 2005 23:20 schreef Nietmachine het volgende:
Nu ik erbij nadenk lijkt het me een methode om cross browser te werken?

Ik neem aan dat je gebruik maakt van Internet Explorer. Moderne browsers zoals Opera, Safari en Mozilla ondersteunen wel degelijk netjes de min-height property en zullen het blok dus 230px hoog maken als de inhoud kleiner is.

Internet Explorer doet dat echter niet, en dan moet je dus via bijvoorbeeld * html werken, wat incorrecte CSS is omdat je hiermee zegt: "alles binnen het element html, wat een kind is van welk ander element dan ook", wat per definitie fout is omdat html het root element is, daar zit niets meer boven. Ook hier is Internet Explorer weer de enige browser die dit niet negeert, zoals zou moeten, maar deze regel wel toepast.

Met andere woorden:

min-height: 230px;
Mozilla, Opera, Safari: Ok, het blok moet minimaal 230 pixels hoog worden, geregeld.
Internet Explorer: Huh? Watte?

* html [...] height: 230px;
Mozilla, Opera, Safari: Erm, * html kan helemaal niet. Dit is fout, dus negeren we dit.
Internet Explorer: Durrr. Hoogte 230 pixels. Okay! Durrr.

SuperRembo

zaterdag 11 juni 2005 @ 22:16

quote:
Op zaterdag 11 juni 2005 13:17 schreef Leshy het volgende:
[...] * html werken, wat incorrecte CSS is omdat je hiermee zegt: "alles binnen het element html, wat een kind is van welk ander element dan ook", wat per definitie fout is omdat html het root element is, daar zit niets meer boven.[...]

* html is geen foute css, er zijn alleen geen elementen die er aan voldoen.

Hier vond ik een mooi overzicht van alle css hacks.

Leshy

zaterdag 11 juni 2005 @ 22:19

quote:
Op zaterdag 11 juni 2005 22:16 schreef SuperRembo het volgende:
* html is geen foute css, er zijn alleen geen elementen die er aan voldoen.

Syntactisch is de CSS mogelijk correct, maar aangezien de html-tag per definitie nooit een parent element kan hebben, is het gebruik ervan wel degelijk fout

SuperRembo

zaterdag 11 juni 2005 @ 22:40

Het is echt correcte css. Het enige wat fout is, is dat IE wel elementen denkt te vinden die er aan voldoen.

quote:
In valid HTML and XHMTL documents html is always the root element and body is always a child of the root element, and never a grandchild (or great grandchild). Therefore, the first 3 CSS selectors above should not match any element. Nonetheless, they are valid selectors.

bron (de ontdekker van deze bug)

DutchBlood

dinsdag 14 juni 2005 @ 13:43

quote:
Op vrijdag 10 juni 2005 20:50 schreef DutchBlood het volgende:
Ik ben ook weer aan het cssen.
Het gaat om deze site: http://matthijs.info/rmrt/

Ik heb 2 div's naast elkaar. #vakjes en #content, ik krijg alleen de grijze lijn in IE niet weg.

Padding: 0xp;
Opgeven heeft geen nut.

Iemand enig idee hoe ik dit oplos, behalve nog een andere div er achter te maken met dezelfde achtergrond?

Anyone?

Leshy

dinsdag 14 juni 2005 @ 17:01

quote:
Op zaterdag 11 juni 2005 22:40 schreef SuperRembo het volgende:
Het is echt correcte css.

Zoals ik al zei, syntactisch is het inderdaad correct

markiemark

donderdag 16 juni 2005 @ 19:54

hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

SuperRembo

donderdag 16 juni 2005 @ 20:03

quote:
Op donderdag 16 juni 2005 19:54 schreef markiemark het volgende:
hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

Ik denk dat je IE-filters bedoeld. Ik heb nooit zoiets gezien dat cross-browser werkt.

curry684

vrijdag 17 juni 2005 @ 01:07

quote:
Op donderdag 16 juni 2005 19:54 schreef markiemark het volgende:
hoe maak ik text met css ook al weer met schaduw of anti alias of zo? is daar een reference voor?

Antialiasing zit niet in CSS. Shadows zitten in CSS3 geloof ik, en werkt dus nergens. Je kunt met CSS2 of 2.1 selectors overigens shadows goed faken, maar die kent IE weer niet. Shadows zijn sowieso lilluk overigens

curry684

vrijdag 17 juni 2005 @ 01:08

Zie overigens A List Apart voor alle bekende methodes om drop shadows te maken.

wonko

vrijdag 17 juni 2005 @ 12:17

Misschien is het al gevraagd maar kan ik het niet vinden. Een zeer goed boek of site om met CSS aan de slag te gaan? Basiskennis is aanwezig maar wil het veel verder uitdiepen.

SqueaK

vrijdag 17 juni 2005 @ 18:46

quote:
Op vrijdag 17 juni 2005 12:17 schreef wonko het volgende:
Misschien is het al gevraagd maar kan ik het niet vinden. Een zeer goed boek of site om met CSS aan de slag te gaan? Basiskennis is aanwezig maar wil het veel verder uitdiepen.

ik zelf vind dit wel een fijne site: http://www.bitstorm.org/edwin/cursus/css.html

SqueaK

vrijdag 17 juni 2005 @ 18:48

ik ben een site op aan het bouwen helemaal uit <div>

alleen wil ik in een bepaalde div een achtergrond image... daarvoor gebruik ik dan in de opmaak dit:

1	background: #0A7CB4 url(images/image.jpg) repeat-x fixed right;

in IE werkt het perfect, maar in FF niet echt.... hoe werkt het zodat in FF ook goed is..

SuperRembo

vrijdag 17 juni 2005 @ 19:43

quote:
Op vrijdag 17 juni 2005 18:48 schreef SqueaK het volgende:
ik ben een site op aan het bouwen helemaal uit <div>

alleen wil ik in een bepaalde div een achtergrond image... daarvoor gebruik ik dan in de opmaak dit:
[ code verwijderd ]

in IE werkt het perfect, maar in FF niet echt.... hoe werkt het zodat in FF ook goed is..

In IE werkt het niet perfect, want IE kent geen background-position: fixed

Ik denk dat je "fixed" weg moet laten om te krijgen wat je wil.

SqueaK

zaterdag 18 juni 2005 @ 06:24

quote:
Op vrijdag 17 juni 2005 19:43 schreef SuperRembo het volgende:

[..]

In IE werkt het niet perfect, want IE kent geen background-position: fixed
Ik denk dat je "fixed" weg moet laten om te krijgen wat je wil.

klopt idd...

nu het volgende ... :

ik heb zo 8 pagina's waar ik dit wel hebben, maar dan 8 keer met een verschillende image...

kan ik nu het beste 8 verschillende stylesheets maken waarin ik alleen steeds de naam van de image heb veranderd, of kan ik beter in 1 stylesheet 8 id's aanmaken ?

SuperRembo

zaterdag 18 juni 2005 @ 10:13

8 verschillende id's. Je wil echt geen 8 verschillende stylesheets onderhouden.

Wat je ook kan doen is de body een id geven.

1
2
3
4
5
6
7
8
9
10
11

#title {
    background-color: #ccf;
    background-repeat: repeat-x;
    background-position: right;
}
#introPage #title {
    background-image: url(img/intro.jpg);
}
#someOtherPage #title {
    background-image: url(img/otherimage.jpg);
}

#introPage en #someOtherPage zijn dan id's van de body op verschillende pagina's. Als je dan nog andere elementen per pagina wil aanpassen dan hoef je geen id's aan te passen.

SqueaK

zaterdag 18 juni 2005 @ 12:02

quote:
Op zaterdag 18 juni 2005 10:13 schreef SuperRembo het volgende:
8 verschillende id's. Je wil echt geen 8 verschillende stylesheets onderhouden.

Wat je ook kan doen is de body een id geven.
[ code verwijderd ]

#introPage en #someOtherPage zijn dan id's van de body op verschillende pagina's. Als je dan nog andere elementen per pagina wil aanpassen dan hoef je geen id's aan te passen.

hmm dat verneukt heel de layout.... ziet er niet meer uit nu

curry684

zondag 19 juni 2005 @ 22:19

quote:
Op vrijdag 17 juni 2005 18:48 schreef SqueaK het volgende:
ik ben een site op aan het bouwen helemaal uit <div>

Jij hebt het dus niet gesnapt.

HTML met CSS is een manier om semantisch correct gebouwde sites mee te stylen waardoor semantiek en content enerzijds en presentatie en layout anderzijds strak gescheiden blijven. Enkel <div> gebruiken is dus gewoon pointless, en dan heb je het niet gesnapt.

KLIK VOOR VERPLICHT LEESVOER.

SuperRembo

zondag 19 juni 2005 @ 23:04

quote:
Op zaterdag 18 juni 2005 12:02 schreef SqueaK het volgende:

[..]

hmm dat verneukt heel de layout.... ziet er niet meer uit nu

Ik doe niets bijzonders. Als je 't goed toepast dan verneukt het zeker de layout niet.

SqueaK

maandag 20 juni 2005 @ 13:26

quote:
Op zondag 19 juni 2005 23:04 schreef SuperRembo het volgende:

[..]

Ik doe niets bijzonders. Als je 't goed toepast dan verneukt het zeker de layout niet.

ik heb dit als code:

/********************************************* Basis */
body {
   margin-top: 10px;
   background-image: url(images/achtergrond_algemeen.jpg);
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   color: white;
   line-height: 16px;
   text-align: center;
}

h1 {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   color: white;
   font-weight: bold;
}

a {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   text-decoration:none;
   color: #EE9700;
}

a:hover {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 8.5pt;
   text-decoration:underline;
   color: #EE9700;
}

/********************************************* Content */
#container {
   width: 700px;
   text-align: left;
   margin: auto auto 30px auto;
   border: 0px;
   padding: 0px;
}

#kop {
   margin-left: auto;
   position: absolute;
   width: 700px;
   height: 80px;
   background-color: red;
}

#left_blank
{
   margin-left: 0px;
   margin-top: 80px;
   position: absolute;
   width: 10px;
   height: 100%;
}

#left_border
{
   margin-left: 10px;
   margin-top: 80px;
   position: absolute;
   width: 28px;
   height: 100%;
   background: url(images/side_left.jpg);
}

#middle
{
   margin-left: 38px;
   margin-top: 80px;
   position: absolute;
   width: 624px;
   background: #0A7CB4 no-repeat right;
}

.overpartybike #middle {
    background-image: url(images/image_overpartybike.jpg);
    height: 100%;
}

.prijzen #middle {
    background-image: url(images/image_prijzen.jpg);
    height: 100%;
}

#right_border
{
   margin-left: 662px;
   margin-top: 80px;
   position: absolute;
   width: 28px;
   height: 100%;
   background: url(images/side_right.jpg);
}

#right_blank
{
   margin-left: 690px;
   margin-top: 80px;
   position: absolute;
   width: 10px;
   height: 100%;
}

#onder {
   background: url(images/onder.jpg);
   margin-left: 10px;
   margin-top: 480px;
   width:680px;
   height: 22px;
   position: absolute;
}

en dan is dit het resultaat

curry684

maandag 20 juni 2005 @ 15:37

quote:
Op maandag 20 juni 2005 13:26 schreef SqueaK het volgende:
en dan is dit het resultaat

Dude, die <map> moet gewoon een <ul> van <li> elements zijn die je styled in de CSS zodat ze er als een horizontaal grafisch menu uitzien. Je bent nu namelijk alsnog grafische meuk in je HTML aan het zetten, en dan kun je net zo goed geen CSS gebruiken.

Ik zie ook aan je divs nu al dat je table-based gaat layouten maar dan met andere tags....

markiemark

maandag 20 juni 2005 @ 23:57

ok ik heb twee problemen met mn tabel...

1. centreren.. ik kan mn tabel centreren (met <table align="center">), maar op het moment dat de pagina langer wordt dan in beeld past, komt er een scrollbalk waardoor de pagina een stukje naar links wordt geschoven... hoe voorkom ik dit???

2. max hoogte bepalen... heb mijn site gemaakt op basis van tabellen. nu is de frontpage niet zo heel groot, dus is niet zo groot verticaal gezien. als ik een subpagina oproep, wordt de pagina langer, en wordt dus langer dan het scherm aan kan zonder scrollbalken.. hoe kan ik de site verticaal maximaliseren, maar wel zo dat de site zich aanpast als de site langer is dan de verticale lengte??

WalfredGeesink

dinsdag 21 juni 2005 @ 23:07

dat centreren lukt mij niet altijd even goed met dat css. div's met een fixed width/height lukt prima maar nu heb ik er 1tje met een width/height die niet bekend is. dit is mijn html code:

1
2
3
4
5

<body>
<div>
<p>blabla</p>
</div>
</body>

de hoeveelheid tekst in p verschilt, dus de hoogte verandert ook steeds. ik wil die div steeds gecentreerd houden.

voor het horizontaal centreren bedacht ik als oplossing text-align: center; (bij body) dat werkt prima maar het verticaal centreren lukt niet. iemand een idee?

bartjeuh

dinsdag 21 juni 2005 @ 23:29

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...

1
2
3
4
5
6
7
8
9
10
11

#3 {
   margin-left: 4px;
   margin-top: 0px;
   margin-right: 4px;
   width: 250px;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
}

<div id="3">content</div>

Ik dacht dus aan dat maar werkt niet

[ Bericht 31% gewijzigd door bartjeuh op 21-06-2005 23:44:58 ]

DutchBlood

woensdag 22 juni 2005 @ 09:07

quote:
Op dinsdag 21 juni 2005 23:29 schreef bartjeuh het volgende:

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...
[ code verwijderd ]

Ik dacht dus aan dat maar werkt niet

Niet dmv (alleen) css.

De enige manier is wellicht de tekst in een achtergrondplaatje stoppen en dat dan via css setten.

DutchBlood

woensdag 22 juni 2005 @ 09:08

quote:
Op dinsdag 21 juni 2005 23:07 schreef WalfredGeesink het volgende:
dat centreren lukt mij niet altijd even goed met dat css. div's met een fixed width/height lukt prima maar nu heb ik er 1tje met een width/height die niet bekend is. dit is mijn html code:
[ code verwijderd ]

de hoeveelheid tekst in p verschilt, dus de hoogte verandert ook steeds. ik wil die div steeds gecentreerd houden.

voor het horizontaal centreren bedacht ik als oplossing text-align: center; (bij body) dat werkt prima maar het verticaal centreren lukt niet. iemand een idee?

Geef de div vertical-align: middle; mee.
http://www.w3schools.com/css/pr_pos_vertical-align.asp

#ANONIEM

woensdag 22 juni 2005 @ 10:06

Hallo

ben ik weer!

Ik heb de code geprobeerd op te schonen, (zover dat kon) maar nu werken de rechtermenu`s wel in Firefox (de hele site ziet er in Firefox perfect uit) maar niet in Internet Explorer, en ik heb eigenlijk geen idee wat er mis is...iemand die het toevallig ziet?

http://www.imperium-studi(...)20b.v.%20-%20ISP.htm <-- dit is de link.

curry684

woensdag 22 juni 2005 @ 17:42

quote:
Op dinsdag 21 juni 2005 23:29 schreef bartjeuh het volgende:

Is het mogelijk om in de style.css ook de content van een div te veranderen?

Het maken van div's op men site lukt wel maar nu wil ik daar tekst in krijgen dmv een andere file...
[ code verwijderd ]

Ik dacht dus aan dat maar werkt niet

Wat is er mis met serverside includes, PHP, ASP of een andere scripting taal waarmee men dit altijd oplost?

Het kan overigens met CSS3 wel tot op zekere hoogte.

theDax

woensdag 22 juni 2005 @ 17:55

ik wil graag een EMBED tag van tevoren aangeven in CSS. Maar embed heeft geen ID's.. hoe kan ik dat doen ?
Ik wil namelijk een paar transparant DIV blokken hebben, met in elk een filmpje.

theDax

woensdag 22 juni 2005 @ 18:02

ik heb het al :|

bartjeuh

donderdag 23 juni 2005 @ 10:55

quote:
Op woensdag 22 juni 2005 17:42 schreef curry684 het volgende:

[..]

Wat is er mis met serverside includes, PHP, ASP of een andere scripting taal waarmee men dit altijd oplost?

Het kan overigens met CSS3 wel tot op zekere hoogte.

Het probleem is dat ik daar helemaal niks van ken, en een tutorial die net uitlegt wat ik nodig heb vind ik niet

KlappernootatWork

maandag 27 juni 2005 @ 12:50

mag ik hier even voor de leken een scriptlose oplossing voor transparante png's deponeren?

Maak je .png in fotosjop en importeer die in flash (als je die hebt)
ga in flash naar de publish settings en verander die in windowless transparant.
sla je bestand op als flash image.
ga naar dreamweaver (als je deze ook hebt)
importeer dit flash bestand in dreamweaver.
ga in het properties menu naar de geavanceerde opties en voeg dit toe:
wmode
en in het veld er naast:
transparency

nu kun je in de preview mode zien dat je plaatje goed weergegeven word..

succes!

[ Bericht 2% gewijzigd door KlappernootatWork op 27-06-2005 13:01:35 ]

sop

maandag 27 juni 2005 @ 13:33

Transparante PNG's zijn ook niet echt het probleem. Het gebruik van PNG's met een alpha blend (een beetje transparant) gaan fout, daar helpt deze (overigens nogal bewerkelijke) manier niet bij.

DionysuZ

maandag 27 juni 2005 @ 13:36

De enige die problemen heeft met alpha blend bij png is toch IE?

Leshy

maandag 27 juni 2005 @ 14:04

quote:
Op maandag 27 juni 2005 13:36 schreef DionysuZ het volgende:
De enige die problemen heeft met alpha blend bij png is toch IE?

Yup.

KlappernootatWork

maandag 27 juni 2005 @ 14:29

quote:
Op maandag 27 juni 2005 13:33 schreef sop het volgende:
Transparante PNG's zijn ook niet echt het probleem. Het gebruik van PNG's met een alpha blend (een beetje transparant) gaan fout, daar helpt deze (overigens nogal bewerkelijke) manier niet bij.

je bedoeld een kleurenschaduw of een doorlatend stuk glas? ook hier lukt het bij

KlappernootatWork

maandag 27 juni 2005 @ 14:30

quote:
Op maandag 27 juni 2005 14:04 schreef Leshy het volgende:

[..]

Yup.

IE is altijd al zijn tijd vooruit geweest...

DionysuZ

maandag 27 juni 2005 @ 14:50

ik heb het opgelost als volgt (CSS). Dit is de code waar het om draait:

1 2	<div id="chapter_background"> </div>

met in mijn css file:

1
2
3
4
5
6
7
8

#chapter_background {
  background: transparent url(../px/alpha.png) 0% 0% repeat;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 494px;
  height: 447px;
}

vervolgens heb ik in de head van mijn pagina nog het volgende neergepleurd:

1
2
3
4
5
6
7
8

DionysuZ

maandag 27 juni 2005 @ 17:36

is er een manier om <div>s met css overflow: hidden (of overflow: auto) scrollable te maken met de scrollwheel? er zijn veel mensen die zich irriteren aan het niet scrollbaar zijn van die divs met de scrollwheel :S

sop

maandag 27 juni 2005 @ 17:42

quote:
Op maandag 27 juni 2005 17:36 schreef DionysuZ het volgende:
is er een manier om <div>s met css overflow: hidden (of overflow: auto) scrollable te maken met de scrollwheel? er zijn veel mensen die zich irriteren aan het niet scrollbaar zijn van die divs met de scrollwheel :S

Dat was toch een FF bug?

DionysuZ

maandag 27 juni 2005 @ 17:50

jah inderdaad. Maar is er geen manier (desnoods met javascript) om een div met overflow: hidden scrollable te maken. Dat werkt ook niet in IE nl.

AnGabhar

maandag 27 juni 2005 @ 20:11

quote:
Op maandag 27 juni 2005 17:50 schreef DionysuZ het volgende:
jah inderdaad. Maar is er geen manier (desnoods met javascript) om een div met overflow: hidden scrollable te maken. Dat werkt ook niet in IE nl.

"Overflow: hidden" mag geen schuifmogelijkheid hebben; dat is nu eenmaal wat het betekent. Divs met een andere overflow-waarde die voor een schuifbalk zorgt zijn vzviw in de recentste versies van alle browsers met het wieltje rolbaar.

sop

maandag 27 juni 2005 @ 21:27

quote:
Op maandag 27 juni 2005 20:11 schreef AnGabhar het volgende:

[..]

"Overflow: hidden" mag geen schuifmogelijkheid hebben; dat is nu eenmaal wat het betekent. Divs met een andere overflow-waarde die voor een schuifbalk zorgt zijn vzviw in de recentste versies van alle browsers met het wieltje rolbaar.

Die mag wel schuifmogelijkheid hebben, alleen geen scrollbars.

AnGabhar

maandag 27 juni 2005 @ 23:02

quote:
Op maandag 27 juni 2005 21:27 schreef sop het volgende:
Die mag wel schuifmogelijkheid hebben, alleen geen scrollbars.

De css-specificatie meldt "no scrolling user interface should be provided to view the content outside the clipping region". Strict genomen hangt het van je definitie van 'user interface' af of er naast schuifbalken nog andere oplossingen mogelijk zijn, maar naar mijn mening behoort iedere mogelijkheid tot interactie met het programma - muis- en toetsenbordbediening, menu's en contextmenu's, weergave van opties op het scherm - tot de gebruikersinterface. Ik zie hier dus geen oplossing voor.

Iets anders dan schuifbalken om inhoud te verschuiven moet je trouwens niet eens willen. Het is uitermate on-standaard en leidt tot verwarring.

DionysuZ

donderdag 30 juni 2005 @ 14:46

ik heb het gedeeltelijk opgelost. Met de onmousewheel event geplakt aan wat javascript. Het is Internet Explorer specifiek, dus de scrollwheel gebruiken in andere browsers lukt nog niet, daar moeten ze maar de andere scrollmogelijkheid gebruiken

. Een beetje oplossing is beter dan geen oplossing.

Leonoor

donderdag 7 juli 2005 @ 13:26

Ik heb problemen met het instellen van de lengte van mn body/bottom-margin.

In FireFox krijg ik wel de body over het gehele scherm, maar maakt hij geen bottom-margin.
I.E. maakt wel een mooie bottom-margin, maar die maakt hem ook gerust ergens midden in het scherm, als mn content niet het hele scherm beslaat. Ik wil dus gewoon dat de body helemaal doorloopt tot onderaan het scherm, hoe weinig content ik ook heb, en onderaan een bottom-margin.

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

body
{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #000000;
   margin: 16px 0px 16px 0px;
   text-align: center;
   background-image: url(images/achtergrond2.jpg);
}
div#main
{
   width: 700px;
   background-color=#FFFFFF;
   align : center;
   height : 100%;
}

div#body
{
        width: 100%;
   background-image: url(images/body.jpg);
        background-repeat: repeat-y;
        text-align: center;
   padding-top: 10px;
   min-height : 100%;
}

Iemand enig idee?

SHeqel

donderdag 7 juli 2005 @ 21:39

quote:
Op donderdag 7 juli 2005 13:26 schreef Leonoor het volgende:
Ik heb problemen met het instellen van de lengte van mn body/bottom-margin.

In FireFox krijg ik wel de body over het gehele scherm, maar maakt hij geen bottom-margin.
I.E. maakt wel een mooie bottom-margin, maar die maakt hem ook gerust ergens midden in het scherm, als mn content niet het hele scherm beslaat. Ik wil dus gewoon dat de body helemaal doorloopt tot onderaan het scherm, hoe weinig content ik ook heb, en onderaan een bottom-margin.

CSS:
[ code verwijderd ]

Iemand enig idee?

probeer iig

html, body {
height: 100%;
}

Lkw

vrijdag 15 juli 2005 @ 21:55

Ik heb een div #container gemaakt, die ongeacht de resolutie van een bezoeker in het midden van de pagina staat. Daarnaast een stuk of 6 andere div's die binnen deze 'container' vallen. Die verhuizen dus ook braaf mee en blijven in positie als de bezoeker z'n resolutie aanpast.

Tot zover alles mooi en aardig. Maar nu het probleem:

Ik krijg dit alleen voor elkaar als die andere div's een relative position hebben. Maar.... dan willen ze niet overlappen. En dat wil ik wel!

Weet iemand in CSS een oplossing voor de gebruikte constructie waarbij dus alles goed positioneerd blijft ongeacht de resolutie, maar waarbij toch overlap mogelijk tussen de verschillende div's???

Dank alvast!

Lkw

vrijdag 15 juli 2005 @ 22:08

Ik had me gek gegoogled naar de oplossing, en net nu ik bovenstaand bericht had ingetypt, dook op een ander forum het antwoord op

-> de 'container' krijgt als position de waarde 'relative' en de andere div's 'absolute'. Dit 'absolute' geldt dan niet tov het browser-window, maar ten opzichte van de 'container'.

En ja, ik had verzuimd om de container sowieso een position-waarde mee te geven

Opgelost dus

Lkw

vrijdag 15 juli 2005 @ 23:45

Voor degenen die met hetzelfde worstelen als ik, dit werkt prima in zowel Opera, FF als IE (centreert alleen horizontaal):

#container
{
top: 0;
position: absolute;
width: 773px;
margin-left: -386px;
left: 50%;
}

Andere 'inpandige' elementen krijgen dan overigens ook position 'absolute'.

PS Sorry voor deze 3 posts achter elkaar, maar ik had er even genoeg van en was erg toe aan hulp

[ Bericht 67% gewijzigd door Lkw op 16-07-2005 02:20:39 ]

Chandler

woensdag 20 juli 2005 @ 15:50

Omdat ik het topic niet kon vinden via google en fok.

weet iemand wat hier fout gaat!

Ik maak buttons voor bovenin (zie plaatje) alleen deze hebben een vaste breedte ennuh dat komt niet door in de layout? why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertically and horizontally centred</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body
{
  margin: 0;
  background-position: 0% 0%;
  scrollbar-face-color: white;
  background-attachment: fixed;
  scrollbar-highlight-color: white;
  scrollbar-shadow-color: #cccccc;
  scrollbar-arrow-color: #99cc99;
  scrollbar-track-color: white;
  scrollbar-darkshadow-color: white;
  scrollbar-base-color: #cccccc;
  scrollbar-3d-light-color: white;
  font-family: verdana;
  font-size: 8pt;

}

#center
{
  position: absolute;
  top: 5px; /* for IE-mac */
  left: 0;
}

/* Hide from IE-mac */
#center
{
  top: 50%;
  width: 100%;
  margin-top: -200px;
  text-align: center;
  min-width: 800px;
}
/* End hide from IE-mac */

#main
{
  width: 800px;
  height: 400px;
  margin: 0 auto;
  text-align: left;
  border: 1px solid black;
}

#top
{
  width: 100%;
  height: 50px;
}

#middle
{
  height: 350px;
  text-align: left;
  margin: 5px;
}

#middlecontainer
{
  height: 340px;
  width: 100%;
}

#left
{
  float: left;
  height: 100%;
  width: 383px;
  padding-left: 10px;
  overflow: auto;
  border: 1px solid #cccccc;
}

#right
{
  float: right;
  margin-left: 5px;
  height: 340px;
  width: 390px;
}

#righttop
{
  height: 95%;
}

#rightbottom
{
  height: 5%;
  text-align: left;
}

.button
{
  z-index: 9;
  width: 100px;
  margin: 5px;
  height: 25px;
  padding: 5px;
  color: green;
  background-color: A0C6F0;
  text-align: center;
  border: 1px solid red;
  underline: none;
  display: inline;
}
</style>
</head>

<body>
  <div id="center">
    <div id="main">
      <div id="top">
        <div class="button">1test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test</div>
        <div class="button">test1</div>
      </div>
      <div id="middle">
        <div id="middlecontainer">
          <div id="left"
><br /><br /><br /><strong>Left</strong><br /><br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left
<br />Left<br />Left<br />Left<br />Left<br />Left<br />Left<br /></div>
            <div id="right">
               <div id="righttop">Top</div>
               <div id="rightbottom">Bottom</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Meer foutjes gezien?! vertel ze graag!

Berkery

woensdag 20 juli 2005 @ 15:52

Dat komt door je display: inline vermoed ik. inline elementen kan je geen vaste breedte geven, normaal gesproken.

Chandler

woensdag 20 juli 2005 @ 15:54

hmm maar als ik geen inline gebruik komen ze onder elkaar, natuurlijk zou ik dat kunnen oplossen met een float: left; hmm.... tnx voor de thoughts b!.

Berkery

woensdag 20 juli 2005 @ 15:54

Misschien kan je hier wat mee: http://www.alistapart.com/articles/taminglists/

Berkery

woensdag 20 juli 2005 @ 15:56

Of dit: http://home.wanadoo.nl/b.(...)orizontaal-menu.html

Leshy

woensdag 20 juli 2005 @ 17:50

quote:
Op woensdag 20 juli 2005 15:52 schreef Berkery het volgende:
Dat komt door je display: inline vermoed ik. inline elementen kan je geen vaste breedte geven, normaal gesproken.

Nope, daar kun je display: inline-block; voor gebruiken, maar dat werkt in MSIE en Mozilla/Firefox alleen op items die normaal gesproken al inline items zijn

Chandler

donderdag 21 juli 2005 @ 09:52

ik heb het dus opgelost met een float: left;

maar nu moet ik nog eens kijken hoe ik het klaar krijg met hover etc.

Roonaan

donderdag 21 juli 2005 @ 10:02

<div onmouseover="this.className='divhover';" onmouseout="this.className='';">

-r-

MrDoegewoon

zondag 24 juli 2005 @ 23:43

Ik ben net begonnen met het opmaken in CSS

en heb dit:

<div id="header">
bladiebla.nl
</div>
<div id="tussen">
link 1 <> link 2 <> link 3
</div>

Nu wil ik dat tussen header en tussen een wit ruimt komt (een <br> is al te groot) hoe krijg ik dit voor elkaar (zal vast een domme vraag zijn maar goed

)

WalfredGeesink

zondag 24 juli 2005 @ 23:57

div#tussen { margin-top: 5px; }

Chandler

maandag 25 juli 2005 @ 11:47

Mensen, ik heb google nu meerdere malen geraadpleegd voor het volgende maar kon wederom helaas geen oplossing vinden.

Stel ik heb een variabel kader die varieert van (10px/10px tot 800px/800px) en wil deze gecentreerd hebben doormiddel van css (dus zowel horizontaal als verticaal).

Hoe moet ik dit oplossen met behulp van css? iemand een suggestie?

MrDoegewoon

maandag 25 juli 2005 @ 20:45

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

<div id="header">
   blabla.nl
  </div>
  <div id="tussen">
   <a href="./index.php">Home</a> <> <a href="./webhosting/index.php">Webhosting</a> <> link 3
   </div>

/* CSS Document */

body {
background-color:#FFFFFF;
}

#header {
background-color:#EEEEEE;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
border-width:1;
border-color:#000000;
border-style:dotted;
}

#tussen {
width:100%;
margin-top:5px;
padding:0px 0px 0px 10px;
background-color:#EEEEEE;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
border-width:1;
border-color:#000000;
border-style:solid;
}

Ik heb nu dit, ik wil dat de links van links iets meer weg staan maar nu wordt #tussen groter dan header terwijl ze beide op 75% staan. Wat doe ik fout

Is er trouwens een goede liefst Nederlandse website met tutorial hoe je een website opbouwt in css

SuperRembo

maandag 25 juli 2005 @ 21:03

Wat bedoel je met "iets meer weg staan" en wat staat op 75%? (ik zie nergenes 75%)

Vervang <> door <>, anders is je html niet geldig.
Het lijkt me handiger om de font-family bij de body te zetten, dan hoef je dat niet overal te herhalen.

MrDoegewoon

maandag 25 juli 2005 @ 21:07

quote:
Op maandag 25 juli 2005 21:03 schreef SuperRembo het volgende:
Wat bedoel je met "iets meer weg staan" en wat staat op 75%? (ik zie nergenes 75%)

Vervang <> door <>, anders is je html niet geldig.
Het lijkt me handiger om de font-family bij de body te zetten, dan hoef je dat niet overal te herhalen.

Ik bedoel breder en width

voorbeeld:
http://www.dutchfootballmanagersite.nl/jmsystems/

css file:
http://www.dutchfootballm(...)ms/css/standaard.css

Ik wil nu toch eens CSS beter gaan leren ipv steeds met tabellen werken

SuperRembo

maandag 25 juli 2005 @ 21:34

Gooi je html eens door een HTML Validator en je css door een CSS Validator.

Html en css die niet volgens de regels zijn opgesteld kunnen voor onvoorspelbare resultaten leiden. Dat maakt het zoeken naar fouten in je layout erg lastig.

Validators zijn niet heilig, maar wel een goede hulp.

MrDoegewoon

maandag 25 juli 2005 @ 21:51

Hmmz heb ze er door heen gehaald en was bij de html idd de charset vergeten en bij de css een maat vergeten op te geven bij border-width:1; maar het probleem blijft...

SuperRembo

maandag 25 juli 2005 @ 22:05

Het verschil zit in de padding-left van #tussen.

MrDoegewoon

maandag 25 juli 2005 @ 22:08

quote:
Op maandag 25 juli 2005 22:05 schreef SuperRembo het volgende:
Het verschil zit in de padding-left van #tussen.

Hmmz ik wil dus dat de tekst vanaf links iets naar binnen gaat (die 5px) maar dat houd in dat er rechts 5px bijkomt dus??

Sorry ben nog maar net bezig met CSS

SuperRembo

maandag 25 juli 2005 @ 22:36

Ja.

Je kan het oplossen door om beide divs een div te zetten met width:75%. #header en #tussen geef je geen width.

Je kan het ook oplossen door er voor te zorgen dat er tussen de div#tussen en de links een extra container zit. Dat kan een div of een p zijn, maar ook een list (ul). Op die container kan je dan die extra paddin zetten.

MrDoegewoon

maandag 25 juli 2005 @ 22:41

Jij ruled

thnx

MrDoegewoon

donderdag 28 juli 2005 @ 17:54

Nu heb ik het volgende probleem:

Ik wil een header maken, daaronder een tussenbalkje en daaronder de content en daaronder weer een footer met copyright meuk.

Nu lukt de header en het tussenbalkje maar bij de content gaat het fout, er moeten daar twee gedeeltes naast elkaar komen een met een soort van menu en de andere met de tekst enzo, nu heb ik ze via een tutorial naast elkaar gekregen (float:left;) maar vallen ze uit de box die ik eromheen gemaakt hebt terwijl dit bij de header en de tussen wel goed gaat de box daarom heen wordt gewoon wel vergroot.

Zie het voorbeeld hier
CSS file hier: hier

Edit:
De gedeelte waarin de tekst moet komen is nu ook onder de menu box komen te staan (wel er naast maar niet dezelfde hoogte

)

SuperRembo

donderdag 28 juli 2005 @ 18:51

Je moet de floats "clearen" om ze binnen de box te houden. Daarvoor heb je een (leeg) element nodig na de floats;

1
2
3
4
5

   <div id="content">
      Lorem ipsum dolor sit amet...
   </div>
    <div class="clear"></div>
</div>

css:

1
2
3

.clear {
clear: both;
}

Verder kan je beter de float en width weglaten voor #content.

MrDoegewoon

donderdag 28 juli 2005 @ 20:52

Thnx staat nu goed, heb je toevallig een website of een boek dat je kan aanraden over het opmaken van een website met CSS (dus zonder tabellen enzo)

SuperRembo

donderdag 28 juli 2005 @ 21:56

De referenties
http://www.w3.org/TR/CSS21/ W3C CSS
http://www.w3.org/TR/html401/ W3C HTML
http://www.mozilla.org/docs/dom/domref/ Gecko DOM Reference
http://msdn.microsoft.com(...)ce/css_ref_entry.asp MSDN CSS Reference

http://home.parse.nl/~michiel/semantiek.html Semantiek - Waarom zou je?
http://www.w3schools.com/ heeft wel handige basic tutorials
http://www.alistapart.com/ allerlei artikelen over css
http://www.quirksmode.org/ een site met veel info over bugs en eigenaardigheden van verschillende browsers.
http://www.glish.com/css/ een aantal css layouts

MrDoegewoon

maandag 1 augustus 2005 @ 21:51

Thnx

.

Ben nu bezig om m'n eigen website van tabellen over te knallen naar CSS en lukt goed. Werkt trouwens echt veel beter dan tabellen dat CSS

MrDoegewoon

dinsdag 2 augustus 2005 @ 17:51

Hmmz ik heb nu het volgende probleem, een groot gedeelte van de lay-out van m'n site is overgezet naar CSS. Maar nu gaat in Firefox de Footer direct tegen de content aan staan (terwijl er een margin-top van 10px; is ingesteld). Zet ik een border (niet hidden of none) om de content heen doe gaat ie er wel 10px vanaf, in IE werkt het wel goed overigens:

De CSS:
http://www.dutchfootballmanagersite.nl/temp/css.txt

En de HTML
http://www.dutchfootballmanagersite.nl/temp/html.txt

SuperRembo

dinsdag 2 augustus 2005 @ 22:40

Je kan bijvoorbeeld de clear div een hoogte van 1px geven.

Lees trowens ook het stuk Semantiek - Waarom zou je?, een goede css layout is veel meer dan een verzameling divjes.
De <center> hoort er eigenlijk ook niet in te staan.

The_Cyberspace

donderdag 4 augustus 2005 @ 00:37

Ook ik zit met een probleem.

Heb een simpel voorbeeld gemaakt, de site die het probleem heeft is makkelijk aan te passen als ik de fout gevonden heb. Het gaat me nu alleen puur om de lay-out.

Hier de htm file: http://www.freriks6.demon.nl/layout/main.htm

Hier de css file: http://www.freriks6.demon.nl/layout/layout.css

Open de htm file nu eens in Internet Explorer en in FireFox.. In IE word hij weergegeven zoals het moet en FF "vergeet" de onderste balk.

Ik heb al verschillende dingen geprobeerd maar ik kan de fout echt niet vinden. Ik weet wel dat FireFox net ff iets anders omgaat met htm files dan IE

Wie ziet de fout?

SuperRembo

donderdag 4 augustus 2005 @ 07:40

Je moet je floats "clearen". Zie bijv Clearing floats. Een paar post naar boven staat er ook wat over.

The_Cyberspace

donderdag 4 augustus 2005 @ 13:13

Prolbleem is al opgelost door ergens nog een float: left; te plaatsen... maar bedankt voor het meedenken

The_Cyberspace

donderdag 4 augustus 2005 @ 20:27

Gmbrl, nu zit ik met een ander probleem

Heb de site even aangepast daarvoor:

Htm file

CSS file

Ik heb even als test 1 vlak helemaal vol gepropt met tekst en nu komt het. In Internet Explorer kan ik scrollen en "springt" de tekst aan de bovenkant, zijkanten en onderkant netjes in door een margin van 15px. Maar in FireFox "vergeet" hij de onderkant en kan ik ook niet scrollen. Wat ik trouwens ook raar vind is dat het voorbeeld bij een ander wel scrolt in FireFox en bij mij nie

En ook bij hem laat FireFox te tekst niet netjes "inspringen" door die margin van 15px.

Ik las op diverse sites trouwens dat FF geen kleur toepast op een scrollbar wat IE dan weer wel doet. (ik weet dat dit officieel niet als CSS word goedgekeurd)
Is dit ook te verhelpen of moet ik het in FireFox doen met die grijze saaie kleur?

SuperRembo

donderdag 4 augustus 2005 @ 21:31

Dat het scroolen met 't scrollwieltje niet werkt is een (irritante) bug in Firefox.

De layout vind ik maar niks eerlijk gezegd. Het werkt klote op lagere resoluties en ziet er niet uit op hoge resoluties. Het is ook een verzameling divjes zonder logica (zie http://home.parse.nl/~michiel/semantiek.html).

Onder XP met de XP layout werken de css-kleuren op de scollbar ook niet als ik 't goed heb.

The_Cyberspace

vrijdag 5 augustus 2005 @ 00:48

quote:
Op donderdag 4 augustus 2005 21:31 schreef SuperRembo het volgende:
Het is ook een verzameling divjes zonder logica (zie http://home.parse.nl/~michiel/semantiek.html).

Wat is dan wel de juiste manier? Ik kan op die site niet echt een duideljik voorbeeld vinden dat de manier die ik gebruik fout zou zijn?

Of ik met verkeerd gekeken hebben...

Flying

vrijdag 12 augustus 2005 @ 20:39

Net ff mijn css-file door de validator gesleurt.. err
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.substruction.com%2Fcss.css&warning=no&profile=css2&usermedium=all
Iemand enige hulp/tips? CSS heb ik nog niet onder de knie.

SuperRembo

vrijdag 12 augustus 2005 @ 20:54

Je gebruikt properties die niet bestaan. Als je een lengte of hoogte op geeft, dan hoort er een eenheid bij, dus bijv. 601px in plaats van 601. Alleen als de lengte 0 is dan mag je de eenheid weglaten.

Brilaap

zondag 14 augustus 2005 @ 15:31

*Snel tvp neerzet*

Stephan4kant

woensdag 17 augustus 2005 @ 15:32

http://www2.flashywebtools.nl/

Waarschijnlijk hoef ik al niet meer te vertellen

Ik wil de drie divjes naast elkaar hebben (150px-450px-150px). Ik heb al wat geprobeerd met floats en clears, maar ik krijg het niet voor elkaar. Iemand een idee?

Rolie

woensdag 17 augustus 2005 @ 15:50

float: left voor sidebar1 en float: right voor sidebar2 zou het toch moeten doen hoor. Mits je natuurlijk die grote margin's weghaalt. En nergens clearen.

Brilaap

woensdag 17 augustus 2005 @ 21:30

Weet iemand een goede, gratis (x)html/css editor?

DionysuZ

woensdag 17 augustus 2005 @ 22:41

notepad?

SuperRembo

woensdag 17 augustus 2005 @ 23:05

quote:
Op woensdag 17 augustus 2005 21:30 schreef Brilaap het volgende:
Weet iemand een goede, gratis (x)html/css editor?

TopStyle, de lite versie is gratis.

Brilaap

woensdag 17 augustus 2005 @ 23:06

quote:
Op woensdag 17 augustus 2005 22:41 schreef DionysuZ het volgende:
notepad?

Voorspelbare kutnewbie

Brilaap

woensdag 17 augustus 2005 @ 23:07

quote:
Op woensdag 17 augustus 2005 23:05 schreef SuperRembo het volgende:

[..]

TopStyle, de lite versie is gratis.

Ik zal hem gaan proberen. Dank

DionysuZ

donderdag 18 augustus 2005 @ 00:46

quote:
Op woensdag 17 augustus 2005 23:06 schreef Brilaap het volgende:

[..]

Voorspelbare kutnewbie .

que? newbie?

Brilaap

donderdag 18 augustus 2005 @ 10:44

Topstyle werkt handig. Thnx voor de top

Brilaap

maandag 22 augustus 2005 @ 14:12

Even het volgende, ik wil een background-image hebben. Het is een klein .gifje, etc we kennen het vast allemaal maar. Nu ben ik bezig met die stylesheet en ik was even benieuwd hoe die url er uit moet zien? Ik heb in mijn puplic_html een map genaamd image. Bestaandsnaam van .gifje is page-bg.gif. Hier mijn stylesheet:

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

body {
   background-color: #95b7cd;
   color: #666666;
   font-family: Verdana, Helvetica, Ariel, sans-serif;
   font-size: 1em;
   background-image: image/page-bg.gif;
}
h1 {
font-size: 1.2em;
}
h2{
font-size: 1.1em;
}
p{
font-size: .8em
}

Check in body de bacground-image tag. Dit werkt dus niet. Iemand een idee? Alvast bedankt! Als ik het antwoord weer kan ik weer verder met mijn tutorial

Leshy

maandag 22 augustus 2005 @ 14:17

1	background-image: url('image/page-bg.gif');

Brilaap

maandag 22 augustus 2005 @ 14:34

quote:
Op maandag 22 augustus 2005 14:17 schreef Leshy het volgende:

[ code verwijderd ]

Ik heb nu:

1	background-image: url(http://fatguyslim.nl/image/page-bg.gif);

Dat was hem! Even wat google en zo en ik kan weer verder

. Dank je wel Leshy voor je post

Brilaap

dinsdag 23 augustus 2005 @ 12:52

Ik loop weer ergens tegenaan. Maar ja alles wat je moet leren komt niet zo maar vanzelf. Hier de 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

/*This stylesheet is only for CSS the tutorial*/

body {
   background-color: #95b7cd;
   color: #666666;
   font-family: Verdana, Helvetica, Ariel, sans-serif;
   font-size: 1em;
   background-image: url(http://fatguyslim.nl/image/page-bg.gif);
   margin: 0;
}
h1 {
   font-size: 1.2em;
   text-align: right;
   font-style: italic;
   letter-spacing: 5px;
}
h2 {
   font-size: 1.1em;
   text-decoration: underline;
}
p {
   font-size: .8em;
   text-align: justify;
   line-height: 1.7em;
}
p.footer {
   font-size: .5em;
   text-align: center;
}
a:link {
   color: #666666;
   background-color: #95b7cd;
   text-decoration: none;
}
a:visited {
   color: #666666;
   background-color: #95b7cd;
   text-decoration: none;
}
a:hover {
   background-color: #aaddee;
}
a:active {
   background-color: #3cc7f0;
}
#header {
   background-color: #ffffff;
   border-bottom: 1px #000000 solid;
}
#content {
}
#navbar {
}
#main-text {
}

Het gaat om regel 46 tm 48. Als ik regel 48 er niet neerschrijf is er niks aan de hand. Ik heb dan een header, background wit. Zodra regel 48 er komt te staan is er geen witte background meer en ik zie nergens een zwarte border-botttom. Hoe kan dit? Wat doe ik pcies fout? Als jullie meer info nodig hebben hoor ik het graag

. Alvast bedankt voor de hulp ennn goed topic dit

.

[ Bericht 0% gewijzigd door Brilaap op 23-08-2005 12:59:01 (Regel 47 gefixt.) ]

Light

dinsdag 23 augustus 2005 @ 12:53

Er mist een puntkomma aan het eind van regel 47.

Brilaap

dinsdag 23 augustus 2005 @ 12:54

Neee dat was het dus wel he?! Fuck ik ben er voor mezelf nog wel scherp op!!! Ff proberen...

Brilaap

dinsdag 23 augustus 2005 @ 12:55

Ja dat is het idd

, dank je wel Light voor je licht

. Ik zal waarschijnlijk vandaag nog wel vaker terugkomen, er zijn een aantal dingen die het niet helemaal doen zoals ik het wil.

Brilaap

dinsdag 23 augustus 2005 @ 12:58

Dit bijv: 'Give content a position of relative.' Zelfde sheet die hierboven staat. Hoe bedoelen ze dit en hoe doe je dat?

Light

dinsdag 23 augustus 2005 @ 13:06

quote:
Op dinsdag 23 augustus 2005 12:54 schreef Brilaap het volgende:
Neee dat was het dus wel he?! Fuck ik ben er voor mezelf nog wel scherp op!!! Ff proberen...

Er zijn ook online CSS validators, zoals deze van w3.

Brilaap

dinsdag 23 augustus 2005 @ 13:12

quote:
Op dinsdag 23 augustus 2005 13:06 schreef Light het volgende:

[..]

Er zijn ook online CSS validators, zoals deze van w3.

Ja klopt ik hem. Ik gebruik hem eigenlijk alleen als ik helemaal klaar ben, maar het is een goed idee om dat ook tussendoor te gebruiken.

SuperRembo

dinsdag 23 augustus 2005 @ 22:12

quote:
Op dinsdag 23 augustus 2005 13:12 schreef Brilaap het volgende:

[..]

Ja klopt ik hem. Ik gebruik hem eigenlijk alleen als ik helemaal klaar ben, maar het is een goed idee om dat ook tussendoor te gebruiken.

Dat zijn eigenlijk dingen waar je naar zou moeten kijken voordat je je probleem hier post. Is mijn HTML en CSS wel valide? Het kan wel eens zijn dat je dingen doet waar de validator over klaagt, maar dan moet je wel weten waarom (bijvoorbeeld een CSS hack).

Brilaap

dinsdag 23 augustus 2005 @ 22:56

quote:
Op dinsdag 23 augustus 2005 22:12 schreef SuperRembo het volgende:

[..]

Dat zijn eigenlijk dingen waar je naar zou moeten kijken voordat je je probleem hier post. Is mijn HTML en CSS wel valide? Het kan wel eens zijn dat je dingen doet waar de validator over klaagt, maar dan moet je wel weten waarom (bijvoorbeeld een CSS hack).

True. Goed punt ook, ik zal er even op letten

ikke_ook

donderdag 25 augustus 2005 @ 15:04

1
2
3
4
5

<ul>
   <li style="float:left;width:100px;">hier een stukje tekst</li>
   <li style="float:left;width:100px;">hier heel veel tekst dat breder wordt dan 100 pixels</li>
   <li style="width:100px;">tekst3</li>
</ul>

Hoe krijg ik het voor elkaar dat het middelste stukje tekst niet over tekst3 heen gaat maar gewoon netjes op een nieuwe regel verder gaat?

Roonaan

donderdag 25 augustus 2005 @ 15:29

Je moet hem display:block geven,

ikke_ook

donderdag 25 augustus 2005 @ 15:39

quote:
Op donderdag 25 augustus 2005 15:29 schreef Roönaän het volgende:
Je moet hem display:block geven,

Dankje, dat werkt, en dan doe ik daaronder

1	<div style="clear:both;"></div>

Omdat anders de lijst eronder links naast die ander gaat floaten..
Is dat de beste oplossing met die <div> of kan dat beter?

Roonaan

donderdag 25 augustus 2005 @ 17:07

je kan toch gewoon het eerstvolgende element pakken?

Minos111

donderdag 25 augustus 2005 @ 17:23

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<title>Clearing floats using ‘overflow’ - 003</title>
<style type="text/css">
div#sidebar{
  float:left;
  width:20em
}
div#content{
  _height:1%;
  overflow:auto;
  background:lime
}
</style>
<div id="content">
<div id="sidebar">
  tekst in een floating div, met een container div erachter die een kleurtje heeft. </div>
</div>

ikke_ook

dinsdag 30 augustus 2005 @ 17:38

Ik wil dat mijn lijst minder ver inspringt. Dus ik heb :

1
2
3
4
5
6

.categorylist {
padding-left:15px;
}
<ul class="categorylist">
<li>Testje</li>
</ul>

Maar het lijkt er op dat IE zich hier te goed voor voelt, het werkt daar niet dus.
Gebruik ik iets verkeerd of is er een hack voor?

-edit-

Opgelost, in IE is het blijkbaar margin-left, terwijl het in FF padding-left moet zijn...

[ Bericht 5% gewijzigd door ikke_ook op 30-08-2005 17:44:05 ]

onderjas

zaterdag 10 september 2005 @ 17:36

quote:
Op zaterdag 10 september 2005 16:35 schreef onderjas het volgende:
Ik wil een half doorzichtige tabel maken, hoe doe ik dat?

En heeft iemand een tutorial voor van die ronde randen de plaatsen om een tabel.

SuperRembo

zaterdag 10 september 2005 @ 17:42

Transparantie:

1
2
3
4
5

.transparent {
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
}

Ronde hoeken:
http://www.alistapart.com/articles/customcorners

onderjas

zaterdag 10 september 2005 @ 22:33

quote:
Op zaterdag 10 september 2005 17:42 schreef SuperRembo het volgende:
Transparantie:

[ code verwijderd ]

Ronde hoeken:
http://www.alistapart.com/articles/customcorners

Dank u! Maar ik ben zo'n noob die niet weet hoe ik een css script in moet voeren.

Die tutorial lukt me denk ik wel maar de 1ste

.

[ Bericht 12% gewijzigd door onderjas op 10-09-2005 22:40:13 ]

SuperRembo

zaterdag 10 september 2005 @ 23:13

Begin dan bij W3Schools ofzo.

Bbfreak

maandag 12 september 2005 @ 16:12

Een van de vele vragen over DIV en Scrollbars en IE maar ik kom er niet uit.
We hebben 2 applicaties. De 1 laat scrollbars zien en de andere niet.

Het CSS verschil zit hem dat degene die ze niet heeft met TABLE's werkt en ik met DIV.
Mijn DIV heeft een WIDTH van 100% en een position:absolute.
De TABLE heeft ook een WIDTH van 100%. Doet DIV dit anders of iets?
Overigens werkt het in FireFox wel. Overflow op visible zetten helpt niet.
De WIDTH 98% geven helpt ook niet, de balk wordt kleiner maar de scrollbars blijven.

Ik weet het niet meer.

Chandler

maandag 12 september 2005 @ 17:50

Weet iemand nu al hoe je iets precies kan centereren ongeacht de 'grote'?

Roonaan

maandag 12 september 2005 @ 18:03

quote:
Op maandag 12 september 2005 17:50 schreef Chandler het volgende:
Weet iemand nu al hoe je iets precies kan centereren ongeacht de 'grote'?

horizontaal? verticaal? grootte van wat? container? window?

Chandler

maandag 12 september 2005 @ 20:59

haha, iets specifieker dus.. gecentreerd in het huidige scherm...

zowel horizontal als vertical dus gecentreerd in het midden van een pagina.

Stel je hebt een explorer scherm op 1280x1024 en daarin wil je een box van 800x800 helemaal vertical en horizontaal centreren? hoe doe je dat... en stel de box is iets groter? of kleiner?

Roonaan

maandag 12 september 2005 @ 21:03

horizontaal centeren is margin:0 auto.

verticaal centreren doe ik nooit eigenlijk.. geef gewoon een percentuele topmarge van iets van 5%-10% en dan oogt het meestal ook wel gecentreerd.

De methode met een top van 50% en dan een negatieve margin-top van de helft van de height vind ik zo lelijk als je het scherm klein maakt. Staat ook een beetje jammerlijk vind ik altijd.

SuperRembo

maandag 12 september 2005 @ 23:37

quote:
Op maandag 12 september 2005 21:03 schreef Roönaän het volgende:
horizontaal centeren is margin:0 auto.

Voor IE4/5 moet je nog wat klooien met text-align: center.

DionysuZ

woensdag 14 september 2005 @ 15:28

ik heb een probleem.

Ik ben een nieuwsbrief aan het maken, en in die nieuwsbrief moeten bepaalde links aan a:hover stijl hebben waarin ze van kleur veranderen. Nu zijn er toch een aantal mailclients (tot nu toe alleen webbased tegengekomen) die de <style> tags uit de head halen. Ik heb al geprobeerd om deze dan in de body te zetten, maar daar worden ze ook weggehaald.

Weet iemand hoe ik een a:hover uitvoer in de tag zelf? <a style="??">. Een mouseover event schrijven met onmouseover="this.style=" werkt niet zoals het zou moeten werken.

WheeleE

zaterdag 17 september 2005 @ 16:15

Ik zit met het volgende. Ik heb een graphic die ik als topbanner in de achtergrond zet, dat lukt. Die banner is een vaste breedte. Rechts daarvan wil ik opvullen met een ander achtergrondplaatje.
De css die ik gebruik:

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

#header {
   border-top: 0px;
   background: url(top.gif) no-repeat fixed top left;
   padding: 0px;
   position: absolute;
   left: 0px;
   width: 783px ;
   height: 85px;
   margin-top: 0px;
}
#rightheader {
   border-top: 0px;
   background: url(topright.jpg) repeat-x fixed top left;
   padding: 0px;
   position: relative;
   left: 783px;
   height: 85px;
   width: auto;
   margin-top: 0px;
}

De HTML:

1
2
3

Ik krijg het echter niet voor elkaar. Hoe krijg ik dat rechterplaatje zover dat het herhaald wordt tot de breedte van het venster, hoe breed dat ook is?

Leshy

zaterdag 17 september 2005 @ 16:22

Sluit het rechterplaatje aan op het linkerplaatje? Ergo, moet de linkerrand van het rechterplaatje per se aan de rechter rand van het linker plaatje vast zitten, of maakt het niet uit waar de linker afbeelding de rechter overlapt?

Chandler

zaterdag 17 september 2005 @ 16:59

@Roonaan: lijkt wel alsof het dus niet echt goed mogelijk is

gatsie

Leshy

zaterdag 17 september 2005 @ 17:15

Verticaal centreren is wel degelijk mogelijk, alleen werkt het zoals gewoonlijk niet in MSIE. Via display: table-cell; en vertical-align: center; kun je items verticaal centreren, omdat je dan gewoonweg een 100% hoogte <div> het gedrag van een table-cell kunt laten emuleren.

Je zult dan eventueel via CSS hacks een andere oplossing voor MSIE moeten aandragen, zoals het element op 50% laten beginnen, en dan een negatieve topmargin van de helft van de hoogte daarvan geven, zoals volgens mij al eerder vermeld is. Niet de mooiste oplossing, maar ja.

WheeleE

zaterdag 17 september 2005 @ 17:23

quote:
Op zaterdag 17 september 2005 16:22 schreef Leshy het volgende:
Sluit het rechterplaatje aan op het linkerplaatje? Ergo, moet de linkerrand van het rechterplaatje per se aan de rechter rand van het linker plaatje vast zitten, of maakt het niet uit waar de linker afbeelding de rechter overlapt?

Ja, het moet aan de rechterkant zitten. Het rechterplaatje herhaalt zich, net zo vaak als nodig is om op te vullen tot de rand van het venster.
Zie www.rolstoelhockey.nl. Dat principe probeer ik te krijgen. De bovenste balk dus. Het rood/blauwe stukje herhaald zich tot de rand van het venster.

Ik hoop dat ik het duidelijk genoeg heb uitgelegd

.

[ Bericht 31% gewijzigd door WheeleE op 17-09-2005 17:45:07 ]

HuHu

zondag 18 september 2005 @ 15:20

Ik probeer een tabel met DIV en SPAN tags te maken, maar het wil niet echt lukken. Kan iemand mij vertellen wat er fout gaat?

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

<div class="tabel">
<div class="tabel_header">
   <span class="item_1">Naam:</span>
   <span class="item_2">Code is erg lang:</span>
   <span class="item_3">Blok:</span>
   <span class="item_4">Niveau:</span>
   <span class="item_5">Nog iets:</span>
   <span class="item_6">En nog iets:</span>
</div>
<div>
   <span class="achtergrondkleur">
      <span class="item_1">De naam van iets</span>
      <span class="item_2">code</span>
   </span>
   <span class="item_3">1</span>
   <span class="item_4">1</span>
   <span class="item_5">10</span>
   <span class="item_6">7,5</span>
</div>
</div>

En de bijbehorende CSS:

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

.achtergrondkleur {background-color:#669900;}

.tabel {line-height:1.3em;}

.tabel_header{border-bottom: 2px solid gray; width:670px;}

.item_1 {float:left; width:200px; margin:0;}
.item_2 {border-left:1px solid gray; padding:1em; width:100px;}
.item_3 {border-left:1px solid gray; padding:1em; width:100px;}
.item_4 {border-left:1px solid gray; padding:1em; width:100px;}
.item_5 {border-left:1px solid gray; padding:1em; width:100px;}
.item_6 {border-left:1px solid gray; padding:1em; width:100px;}

Maar nu wil ik daar dus een mooi tabelletje van maken en nog meer rijen toevoegen dan de ene die er nu is. De eerste 2 kolommen van een rij moeten een achtergondkleur krijgen.

Het probleem is nu dat de items niet mooi op elkaar aansluiten. In de header is item 2 veel breder dan de inhoud van item 2 bij de eerste rij van de tabel. Nu begint item 3 dus ongelijk met het kopje wat erboven hoort. Het zit nu dus zo:

1
2
3

| | | | |
-------------------------------------
| | | | |

Dat ziet er niet netjes uit, maar het gekke is dat het width attribuut bij item 1 wel gepakt wordt, maar bij de rest niet.

Berkery

zondag 18 september 2005 @ 15:49

'Width' werkt normaal geproken niet op inline elementen zoals <span>, maar misschien dat het door de float: left wel werkt op .item_1.

Maar wat is precies het nut hiervan?

HuHu

zondag 18 september 2005 @ 15:53

Oké, dat vermoedde ik al. Maar ik wil dus een tabel achtig iets maken, met behulp van DIV's, SPAN's en CSS. Dus zonder de TABLE tag te gebruiken.

DionysuZ

zondag 18 september 2005 @ 16:15

quote:
Op zondag 18 september 2005 15:53 schreef HuHu het volgende:
Oké, dat vermoedde ik al. Maar ik wil dus een tabel achtig iets maken, met behulp van DIV's, SPAN's en CSS. Dus zonder de TABLE tag te gebruiken.

wat is daar het nut van? De Table tag is juist bedoeld voor het maken van tabellen, vandaar ook "table" tag

HuHu

zondag 18 september 2005 @ 16:16

quote:
Op zondag 18 september 2005 16:15 schreef DionysuZ het volgende:

[..]

wat is daar het nut van? De Table tag is juist bedoeld voor het maken van tabellen, vandaar ook "table" tag .

Ik kan voor een opdracht een bonuspunt scoren als ik geen tabellen maar DIV's enzo gebruik. Maar het wil nog niet echt lukken, vandaar mijn vraag.

SuperRembo

zondag 18 september 2005 @ 17:35

quote:
Op zondag 18 september 2005 16:16 schreef HuHu het volgende:

[..]

Ik kan voor een opdracht een bonuspunt scoren als ik geen tabellen maar DIV's enzo gebruik. Maar het wil nog niet echt lukken, vandaar mijn vraag.

Kan je ook een bonuspunt verdienen als je kan uitleggen dat tabulaire data in een tabel thuis hoort? Als je wordt geleerd dat je nooit meer tabellen mag gebruiken dan heeft je leraar het duidelijk niet begrepen.

PuPu

zondag 18 september 2005 @ 19:11

quote:
Op zondag 18 september 2005 17:35 schreef SuperRembo het volgende:

[..]

Kan je ook een bonuspunt verdienen als je kan uitleggen dat tabulaire data in een tabel thuis hoort? Als je wordt geleerd dat je nooit meer tabellen mag gebruiken dan heeft je leraar het duidelijk niet begrepen.

Ik citeer even de opdracht:

quote:
Als je in plaats van tabellen overal gebruik maakt van blokken, wordt je cijfer met een (1) bonuspunt verhoogd.

Met blokken wordt het box-model genoemd wat in de uitleg als volgt staat:

quote:
Natuurlijk is het een optie (en niet per se een slechte) om tabellen te gebruiken, maar het kan ook anders (met behulp van CSS). Het model waar je dan in CSS mee werkt, heet het CSS box model. Dat box model gaat o.a. uit van:
- positionering van een blok in een ruimte (canvas): de afstand van de rand van een blok tot aan de rand van het canvas wordt margin genoemd.
- de positie van de content van een blok t.o.v. de rand van dat blok: de ruimte tussen de content en de rand van het blok wordt padding genoemd.

Oftewel, maak een tabel met DIV dingen.

Het slaat natuurlijk nergens op, de TABLE tag is veel beter. Maar 1 punt is toch mooi meegenomen. Maargoed, ik zal nog eens doordringend vragen of dit wel echt de bedoeling is. Zelf weet ik niet of het überhaupt mogelijk is, vandaar dat ik de vraag hier stelde.

Leshy

zondag 18 september 2005 @ 20:16

Als je tabellen gebruikt om layout te regelen, ben je verkeerd bezig. Als je tabellen gebruikt om informatie in tabelvorm weer te geven, ben je goed bezig

quote:
Op zaterdag 17 september 2005 16:15 schreef WheeleE het volgende:
Ik krijg het echter niet voor elkaar. Hoe krijg ik dat rechterplaatje zover dat het herhaald wordt tot de breedte van het venster, hoe breed dat ook is?

Okay, gezien je uitleg is het vrij eenvoudig.

1
2
3
4
5
6
7
8
9

#header {
  width: 100%; height: 100px;
  background: url('herhalendplaatje.jpg') repeat-x;
  }

<div id='header'>
  <img src='header-plaatje.jpg' width='200' height='100'
    alt='Afbeelding van blabla' title='Naam van site'/>
</div>

SuperRembo

zondag 18 september 2005 @ 20:25

quote:
Op zondag 18 september 2005 19:11 schreef PuPu het volgende:

[..]

Ik citeer even de opdracht:
[..]

Met blokken wordt het box-model genoemd wat in de uitleg als volgt staat:
[..]

Oftewel, maak een tabel met DIV dingen.

Het slaat natuurlijk nergens op, de TABLE tag is veel beter. Maar 1 punt is toch mooi meegenomen. Maargoed, ik zal nog eens doordringend vragen of dit wel echt de bedoeling is. Zelf weet ik niet of het überhaupt mogelijk is, vandaar dat ik de vraag hier stelde.

Nou, lekkere opleiding dan

Welke opleiding doe je precies?
Volgens mij stond er vanmiddag nog "student informatica" in je profiel

HuHu

zondag 18 september 2005 @ 20:55

quote:
Op zondag 18 september 2005 20:25 schreef SuperRembo het volgende:

[..]

Nou, lekkere opleiding dan Welke opleiding doe je precies?
Volgens mij stond er vanmiddag nog "student informatica" in je profiel

Dat staat nog steeds in m'n profiel, kijk maar even naar het verschil in de user-names

Maar ik doe dus Informatica, maar dit is een vak dat behoort bij Informatiekunde. Ik heb het voor de lol gekozen, maar het wordt wel wat vaag op deze manier. Ik ben dan tweedejaars, maar dit is officieel het eerste vak wat eerstejaars Informatiekunde studenten krijgen.

Wouta

dinsdag 20 september 2005 @ 10:42

Hoi,

Ik heb een CSS probleempje waar ik even niet uit kom. Ik heb de volgende code:

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

<html>
<head>
<title>Mijn homepage</title>
<style type="text/css">
.contentheading {
   background-color: yellow;
   padding: 10px;
   border-width: 5px;
   border-style: solid;
   border-color: green;
}
</style>
</head>
<body bgcolor="white">

<table cellSpacing="0" cellPadding="0" width="100%" id="table17" border="1">
               <tr>
                  <td vAlign="top" width="50%">
                  <table class="contentpaneopen" id="table18">
                     <tr>
                        <td class="contentheading" width="100%">
                        een tekst komt hier.
                        </td>
                     </tr>
                  </table>

Nu wil ik graag dat gekleurde tebalettjes helemaal word gevuld met groen/geel. Ik snap even totaal niet hoe ik dit voor elkaar moet krijgen.

Ik heb wel aan iets met width zitten proberen maar dan heb ik weer een probleem als toevallog het iets langer of korter moet zijn....

Roonaan

dinsdag 20 september 2005 @ 11:08

????????????

dujour

woensdag 21 september 2005 @ 15:32

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

/* General definitions */
.bar
{
   margin-top: 0;
   background-color: #F1EA3F;
   width: 100%;
   padding: 0px;
   background-image: url(/images/bar.gif);
   margin-top: 0px;
}

.info
{
   text-align: left;
}

.footer
{
   background-color: #538AC8;
}

.header
{
}

.head_table
{
   border-width: 3px;
   border-color: #0F0F0F;
}

hier doen het een paar dingen niet.

ik divineer zeg maar <table class=head_table>

maar een border geven hoe maar.

margin doet het ook niet bij de eerste iemand die me uit de brand kan helpen

HuHu

woensdag 21 september 2005 @ 16:35

Probeer in plaats van margin-top eens padding-top.

Doe in plaats van

1
2
3
4
5

.head_table
{
border-width: 3px;
border-color: #0F0F0F;
}

eens

1
2
3
4

.head_table
{
border: 3px solid #0F0F0F;
}

Chandler

woensdag 21 september 2005 @ 21:37

Weet iemand waarom http://services.bruggema.nl er wel goed uitziet in IE en niet in FF (het overflow gedeelte?

) Super veel tnx..

Chandler

woensdag 21 september 2005 @ 21:39

Tnx SuperRembo voor de font=family

Roonaan

woensdag 21 september 2005 @ 21:42

gebrek aan doctype, uppercase tags, tablebased layout? nog meer?

Chandler

woensdag 21 september 2005 @ 21:58

ik weet het, morgen ga ik het document helemaal afmaken als ik maar een lokale W3C validator kan regelen... anders zit ik nog op me werk te shitten

hr15

donderdag 22 september 2005 @ 11:33

Ik heb altijd tabellen gebruikt voor mijn opmaak en wil hiervoor nu eens met css aan de gang.
Echter ben ik nog steeds aan het prutsen met hoe het precies werkt. En misschien een hele domme vraag, maar ik kom er niet meer uit.

http://www.xs4all.nl/~hugog/probeersel/probeersel2.html

Het ene werkt onder internet explorer wel juist en het andere niet en zo is het andersom onder Opera ook. Ik krijg het echter niet voor elkaar dat het in beiden juist werkt.
- In IE hebben bepaalde divjes niet de juiste hoogte
- En onder Opera sluiten de divjes niet op elkaar aan.

Hoe kan ik dit nu het beste oplossen?

Leshy

donderdag 22 september 2005 @ 13:33

Ten eerste zie ik wat fouten in je CSS-code. Er staat verschillende malen _ in plaats van - (als in padding_left: in plaats van padding-left:), en ook een paar keer opx in plaats van 0px (dus o, in plaats van nul). Bovendien is het handiger om gewoon al die margins en paddings weg te laten, en gewoon een regel aan te maken met div {margin: 0; padding: 0;}, en eventuele margins en paddings apart te zetten.

Bovendien bestaat float: top in het geheel niet, dus die kun je er ook allemaal uit halen

hr15

donderdag 22 september 2005 @ 13:58

Oops dat met die o en 0 enzo helemaal niet gezien

Heb volgens mij alle dingen er nu uitgehaald, in ieder geval alvast bedankt voor de tips

WheeleE

donderdag 22 september 2005 @ 14:44

quote:
Op zaterdag 17 september 2005 17:23 schreef WheeleE het volgende:

[..]

Ja, het moet aan de rechterkant zitten. Het rechterplaatje herhaalt zich, net zo vaak als nodig is om op te vullen tot de rand van het venster.
Zie www.rolstoelhockey.nl bijvoorbeeld. Dat principe probeer ik te krijgen. De bovenste balk dus. Het rood/blauwe stukje herhaald zich tot de rand van het venster.

Ik hoop dat ik het duidelijk genoeg heb uitgelegd .

Iemand die mij hier nog iets verder mee kan helpen?

hr15

donderdag 22 september 2005 @ 15:58

Ik heb hem voor elkaar

Ik ben overnieuw begonnen met een leeg bestand en nu lukt het in 1 keer.