abonnement bol.com Unibet Coolblue
  maandag 24 maart 2008 @ 16:46:44 #1
12880 CraZaay
prettig gestoord
pi_57581518
Vorige topics:

[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deeltje 8

Mijn laatste post in deel 8:
quote:
Op maandag 24 maart 2008 16:24 schreef CraZaay het volgende:
IE voor de Mac moet je niet meer ondersteunen, niemand gebruikt die meer, wordt sinds 1999 niet meer ontwikkeld en kun je niet eens meer downloaden bij MS

Firefox 3 zal er net zo mee omgaan als Firefox 2, namelijk standards compliant conform de W3C richtlijnen

En voor box model problemen: met welk doctype?
  maandag 24 maart 2008 @ 16:54:36 #2
21410 Fliepke
Serieuze waarheid
pi_57581704
Ik heb wat te leuk zitten spelen met margins en paddings, dat gaat wel eens mis
Komt goed. Irriteert me alleen
  maandag 24 maart 2008 @ 17:02:48 #3
134533 donroyco
dus niet Donroyco
pi_57581869
tvp
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  maandag 24 maart 2008 @ 17:20:22 #4
12880 CraZaay
prettig gestoord
pi_57582220
Met een valid doctype heb ik qua box model eigenlijk zelden problemen met inconsistencies tussen IE en andere browsers.
  maandag 24 maart 2008 @ 17:47:06 #5
21410 Fliepke
Serieuze waarheid
pi_57582758
Dit probleem, dat staat lost van je doctype
  maandag 24 maart 2008 @ 20:26:47 #6
12880 CraZaay
prettig gestoord
pi_57585994
quote:
Op maandag 24 maart 2008 17:47 schreef Fliepke het volgende:
Dit probleem, dat staat lost van je doctype
Ik denk het niet Als jij met een valid doctype een browser in standards mode laat renderen dan gebruikt zowel IE (6 & 7), Firefox, Safari, etc allemaal het W3C box model
  maandag 24 maart 2008 @ 21:33:28 #7
21410 Fliepke
Serieuze waarheid
pi_57587516
hmm lijkt er idd op dat je gelijk hebt.
Ik ga er eens naar kijken.

(heb even wat zitten googlen )

* Fliepke is n00b en biedt zijn nederige domheid aan
  maandag 24 maart 2008 @ 21:36:07 #8
12880 CraZaay
prettig gestoord
pi_57587576
Hehe, no prob. Vandaar dat ik naar het gebruikte doctype vroeg, want dat scheelt héél veel box model koppijn
  maandag 24 maart 2008 @ 21:49:28 #9
21410 Fliepke
Serieuze waarheid
pi_57587900
quote:
Op maandag 24 maart 2008 21:36 schreef CraZaay het volgende:
Hehe, no prob. Vandaar dat ik naar het gebruikte doctype vroeg, want dat scheelt héél veel box model koppijn
hehe, ik ben gewoon gestopt Ga morgne wel verder
pi_57589636
quote:
Op maandag 24 maart 200821:49 schreef Fliepke het volgende:

[..]

hehe, ik ben gewoon gestopt Ga morgne wel verder
Ja hoe moet ik nu nog een nuttige TVP doen dan?
pi_57931976
Had net al een nieuw topic gepost omdat ik dit topic niet eens meer zag in de topiclist, maar goed...

Okee, een 100% height layout zonder al te veel poespas, tot daar aan toe. Dat is relatief eenvoudig en vrij vaak gedaan, als volgt (effe snel voorbeeld):

CSS
1
2
3
4
5
6
7
8
9
10
body, html{
 border-width:0;
 height:100%;
 margin:0;
 padding:0;

}
#container{
 height:100%;
}


HTML
1
2
3
4
5
6
7
8
9
<html>
<body>

<div id="container">
bla bla bla
</div>

</body>
</html>


