Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

CSS-vraagje

Basman
11 antwoorden
  • Hallo allemaal,

    Ik ben sinds kort bezig met CSS en onderdelen van een website om te zetten naar CSS. Ik dácht dat ik het aardig onder de knie had, maar ik krijg iets niet voor elkaar, iets wat ik met een table binnen 'n minuut kant-en-klaar voor me heb staan. Toch denk ik dat dit met CSS moet lukken, maar echt, het lukt me helemaal niet. De table die ik heb en die naar een CSS-achtig iets zou moeten, ziet er als volgt uit:

    ——————————
    |breedte 1020x80px |
    —————————–
    |220px | breedte 800px |
    |x | x |
    |220px | 220px |
    —————————–
    |breedte 1020x80px |
    —————————–

    Bovenstaande zal er wel niet uitzien, dus:

    - een (rode) balk van 1020x80px
    - 1 x wit blik van 220x220 en daar meteen aan vast idem van 800x220px
    - weer een (rode) balk van 1020x80px

    Dit geheel zou ook nog gecentreerd op het echerm moeten komen.

    CSS een béétje kennende inmiddels, zou dit redelijk eenvoudig moeten zijn, maar nogmaals, ik krijg het NIET voor elkaar.

    Op diverse CSS-websites heb je dit soort tweekoloms voorbeelden, maar geen enkele is precies hetgeen ik wil en met mijn beperkte CSS-kennis lukt het me niet om deze om te zetten naar iets wat ik graag wil.

    Wie kan mij (op weg) helpen?
  • Wat heb je zelf al geprobeerd? Hoe heb je dat gedaan (online voorbeeld of codevoorbeeld)? Welke voorbeelden heb je bekeken?

    En wat betekent:

    |x | x |
    |220px | 220px |

    Want dat staat niet in het verhaaltje eronder. Daarnaast ben ik benieuwd of je horizontaal of verticaal gecentreerd bedoelt.
  • [quote:c9148d0d87="boelieboelie"]Wat heb je zelf al geprobeerd? Hoe heb je dat gedaan (online voorbeeld of codevoorbeeld)? Welke voorbeelden heb je bekeken?[/quote:c9148d0d87]

    Tja… als ik daar aan moet beginnen, kom ik hier ruimte tekort; ik ben overal geweest; van Eric Meyers websites tot aan de CSS site van Dynamic Drive en van Mandarin Design tot aan Positioning Is Everything, dus ik heb ze écht allemaal gehad.


    [quote:c9148d0d87]En wat betekent:

    |x | x |
    |220px | 220px |
    Want dat staat niet in het verhaaltje eronder.[/quote:c9148d0d87]

    Jawel… Zoals ik al heb gezegd: dat tekeningetje zal er wel niet uitzien, dus daarom had ik het ook in tekst staan… twee witte ruimtes van 220x220px en 800x220px, naast elkaar, en twee rode balken van 1020x80px erboven en eronder. Je moet nu op die tekening afgaan, die is mislukt en daarom in tekstformaat voor de duidelijkheid…

    [quote:c9148d0d87]
    Daarnaast ben ik benieuwd of je horizontaal of verticaal gecentreerd bedoelt.[/quote:c9148d0d87]
    Sorry: horizontaal, bedoelde ik… :oops:
  • Je moet beginnen met een container div. Die zet je op align=center; en geef je een width=1020px;
    Vervolgens maak je een header div, die je de op align=top; zet en de gewenste eigenschappen (hoogte, breedte, border, enz. geeft). Zo ga je steeds door.

    Die divs laat je terugkomen in de pagina's waar je in werkt. De containerdiv laat je bovenaan de body beginnen en onderaan sluiten, net zoals je ook bij tables deed.

    Zie ook http://www.w3schools.com/css/default.asp
  • [quote:420c90e0d2="Ger"]Je moet beginnen met een container div. Die zet je op align=center; en geef je een width=1020px;
    Vervolgens maak je een header div, die je de op align=top; zet en de gewenste eigenschappen (hoogte, breedte, border, enz. geeft). Zo ga je steeds door.

    Die divs laat je terugkomen in de pagina's waar je in werkt. De containerdiv laat je bovenaan de body beginnen en onderaan sluiten, net zoals je ook bij tables deed.

    Zie ook http://www.w3schools.com/css/default.asp[/quote:420c90e0d2]

    Ger, dat klinkt allemaal erg eenvoudig en zo heb ik het ook al geprobeerd, maar het werkt gewoon niet… Hieronder mijn laatste poging:


    [code:1:420c90e0d2]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>test nummer zoveel</TITLE>
    <STYLE TYPE="text/css">
    #header-container { align=center;width=1020px; }
    #header-top { align=top; width=1020px; height=80px; background-color:#FF0000; }
    #header-left { align=left; width=220px; height=220px; background-color:#FFFFFF; }
    #header-right { align=right; width=800px; height=220px; background-color:#FFFFFF; }
    #header-bottom { align=bottom; width=1020px; height=80px; background-color:#FF0000; }
    </STYLE>
    </HEAD>

    <BODY>
    <DIV id="header-container">
    <DIV id="header-top">toplijn 1020x80px</DIV>
    <DIV id="header-left">linkerdeel 220x220px</DIV>
    <DIV id="header-right">rechterdeel 800x220px</DIV>
    <DIV id="header-bottom">bottomlijn 1020x80px</DIV>
    <!– End DIV Header Container –>
    </DIV>
    </BODY>
    </HTML>
    [/code:1:420c90e0d2]

    Ten eerste wordt de container NIET gecentreerd en ten tweede is het grote probleem dat ik blijf hebben, dat de linkerbox van 220x220 en de rechterbox van 800x220px, die daar NAAST moet verschijnen, ONDER elkaar verschijnen. In de linkerbox moet (uiteindelijk) iets komen, plaatje of zo, en in de rechterbox moet (uiteindelijk) tekst komen. Probeer maar uit met die code, het werkt niet en volgens mij zit de code logisch in elkaar, of ik moet ergens helemaal de mist ingaan…
  • Om te centreren moet je de marges op auto zetten en de body width op 100%. Is een fout die ik in het verleden al eerder heb gemaakt, excusé. :)
    De plaatsing van een div's is standaard onder elkaar, zo geef je dat ook aan in je code. Wil je dat anders, dan moet je met floats gaan werken.
    Je CSS moet iets worden als:
    [code:1:3a92b15c7b]
    #body { width=100%}
    #header-container { margin-left: auto; margin-right: auto; width: 1020px; align=center; }
    #header-top { align=top; width=1020px; height=80px; background-color:#FF0000; }
    #header-left { align=left; float: left; width=220px; height=220px; background-color:#FFFFFF; }
    #header-right { align=right; float: right; width=800px; height=220px; background-color:#FFFFFF; }
    #header-bottom { align=bottom; width=1020px; height=80px; background-color:#FF0000; }
    [/code:1:3a92b15c7b] Als je bij de verschillende elementen de tekst niet wil centreren maar bijvoorbeeld gewoon links uitlijnen moet je dat hierboven ook aangeven. Nu zal alles gecentreerd staan omdat je dat bij de container aangeeft.


    De kracht van CSS komt vooral naar voren als je er een extern bestand van maakt en die include in al je bestanden. Dan kan je eenvoudig wijzigingen aanbrengen in de totale opmaak als door alleen dat ene bestand te wijzigen. Sla je CSS dus op als template.css (of whatthehell.css ;) ) en zet in je html bestanden het volgende in de head:

    [code:1:3a92b15c7b]
    <link rel="stylesheet" type="text/css"
    href="template.css" />
    </head>[/code:1:3a92b15c7b]

    In je html bestanden hoef je nu in principe niets meer aan opmaak mee te geven, tenzij het afwijkt van wat je in je CSS hebt ingevoerd (de uitzonderingen dus). Het wordt dus gewoon:

    [code:1:3a92b15c7b]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>test nummer zoveel</title>
    <link rel="stylesheet" type="text/css"
    href="template.css" />
    </head>

    <body>
    <div id="container">
    <div id="header-top">bladibladibla</div>
    <div id="header-left"> bladibladibla</div>
    Enz.
    </body>
    </html>[/code:1:3a92b15c7b]
  • Wil je een tweekolomslayout met header en footer maken? Dan vind je op 456 Berea Street een mooie uitleg.

    Wat Ger zegt, maakt het m.i. alleen maar verwarrend, want er kloppen namelijk diverse dingen niet.
    - Ten eerste, als je met CSS wilt werken, is het belangrijk dat je een correct doctype gebruikt en dus niet het doctype dat in dit topic wordt gebruikt (lees ook waarom een correct doctype nuttig is).
    - Ten tweede is 'align=top' of 'align=left' helemaal geen CSS; dat werd gebruikt in HTML. Wel bestaat bijv. 'text-align: left'.
    - Ten derde heeft een body altijd al een width van 100%; dat hoef je dus niet nog eens aan te geven.
    - Ten vierde wordt een /> afsluiting alleen in XHTML gebruikt, niet in HTML.

    Centeren wordt gedaan door een 'margin: 0 auto' op de container (die je een vaste breedte hebt gegeven). IE snapt daar helaas nix van (zoals het wel meer niet snapt van CSS), dus zet je ook 'text-align: center' op de body, waardoor alles gecentreerd wordt. Helaas wordt dan ook de inhoud van de container gecentreerd, waardoor je weer 'text-align: left' op de container moet doen.
    www.simplebits.com/notebook/2004/09/08/centering.html

    Overigens vind ik een breedte van 1020px nogal erg breed, zelfs voor de meest gebruikte schermresolutie van 1024x768 (dan is een max. breedte van 990px aan te raden, denk aan scrollbars). Het ligt een beetje aan je doelgroep, maar over het algemeen surft 10 à 15% nog op 800x600.
  • Ger, Boelieboelie,


    Allereerst bedankt voor jullie deskundige commentaar. Ik ben een heel eind op weg nu; tot nu toe heb ik dit:

    [code:1:004be530db]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>test nummer zoveel</TITLE>
    <STYLE TYPE="text/css">
    #body { text-align: center; }
    #header-container { margin: 0 auto; width: 1020px; }
    #header-top { width: 1020px; height: 80px; background-color:#FF0000; }
    #header-left { float: left; width: 220px; height: 220px; background-color:#FFFFFF; }
    #header-right { float: right; width: 800px; height: 220px; background-color:#FFFFFF; text-align: center; }
    #header-bottom { width: 1020px; height: 80px; background-color:#FF0000; clear: both;}
    </STYLE>
    </HEAD>

    <BODY>
    <DIV id="header-container">
    <DIV id="header-top">toplijn 1020x80px</DIV>
    <DIV id="header-left">linkerdeel 220x220px</DIV>
    <DIV id="header-right">rechterdeel 800x220px</DIV>
    <DIV id="header-bottom">bottomlijn 1020x80px</DIV>
    <!– End DIV Header Container –>
    </DIV>
    </BODY>
    </HTML>[/code:1:004be530db]


    De volgende losse opmerkingen:

    > Dit werkt nog steeds niet in IE (7); die centreert de gehele container niet; in Firefox (2.03) staat het nu goed.
    > Firefox had een clear: both nodig in de header-bottom want anders wordt de footer precies tussen de header-left en de header-right gezet.
    > De inhoud van elke box mag gecentreerd zijn, het moet zelfs… ;-) Vandaar de text-align: center; in de header-right
    > Het voorbeeld in Berea St. was één van de eerste die ik tegenkwam een tijd geleden, maar voor hun voorbeeld is een redelijke hoeveelheid code nodig, of zie ik dat verkeerd?
    > Mijn ervaring is overigens, dat IE het in de meeste gevallen juist erg goed 'ziet' met CSS, maar dat Firefox juist veel dingen niet begrijpt. Ik weet dat op veel CSS websites daar anders over wordt gedacht en wordt IE vaak door de mangel gehaald, maar mijn ervaringen zijn juist béter met IE dan mer FF.
    > Ger: ik weet dat je CSS in een extern bestand kunt zetten, dat gaat ook gebeuren, ik had het alleen hier even als inline CSS gedaan voor de duidelijkheid, anders had ik een CSS-bestand separaat moeten meesturen.
    > Boelie: zodra dit verhaal in IE ook nog eens gecentreerd wordt, ga ik me zeker inlezen in het DOCTYPE-verhaal, want van alle kanten hoor je inderdaad dat dat nogal eens onderschat wordt; bedankt voor de links.
    > Ik heb in HTML nooit anders gedaan dan elke tag met een /> af te sluiten; waarom zou het kwaad kunnen? Ik heb er nooit problemen mee gehad.
    > Er stonden nogal wat syntax-fouten in mijn CSS; height=80px en dergelijke moest natuurlijk height: 80px zijn…

    Kortom: met bovenstaande code staat-ie nu goed in FF, maar nog niet gecentreerd in IE; wat zie ik hier over het hoofd?
  • In de links die in gaf, in het kort dat je niet met CSS bezig kunt zijn zonder eerst een goed doctype te kiezen. Nog korter gezegd: gebruik een HTML 4.01 Strict doctype. Dat je verschillen tussen browsers ziet, komt namelijk [i:bfa946cdf9]juist[/i:bfa946cdf9] door jouw foutieve doctype.

    Het is geen [i:bfa946cdf9]mening[/i:bfa946cdf9] dat IE het fout doet, dat is een [i:bfa946cdf9]feit[/i:bfa946cdf9]. Niet alleen Firefox-fanboys klagen over IE, de IE-developers zelf geven aan dat hun producten grote verbeteringen op CSS-gebied kunnen gebruiken. Voorbeeld uit het officiële IE-blog:
    [quote:bfa946cdf9]our intent is to build a platform that fully complies with the appropriate web standards, in particular CSS 2 ( 2.1, once it’s been Recommended). I think we will make a lot of progress against that in IE7 through our goal of removing the worst painful bugs that make our platform difficult to use for web developers.[/quote:bfa946cdf9]
    Over /> : dat er door het gebruik van /> nix fout gaat, wil niet zeggen dat het goed is…

    Volgens mij is het voorbeeld van 456 Berea Street één van de beste voorbeelden (ik heb er nogal wat gezien de afgelopen jaren). Ik kan je nog wel andere voorbeelden geven (bijv. met negative margins), maar die zijn ingewikkelder en bevatten niet minder code. Volgens mij valt het wel mee met de [i:bfa946cdf9]code[/i:bfa946cdf9]. Het is wel wat [i:bfa946cdf9]tekst[/i:bfa946cdf9], maar het lijkt me wel zo handig om te begrijpen wat je doet.
  • [quote:c1a4a85692="boelieboelie"]Centeren wordt gedaan door een 'margin: 0 auto' op de container (die je een vaste breedte hebt gegeven). IE snapt daar helaas nix van (zoals het wel meer niet snapt van CSS), dus zet je ook 'text-align: center' op de body, waardoor alles gecentreerd wordt. Helaas wordt dan ook de inhoud van de container gecentreerd, waardoor je weer 'text-align: left' op de container moet doen.
    www.simplebits.com/notebook/2004/09/08/centering.html[/quote:c1a4a85692]
    Dit is onzin. Ik werk altijd met auto margins om divs te centreren, en dat werkt sowieso vanaf IE6, misschien zelfs nog wel eerder. Máárrrrr…. Het werkt alleen mits je een goede doctype (en zónder bijvoorbeeld <?xml … ?> ervoor) meegeeft, dan gaat IE namelijk in standards mode en werkt het als een zonnetje. Overigens werkt IE in het algemeen veel fijner in standards mode als je goed CSS wil gebruiken.

    Verder heeft boelieboelie natuurlijk in alles gelijk wat ze hierboven zegt, dus luister ernaar, je kan er alleen maar van leren. ;)
    [quote:c1a4a85692="boelieboelie"]Overigens vind ik een breedte van 1020px nogal erg breed, zelfs voor de meest gebruikte schermresolutie van 1024x768 (dan is een max. breedte van 990px aan te raden, denk aan scrollbars). Het ligt een beetje aan je doelgroep, maar over het algemeen surft 10 à 15% nog op 800x600.[/quote:c1a4a85692]
    Helemaal mee eens. De meeste van mijn vrienden en ik gebruiken nog regelmatig 1024x768, denk ook aan bijvoorbeeld overheidsinstanties, bibliotheken en universiteiten waar veel mensen gebruik van maken maar vaak niet het nieuwste van het nieuwste staat. Voor 800x600 ontwerpen is iets wat je voor jezelf moet beslissen, maar voor 1024x768 ontwerpen is zeker een vereiste tenzij je een hele specifieke doelgroep hebt die van de standaard afwijkt.

    - Bas
  • [quote:5a320c4f8d="BasHamar"]Dit is onzin.[/quote:5a320c4f8d]Het klopt in zoverre niet dat ik de nuancering niet heb gemeld: centreren zoals het hoort, lukt niet in IE wanneer je geen of onvolledig doctype hebt, of in lager dan IE6. Dus wat Bas zegt. (Ik zat nog te dubben of ik conditional comments moest melden, maar dat kan beginners op verkeerde ideeën brengen.) Maar dat doctypeverhaal, daar had ik dus al naar gelinkt; meteen een praktisch voorbeeld waar een doctype nuttig voor is. :wink:

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.