[CSS] voor dummies - Deel 3

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_30829655
To be continued

Vorige topics:
[CSS] voor dummies.
[CSS] voor dummies - Deel 2

dan maar verder..
quote:
Op woensdag 21 september 2005 21:42 schreef Roönaän het volgende:
gebrek aan doctype, uppercase tags, tablebased layout? nog meer?
Nu moet http://services.bruggema.nl voor 99.9% valid zijn... tenminste dat zij die tool op me pc ennuh die foutjes die er nog inzitten kan ik helaas niet oplossen... en dat over frames!? wat is daar het probleem mee? ben nog steeds niet zo goed in CSS
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_30843663
er was een css code waardoor pagina's er in FF en in IE er hetzelfde uitzien... Was iets met box-... of zo.. kan iemand mij helpen?
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
pi_30848564
quote:
Op donderdag 22 september 2005 23:55 schreef markiemark het volgende:
er was een css code waardoor pagina's er in FF en in IE er hetzelfde uitzien... Was iets met box-... of zo.. kan iemand mij helpen?
Bedoel je box-sizing?

1
2		box-sizing: border-box;/* W3C */
-moz-box-sizing: border-box;/* Moz */


Zie ook Quirksmode.org over box model tweaking.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_30852256
quote:
Op vrijdag 23 september 2005 07:44 schreef SuperRembo het volgende:

[..]

Bedoel je box-sizing?
[ code verwijderd ]

Zie ook Quirksmode.org over box model tweaking.
dat was het!! thnx!
Amsterdam, stad van hash en coke,
Waar de vrouwen zich vrouwelijk gedragen..
En de mannen ook..
  Redactie Games vrijdag 23 september 2005 @ 11:37:54 #5
52557 crew  Mr.Noodle
Offtopic in geleuter...
pi_30853063
Ik ben ook druk met CSS bezig.. tot nu toe krijg ik alleen maar veel verschillen tussen IE en FF.
Vooral met menu-overlay's waarvan je gebruikt maakt van een simpele list.

Ik moet eerlijk zeggen dat CSS je HTML echt bijna reduceert tot niks, maar het getweak/gefreubel om die kleine details er binnen in goed te krijgen is soms om te
How do you get precisely 4 Gallons of water with a 3 Gallon and 5 Gallon Can...
  vrijdag 23 september 2005 @ 15:45:53 #6
126637 Onnib
lekker dan...
pi_30860129
Ok mensen, nieuw probleem om jullie over te buigen:
Ik heb mijn site voor IE gemaakt. had ik beter niet kunnen doen, want hij ziet er nu niet uit in Firefox. Probleem was dat ik een tutorial heb gevolgd die voor IE was geschreven.

Zo moet ie er uit zien:


En zo ziet ie eruit in Firefox:


De stylesheet staat hier: www.binos.nl/style.css

Wie kan mij helpen? Ik kom er niet meer uit.
  vrijdag 23 september 2005 @ 15:51:17 #7
