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

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

markiemark

FR 1908

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

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

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

markiemark

FR 1908

ik heb het nu zo

1
2
3
4
5
6
7

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

maar dat werkt ook niet in IE...

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

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

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

SuperRembo

Sinds 1998

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

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

Vince-E

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

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

markiemark

FR 1908

@vinc-e: file is goed gelinkt..

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

ik laat wel weten of ik er uit kom..

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

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

markiemark

FR 1908

hmmz ik heb het nu zo gedaan...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

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

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

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

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

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

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

</body>
</html>

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

in firefox doet ie het wel...:s

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

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

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

Vince-E

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

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

markiemark

FR 1908

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

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

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

Vince-E

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

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

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

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

markiemark

FR 1908

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

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

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

als je een meisje was hee!!

..dank je wel..

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

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

markiemark

FR 1908

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

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

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

SuperRembo

Sinds 1998

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

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

markiemark

FR 1908

hmmz ok, ga ik dat nog even bestuderen..

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

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

Swetsenegger

Egocentrische Narcist

Ik heb een wazige bug gevonden:

1
2
3
4
5
6
7
8
9
10

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

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

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

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

 | FOK! Schrikkelbaasch

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

Roonaan

Strictly

Wat doet:

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

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

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

Swetsenegger

Egocentrische Narcist

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

Geen filter meer laten zien

 | FOK! Schrikkelbaasch

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

Roonaan

Strictly

Grin. Moet je een beetje kleurtjes invoegen:

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

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

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

Swetsenegger

Egocentrische Narcist

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

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

 | FOK! Schrikkelbaasch

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

Roonaan

Strictly

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

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

Swetsenegger

Egocentrische Narcist

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

Same.

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

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

 | FOK! Schrikkelbaasch

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

markiemark

FR 1908

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

1
2
3
4
5
6
7
8
9

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

html

1
2
3
4
5
6

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

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

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

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

SuperRembo

Sinds 1998

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

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

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

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

markiemark

FR 1908

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

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

heb je me weer geholpen! dank je!

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

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

Roonaan

Strictly

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

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

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

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

-r-

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

markiemark

FR 1908

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

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

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

dinsdag 15 maart 2005 @ 17:52:14 #26

Chandler

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?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 16 maart 2005 @ 23:06:24 #27

markiemark

FR 1908

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

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

donderdag 17 maart 2005 @ 07:22:39 #28

SuperRembo

Sinds 1998

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

donderdag 17 maart 2005 @ 17:12:50 #29

Chandler

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

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 17 maart 2005 @ 18:09:54 #30

SuperRembo

Sinds 1998

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.

donderdag 17 maart 2005 @ 19:20:07 #31

DutchBlood

tvp

vrijdag 18 maart 2005 @ 19:53:17 #32

ikke_ook

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 ]

Vogelaars.nl

vrijdag 18 maart 2005 @ 19:59:59 #33

Roonaan

Strictly

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%" );
}

zaterdag 19 maart 2005 @ 13:54:18 #34

ikke_ook

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 ]

Vogelaars.nl

zaterdag 19 maart 2005 @ 14:03:55 #35

SuperRembo

Sinds 1998

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

zaterdag 19 maart 2005 @ 14:18:42 #36

ikke_ook

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

Vogelaars.nl

donderdag 31 maart 2005 @ 20:16:51 #37

ikke_ook

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?

Vogelaars.nl

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

ikke_ook

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

-edit-
Opgelost......

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

Vogelaars.nl

donderdag 31 maart 2005 @ 21:01:19 #39

SuperRembo

Sinds 1998

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

Hoe? Met floats?

donderdag 31 maart 2005 @ 21:59:52 #40

ikke_ook

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

[..]

Hoe? Met floats?

Daar stond een ander probleem

Vogelaars.nl

vrijdag 8 april 2005 @ 15:20:13 #41

Heliospan

(-_-)

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?

» Help mee met DrugsMag.nl! «
Chillosophy, Gras is groen

maandag 11 april 2005 @ 22:26:31 #42