Goed, relatief eenvoudig en tevens 23424242 keren gedocumenteerd op Internet. Nu wil ik voor mezelf effe een simpel pagina`tje bouwen voor een kleine applicatie. Nu wil ik als het ware het volgende:



Ik wil dus een pagina zoals hierboven. De rode balk is een header waar naderhand alle leuke dingetjes als het logo en de navigatie in komt, deze header moet altijd 100px height hebben en zich over de volledige paginabreedte stretchen (100% width). Deze plak ik direct binnen mijn container en positioneer ik absolute.

In de container ligt ook een divje 'content', meteen na de div 'header'. Div 'content' bevat weer een divje 'innercontent', die in bovenstaande afbeelding blauw is. Om 'innercontent' moet een ruimte van 10px zitten en boven 'content' een margin van 100px (anders valt 'ie onder de header), en hier gaat het gewoon gigantisch de fout in; de pagina valt buiten mijn viewport (met als gevolg natuurlijk een scrollbarretje). Hoe op te lossen?

Voorbeeld staat hier: http://www.tuvai.net/zooi/cee-es-es/

Normaal werk ik nooit met 100% height layouts, en mij lijkt het iets relatief eenvoudigs, toch echter flinke problemen mee zoals je wel kunt zien. :P
  FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:23:14 #12
1972 Swetsenegger
Egocentrische Narcist
pi_57933128
http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)
  FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:24:08 #13
1972 Swetsenegger
Egocentrische Narcist
pi_57933152
CSS 100% viewport/canvas heights zijn een drama tuvai. Ik zou je bijna aanraden een tabel te gebruiken....
pi_57933257
quote:
Op woensdag 9 april 2008 13:23 schreef Swetsenegger het volgende:
http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)
Dat komt doordat je alles aan het floaten bent (inclusief div right, waar de content nu in staat), dan gaat 'ie altijd vaag doen als je de hoogte in gaat werken. Probeer anders div.right eens margin-left:150px; mee te geven en de float er van weg te halen.

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
<!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" xml:lang="en" lang="en">
   <head>
   <style>
   #container{
      position:relative;
      width:950px;
      padding:0;
      background-color:blue;
   }
   
   .left{
      float:left;
      width:150px;
      padding:0;
      margin:0;
      background-color:transparent;
   }
   
   .right{
      margin-left:150px;
      padding:0;
      background-color:red;
      width:800px;
   }</style>
   </head>
   <body>
      <div id="container">
         <div class="left">Left</div>
         <div class="right">
            <p>bla</p>
            <p>bla</p>
            <p>bla</p>
         </div>
      </div>
   </body>
</html>


Tevens was je de DOCTYPE declaratie vergeten.
pi_57933288
quote:
Op woensdag 9 april 2008 13:24 schreef Swetsenegger het volgende:
CSS 100% viewport/canvas heights zijn een drama tuvai. Ik zou je bijna aanraden een tabel te gebruiken....
Vertel mij wat. 100% height is eigenlijk best wel eenvoudig te doen met kleine website`jes/apps waar weinig van content in zit en waar je toch NOOIT buiten de viewport zult vallen. Maar het gaat gewoon door margin en padding gigantisch de mist in. Lijkt wel alsof ze met 100% height layouts ineens helemaal niet meer doen wat ze moeten doen (dus margin als in ruimte BUITEN het betreffende element en padding de ruimte IN het betreffende element).

Horizontaal, dus met widths, gaat het prima. Je kunt tegen een element al heel eenvoudig width:700px; margin:0 100px; laten doen wat gewoon perfect werkt.
  FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:32:22 #16
1972 Swetsenegger
Egocentrische Narcist
pi_57933316
Hee, die had ik in de 'echte' omgeving geprobeerd maar werkte niet. NU wel...

Eens zien wat ik verkeerd gedaan had
  FOK!-Schrikkelbaas woensdag 9 april 2008 @ 13:33:18 #17
1972 Swetsenegger
Egocentrische Narcist
pi_57933344
quote:
Op woensdag 9 april 2008 13:31 schreef Tuvai.net het volgende:

[..]

