IK heb een site gemaakt die naar meerdere sub-tites verwijst. Bij voldoende verwijzigingen wordt het groen (dat is wat ik wil). Als er te weinig zijn blijft het wit. Is er een oplossing voor?

Plaatje:



Code:


html {
	height: 100%;
}

body {
	margin: 0;
	height: 100%;
}

#container {
	height: 100%;
}

#sidebar {
	background-image: url(backgroundgreen.png);
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: 18%;
	overflow: auto;
}

#content {
	background-image: url(backgroundgreen.png);
	display: inline-block;
	vertical-align: top;
	height: 100%;
	width: 82%;
	overflow: auto;
}

ul
{
    list-style: none;
    width: 100%;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
    height: 100%;
}
    
li a
{
    text-decoration: none;
    color: white;
    background-color: #1ebb90;
    font-size: 18px;
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid black;
}
.active
{
    background-color: blue;
}
li a: :hover
{
    background-color: yellow;
}


[size=xsmall]Toevoeging op 07/09/2022 18:25:59:[/size]

https://ibb.co/RSTg3K0
Heb je een link om dit te testen?
De PHP-code kan je hierin achterwege laten. Die is hier niet van toepassing op.
Dit is gek:
[quote="Ed Jeurissen op 08/09/2022 18:17:23"]

            <body>
            <body>


en dit ook (geen sluit-tags voor body en html):
[quote="Ed Jeurissen op 08/09/2022 18:17:23"]

            <div id="main-content" style="height: 1800px"></div><br><br>


Ik zou dit:

ul
{
    list-style: none;
    width: 100%;
    background-color: #f1f1f1;
    margin: 0;
    padding: 0;
    height: 100%;
}
    
li a
{
    text-decoration: none;
    color: white;
    background-color: #1ebb90;
    font-size: 18px;
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid black;
}


veranderen in dit:


ul
{
    list-style: none;
    width: 100%;
    background-color: #1ebb90;
    margin: 0;
    padding: 0;
    height: 100%;
}
    
li a
{
    text-decoration: none;
    color: white;
    background-color: #1ebb90;
    font-size: 18px;
    display: block;
    padding: 10px 20px;
    border-bottom: 1px solid black;
}
Een idee is om in de browser de developer tools open te trekken (met de F12 toets in de meeste browsers), en het element te selecteren dat verkeerd op het scherm wordt getekend. Dan kan je bij de CSS eigenschappen zien hoe dat komt, en je kan de eigenschappen live veranderen en meteen zien of wat je doet resultaat heeft.

Reageren