BabeWatcher

Stephanie <3

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

[ alle babes op 1 pagina via fok!wiki -bijgewerkt tot 20/10/2015 ]
Leve Kim , Leve Maduro , Leve Castro
#freeTarik #freeDemon_from_heaven

maandag 11 april 2005 @ 22:41:46 #43

SuperRembo

Sinds 1998

Je kan de errorhandling uitzetten met

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

maandag 11 april 2005 @ 22:51:22 #44

SuperRembo

Sinds 1998

Of met css

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

De complete uitleg

dinsdag 12 april 2005 @ 20:22:27 #45

BabeWatcher

Stephanie <3

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 ]

[ alle babes op 1 pagina via fok!wiki -bijgewerkt tot 20/10/2015 ]
Leve Kim , Leve Maduro , Leve Castro
#freeTarik #freeDemon_from_heaven

dinsdag 12 april 2005 @ 20:47:01 #46

SuperRembo

Sinds 1998

Werkt die css oplossing met expression() ook?

dinsdag 12 april 2005 @ 20:52:22 #47

BabeWatcher

Stephanie <3

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)

[ alle babes op 1 pagina via fok!wiki -bijgewerkt tot 20/10/2015 ]
Leve Kim , Leve Maduro , Leve Castro
#freeTarik #freeDemon_from_heaven

woensdag 13 april 2005 @ 12:10:42 #48

SqueaK

"Pis nooit tegen de wind

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

donderdag 14 april 2005 @ 09:40:51 #49

markiemark

FR 1908

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

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

donderdag 14 april 2005 @ 12:07:21 #50

SqueaK

"Pis nooit tegen de wind

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

donderdag 14 april 2005 @ 12:51:07 #51

SuperRembo

Sinds 1998

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.

donderdag 14 april 2005 @ 13:27:03 #52

MouseInteractive

Grijze muis

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.

Fotoboek

donderdag 14 april 2005 @ 17:01:06 #53

SuperRembo

Sinds 1998

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.

zaterdag 16 april 2005 @ 14:45:42 #54

SqueaK

"Pis nooit tegen de wind

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 ]

zaterdag 16 april 2005 @ 15:02:08 #55

SuperRembo

Sinds 1998

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

dinsdag 19 april 2005 @ 20:12:11 #56

BaggerUser

ModderFokker!

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

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

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

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 19 april 2005 @ 21:05:10 #57

MouseInteractive

Grijze muis

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.

Fotoboek

dinsdag 19 april 2005 @ 21:20:31 #58

BaggerUser

ModderFokker!

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 ?

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 19 april 2005 @ 21:44:35 #59

SuperRembo

Sinds 1998

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

donderdag 28 april 2005 @ 16:23:28 #60

idiotforaliving

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?

donderdag 28 april 2005 @ 17:48:21 #61

SuperRembo

Sinds 1998

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

donderdag 28 april 2005 @ 21:26:50 #62

idiotforaliving

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

donderdag 28 april 2005 @ 22:44:58 #63

Berkery

Fat bastard

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

No Dukes of Hazzard in the classroom

donderdag 28 april 2005 @ 23:10:19 #64

idiotforaliving

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

vrijdag 29 april 2005 @ 10:03:34 #65

idiotforaliving

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

vrijdag 29 april 2005 @ 12:00:51 #66

SuperRembo

Sinds 1998

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.

maandag 2 mei 2005 @ 09:40:02 #67

sop

ahum

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.

maandag 2 mei 2005 @ 12:39:29 #68

SuperRembo

Sinds 1998

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.

maandag 2 mei 2005 @ 13:48:32 #69

sop

ahum

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 ]

maandag 2 mei 2005 @ 19:31:27 #70

SuperRembo

Sinds 1998

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

maandag 2 mei 2005 @ 20:16:51 #71

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

maandag 2 mei 2005 @ 20:32:57 #72

SuperRembo

Sinds 1998

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

dinsdag 3 mei 2005 @ 21:21:11 #73

SuperRembo

Sinds 1998

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