Vertel mij wat. 100% height is eigenlijk best wel eenvoudig te doen met kleine website`jes/apps waar weinig van content in zit en waar je toch NOOIT buiten de viewport zult vallen. Maar het gaat gewoon door margin en padding gigantisch de mist in. Lijkt wel alsof ze met 100% height layouts ineens helemaal niet meer doen wat ze moeten doen (dus margin als in ruimte BUITEN het betreffende element en padding de ruimte IN het betreffende element).
Klopt, ik heb wel hacks gezien die een footer altijd strak onderaan de viewport positioneren. Maar eigenlijk geen zuivere css oplossing.
pi_57936033
quote:
Op woensdag 9 april 200813:23 schreef Swetsenegger het volgende:
http://test.xploise.nl/floattest.html

Simpel verhaal. containerdivje met een blauwe achtergrond.
Daarbinnen 2 floating divs genest. 1 met een transparante background en 1 met een rode background.

De bedoeling is nu dat de linkerbalk de blauwe achtergrond krijgt van de containerdiv. Immers zal de linkerdiv anders 'korter' zijn dan de rechter div met volledige content.

Maar.... de container div 'groeit' niet mee met de content als dit floats zijn.... Hoe los ik dit op? (in dit voorbeeld kan je met een background image aan de gang, maar in de uiteindelijke pagina is dit stuk onderdeel van een groter geheel.)
In het vorige topic ook al zo'n probleem opgelost.
Wat het beste werkt is er een lege div onder zetten, met alleen clear:both als css stijl.
Omdat die door de clear:both niet naast andere objecten mag gaan staan, gaat'ie er onder staan, en weet de parent div weer hoe hoog zijn inhoud is.

-edit- Als je ook een footer hebt, kun je die ook voor dit doel gebruiken.
  FOK!-Schrikkelbaas woensdag 9 april 2008 @ 15:46:07 #19
1972 Swetsenegger
Egocentrische Narcist
pi_57936119
ook met footer, die uiteraard al een clear:both had, groeit de container div niet mee met de langste geneste float.
pi_57975278
Hallo,

Ik zit met een website probleempje.
Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer. In firefox loopt ie wel perfect.
Kan iemand zien wat er mis is? Mijn site www.voetbalmanager.net , mijn css: http://www.dutchville.com/kid/images/Orange.css

bvd
webby
to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true
  vrijdag 11 april 2008 @ 09:08:15 #21
134533 donroyco
dus niet Donroyco
pi_57975543
quote:
Op vrijdag 11 april 2008 08:54 schreef webbyplus het volgende:
Hallo,

Ik zit met een website probleempje.
Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer. In firefox loopt ie wel perfect.
Kan iemand zien wat er mis is? Mijn site www.voetbalmanager.net , mijn css: http://www.dutchville.com/kid/images/Orange.css

bvd
webby
Hier is niks te zien
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  vrijdag 11 april 2008 @ 09:17:16 #22
12880 CraZaay
prettig gestoord
pi_57975683
quote:
Op vrijdag 11 april 2008 08:54 schreef webbyplus het volgende:

Ergens heb ik iets gewijzigd in mijn website layout wat er voor gezorgd heeft dat het vernacheld getoond wordt in internetexplorer.
Wat heb je gewijzigd? Dat beperkt het zoeken een heel stuk
pi_57975726
Ik heb alleen een aanpassing gedaan aan de blockquote. Verder niets. Misschien iets in de index file dat ik verkeerd heb aangepast...
to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true
pi_57975758
quote:
Op vrijdag 11 april 2008 09:08 schreef donroyco het volgende:

[..]

Hier is niks te zien
Zo ziet het er uit in IE:
to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true
pi_57977114
Arghhh ik ben er al achter.
Ik heb deze domein geregistreerd en hij verwijst door naar mijn webhosting. Het doorsturen gebeurd door middel van een pagina-groot frame met daarin de gelinkte pagina's op mijn webhosting. Door middel van javascript vebreek ik die frame... En dat was ik dus vergeten mee te nemen in mijn html

Is weer gefixed!
to say of what is that it is not, or of what is not that it is, is false, while to say of what is that it is, or of what is not that it is not, is true
abonnement bol.com Unibet Coolblue
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')