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)

Probleem met height, uiteindelijk topic

Ik ben het met je eens dat je soms beide nodig hebt voor een goed resultaat, maar met name z-index is in bijna alle gevallen overbodig. In het topic '[url=http://forum.computertotaal.nl/phpBB2/viewtopic.php?t=156509]Klein CSS probleem IE/FF mbt top-margin[/url]' was ook een voorbeeld van overbodig z-indexgebruik. (Helaas is het voorbeeld niet meer te bereiken.) Ik heb geen idee of ik het goed uitleg, ik leer ook gewoon door veel internerartikelen te lezen en zelf veel te proberen, maar zoals ik het zie: mensen die vaak met z-index werken, zetten vaak bijna elk element in een nieuwe laag, terwijl de site net zo goed te maken door alles in één laag te houden en gebruik te maken van de natuurlijke eigenschappen van deze elementen. Omdat je gebruik maakt van de natuurlijke eigenschappen, is het gedrag beter voorspelbaar, of in ieder geval beter gedocumenteerd, omdat dit de meest gebruikelijke werkwijze is. Werken met de natuurlijke flow van een document is dus niet alleen aan te raden vanuit het oogpunt van het voorkomen van rare problemen, het voordeel is ook dat je sneller een oplossing of hulp kunt vinden. Nogmaals, voor nagenoeg elke layout zijn voorbeelden voorhanden, dat hoef je zelf niet meer uit te vinden. Door het bekijken van deze voorbeelden kun je leren hoe je CSS inzet om je site vorm te geven. Ook op die manier zul je waarschijnlijk bemerken dat z-index nagenoeg nooit nodig is.

boelieboelie
5 antwoorden
  • Hoi,

    Na dit hele forum onderzocht te hebben en alle suggesties geprobeerd te hebben en op google gezocht, post ik uiteindelijk een topic hier. Hopelijk krijg ik hierop een goed antwoord.
    De css onderdelen staan hieronder

    [code:1:02272f8148]
    /* CSS Document */

    a:link {color:#6DC0AE;}
    a:visited {color:#CC0000;}
    a:hover {color: #6DC0AE;}


    html, body
    {
    height: 100%;
    background: #FFFFFF;
    color: #000000;
    behavior:url("csshover.htc");
    }

    body
    {
    margin: 0;
    padding: 0;
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 500;
    }

    #wrap
    {
    position: relative;
    height: auto;
    width: 100%;
    }

    #header
    {
    position: absolute;
    top: 0;
    left: 0;
    height: 11em;
    width: 100%;
    overflow: hidden;
    background: #FFFFFF;
    z-index: 3;
    }

    #search span
    {
    font-size: 14px;
    }

    #nav
    {
    margin: 0;
    padding: 0;
    position: relative;
    display:block;
    float: right;
    width: 20%;
    background-color: #C7E6E0;
    z-index: 8;
    height: 100%;
    min-height: 100%;
    }

    #nav a
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #248C73;
    text-decoration: none;
    display: block;
    }

    #nav a:hover
    {
    color: #003300;
    background-image: url(../knoppen/triangle.gif);
    background-repeat: no-repeat;
    background-position: right;
    }

    #subnav a
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 200;
    display: block;
    width: 13em;
    padding: .2em .1em;
    }

    #nav ul
    {
    text-align: left;
    list-style-type: none;
    padding-top: 0px;
    margin-top: 0px;
    padding-left: 15px;
    margin-left: 15px;
    padding: .2em .1em;
    }

    #nav ul ul
    {
    position: absolute; left: -146%; top: -0.2%;
    }

    #nav li
    {
    position: relative;
    padding: .2em;
    }

    div#nav ul ul
    {
    display: none;
    z-index: 10;
    background-color: #C7E6E0;
    border-style: groove;
    border-width: thin;
    }

    div#nav ul li:hover ul
    {
    display: block;
    }

    /* content styles */

    .big
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight:bold;
    color: #6DC0AE;
    }

    .xbig
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #6DC0AE;
    }

    .style3
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    }

    #content
    {
    padding-top: 11em;
    padding-bottom: 11em;
    }

    #nav
    {
    padding-top: 10em;
    }

    #content
    {
    position: relative;
    float: left;
    width: 75%;
    margin-left: 4px;
    margin-right: 0px;
    padding-left:4px;
    padding-right: 0px;
    }
    [/code:1:02272f8148]

    Dit proleem is vaker voorgelegd. Ik wil de navigatie-balk ten allen tijden van boven tot onder hebben. Het kan wel door in #nav height op 1000% te zetten, maar dat is niet de weg. Kan iemand me helpen?

    M.vr.gr., Dalertje
  • Had je nix aan het topic 'Tabel schermvullend maken...'?
  • Hoi,

    Die topic had ik niet gezien (omdat deze over tabellen gaat), maar ik heb de topic nu wel bekeken en deze techniek toegepast op mijn navigatie-lijst, maar…….helaas niets.

    M.vr.gr, Dalertje
  • Voor degene die dit topic leest, is het natuurlijk een raadsel of je het wel [i:88660b09a3]goed[/i:88660b09a3] hebt toegepast… :roll: (Wat heb je precies gedaan?)

    Los daarvan zou ik die hele layout opnieuw maken, want zoals je nu bezig bent, gaat het sowieso fout. Het zit vol met position:relative en z-indexen en da's niet bevorderlijk voor een goede werking. Da's waarschijnlijk ook de reden dat de oplossing uit het andere topic voor jou niet werkt. In het voorbeeld die bij de oplossing is geleverd, werkt het namelijk prima.

    Er zijn talloze goede voorbeelden hoe je een layout voor elkaar kunt krijgen als je op Google zoekt naar 'CSS layouts', je hoeft echt niet het wiel opnieuw uit te vinden. Over elk CSS-probleem is wel een artikel geschreven met een mogelijke oplossing. Probeer je layout eens op te maken op een manier die bekend is en pas dan pas eerder gegeven oplossing toe.
  • Hoi,

    Oke Boelieboelie, dank je voor je antwoord. Ik zal in deze verder moeten gaan denken. Maar wat is er eigenlijk mis een relatieve positionering en z-indexen? Soms heb je deze twee nodig om tot het voor jou juiste resultaat te komen…..in dit geval. In ieder geval neem ik jouw kennis ter harte.

    M.vr.gr., Dalertje

Beantwoord deze vraag

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