dinsdag 3 mei 2005 @ 23:43:00 #74

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 4 mei 2005 @ 08:21:04 #75

SuperRembo

Sinds 1998

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?

woensdag 4 mei 2005 @ 13:55:21 #76

DionysuZ

Respect my authority!

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.

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

maandag 9 mei 2005 @ 22:04:51 #77

BaggerUser

ModderFokker!

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

De enige echte BaggerUser!
Riemen
fiets kopen

maandag 9 mei 2005 @ 22:44:24 #78

Roonaan

Strictly

style="z-index:nummertje"

maandag 9 mei 2005 @ 23:22:43 #79

BaggerUser

ModderFokker!

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

De enige echte BaggerUser!
Riemen
fiets kopen

maandag 9 mei 2005 @ 23:40:19 #80

BaggerUser

ModderFokker!

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>

De enige echte BaggerUser!
Riemen
fiets kopen

maandag 9 mei 2005 @ 23:43:47 #81

SuperRembo

Sinds 1998

CSS Layout Generator

maandag 9 mei 2005 @ 23:53:36 #82

BaggerUser

ModderFokker!

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

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 10 mei 2005 @ 11:33:33 #83

BaggerUser

ModderFokker!

kickje

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 10 mei 2005 @ 12:47:27 #84

SuperRembo

Sinds 1998

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 */
}

dinsdag 10 mei 2005 @ 15:23:19 #85

BaggerUser

ModderFokker!

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

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 10 mei 2005 @ 16:36:31 #86

BaggerUser

ModderFokker!

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

De enige echte BaggerUser!
Riemen
fiets kopen

dinsdag 10 mei 2005 @ 19:21:08 #87

BaggerUser

ModderFokker!

opgelost soort van

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

De enige echte BaggerUser!
Riemen
fiets kopen

donderdag 12 mei 2005 @ 13:26:13 #88

SqueaK

"Pis nooit tegen de wind

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

donderdag 12 mei 2005 @ 15:40:49 #89

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

zondag 15 mei 2005 @ 14:07:06 #90

GSMboy

:-)

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?

Walltaping.... Dé nieuwste rage in Nederland? Nieuwsgierig? Kijk hier!

zondag 15 mei 2005 @ 14:08:20 #91

Roonaan

Strictly

je hebt position absolute gebruikt neem ik aan?

zondag 15 mei 2005 @ 14:13:39 #92

GSMboy

:-)

Jep..

Walltaping.... Dé nieuwste rage in Nederland? Nieuwsgierig? Kijk hier!

zondag 15 mei 2005 @ 20:01:55 #93

SuperRembo

Sinds 1998

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

zondag 15 mei 2005 @ 23:20:49 #94

wijsneus

Radicaal Democraat

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

Siamo Tutti Antifascisti!

woensdag 18 mei 2005 @ 18:24:18 #95

DionysuZ

Respect my authority!

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?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 18 mei 2005 @ 20:22:28 #96

Berkery

Fat bastard

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

En dan de getallen aanpassen

No Dukes of Hazzard in the classroom

donderdag 19 mei 2005 @ 00:26:26 #97

DionysuZ

Respect my authority!

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?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 19 mei 2005 @ 00:47:39 #98

DionysuZ

Respect my authority!

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 ]

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 19 mei 2005 @ 02:02:08 #99

curry684

Windowshippie

Kan niet portable.

Omines.

donderdag 19 mei 2005 @ 17:29:52 #100

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 19 mei 2005 @ 17:47:24 #101

SuperRembo

Sinds 1998

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?

donderdag 19 mei 2005 @ 17:49:19 #102

DionysuZ

Respect my authority!

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.

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 19 mei 2005 @ 17:51:38 #103

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 19 mei 2005 @ 18:08:27 #104

SuperRembo

Sinds 1998

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.

donderdag 19 mei 2005 @ 18:12:45 #105

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 19 mei 2005 @ 18:44:38 #106

SuperRembo

Sinds 1998

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

donderdag 19 mei 2005 @ 18:56:02 #107

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 19 mei 2005 @ 19:07:31 #108

