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] achtergrnd niet zwart, en prob met vertic. align.

Anoniem
None
19 antwoorden
  • Site: http://www.htb.firehosting.nl/anw/site/index.html

    Prob1: Achtergrond krijg ik niet zwart. 'k Heb het wel gedefineerd in CSS, maar nog niet goed :(, Het lukt wel als ik in de <body> tag doe, maarja, das geen CSS.[code:1:f7f1b93410]body
    {
    margin: 0px;
    background-color: #000000;
    background: url(dna.jpg) no-repeat center fixed;
    }[/code:1:f7f1b93410]

    Prob2
    Krijg de titel niet verticaal gecentreerd. Heb geen hoogte ingesteld, als padding 10px. Dan moet de titel toch verticaal gecentreerd staan?[code:1:f7f1b93410]#titel_pagina
    {
    border: 3px solid #393;
    margin: 20px 20px 20px 20px;
    border: 5px solid #505050;
    padding: 10px;
    background: #CFCFCF;
    voice-family: "\"}\"";
    voice-family:inherit;
    }[/code:1:f7f1b93410]

    Vraagie, waar is de 'voice family' voor? 'k Heb de code van http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html, niet zelf gemaakt dus.
    alvast bedankt

    ps. Voor het gemak css ff in html bestand gedrukt ipv apart .css bestand :D
  • Je definieert niet alle properties in de background. Daar moet ook nog aan het begin color worden gedefinieerd:
    http://www.handleidinghtml.nl/css/eigenschappen/background/beschrijving.html
    [code:1:72baa2725a]
    <!– einde details –>
    [/code:1:72baa2725a]
    Dit soort dingen mag je eigenlijk niet in een css-sheet zetten.
    Gebruik liever dit: /* */

    Ik weet niet precies wat je niet verticaal gecentreerd vind aan je titel. Ik vind hem er aardig verticaal gecentreerd uitzien.

    Dit soort dingen:
    [code:1:72baa2725a]
    voice-family: "\"}\"";
    voice-family:inherit;
    }
    [/code:1:72baa2725a]
    wordt geloof ik een box model hack genoemd. Ik zou het zelf persoonlijk niet gebruiken, veel te lelijk. Er zijn makkelijkere manieren om het box model verschil van ie op te lossen.

    Geen idee waar voice-family voor dient. Moet je ergens op de w3c site voor css gaan kijken, als je het wil weten.
  • [quote:a1c5c2b0c7]Dit soort dingen mag je eigenlijk niet in een css-sheet zetten. [/quote:a1c5c2b0c7]Sterker nog, je moet ze eruit laten. Per CSS specificaite (iig 2.1) hoort dat gewoon geparst te worden als een selector. Dus:[code:1:a1c5c2b0c7]<!– main –>
    html{
    font:1em sans-serif;
    }[/code:1:a1c5c2b0c7]Dan hoort de browser '<!– main –> html' te selecteren en die een 'sans-serif' font te geven. Die selector matched uiteraard niks.
  • Alvast bedankt, zal vanmiddag ff aanpassen.
    Dat commentaar tussen <!– –> niet mocht, wist ik niet. Maar het is voor school (zoals jullie al gezien hadden) en het moet makkelijk aan te passen zijn. Vandaar heb ik commentaar er tussen gedrukt, zodat men weet wat waarvoor dient. Dus commentaar is noodzakelijk. Dat commentaar zou dan tussen /* */ moeten?
  • Ja, zo werkt commentaar in CSS nu eenmaal, het is geen SGML of XML :-?
  • [quote:76cdcaf7c5="termin8or"]Ja, zo werkt commentaar in CSS nu eenmaal, het is geen SGML of XML :-?[/quote:76cdcaf7c5]'k Kan niet alles weten. Maar ook verticale uitlijnig is gelukt. Het probleem zat hem in de titel. De titel was een <h1> en die heeft standaard een 'margin-bottom' van 10 ofzo. Nooit aan gedacht. Staat nu op 0, en werkt nu goed.
    Ook achtergrond ff goed gemaakt.
  • H1 heeft ook een margin-top, margin-left en margin-bottom. En in sommige browsers padding. Het beste is om al deze te definieren:[code:1:a7ca796e8c]h1{
    margin:0;
    padding:.2em;
    }[/code:1:a7ca796e8c]Dit geldt natuurlijk niet alleen voor het H1 element, elk element heeft een aantal standaard 'dimensies', het beste is om het voor elk element ook in te stellen.
  • [quote:6d13924bb9="termin8or"]H1 heeft ook een margin-top, margin-left en margin-bottom. En in sommige browsers padding. Het beste is om al deze te definieren:[code:1:6d13924bb9]h1{
    margin:0;
    padding:.2em;
    }[/code:1:6d13924bb9]Dit geldt natuurlijk niet alleen voor het H1 element, elk element heeft een aantal standaard 'dimensies', het beste is om het voor elk element ook in te stellen.[/quote:6d13924bb9]Nu valt me het op dat jij em's gebruikt. Wat is het verschil dan tussen em en px?
    en nog iets
    je hebt daar staan 'margin: 0;' zonder iets wat het is. Het kan nu px of em of % zijn. Tenminste, de CSS validator van W3C merkt het wel op.
  • Ik maak maar geen nieuw topic, maar zet m'n vraag hier wel ff in; heb nu een half transparante achtergrond (png) in het linkmenuutje gedaan. Dit zie je wel goed in Opera, maar niet in IE. Kan ik hieruit concluderen dat IE geen 'alpha channel transparancy' ondersteund?
  • Ja dat kun je concluderen. Een mogelijke fix: http://annevankesteren.nl/archives/2003/07/png-in-ie

    margin:0; is 100% correct. Want kun jij mij het verschil vertellen tussen '0ex', '0px' en '0%' om maar is wat eenheden te noemen?

    'em' is gebaseerd op de hoogte van het 'font'. Preciese definitie ken ik niet, staat in de CSS spec ;-). Ik gebruik die zodat als de gebruiker z'n font-size verandert de margins ook mee veranderen etc.
  • [quote:291b6dd1c7="Johnny321"]Kan ik hieruit concluderen dat IE geen 'alpha channel transparancy' ondersteund?[/quote:291b6dd1c7]Yep. :([quote:291b6dd1c7="Johnny321"]Wat is het verschil dan tussen em en px?[/quote:291b6dd1c7][i:291b6dd1c7]px[/i:291b6dd1c7] is het aantal pixels, en dus een absolute afmeting. [i:291b6dd1c7]em[/i:291b6dd1c7] is de breedte van de hoofdletter M van het huidige lettertype bij de huidige grootte, en is daarmee relatief. Op deze manier kan een marge meeschalen met de fontkeuze en -grootte.[quote:291b6dd1c7="Johnny321"]je hebt daar staan 'margin: 0;' zonder iets wat het is. Het kan nu px of em of % zijn.[/quote:291b6dd1c7]Of het 0px, 0em of 0% is maakt feitelijk niets uit, de afmeting blijft hetzelfde. Daarom is doorgaans de ongeschreven regel dat de eenheid er niet bij wordt vermeld. Dit geeft ook extra leesbaarheid en alle bytes helpen. ;)

    [b:291b6dd1c7]Edit:[/b:291b6dd1c7] Damn you, termin8or! :D

    - Bas
  • [quote:7ef396e3a7="termin8or"]Ja dat kun je concluderen. Een mogelijke fix: http://annevankesteren.nl/archives/2003/07/png-in-ie

    margin:0; is 100% correct. Want kun jij mij het verschil vertellen tussen '0ex', '0px' en '0%' om maar is wat eenheden te noemen?[/quote:7ef396e3a7]bij de waarde 0 hoeft dus niet altijd een eenheid te staan, als ik het goed begrijp.
    [quote:7ef396e3a7="termin8or"]
    'em' is gebaseerd op de hoogte van het 'font'. Preciese definitie ken ik niet, staat in de CSS spec ;-). Ik gebruik die zodat als de gebruiker z'n font-size verandert de margins ook mee veranderen etc.[/quote:7ef396e3a7]Over nagedacht dus :D, kzal wel ff in de CSS spec. kijken.
  • Bas, dat van 'em' en 'M' klopt niet -> http://www.alistapart.com/discuss/elastic/#c6155
  • ha, bas en termin8or, allebei bedankt, we kruisen elkaars wegen zie ik :lol:
  • termin8or, wat is volgens jou het verschil tussen [i:2f41ab11e1]em[/i:2f41ab11e1] en [i:2f41ab11e1]ex[/i:2f41ab11e1]? Het gaat wel degelijk om de breedte van het element, niet om de hoogte. Overigens werd ik niet echt wijzer van de definitie die jij me gaf.

    [b:2f41ab11e1]Edit:[/b:2f41ab11e1] Check, gevonden: http://www.w3.org/TR/CSS1#length-units

    - Bas
  • http://www.w3.org/TR/CSS21/syndata.html#length-units[quote:7426efea0a][list:7426efea0a][*:7426efea0a]em: the 'font-size' of the relevant font[*:7426efea0a]ex: the 'x-height' of the relevant font[/list:u:7426efea0a][/quote:7426efea0a]Dus als je het lettertype op een bepaald element op 12px gezet hebt en je geeft hem vervolgens een 1.5em padding-left is dat gelijk aan 1.5*12px = 18px. Op die manier kun je wel 'px' gebruiken voor fonts (wat overigens geen absolute eenheid is) en het geheel wel schaalbaar houden (maar dan niet in IE).
  • Weten we direct wat het verschil tussen em/px is :lol:
    maar nu nog een vraagje, de oplossing die termin8tor gaf omtrent dat alpha channel transparancy werkt wel bij losse plaatjes, maar niet bij achtergronden :( , weet iemand toevallig hoe dat toe te passen op een achtergrond?

    De fix had betrekking op het 'img' attribuut, maar het wordt niet gebruikt bij een achtergrond :(

    zie ook de site: http://www.htb.firehosting.nl/anw/site/index.html
  • http://www.alistapart.com/articles/pngopacity/
  • Abbonoment op 'a list apart'? :lol:
    hartstikke bedankt

Beantwoord deze vraag

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