www.css-voorbeelden.nl

Rechts moet natuurlijk ook kunnen scrollen. De kleur is gelijk aan links. Het geheel moet natuurlijk met php werken!. Ik had het ook zo in het begin maar als je meerdere pagina's krijgt wordt dat heel lastig

Het werkt nu de met de volgende code:

html {
height: 100%;
}

body {
margin: 0;
height: 100%;
background-color: rgb(0, 66, 39, 255);
}

#container {
height: 100%;
display: flex;
}

#sidebar {
/* background-image: url(backgroundgreen.png); */
background-color: rgb(0, 66, 39, 255);

/* display: inline-block; */
/* vertical-align: top; */
height: 100%;
width: 20%;
overflow: auto;
}

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

ul {
list-style: none;
/* width: 100%; */
/* background-color: #1ebb90; */
margin: 0;
padding: 0;
/* height: 100%; */
background-color: rgb(0, 66, 39, 255);
}

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 { */
li a:hover {
background-color: rgb(247, 166, 0, 255);
}

Ik krijg nu ook de kleurtjes die ik wilde!!!

Een ander probleem is userhome.php. Met de volgende CSS:

body {
background-image: url(background.png);
font-family: 'Arial', sans-serif;
max-width: 1600px;
margin: 0 auto;
padding: 20px;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ebb90;
}
li
{
float: left;
}
li a, .dropdown-btn
{
display: inline-block;
color: #fff;
text-align: center;
padding: 18px 22px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropdown-btn
{
background-color: #f5f5f5;
color: #1ebb90;
}
li.dropdown
{
display: inline-block;
}
.dropdown-menu
{
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 300px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
}
.dropdown-menu a
{
color: grey;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover
{
background-color: #1ebb90;
color: #fff;
}
.dropdown:hover .dropdown-menu
{
display: block;
}

Dit gaat goed tot een lijst langer wordt. Dan kan ik alleen met het toetsenbord de lijst van bijvoorbeeld Overige alleen tot Boekhouden Geboekstaafd Opgaven komen. DE rest moet ik met het toetsenbord doen. Is hier een oplossing voor?

Eerst even 'n reactie over dat het nu werkt: mooi.
Alles wat tussen /* en */ staat kun je weghalen, want dat doet helemaal niets.

De belangrijkste wijziging is dat display: flex; bij #container. Daarmee verander je #container in een zogenaamde 'flex container'. De directe kinderen van #container veranderen in 'flex items'. Die directe kinderen zijn bij jou div#sidebar en div#content. Alles wat daar weer in zit, gedraagt zich weer normaal, alleen die twee directe kinderen zijn flex items.
flexbox (de verzamelnaam) is speciaal gemaakt voor dit soort lay-outs. Je kunt er nog veel en veel meer meer regelen, maar dit lijkt voor jou dus te werken.

Overigens ga ik ervan uit dat dit iets voor school is of zo en wordt bekeken op een laptop. Als het ook op een smartphone moet werken, gaat het een stuk ingewikkelder worden.
Tot zover de reactie op je eerste bericht.
---------------------------------------
Nu het tweede bericht.
Daar staat css die bij userhome.php hoort, maar die css lijkt niet op de eerdere css. En ik heb wel 'n userhome.php gekregen, maar die is dan mogelijk ook heel anders.
Kun je userhome.php ook hier neerzetten, of zippen, of zo?

Ik heb met m'n neus gekeken. Die css past wel bij de userhome.php die ik al had.
Ik heb dit even veranderd in userhome.html, en de css die jij hier hebt neergezet staat even in userhome.html, want dat werkt makkelijker. Dit kan zo weer worden terug veranderd.
Ik begrijp niet helemaal wat je bedoelt. Bij de lijst onder Overig kan ik gewoon naar beneden scrollen, tot de laatste ingang van de lijst.

Ik heb het even op https://www.css-voorbeelden.nl/test/userhome.html neergezet.
Als het bij jou nu wel werkt, dan is het in orde. Er zaten 'n paar fouten in de html en het zou kunnen dat die de oorzaak waren.
Als dat zo is, zal ik de verbeteringen even hier opschrijven.

Hoi, Wat ik zoek is iets dat je met de muis alleen naar beneden kunt bij bijv muziek. Daar heb ik nog geen oplossing voor!

Maar dat kan bij mij dus door scrollen met het scrollwieltje op de muis. Als je bedoelt dat het zonder scrollwieltje moet kunnen: dat wordt ingewikkeld. Dan moet je met JavaScript gaan detecteren of de muis als (bijna) onderaan is en dan de pagina gaan verplaatsen, of zoiets.
Als je bedoelt dat er aan de bovenkant een witte rand is, en dat je de hele pagina iets omlaag kunt scrollen: dat is heel simpel op te lossen. Als je in die test-pagina op https://www.css-voorbeelden.nl/test/userhome.html bij body padding: 20px; weghaalt, is dat weg.
Die padding wordt bij de hoogte van 100% opgeteld, dus dan wordt body meer dan 100% van het scherm hoog.
Je kunt ook bij body toevoegen: border-box: box-sizing; Dan kan de padding blijven staan, want dan wordt de padding bínnen die 100% geplaatst.