SuperRembo

Sinds 1998

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.

donderdag 19 mei 2005 @ 19:18:57 #109

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 19 mei 2005 @ 19:22:43 #110

SuperRembo

Sinds 1998

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.

vrijdag 20 mei 2005 @ 17:11:13 #111

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

vrijdag 20 mei 2005 @ 17:52:45 #112

SuperRembo

Sinds 1998

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)

vrijdag 20 mei 2005 @ 18:02:15 #113

DionysuZ

Respect my authority!

het werkt \o/ eindelijk

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

dinsdag 24 mei 2005 @ 19:49:26 #114

DionysuZ

Respect my authority!

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?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

dinsdag 24 mei 2005 @ 21:19:02 #115

sop

ahum

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 ]

woensdag 25 mei 2005 @ 01:39:48 #116

DionysuZ

Respect my authority!

tnx, dat werkt. Mooie oplossing zo

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 25 mei 2005 @ 02:40:00 #117

DionysuZ

Respect my authority!

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?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 25 mei 2005 @ 08:46:16 #118

sop

ahum

er bestaan ook dingen als een numbered list

woensdag 25 mei 2005 @ 09:00:02 #119

SuperRembo

Sinds 1998

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 }

donderdag 26 mei 2005 @ 14:25:03 #120

big_al

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?

donderdag 26 mei 2005 @ 14:39:23 #121

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

vrijdag 27 mei 2005 @ 09:02:32 #122

big_al

dankjewel DionysuZ

vrijdag 27 mei 2005 @ 23:09:24 #123

gieling

Live from NYC

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

zaterdag 28 mei 2005 @ 18:48:19 #124

gieling

Live from NYC

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

zaterdag 28 mei 2005 @ 19:50:47 #125

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

maandag 6 juni 2005 @ 17:58:11 #126

Kamigot

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 ?

maandag 6 juni 2005 @ 18:06:28 #127

curry684

Windowshippie

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"

Omines.

maandag 6 juni 2005 @ 18:14:04 #128

Kamigot

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 ?

maandag 6 juni 2005 @ 18:15:10 #129

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

dinsdag 7 juni 2005 @ 13:19:01 #130

curry684

Windowshippie

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.

Omines.

dinsdag 7 juni 2005 @ 13:20:21 #131

curry684

Windowshippie

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

Omines.

dinsdag 7 juni 2005 @ 13:46:58 #132

Kamigot

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.

dinsdag 7 juni 2005 @ 14:04:55 #133

Kamigot

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 ]

woensdag 8 juni 2005 @ 14:36:30 #134

curry684

Windowshippie

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

Omines.

woensdag 8 juni 2005 @ 14:39:35 #135

curry684

Windowshippie

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

Omines.

woensdag 8 juni 2005 @ 17:34:29 #136

DionysuZ

Respect my authority!

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?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 8 juni 2005 @ 18:58:17 #137

SuperRembo

Sinds 1998

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.

woensdag 8 juni 2005 @ 21:20:14 #138

Nietmachine

Ik niet.

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?

Een dag niet gelachen is een dag niet geleefd.

donderdag 9 juni 2005 @ 13:04:39 #139

Berkery

Fat bastard

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.

No Dukes of Hazzard in the classroom

donderdag 9 juni 2005 @ 13:14:16 #140

Leshy

Held met sokken.

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.

donderdag 9 juni 2005 @ 14:59:38 #141

DionysuZ

Respect my authority!

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.

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 9 juni 2005 @ 21:55:47 #142

curry684

Windowshippie

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.

Omines.

donderdag 9 juni 2005 @ 22:06:24 #143

Nietmachine

Ik niet.

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.

Een dag niet gelachen is een dag niet geleefd.

donderdag 9 juni 2005 @ 23:14:30 #144

Roonaan

Strictly

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.

vrijdag 10 juni 2005 @ 14:30:22 #145

curry684

Windowshippie

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.

Omines.

vrijdag 10 juni 2005 @ 16:07:31 #146