126637 Onnib
lekker dan...
pi_30860303
Zo zijn er nog wel wat dingen die niet werken in FF en wel in IE:

  • Horizontale balk is een 1px grijze streep in IE maar in FF niet
  • Active Link zorgt in IE voor lichte menuknop, maar doet in FF niks

    • pi_30862974
    Om te beginnen zou ik dit 'uncommenten' (in je html):

    1<!--<div style="clear: both"></div>--> 
    No Dukes of Hazzard in the classroom
      vrijdag 23 september 2005 @ 17:26:16 #9
    126637 Onnib
    lekker dan...
    pi_30863330
    dat is inderdaad een begin
    pi_30941439
    Uit het vorige deel, een probleempje waar ik nog mee zit:
    quote:
    Op zaterdag 17 september 2005 17:23 schreef WheeleE het volgende:

    [..]

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

    Ik hoop dat ik het duidelijk genoeg heb uitgelegd .
    "...while I'm supposed to marry her brother, a renowned pillow biter." Cersei Lannister
    "Float like a butterfly, sting like a bee, look ridiculous." Rory the Roman
    "It's smaller on the outside." Clara Oswin Oswald
    pi_30941959
    Ik heb een simpel vraagje, met misschien ook wel een eenvoudig antwoord:

    Ik heb op mijn html-pagina een div. Hoe krijg ik deze gecentreerd op de pagina zonder dat ik een table gebruik?

    Nu is de code als volgt:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10    		<html>
    <head>
    <link href="template.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="outer">
      test
    </div>
    </body>
    </html>


    En de css:
    1
    2
    3
    4
    5
    6
    7
    8
    9    		body {
      background-color : grey;
    }

    div.outer {
      text-align : left;
      max-width : 600px;
      background-color : white;
    }
    pi_30974481
    @ LeisureSuitLarry
    div.outer {
    text-align : left;
    max-width : 600px;
    background-color : white;
    margin:auto;
    }


    En wie kan mij helpen, ik heb een probleem met mn menu in IE en FF
    Als ik http://www.borntobewild.nl/test_layout/ in FF laad dan begint het submenu 1 of 2 pix lager dan bij IE, hoe kan ik dat verhelpen.

    En wat zeggen jullie van de layou+menu: http://www.borntobewild.nl/test_layout/
    of http://www.borntobewild.nl
    pi_30982942
    --al opgelost--

    [ Bericht 37% gewijzigd door m-kay op 28-09-2005 22:11:18 ]
    I look back and I'm amazed, that my thoughts were so clear and true, that three words went through my mind endlessly, repeating themselves like a broken record... you're so cool, you're so cool, you're so cool...
    pi_31006015
    Klopt het dat drop down menu's (<SELECT>) zich niks aantrekken van z-index?
    In onderstaande screenshot heb ik twee iframes, waarvan de actieve (die bovenop staat) een hogere z-index heeft dan de passieve (die er onder staat), maar de dropdowns van de passieve schijnen er doorheen .



    Dit is overigens alleen in IE het geval, in Firefox werkt het prima (maar daar werkt het hele script zo langzaam dat het eigenlijk geen zin heeft). Is er een workaround?
    GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
    pi_31012821
    Geen idee maar ik moet wle zeggen dat dit er netjes uitziet, wat ben je aan het maken?

    Trouwens zoals jij je CMS script beschrijft werkt mijn frontpage ;-)
    Ik kijk dan ook nog naar subdomein, active inactieve.

    [ Bericht 44% gewijzigd door Darkomen op 28-09-2005 23:20:39 ]
    pi_31013085
    quote:
    Op woensdag 28 september 2005 19:09 schreef Nevermind het volgende:
    Klopt het dat drop down menu's (<SELECT>) zich niks aantrekken van z-index?
    [...]
    Dit is overigens alleen in IE het geval, in Firefox werkt het prima (maar daar werkt het hele script zo langzaam dat het eigenlijk geen zin heeft). Is er een workaround?
    Dat is een bekende bug van IE.

    U bent 3 muisklikken verwijderd van de oplossing
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31013685
    quote:
    Op woensdag 28 september 2005 23:09 schreef Darkomen het volgende:
    Geen idee maar ik moet wle zeggen dat dit er netjes uitziet, wat ben je aan het maken?

    Trouwens zoals jij je CMS script beschrijft werkt mijn frontpage ;-)
    Ik kijk dan ook nog naar subdomein, active inactieve.
    Ik ben bezig met een zeer uitgebreid project om een soort shell te maken voor de Active Desktop. Alle content staat gehost op onze thuisserver, waardoor er heel veel mogelijkheden zijn, zoals alle bestanden indexeren en op mijn eigen manier weergeven (videobestanden met screenshots bijvoorbeeld ). Samen met het geweldige programma "wincron" kan ik op bepaalde tijdstippen scripts uitvoeren, zoals RSS feeds downloaden en cachen, mails checken e.d.

    Screenshot: http://fok.chillosophy.nl/dauphinescreen.png
    verkapte ik-ben-trots-op-mijn-generd-post

    En SuperRembo, weet je misschien een workaround? Ik ben afhankelijk van IE omdat dit dus ook te bereiken is via de Active Desktop...
    GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
    pi_31017872
    quote:
    Op woensdag 28 september 2005 23:33 schreef Nevermind het volgende:
    En SuperRembo, weet je misschien een workaround?
    quote:
    Op woensdag 28 september 2005 23:17 schreef SuperRembo het volgende:
    U bent 3 muisklikken verwijderd van de oplossing
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31018757
    quote:
    Op woensdag 28 september 2005 23:33 schreef Nevermind het volgende:

    [..]

    Ik ben bezig met een zeer uitgebreid project om een soort shell te maken voor de Active Desktop. Alle content staat gehost op onze thuisserver, waardoor er heel veel mogelijkheden zijn, zoals alle bestanden indexeren en op mijn eigen manier weergeven (videobestanden met screenshots bijvoorbeeld ). Samen met het geweldige programma "wincron" kan ik op bepaalde tijdstippen scripts uitvoeren, zoals RSS feeds downloaden en cachen, mails checken e.d.

    Screenshot: http://fok.chillosophy.nl/dauphinescreen.png
    verkapte ik-ben-trots-op-mijn-generd-post

    En SuperRembo, weet je misschien een workaround? Ik ben afhankelijk van IE omdat dit dus ook te bereiken is via de Active Desktop...
    Netjes!
    pi_31019187
    quote:
    Op woensdag 28 september 2005 23:33 schreef Nevermind het volgende:

    [..]

    Ik ben bezig met een zeer uitgebreid project om een soort shell te maken voor de Active Desktop. Alle content staat gehost op onze thuisserver, waardoor er heel veel mogelijkheden zijn, zoals alle bestanden indexeren en op mijn eigen manier weergeven (videobestanden met screenshots bijvoorbeeld ). Samen met het geweldige programma "wincron" kan ik op bepaalde tijdstippen scripts uitvoeren, zoals RSS feeds downloaden en cachen, mails checken e.d.

    Screenshot: http://fok.chillosophy.nl/dauphinescreen.png
    verkapte ik-ben-trots-op-mijn-generd-post

    En SuperRembo, weet je misschien een workaround? Ik ben afhankelijk van IE omdat dit dus ook te bereiken is via de Active Desktop...
    En terecht Wooouuwww

    verkapte-ik-ben-jaloers-wil-ook-hebben-post
    pi_31029305
    quote:
    Op woensdag 28 september 2005 23:17 schreef SuperRembo het volgende:

    [..]

    U bent 3 muisklikken verwijderd van de oplossing
    Ik zal wel extreem traag van begrip zijn, maar ik snap em niet

    http://www.superrembo.com/dhtml/coverdropdown.html
    Dankjewel!

    [ Bericht 24% gewijzigd door Nevermind op 29-09-2005 16:07:04 ]
    GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
      donderdag 29 september 2005 @ 16:58:10 #22
    72709 StefSOFT-NL
    Caravanshaker Nr. 1
    pi_31031068
    Weet niet of deze site al een keer is langsgekomen, maar hier kun je een tutorial volgen die een html/css pagina van de grond af aan opbouwd.
    Jeffrey Murdoch: I am nearly thirty you know. I am not 15. By now I should be able to talk to a woman without accidentally saying nipples or gusset. Or, or, Did you know you can make candles out of human fat
      vrijdag 30 september 2005 @ 18:22:16 #23
    120139 freiss
    Hertog Jan :9~
    pi_31063904
    Hallo, ik heb wil op mijn site een plaatje van 650 px helemaal centreren en ook nog eens helemaal tegen de top aan! Dat centreren lukt wel door het in een div te gooien en die dan te centreren met margin: auto enzo, maar dat helemaal tegen de top lukt niet. Ik heb wel geprobeerd met (margin-)top:-8px, maar dan doet hij het alleen in FF en niet in IE. Wie kan mij helpen?
    HJ 14-punt-gift.
    Lijst met rukmateriaal!
    pi_31065288
    quote:
    Op vrijdag 30 september 2005 18:22 schreef freiss het volgende:
    Hallo, ik heb wil op mijn site een plaatje van 650 px helemaal centreren en ook nog eens helemaal tegen de top aan! Dat centreren lukt wel door het in een div te gooien en die dan te centreren met margin: auto enzo, maar dat helemaal tegen de top lukt niet. Ik heb wel geprobeerd met (margin-)top:-8px, maar dan doet hij het alleen in FF en niet in IE. Wie kan mij helpen?
    In je CSS opnemen:

    1body {margin: 0; padding: 0}

    ?
    pi_31152077
    Ik ben weer aan het prutsen met een layout maar ik krijg het niet voor elkaar wat ik wil.

    Als je het voorbeeld bekijkt zie je verschillende div`s met een nummertje. Nr 1 is zoals ie moet worden, maar 2,3 en 4 doen niet wat ik wil. Ik wil dat ze de rest van de pagina opvullen tot aan nr 5.
    Nr 5 is 20px hoog volgens de css maar hij is groter, dus iets klopt er niet.
    In Internet Explorer ziet ie er al aardig uit en FireFox snapt er blijkbaar niets van..

    Voorbeeld: Klik!

    CSS: Klik!

    Iemand die de oplossing weet?
    pi_31153161
    quote:
    Op maandag 3 oktober 2005 19:04 schreef The_Cyberspace het volgende:
    Iemand die de oplossing weet?
    Werkt een stuk beter als je het html-element een gedefinieerde hoogte van 100% geeft:

    1
    2
    3    		html {
          height: 100%; 
    }


    Verder ziet het er met de door jou gebruikte waarden beter uit als je Internet Explorer in compatibiliteitsmodus laat draaien en voor enkele overige browsers het volgende in je css opneemt:

    1
    2    		* {box-sizing: border-box; -moz-box-sizing: border-box;
    }


    Ten slotte verdient het altijd aanbeveling om voor het body-element niet alleen een marge van 0 op te geven, maar ook een padding van 0.
    pi_31314543
    Ik heb een probleem met mijn website waar ik geen raad mee weet.
    Het gaat om de site: www.sadar.nl

    In IE doet alles het zonder problemen. Maar in FF werken de menu linkjes niet
    Ik kan zelf niet vinden waar de fout zit, en ook een aantal van mijn klasgenoten weten er geen raad mee. Dus mijn hoop is nu op jullie gevestigd.
      zondag 9 oktober 2005 @ 20:27:28 #28
    46794 Berkery
    Fat bastard
    pi_31315621
    quote:
    Op zondag 9 oktober 2005 19:46 schreef Sadar het volgende:
    Ik heb een probleem met mijn website waar ik geen raad mee weet.
    Het gaat om de site: www.sadar.nl

    In IE doet alles het zonder problemen. Maar in FF werken de menu linkjes niet
    Ik kan zelf niet vinden waar de fout zit, en ook een aantal van mijn klasgenoten weten er geen raad mee. Dus mijn hoop is nu op jullie gevestigd.
    <div id="rechts"> staat over het menu heen, da's goed te zien als je het een witte achtergrondkleur geeft.
    No Dukes of Hazzard in the classroom
    pi_31315815
    Dat heb je knap gedaan

    Dit soort dingen krijg je sneller als je met absolute positionering werkt, wat in dit geval nog compleet overbodig is ook.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31318606
    quote:
    Op maandag 3 oktober 2005 19:37 schreef AnGabhar het volgende:

    [..]

    Werkt een stuk beter als je het html-element een gedefinieerde hoogte van 100% geeft:
    [
    Verder ziet het er met de door jou gebruikte waarden beter uit als je Internet Explorer in compatibiliteitsmodus laat draaien en voor enkele overige browsers het volgende in je css opneemt:

    Ten slotte verdient het altijd aanbeveling om voor het body-element niet alleen een marge van 0 op te geven, maar ook een padding van 0.
    Het html-element is nu apart gedefinieerd.

    Die code die je gegeven had heeft averechts effect bij mij, hij gooit alles door elkaar met die code.

    En heb het body-element ook een padding van 0 mee gegeven.

    In het voorbeeld heb ik wat dingen gewijzigd in de hoop dat mijn probleem iets duidelijker word. Op een resolutie van 1280x1024 zie je een rood vlak onderaan. Met een lagere resolutie verdwijnt dit rode vlak. Maar in FireFox lopen de lijnen (border) links en rechts niet netjes door tot onder aan de pagina. In Internet Explorer lijkt het goed te zijn met een lage resolutie.

    Voorbeeld: Klik!

    CSS: Klik!
    pi_31462440
    ok, ik zit met een probleem. ben bezig met een site, en ben al een endje op weg met de intropagina, kijk ik hoe hij eruit ziet in iexplore, is er een groot verschil :
    in firefox ( ):


    in iexplore ( ):


    de 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    		#main{
    box-sizing: content-box;
    width: 1000px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -500px;
    margin-top: -300px;
    font-family: Arial, sans-serif;
    font-size: 13pt;
    }
    #intro-image{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -268px;
    margin-top: -300px;
    width: 536px;
    height: 600px;
    background-image: url("intro.jpg");
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid grey;
    }

    #linksection a{
      display: block;
      width: 130px;
      height: 30px;
      padding-bottom: 40px;
      background-repeat: no-repeat;
    }

    a.b1:link{
      background-image: url(tintroductie.png);
    }

    a.b1:hover{
      background-image: url(tintroductieh.png);
    }

    a.b2:link{
      background-image: url(tportfolio.png);
    }

    a.b2:hover{
      background-image: url(tportfolioh.png);
    }

    a.b3:link{
      background-image: url(tcontact.png);
    }

    a.b3:hover{
      background-image: url(tcontacth.png);
    }
    Geen gezeik.
    pi_31462707
    quote:
    Op zaterdag 15 oktober 2005 15:01 schreef samchestido het volgende:
    ok, ik zit met een probleem. ben bezig met een site, en ben al een endje op weg met de intropagina, kijk ik hoe hij eruit ziet in iexplore, is er een groot verschil :
    Heb je de pagina ergens online staan? Zonder de bijbehorende html blijft het gissen, we hebben de ingredienten wel, maar het recept niet.
    No Dukes of Hazzard in the classroom
    pi_31463875
    please, iemand? :(
    Geen gezeik.
    pi_31464471
    quote:
    Op zaterdag 15 oktober 2005 15:16 schreef samchestido het volgende:
    html: http://80.60.42.54/maria/index.htm
    Die pagina ziet er niet uit in IE en FF. Op wat voor resolutie ontwerp jij?
    No Dukes of Hazzard in the classroom
    pi_31465944
    1280 bij 1024, maar het is nog maar een voorbereiding... wil het ontwerp testen. maar hoe kan het dat die links linksboven komen te staan in iexplore
    Geen gezeik.
    pi_31466208
    Probeer je pagina eerst eens valide te maken. Dat is altijd handig.

    Waarom gebruik je overal position: absolute voor? Is nergens voor nodig, en maakt de css niet makkelijker.

    Waarom gebruik je voor die grote afbeelding niet gewoon een <img>?

    Door de manier waarop je nu verticaal centreerd, krijg je de bovenkant niet te zien als je browserwindow niet hoog genoeg is.

    In FF en IE ziet het er nu trouwens ongeveer gelijk uit.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      FOK!-Schrikkelbaas maandag 17 oktober 2005 @ 23:01:03 #38
    1972 Swetsenegger
    Egocentrische Narcist
    pi_31520380
    Probleem.

    http://pandora.edoorebeek.nl

    Header en een footer. De footer lijnt altijd uit aan de onderkant van het canvas, mits de content hoger is, dan krijg ik uiteraard een scrollbar.
    Tussen deze header en footer moet een div komen, welke relatief 100% is. Dus van onderaan de header tot op de footer doorloopt, onafhankelijk van de content.

    Enig idee?
     | FOK! Schrikkelbaasch
    pi_31520486
    Bedoel je zoiets?
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      FOK!-Schrikkelbaas maandag 17 oktober 2005 @ 23:11:21 #40
    1972 Swetsenegger
    Egocentrische Narcist
    pi_31520665
    quote:
    Op maandag 17 oktober 2005 23:04 schreef SuperRembo het volgende:
    Bedoel je zoiets?
    Die werkt niet goed in IE , maar dat is relatief eenvoudig.
    Maak gewoon een achtergrond image met aan de rechterkant een grijze balk, float twee divs, waarbij de linker div even breed is als de grijze balk.

    Probleem is nu dat ik in de div een image aan de boven en onderzijde moet zetten. De div zelf moet dus stretchen tot op de footer. En dat doen divs (standaard) niet.

    Jouw voorbeeld werkt, want ondanks dat de linker div niet streched tot de footer, merk ja dat niet omdat de container image (met de rechterbalk) wel doorloopt. Dat is bv wat ik op www.tweedehandsboek.net heb gedaan.

    -edit- voorbeeldje aangepast. De div aan de linkerzijde loopt nu niet verder dan de content. Maar ik wil 'm dus zo dat de bottom tot op de footer komt (marge van 5 px).

    [ Bericht 8% gewijzigd door Swetsenegger op 17-10-2005 23:16:49 ]
     | FOK! Schrikkelbaasch
    pi_31521168
    quote:
    Op maandag 17 oktober 2005 23:11 schreef Swetsenegger het volgende:

    [..]

    Die werkt niet goed in IE , maar dat is relatief eenvoudig.
    Maak gewoon een achtergrond image met aan de rechterkant een grijze balk, float twee divs, waarbij de linker div even breed is als de grijze balk.

    Probleem is nu dat ik in de div een image aan de boven en onderzijde moet zetten. De div zelf moet dus stretchen tot op de footer. En dat doen divs (standaard) niet.

    Jouw voorbeeld werkt, want ondanks dat de linker div niet streched tot de footer, merk ja dat niet omdat de container image (met de rechterbalk) wel doorloopt.
    Het lijkt wel of je het over een hele andere pagina hebt
    http://www.456bereastreet.com/lab/cssframes/ werkt prima in IE (bij mij iig, IE6). Er worden ook geen images gebruikt.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      FOK!-Schrikkelbaas dinsdag 18 oktober 2005 @ 08:22:16 #42
    1972 Swetsenegger
    Egocentrische Narcist
    pi_31526274
    quote:
    Op maandag 17 oktober 2005 23:29 schreef SuperRembo het volgende:

    [..]

    Het lijkt wel of je het over een hele andere pagina hebt
    http://www.456bereastreet.com/lab/cssframes/ werkt prima in IE (bij mij iig, IE6). Er worden ook geen images gebruikt.
    Ik keek in IE 7 en daar werkt het niet. Dat is natuurlijk het linke met browser hacks
    Je hoeft niet met een background image te werken, maar het heeft hetzelfde effect. Echter bij deze blijft de footer altijd onder aan de viewport, terwijl in mijn geval de footer onderaan de viewport staat, behalve wanneer de content hoger dan de view port wordt. Dan scrollt hij mee.

    Ik zal het voorbeeld eens goed bekijken
     | FOK! Schrikkelbaasch
      FOK!-Schrikkelbaas woensdag 19 oktober 2005 @ 19:09:03 #43
    1972 Swetsenegger
    Egocentrische Narcist
    pi_31564109
    Helaas is dit niet de oplossing voor mijn probleem. Iemand enig idee?
     | FOK! Schrikkelbaasch
    pi_31582147
    Ik heb een menu dat bestaat uit een list met daarin menuonderdelen die linken naar pagina's. Ik laat het menu uitklappen met javascript.
    het probleem is dat sommige onderdelen in het menu niet linken naar een bepaalde pagina, maar er alleen zijn om het onderliggende menu te laten uitklappen. Ik wil alleen dat die er wel hetzelfde uitzien als je er met je muis overheen gaat. In de rest van het menu gebruik ik gewoon:
    1
    2
    3
    4
    5
    6
    7    		<style type="text/css">
    a:hover {
       color:#FFFA00 !important;
       text-decoration:none
    }
    </style>
    <a href="pagina3.htm">pagina3</a>

    Dat werkt goed, dus ik dacht ik gebruik voor de pagina's die niet moeten linken :
    1
    2
    3
    4
    5
    6
    7    		<style type="text/css">
    a:hover {
       color:#FFFA00 !important;
       text-decoration:none
    }
    </style>
    <a>pagina3</a>

    Maar dan werkt de css er dus niet meer op...
    Hoe kan ik dit oplossen zodanig dat er dus ook niks gebeurd als je op dat betreffende menuonderdeel klikt (hij klapt uit als je er met je muis overheen gaat)
    Vogelaars.nl
      FOK!-Schrikkelbaas donderdag 20 oktober 2005 @ 16:16:18 #45
    1972 Swetsenegger
    Egocentrische Narcist
    pi_31582197
    quote:
    Op donderdag 20 oktober 2005 16:13 schreef ikke_ook het volgende:
    Ik heb een menu dat bestaat uit een list met daarin menuonderdelen die linken naar pagina's. Ik laat het menu uitklappen met javascript.
    het probleem is dat sommige onderdelen in het menu niet linken naar een bepaalde pagina, maar er alleen zijn om het onderliggende menu te laten uitklappen. Ik wil alleen dat die er wel hetzelfde uitzien als je er met je muis overheen gaat. In de rest van het menu gebruik ik gewoon:
    [ code verwijderd ]

    Dat werkt goed, dus ik dacht ik gebruik voor de pagina's die niet moeten linken :
    [ code verwijderd ]

    Maar dan werkt de css er dus niet meer op...
    Hoe kan ik dit oplossen zodanig dat er dus ook niks gebeurd als je op dat betreffende menuonderdeel klikt (hij klapt uit als je er met je muis overheen gaat)
    <a href="#">pagina3</a>
     | FOK! Schrikkelbaasch
    pi_31582422
    quote:
    Op donderdag 20 oktober 2005 16:16 schreef Swetsenegger het volgende:

    [..]

    <a href="#">pagina3</a>
    Dat werkt dus niet echt omdat als je dan op pagina.htm zit en je klikt erop, dan kom je op www.domein.nl/# terecht ipv dat je op www.domein.nl/pagina.htm blijft
    Je zou dan iets van $_SERVER['REQUEST_URI']."#" kunnen gebruiken, maar dan hou je nog steeds dat de pagina ververst, en ik wil dat hij gewoon helemaal niks doen.
    Vogelaars.nl
    pi_31582463
    quote:
    Op donderdag 20 oktober 2005 16:27 schreef ikke_ook het volgende:

    [..]

    Dat werkt dus niet echt omdat als je dan op pagina.htm zit en je klikt erop, dan kom je op www.domein.nl/# terecht ipv dat je op www.domein.nl/pagina.htm blijft
    Je zou dan iets van $_SERVER['REQUEST_URI']."#" kunnen gebruiken, maar dan hou je nog steeds dat de pagina ververst, en ik wil dat hij gewoon helemaal niks doen.
    Hmm dat idee van mij met die # van jou erachter werkt toch wel, bedankt
    Vogelaars.nl
    pi_31725331
    Ik ben met mijn cursus webdesign aangeland bij het hoofdstuk CSS. En alle opdrachten die ik doe, werken maar half. Uiteraard ging ik er eest van uit dat het aan mij lag, maar ik heb alles overnieuw gedaan, gedubbelgecheckt en ik zie écht de fout niet. Bijvoorbeeld dit stukje code, uitgetypt naar het voorbeeld in het boek:

    <style type="text/css>

    .deel1 {
    float: left;
    width: 75 px;
    height: 100 px;
    color: yellow;
    background: green
    }

    .deel2 {
    width: 150 px;
    height: 150 px;
    color: yellow;
    background: red
    {

    </style>

    Het eerste zwevende blok maakt ie niet, het tweede wel. En zo gaat het met alle opdrachten, de eerste opdrachten pakt ie niet, de latere wel.

    Heeft iemand een idee waar de fout zit?
    Kortom, the usual.
    pi_31725348
    (die laatste accolade moet uiteraard andersom, maar dat doet de truc niet)
    Kortom, the usual.
    pi_31727089
    Er ontbreekt een " in <style type="text/css">.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31728306
    haha, die fout was wel heel erg gemakkelijk had ik zelfs kunnen vinden
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_31728457
    Thnx. Owkee, heb ik aangepast, maar hij doet het nog niet, helaas.
    Kortom, the usual.
    pi_31728614
    quote:
    Op donderdag 27 oktober 2005 16:34 schreef Chandler het volgende:
    haha, die fout was wel heel erg gemakkelijk had ik zelfs kunnen vinden
    Knapperd

    Maar goed, met de aangebrachte verbeteringen nog nix dus. Wat nu Chandler
    Kortom, the usual.
    pi_31729255
    Wat hoort er voor html bij? Wat wil je dat er gebeurt? Wat gebeurt er met jouw code?

    Ik zou trouwens aanraden om ook achter de laatste property een ; te zetten (achter green en red dus).
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31729636
    HTML4.01 als ik het goed begrepen heb.

    Er moeten twee blokken naast elkaar in beeld komen, in de opgegeven kleuren. Eerst had ik de regel die aangaf welke HTML erbij hoort niet in het html document opgenomen (ik deed tot nu toe alles zonder die regel, werkte prima). Toen had ik alleen het tweede blok als blok in beeld, in de juiste kleur. Het andere blok was er niet, was alleen de platte tekst, ook niet in de goede kleuren.
    Nu ik de doctype regel heb toegevoegd, met de html versie, krijg ik alleen nog maar twee regels onder elkaar, de laatse regel in de in CSS opgegeven kleuren.

    (; toegevoegd achter red en green)
    Kortom, the usual.
    pi_31730197
    quote:
    Op donderdag 27 oktober 2005 17:22 schreef Pokkehontas het volgende:
    HTML4.01 als ik het goed begrepen heb.
    Ik bedoelde gewoon de html code. Het zijn dus alleen 2 divjes, verder niets?
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31737126
    quote:
    Op donderdag 27 oktober 2005 17:41 schreef SuperRembo het volgende:

    [..]

    Ik bedoelde gewoon de html code. Het zijn dus alleen 2 divjes, verder niets?
    Owww.... (ik ben hier wel op mijn plek hè, qua dummie)

    Ja, twee divjes, that's it. Dit is de code. Letterlijk overgetypt uit het boek:

    <html>
    <head>
    <title>Zwevende elementen</title>
    <link rel="stylesheet" href="C:\Cursus webdesign\Hoofdstuk 12\H12_voorbeeld_7.css" type="text/css">
    </head>

    <body>
    <div class="deel1">Zwevend blok nr.1</div>
    <div class="deel2">Zwevend blok nr.2</div>
    </body>
    </html>
    Kortom, the usual.
    pi_31738202
    Er horen geen spaties tussen het getal en de eenheid.
    Om het tweede blok in ook FireFox naast de eerste te krijgen moet je margin-left:75px aan het 2e blok geven.

    En een windows pad (C:\Cursus webdesign\Hoofdstuk 12\H12_voorbeeld_7.css) hoort niet in een html pagina. Je moet een url opgeven of een relatief pad.
    Bij jou staan denk ik de css en html in dezelfde map, dan is href="H12_voorbeeld_7.css" voldoende.

    (code kan je tussen [code] tags [/code ] plaatsen)
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31738972
    Owkee, dat ga ik morgenochtend eens proberen allemaal (dat van dat pad vond ik zelf ook merkwaardig, maar zo doen ze dat dus in die cursus).

    Nog een laatste domme vraag voor het slapen gaan: wat is FireFox?

    Bedankt zover
    Kortom, the usual.
    pi_31742349
    quote:
    Op donderdag 27 oktober 2005 22:30 schreef Pokkehontas het volgende:
    Nog een laatste domme vraag voor het slapen gaan: wat is FireFox?
    Een browser zoals Internet Explorer dat ook is.

    www.getfirefox.com
    Tegenwoordig moet je Dr. Ir. zijn om een beetje correct Nederlands te kunnen neerpleuren.
    Abusing semicolons since 1987.
    pi_31747844
    Okee, ik heb het aangepast:

    <html>
    <head>
    <title>Zwevende elementen</title>
    <link rel="stylesheet" href="H12_voorbeeld_7.css" type="text/css">
    </head>

    <body>
    <div class="deel1">Zwevend blok nr.1</div>
    <div class="deel2">Zwevend blok nr.2</div>
    </body>
    </html>


    <style type="text/css">

    /* CSS Hoofdstuk 12 voorbeeld 7 */

    .deel1 {
    float:left;
    width: 75px;
    height: 100px;
    color:yellow;
    background:green;
    }
    .deel2 {
    margin-left: 75px;
    width: 150px;
    height: 150px;
    color:yellow;
    background:red;
    }

    </style>


    Maar nog steeds doet alleen blok twee wat ie moet doen. Net als bij de andere opdrachten en oefeningen: de eerste selector (deel1 in dit geval) slaat ie consequent over.

    @ SuperRembo: bedoelde je het plaatsen van code tussen vierkante haken, ipv tussen < deze > ?

    @rekenwonder: dank! Die ga ik eens uitproberen.
    Kortom, the usual.
    pi_31750652
    quote:
    Op vrijdag 28 oktober 2005 10:00 schreef Pokkehontas het volgende:
    @ SuperRembo: bedoelde je het plaatsen van code tussen vierkante haken, ipv tussen < deze > ?
    Nee, alleen om leesbare code hier op FOK! te maken:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10    		<html>
    <head>
    <title>Zwevende elementen</title>
    <link rel="stylesheet" href="H12_voorbeeld_7.css" type="text/css">
    </head>
    <body>
    <div class="deel1">Zwevend blok nr.1</div>
    <div class="deel2">Zwevend blok nr.2</div>
    </body>
    </html>


    Het je die <style type="text/css"> in je .css file staan? Dat moet niet.

    Maar wat wil je dat er met het eerste blok gebeurt? Het is het meest links blok, dus van float:left zal je geen effect zien.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31764375
    quote:
    Op vrijdag 28 oktober 2005 12:10 schreef SuperRembo het volgende:

    Het je die <style type="text/css"> in je .css file staan? Dat moet niet.
    Yessss! Dat was 'm dus!! Ik vermoedde al dat er iets in het cursusboek helemaal niet klopte, maar kon -als absolute beginner- de fout niet vinden. Ik heb die <style> dingen eruit gehaald en nu doet ie precies wat ie doen moet. Bedankt Rembo!
    Kortom, the usual.
    pi_31794810
    Heeft er iemand een idee hoe je de inputfields veranderd in plaatjes? Om het even duidelijker te maken:
    http://www.substruction.com/salsapassion/admin/form.html

    Die submit knop werkt al. Wat ik nu zou willen is dat mensen hun naam en wachtwoord op die plaatjes kunnen plakken. Als je die lelijke windows submitknoppen kunt veranderen in een plaatje moet dat voor input fields ook wel lukken met css. Als het niet mogelijk is met css graag dan HTML code ofzo
    pi_31794980
    Kolere wat een ranzige bende die html

    "naam en wachtwoord op die plaatjes kunnen plakken" vage omschrijving, maar ik neem aan dat je gewoon een achtergrondplaatje op het invoerveld wil zetten. Dat is ook wat je zal moeten doen: achtergrondplaatje gebruiken en de border van het invoerveld weghalen.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31802489
    quote:
    Op zaterdag 29 oktober 2005 23:02 schreef SuperRembo het volgende:
    Kolere wat een ranzige bende die html

    "naam en wachtwoord op die plaatjes kunnen plakken" vage omschrijving, maar ik neem aan dat je gewoon een achtergrondplaatje op het invoerveld wil zetten. Dat is ook wat je zal moeten doen: achtergrondplaatje gebruiken en de border van het invoerveld weghalen.
    Ja en ga jij me zeggen hoe ik dat doe? Heb al gegoogled al wat ik vond was een pagina met halve info..
    pi_31802539
    Erm, het past niet helemaal bij CSS, ik weet het, maar toch mijn vraag;

    Jaren geleden bouwde ik mijn websites allemaal door gebruik te maken van tabellen. Dit is nu grootendeels vervangen, maar ik wil weer iets met tabellen doen voor de layout. Ik word namelijk een beetje gestoord van alle verschillen tussen de browsers.

    Maar nu zit ik met het volgende probleem: Ik wil een <TD> alle overgebleven ruimte laten innemen.

    1
    2
    3
    4
    5
    6
    7    		<table>
      <tr>
        <td width="*"></td>
        <td width="700"></td>
        <td width="*"></td>
      </tr>
    </table>


    Het werkt prima, maar ik krijg toch een validatiefout

    1line 29 column 3 - Warning: <td> attribute "width" has invalid value "*"


    Is er een andere manier om dit wel te kunnen laten valideren?
    GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
    pi_31802635
    quote:
    Op zondag 30 oktober 2005 09:57 schreef Flying het volgende:

    [..]

    Ja en ga jij me zeggen hoe ik dat doe? Heb al gegoogled al wat ik vond was een pagina met halve info..
    http://www.w3schools.com/css/css_background.asp
    http://www.w3schools.com/css/css_border.asp
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31802701
    @Nevermind:

    1
    2
    3
    4
    5
    6
    7
    8    		<table>
       <colgroup>
          <col width="1*">
          <col width="700">
          <col width="1*">
       </colgroup>
       <tr>
          ...


    [/code]
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31802707
    quote:
    Op zondag 30 oktober 2005 10:02 schreef Nevermind het volgende:
    Erm, het past niet helemaal bij CSS, ik weet het, maar toch mijn vraag;

    Jaren geleden bouwde ik mijn websites allemaal door gebruik te maken van tabellen. Dit is nu grootendeels vervangen, maar ik wil weer iets met tabellen doen voor de layout. Ik word namelijk een beetje gestoord van alle verschillen tussen de browsers.

    Maar nu zit ik met het volgende probleem: Ik wil een <TD> alle overgebleven ruimte laten innemen.
    [ code verwijderd ]

    Het werkt prima, maar ik krijg toch een validatiefout
    [ code verwijderd ]

    Is er een andere manier om dit wel te kunnen laten valideren?
    Als je in html verder wilt en je wil dat hij de volledig ruimte benut moet je dit gebruik:

    1<td width="100%"></td>
    pi_31802744
    quote:
    Op zondag 30 oktober 2005 10:15 schreef SuperRembo het volgende:
    @Nevermind:
    [ code verwijderd ]

    [/code]
    Ik kende die tags helemaal niet Dankje!
    en ik leerde ook nog eens dat er geanimeerde favicons bestaan. dat heb ik nog nooit eerder gezien
    GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
    pi_31802793
    quote:
    Op zondag 30 oktober 2005 10:10 schreef SuperRembo het volgende:

    [..]

    http://www.w3schools.com/css/css_background.asp
    http://www.w3schools.com/css/css_border.asp
    Ik heb me even uitgeleefd
    1<INPUT TYPE="text" NAME="name" maxlength="30" style="background-color:transparent;background-image: url(images/button_06.gif;">


    De achtergrond is nu transparant maar toont mijn image nog niet. Doe ik wat fout? Met enkel background-image erin werkt het ook niet.
    pi_31802818
    Je mist een haakje in je url:
    1background-image: url('images/button_06.gif');
    GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
    pi_31802992
    quote:
    Op zondag 30 oktober 2005 10:22 schreef Nevermind het volgende:
    Je mist een haakje in je url:
    [ code verwijderd ]
    pi_31810869
    Hallo,

    ik heb een vraag aan de slimme mensen hier Op mijn website, www.gewoongertjan.nl, wil ik rechtsbovenaan reclame hebben. Deze wil ik tegen de rand van het blauwe vlak aan en tegen de top van dit gedeelte (in de header dus). De reclame moet niet verdrukt worden door de tekst (wat ik dus dacht te doen met z-index: 1;)
    Het lukt me gewoon niet. Met position: absolute; kan ik hem precies plaatsen, maar bij verkleinen of vergroten van mijn browser loopt het dan weer in de soep.

    Iemand advies?

    Stylesheet: http://www.gewoongertjan.nl/wp-content/themes/blix/layout.css --> helemaal onderaan.

    Grtz,

    ALTF4
    En toen was het verhaaltje uit...
    pi_31866099
    Ik hoor niets, heeft niemand een idee?
    Inmiddels heb ik de reclame maar even linksbovenaan gezet, dat lukte wel...
    En toen was het verhaaltje uit...
    pi_31892132
    In Opera en Firefox werkt het horizontale menu prima, maar in Internet Explorer niet... waar ligt dit aan?
    GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
    pi_31894852
    Dat ligt aan het verschil in het box model tussen FireFox en Internet Explorer.
    In FF wordt de border wel bij de breedte gerekend, in IE wordt de border niet bij de breedte gerekend. Daardoor worden de listitems te breed.

    Vreemd dat je een wel een list gebruikt voor het menu, maar dat je verder taballen gebruikt voor de layout.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31898847
    Daar heb je helemaal gelijk in Ik heb het wederom eens compleet in css geprobeerd, maar ik word ontzettend moe van de onderlinge verschillen tussen browsers. Vooral als het in de grote drie browsers bij elke er compleet anders uit ziet. Dan ga ik toch liever voor de makkelijke manier die het wel prima doet in elke browser. Ik weet dat je ontzettend veel ervaring hebt met css, maar ik denk dat je je ook wel kunt voorstellen hoe de beginnende of gemiddelde (daar reken ik mezelf onder ) 'webdesigner' er wel moeite mee kan hebben.

    Maar ik zal me even verdiepen in het box model hack, wederom bedankt
    GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
    pi_31904402
    Je kan je verdiepen in allerlei hacks om alles op de pixel precies gelijk te krijgen.

    Je kan ook je layout zo aanpassen dat het niet uit maakt als iets een pixeltje meer of minder breed is.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_31910505
    quote:
    Op vrijdag 23 september 2005 15:51 schreef Onnib het volgende:
    Zo zijn er nog wel wat dingen die niet werken in FF en wel in IE:

  • Horizontale balk is een 1px grijze streep in IE maar in FF niet

    • Probeer dit eens, werkt zowel in FF als in IE

    1hr {color: #3064a0; background-color: #3064a0; height: 1px; border: 0; } 
    pi_32087056
    HELP!!
    Ik zit met een select - Z-index probleem.

    Ik weet dat je een Iframe moet maken onder de Div om ervoor te zorgen dat de select objecten er niet voor komen.
    Nu zit ik met het probleem dat alle oplossingen die op internet te vinden zijn allemaal met UL->LI werken of met vage javascript inhoud.

    Ik ben op zoek naar een javascript dat op een moment dat ik op de layer klik (deze wordt dan namelijk vergroot) een iframe eronder getekent wordt.
    pi_32092840
    Bedoel je dit? http://superrembo.com/dhtml/coverdropdown.html
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_32157587
    Waarschijnlijk een bekend probleem, alleen niets kunnen vinden. Ook oplossingen jatten van andere websites is me niet gelukt

    Ik heb een simpele tabel voor o.a. een forum (let niet op de kleuren, just for testing). In IE ziet het er goed uit, maar o.a. met FireFox krijgen de rijen maarliefst 48 pixels hoogte (in IE zo'n 18). Hoe fix ik dit?

    Nog een probleempje: iemand die in IE en FF kijkt, ziet het waarschijnlijk al. De lichtblauwe achtergrond doet het wel in IE, maar niet in FF. Iemand een idee?overflow: visible; ==> auto

    [ Bericht 3% gewijzigd door Stephan4kant op 10-11-2005 20:10:22 (Tweede probleem al opgelost :P) ]
    "We hebben nooit domme dingen gedaan van onze uitkering, en waren nooit te beroerd om er wat bij te verdienen" (F. Jacobse)
    pi_32159560
    In IE en FF (1.5) zijn de rijen 20px hoog.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      vrijdag 11 november 2005 @ 01:26:33 #86
    32768 DionysuZ
    Respect my authority!
    pi_32167873
    ik ben bezig met een klein administratiepaneeltje voor op een site. Heel simpel, links menu, rechts de inhoud. Dit heb ik gedaan door 2 divjes te specificeren, 1 voor het menu en 1 voor de contents. Dit is de CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14    		  * { margin: 0; padding: 0; }
      body, html { height: 100%; }
      #menu {
        position: relative;
        width: 158px;
        _height: 100%;
        min-height: 100%;
        float: left;
      }
      #contents {
        margin: 20px 20px 20px 20px;
        _height: 100%;
        min-height: 100%;
      }

    en op een of andere manier rendert hij hem NIET goed. De body ziet er ongeveer als volgt uit:
    1
    2
    3
    4
    5
    6
    7    		<body>
      <div id="menu">
        ...
      </div>
      <div id="contents">
      </div>
    </body>


    Wat hij fout doet zijn de margins van #contents. Als ik die weglaat dan rendert hij hem goed. Menu links, contents rechts. Echter wil ik de contents ook een stukje van de rand van het menu afhebben en een stukje van boven/onder en rechterkant. Als ik dan een margin instel, ziet het er goed uit in IE, maar niet in FF, dan voegt hij ruimte tussen bovenkant pagina en bovenkant menu/contents ter hoogte van de margin en voegt hij geen ruimte tussen menu en contents.

    Iemand die weet waar ik de fout inga?
    □ 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
    pi_32189994
    quote:
    Op vrijdag 11 november 2005 01:26 schreef DionysuZ het volgende:Wat hij fout doet zijn de margins van #contents. Als ik die weglaat dan rendert hij hem goed. Menu links, contents rechts. Echter wil ik de contents ook een stukje van de rand van het menu afhebben en een stukje van boven/onder en rechterkant. Als ik dan een margin instel, ziet het er goed uit in IE, maar niet in FF, dan voegt hij ruimte tussen bovenkant pagina en bovenkant menu/contents ter hoogte van de margin en voegt hij geen ruimte tussen menu en contents.

    Iemand die weet waar ik de fout inga?
    Een eerste stap is begrijpen wat een float is. Een float 'zweeft' boven de pagina. Niet-zwevende blokelementen (zoals je div#contents) zullen gewoon op de pagina worden geplaatst alsof de float er niet is. Beschouw de float als een luchtballon die erboven hangt.

    Met andere woorden: als je op je div#contents een linkermarge van 20px definieert, betekent dat 20px van de linkerkant van het scherm. Als je 20px vanaf de rechterrand van je menu wilt hebben, zul je margin-left: 178px moeten gebruiken. Of een heel andere opzet, waarmee je bijvoorbeeld de inhoud ook float:left meegeeft, dan zal een marge wel werken. Of absolute positionering gebruiken. Al heeft dat ook weer allerlei nadelen.

    Let er verder op dat als je height: 100% gebruikt op een element dat ook nog marge of padding heeft, het totale element hoger wordt dan het scherm en er dus schuifbalken ontstaan. Zie enige uitleg over het box-model.
    pi_32190818
    De makkelijkste oplossing is om er een extra divje in te zetten waar je de padding op zet. Dan heb je geen last van de verschillen in IE en FF.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
      zaterdag 12 november 2005 @ 14:58:51 #89
    32768 DionysuZ
    Respect my authority!
    pi_32205115
    hartstikke bedankt! ik heb de contents div laten floaten en er een extra div ingezet en nu werkt het goed
    □ 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
    pi_32457088
    *kick*

    Ik heb een div met een transparantie van 50% maar nu wil ik de tekst die daarin zit gewoon 100% hebben.

    Ik heb het nu zo, schematisch.
    1
    2
    3    		<div style="opacity: 50%; background-color: #FFF;">
    <div style="color: #000; ">De tekst
    </div>


    Maar nu neemt de tekst die 50% opacity van die andere div over, en dat wil ik niet. Hoe los ik dat op?
    Die andere div een opacity van 100% geven helpt niet. Ook z-indexes halen niks uit.

    -edit-
    In IE is het me inmiddels gelukt met position: relative; geven aan de tekst, maar nog geen succes in FF.

    [ Bericht 5% gewijzigd door DutchBlood op 21-11-2005 17:53:07 ]
    pi_32461204
    Je kan zoiets doen:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19    		#wrapper {
       position: relative;
    }

    #wrapper .background {
       position: absolute;
       opacity: 0.5;
       filter: alpha(opacity=50);
       background-color: #f00;
       width: 400px;
       height: 300px;
    }

    #wrapper .content {
       position: absolute;
       width: 400px;
       height: 300px;
       color: #000;
    }

    1
    2
    3
    4
    5
    6
    7
    8    		<div id="wrapper">
       <div class="background"></div>
       <div class="content">
          <p>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse est turpis, aliquet a, auctor vel, bibendum elementum, urna. In ut lorem. Cras pretium lacinia urna. Etiam porttitor iaculis leo. Nam placerat, dolor congue accumsan condimentum, urna felis convallis odio, in convallis erat sapien at est. Maecenas risus nibh, rutrum interdum, pulvinar et, interdum eu, erat. Mauris sagittis, risus ac tristique facilisis, quam enim viverra pede, molestie tincidunt justo lectus a sapien. Cras porttitor. Mauris dapibus tincidunt risus. Maecenas in nisi id lorem ornare varius.
          </p>
       </div>
    </div>


    Het wordt alleen lastig als de grootte van de inhoud af moet hangen.
    Wil iedereen die in telekinese gelooft nu mijn hand op steken?
    | Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
    pi_32462721
    Had ik nog een vraagje.
    Ik heb twee div's naast elkaar, de ene is 125px breed, en de andere moet de ruimte opvullen die overblijft van de andere div. Hoe doe ik dat?
      maandag 21 november 2005 @ 21:04:13 #93
    104583 cyberstalker
    Een krachtig neen!
    pi_32462808
    quote:
    Op maandag 21 november 2005 21:01 schreef DutchBlood het volgende:
    Had ik nog een vraagje.
    Ik heb twee div's naast elkaar, de ene is 125px breed, en de andere moet de ruimte opvullen die overblijft van de andere div. Hoe doe ik dat?
    De div van 125px floaten.
    Hope for the best, prepare for the worst.
    pi_32463104
    quote:
    Op maandag 21 november 2005 21:04 schreef cyberstalker het volgende:

    [..]

    De div van 125px floaten.
    Ja, maar de overige div kan ik dan nog geen 100% width geven, dan zet ie 'm eronder.
      maandag 21 november 2005 @ 21:18:03 #95
    104583 cyberstalker
    Een krachtig neen!
    pi_32463186
    quote:
    Op maandag 21 november 2005 21:14 schreef DutchBlood het volgende:

    [..]

    Ja, maar de overige div kan ik dan nog geen 100% width geven, dan zet ie 'm eronder.
    Hoeft toch niet. Een <div> is een block-element, die vullen standaard alles op.
    Hope for the best, prepare for the worst.
    pi_32572869
    Mensen ik zit nu met het volgende kleine probleempje (hoop ik)

    Ik draai zelf al tijden Windows Commander en ben er helemaal weg van dat ik nu ook een Windows Commander online wil oftewel webbased nu zou je zeggen? waarom? er zijn toch al zoveel? yep maar niet door mij gemaakt, en het is voor mij weer een leuke leerweg... maar goed

    Nu heb ik mezelf dit keer goed aan het werk gezet en niemand een vraag of whatever gevraagd, alles zelf opgezocht en veel geexpirmenteerd maar kom nu niet uit het volgende.

    De volgende layout (http://www.bruggema.nl/mmenu.html) ziet er op zich aardig uit in IE maar als ik FF open mis ik opeens randen, etc etc etc... ik heb alles gemeten en het zou dus moeten willen... alles op basis van vaste maten... behalve de laatste buttons maar die hebben daar niets mee te maken!

    Zou iemand me hier mee kunnen helpen, en het zal goed kunnen dat ik ook een doctype moet toevoegen maar helaas heb ik daar nog niet echt de kennis van excuus daarvoor.

    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
      vrijdag 25 november 2005 @ 19:10:06 #97
    32768 DionysuZ
    Respect my authority!
    pi_32575300
    Het verschil ligt em erin dat de ene browser de randen meetelt bij de grootte, en de andere browser de randen nog erbij neemt.

    De ene browser zal bij een box van 200px breed met een rand van 1px een box maken van 200px mét rand. De andere maakt er een box van 202px mét rand van.
    □ 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
    pi_32578139
    ow dat is lekker maar hoe kunnen we dat oplossen? ik weet dat IE (width + border == lengte) ze er bij telt en dus nu ook dat FF ze bij de lengte voegt, maar hoe lossen we dat op, weer van die vieze hacks?
    The people who lost my respect will never get a capital letter for their name again.
    Like trump...
    pi_32578970
    Argh Ik kom niet uit het volgende kleine probleem. Ik ben geen n00b, maar 2 pixels drijven mij tot wanhoop In een <td> wil ik een plaatje zetten, deze verticaal helemaal naar beneden uitlijnen maar ondanks dat staan er nog blijven er nog 2 pixels onder over.
    - cellspacing en -padding van de tabel en de cel staan op 0
    - valign naar bottom en baseline helpen niet genoeg
    - marges op 0 helpt niet
    - vspace rond plaatje op 0 biedt geen soelaas
    - border van plaatje = 0



    M'n ingekorte 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    		BODY
    {   font-family: Verdana, Arial, Helvetica, sans-serif; 
       font-size: 10px;
        color: #FFFFFF;
       margin-top: 60px;
       margin-bottom: 0px;
    }

    Table.main
    {   border: 0px;
       padding: 0px;
       width: 800px;
       background-color:#F8E600;
    }

    TD, TH
    {   font-family: Verdana, Arial, Helvetica, sans-serif; 
       font-size: 10px;
        color: #FFFFFF;
       vertical-align:top
    }

    tr.scheiding_header_concent /* blauwe balk bovenin */
    {   background-color: #181747;
       height: 30px;
       padding: 0px;
       border: 0px;
    }

    td.tabbladen
    {   text-align: right;
       padding-right: 20px;
       padding-bottom: 0px;
       margin: 0px;
       border-bottom: solid 0px #FFFFFF;
       vertical-align: bottom;
       border: 0px;   
    }


    M'n verkorte HTML:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17    		(header)
    <body>
    <table width="800" border="0" cellspacing="0" cellpadding="0" class="main" align="center">
      <tr>
        <td width="150" height="40"> </td>
        <td width="150" height="40" class="tabbladen">
          <img src="images/actief_links.gif" alt="" border="0">
          <a href="index.php"><b>Home</b></a>
          <img src="images/actief_rechts.gif" border="0" alt="">
       </td>
      </tr>
      <tr class="scheiding_header_concent">
        <td colspan="2"> </td>
      </tr>
    </table>
    </body>
    </html>


    Weet iemand raad?
    pi_32580337
    quote:
    Op vrijdag 25 november 2005 20:38 schreef Chandler het volgende:
    ow dat is lekker maar hoe kunnen we dat oplossen? ik weet dat IE (width + border == lengte) ze er bij telt en dus nu ook dat FF ze bij de lengte voegt, maar hoe lossen we dat op, weer van die vieze hacks?
    http://www.quirksmode.org/css/box.html
      vrijdag 25 november 2005 @ 22:15:15 #101
    26353 FlowDesign
    OMG IT SPINS!
    pi_32580970
    Misschien dat een van jullie het misschien weet:

    Ik heb zeg maar onderstaande indeling van een webpagina opgebouwd met CSS.
    De lichtblauwe achtergrond is een DIV (layer) met vaste plek (margin: 0 auto) zodat deze in het midden wordt uitgelijnd.
    De andere zijn ook DIV's (met vaste plek).
    Alleen het menu is "Floating: left".
    De height staat niet vast, de margins en de paddings wel.
    Echter wat er nu gebeurd is dat wanneer er te weinig tekst in het menu of in de content layer staan, de footer te hoog op de pagina komt waardoor de achtergrond weer te zien is.
    Ik vraag mij dus af: Is het mogelijk om te zorgen dat de footer altijd dusdanig ver onderaan de pagina komt te staan zodat de achtergrond niet meer te zien is.

    Age of fruity enlightenment!
    actieve topics nieuwe topics
    abonnement Unibet Coolblue Bitvavo
    [CSS] voor dummies - Deel 3
    Index

    » digital corner

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