sop

ahum

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.

vrijdag 10 juni 2005 @ 20:02:53 #147

Leshy

Held met sokken.

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.

vrijdag 10 juni 2005 @ 20:50:18 #148

DutchBlood

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?

vrijdag 10 juni 2005 @ 23:20:33 #149

Nietmachine

Ik niet.

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?

Een dag niet gelachen is een dag niet geleefd.

zaterdag 11 juni 2005 @ 13:17:15 #150

Leshy

Held met sokken.

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.

zaterdag 11 juni 2005 @ 22:16:00 #151

SuperRembo

Sinds 1998

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.

zaterdag 11 juni 2005 @ 22:19:45 #152

Leshy

Held met sokken.

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

zaterdag 11 juni 2005 @ 22:40:44 #153

SuperRembo

Sinds 1998

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)

dinsdag 14 juni 2005 @ 13:43:05 #154

DutchBlood

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?

dinsdag 14 juni 2005 @ 17:01:44 #155

Leshy

Held met sokken.

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

donderdag 16 juni 2005 @ 19:54:01 #156

markiemark

FR 1908

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

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

donderdag 16 juni 2005 @ 20:03:49 #157

SuperRembo

Sinds 1998

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.

vrijdag 17 juni 2005 @ 01:07:22 #158

curry684

Windowshippie

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

Omines.

vrijdag 17 juni 2005 @ 01:08:40 #159

curry684

Windowshippie

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

Omines.

vrijdag 17 juni 2005 @ 12:17:03 #160

wonko

Fap

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.

Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.

vrijdag 17 juni 2005 @ 18:46:48 #161

SqueaK

"Pis nooit tegen de wind

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

vrijdag 17 juni 2005 @ 18:48:39 #162

SqueaK

"Pis nooit tegen de wind

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

vrijdag 17 juni 2005 @ 19:43:52 #163

SuperRembo

Sinds 1998

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.

zaterdag 18 juni 2005 @ 06:24:31 #164

SqueaK

"Pis nooit tegen de wind

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 ?

zaterdag 18 juni 2005 @ 10:13:08 #165

SuperRembo

Sinds 1998

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.

zaterdag 18 juni 2005 @ 12:02:12 #166

SqueaK

"Pis nooit tegen de wind

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

zondag 19 juni 2005 @ 22:19:58 #167

curry684

Windowshippie

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.

Omines.

zondag 19 juni 2005 @ 23:04:37 #168

SuperRembo

Sinds 1998

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.

maandag 20 juni 2005 @ 13:26:32 #169

SqueaK

"Pis nooit tegen de wind

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:

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

/********************************************* 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

maandag 20 juni 2005 @ 15:37:40 #170

curry684

Windowshippie

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

Omines.

maandag 20 juni 2005 @ 23:57:35 #171

markiemark

FR 1908

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

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

dinsdag 21 juni 2005 @ 23:07:27 #172

WalfredGeesink

De vrachtwagenchauffeur.

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?

walfredgeesink.nl/fm

dinsdag 21 juni 2005 @ 23:29:15 #173

bartjeuh

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 ]

woensdag 22 juni 2005 @ 09:07:05 #174

DutchBlood

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.

woensdag 22 juni 2005 @ 09:08:26 #175

DutchBlood

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

woensdag 22 juni 2005 @ 17:42:08 #177

curry684

Windowshippie

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.

Omines.

woensdag 22 juni 2005 @ 17:55:00 #178

theDax

Breek los en leef

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.

Daxydelict

woensdag 22 juni 2005 @ 18:02:23 #179

theDax

Breek los en leef

ik heb het al :|

Daxydelict

donderdag 23 juni 2005 @ 10:55:33 #180

bartjeuh

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

maandag 27 juni 2005 @ 12:50:29 #181

KlappernootatWork

Tot mijn strot in het genot..

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 ]

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 13:33:49 #182

sop

ahum

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.

maandag 27 juni 2005 @ 13:36:06 #183

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

maandag 27 juni 2005 @ 14:04:06 #184

Leshy

Held met sokken.

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.

maandag 27 juni 2005 @ 14:29:39 #185

KlappernootatWork

Tot mijn strot in het genot..

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

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 14:30:51 #186

KlappernootatWork

Tot mijn strot in het genot..

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

[..]

Yup.

IE is altijd al zijn tijd vooruit geweest...

Shit! werken zuigt...
Op donderdag 22 november 2007 @ 12:42 schreef Neelis het volgende: Rabbelneuteaantwaark ?

maandag 27 juni 2005 @ 14:50:46 #187

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

maandag 27 juni 2005 @ 17:36:02 #188

DionysuZ

Respect my authority!

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

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

maandag 27 juni 2005 @ 17:42:54 #189

sop

ahum

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?

maandag 27 juni 2005 @ 17:50:22 #190

DionysuZ

Respect my authority!

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.

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

maandag 27 juni 2005 @ 20:11:31 #191

AnGabhar

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.

maandag 27 juni 2005 @ 21:27:42 #192

sop

ahum

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.

maandag 27 juni 2005 @ 23:02:23 #193

AnGabhar

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.

donderdag 30 juni 2005 @ 14:46:13 #194

DionysuZ

Respect my authority!

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.

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 7 juli 2005 @ 13:26:29 #195

Leonoor

Unter 32-16-8...

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?

Nulla verba sed acta

donderdag 7 juli 2005 @ 21:39:57 #196

SHeqel

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

Minitokyo

vrijdag 15 juli 2005 @ 21:55:02 #197

Lkw

²³³³²³²³²³²³²³²³²²³²²

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!

Stop the world, I want to get out.

vrijdag 15 juli 2005 @ 22:08:07 #198

Lkw

²³³³²³²³²³²³²³²³²²³²²

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

Stop the world, I want to get out.

vrijdag 15 juli 2005 @ 23:45:48 #199

Lkw

²³³³²³²³²³²³²³²³²²³²²

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 ]

Stop the world, I want to get out.

woensdag 20 juli 2005 @ 15:50:29 #200

Chandler

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?

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

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

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 20 juli 2005 @ 15:52:46 #201

Berkery

Fat bastard

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

No Dukes of Hazzard in the classroom

woensdag 20 juli 2005 @ 15:54:06 #202

Chandler

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

The people who lost my respect will never get a capital letter for their name again.
Like trump...

woensdag 20 juli 2005 @ 15:54:33 #203

Berkery

Fat bastard

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

No Dukes of Hazzard in the classroom

woensdag 20 juli 2005 @ 15:56:46 #204

Berkery

Fat bastard

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

No Dukes of Hazzard in the classroom

woensdag 20 juli 2005 @ 17:50:18 #205

Leshy

Held met sokken.

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

donderdag 21 juli 2005 @ 09:52:14 #206

Chandler

ik heb het dus opgelost met een float: left;

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

The people who lost my respect will never get a capital letter for their name again.
Like trump...

donderdag 21 juli 2005 @ 10:02:13 #207

Roonaan

Strictly

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

-r-

zondag 24 juli 2005 @ 23:43:24 #208

MrDoegewoon

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

)

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

zondag 24 juli 2005 @ 23:57:43 #209

WalfredGeesink

De vrachtwagenchauffeur.

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

walfredgeesink.nl/fm

maandag 25 juli 2005 @ 11:47:16 #210

Chandler

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?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

maandag 25 juli 2005 @ 20:45:09 #211

MrDoegewoon

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

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

maandag 25 juli 2005 @ 21:03:50 #212

SuperRembo

Sinds 1998

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.

maandag 25 juli 2005 @ 21:07:22 #213

MrDoegewoon

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

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

maandag 25 juli 2005 @ 21:34:03 #214

SuperRembo

Sinds 1998

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.

maandag 25 juli 2005 @ 21:51:17 #215

MrDoegewoon

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

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

maandag 25 juli 2005 @ 22:05:25 #216

SuperRembo

Sinds 1998

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

maandag 25 juli 2005 @ 22:08:44 #217

MrDoegewoon

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

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

maandag 25 juli 2005 @ 22:36:19 #218

SuperRembo

Sinds 1998

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.

maandag 25 juli 2005 @ 22:41:04 #219

MrDoegewoon

Jij ruled

thnx

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

donderdag 28 juli 2005 @ 17:54:23 #220

MrDoegewoon

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

)

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

donderdag 28 juli 2005 @ 18:51:53 #221

SuperRembo

Sinds 1998

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.

donderdag 28 juli 2005 @ 20:52:31 #222

MrDoegewoon

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)

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

donderdag 28 juli 2005 @ 21:56:15 #223

SuperRembo

Sinds 1998

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

maandag 1 augustus 2005 @ 21:51:04 #224

MrDoegewoon

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

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

dinsdag 2 augustus 2005 @ 17:51:46 #225

MrDoegewoon

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

West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement

dinsdag 2 augustus 2005 @ 22:40:31 #226

SuperRembo

Sinds 1998

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.

donderdag 4 augustus 2005 @ 00:37:00 #227

The_Cyberspace

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?

donderdag 4 augustus 2005 @ 07:40:50 #228

SuperRembo

Sinds 1998

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

donderdag 4 augustus 2005 @ 13:13:56 #229

The_Cyberspace

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

donderdag 4 augustus 2005 @ 20:27:56 #230

The_Cyberspace

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?

donderdag 4 augustus 2005 @ 21:31:36 #231

SuperRembo

Sinds 1998

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.

vrijdag 5 augustus 2005 @ 00:48:31 #232

The_Cyberspace

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

vrijdag 12 augustus 2005 @ 20:39:29 #233

Flying

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.

vrijdag 12 augustus 2005 @ 20:54:14 #234

SuperRembo

Sinds 1998

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.

zondag 14 augustus 2005 @ 15:31:07 #235

Brilaap

Snel verveeld

*Snel tvp neerzet*

woensdag 17 augustus 2005 @ 15:32:58 #236

Stephan4kant

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?

"We hebben nooit domme dingen gedaan van onze uitkering, en waren nooit te beroerd om er wat bij te verdienen" (F. Jacobse)

woensdag 17 augustus 2005 @ 15:50:18 #237

Rolie

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.

woensdag 17 augustus 2005 @ 21:30:00 #238

Brilaap

Snel verveeld

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

woensdag 17 augustus 2005 @ 22:41:58 #239

DionysuZ

Respect my authority!

notepad?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

woensdag 17 augustus 2005 @ 23:05:33 #240

SuperRembo

Sinds 1998

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.

woensdag 17 augustus 2005 @ 23:06:46 #241

Brilaap

Snel verveeld

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

Voorspelbare kutnewbie

.

woensdag 17 augustus 2005 @ 23:07:35 #242

Brilaap

Snel verveeld

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

[..]

TopStyle, de lite versie is gratis.

Ik zal hem gaan proberen. Dank

.

donderdag 18 augustus 2005 @ 00:46:15 #243

DionysuZ

Respect my authority!

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

[..]

Voorspelbare kutnewbie .

que? newbie?

□ Reality is merely an illusion,albeit a very persistent one-A.Einstein
■ Of ik ben gek of de rest van de wereld.Ik denk zelf de rest van de wereld-Rudeonline
□ The war is not meant to be won.It is meant to be continuous-G.Orwell

donderdag 18 augustus 2005 @ 10:44:12 #244

Brilaap

Snel verveeld

Topstyle werkt handig. Thnx voor de top

.

maandag 22 augustus 2005 @ 14:12:27 #245

Brilaap

Snel verveeld

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

.

maandag 22 augustus 2005 @ 14:17:28 #246

Leshy

Held met sokken.

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

maandag 22 augustus 2005 @ 14:34:30 #247

Brilaap

Snel verveeld

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

.

dinsdag 23 augustus 2005 @ 12:52:16 #248

Brilaap

Snel verveeld

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

dinsdag 23 augustus 2005 @ 12:53:41 #249

Light