CSS en PHP

Jeurissen13081969 · Bericht door **Jeurissen13081969** » vr 17 mei 2024, 14:02

Mijn CSS:

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: 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%;
}

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;
}

En mijn HTML

<?php
session_start();

if (isset($_SESSION['username'])) {

?>

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="../../sidebar3.css">
<link rel="icon" href="../../../../../favicon.ico" type="image/x-icon" />
<title>Fontys NBH</title>
</head>

<body>

<?php
include_once 'connection.php';
?>

<div id="container">
<div id="sidebar">

<ul>
<li><a href="../../userhome.php">Home</a></li>
<?php
require_once "connectionul.php";
$sql = "SELECT* FROM Fontys_NBH;";
$result = mysqli_query($con, $sql);
$resultCheck = mysqli_num_rows($result);

if ($resultCheck > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<li><a href=$row[bestandshoofdstuk]>$row[titel]</a></li>.<br>";
}
}
?>

</ul>
<div id="sidebar-content" style="height: 50px"></div>
</div>
<div id="content">
<br>
<!DOCTYPE html>
<html>

<body>
<a href="index.php"></a>
<?php

require_once "connection.php";

$query = "SELECT * FROM Fontys_NBH_NBH3_PRK

ORDER BY id ASC";

$resultaat = mysqli_query($conn, $query);
//print_r ($resultaat);

if (mysqli_num_rows($resultaat) > 0) {
while ($images = mysqli_fetch_assoc($resultaat)) {
//print_r ($images);

?>

<div class="alb">
<img src="images/<?php echo $images['image']; ?>">
<?php echo $images['title']; ?>
</div>

<?php }
}
?>
</body>
<html>

<br>

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

<?php
} else {
echo "<script>location.href='inlog.php'</script>";
}
?><br>

Eert stond het netjes naast elkaar. Nu Verspringt het. Dus Rechter gedeelte moet naast het linker gedeelte staan!

Jeurissen13081969 · Bericht door **Jeurissen13081969** » vr 17 mei 2024, 14:04

2024-05-17 14_03_07-Fontys NBH - Vivaldi.png: (126.9 KiB) Nog niet gedownload

Bericht door **Goeroeboeroe** » vr 17 mei 2024, 18:26

Hallo,
Mooi dat het inloggen nu wel is gelukt. Ga straks of zo even kijken of het nu eindelijk definitief opgelost kan worden.

Eigenlijk is dit forum bedoeld voor problemen e.d. met de voorbeelden hier, maar dat maakt verder niet zoveel uit. Het kan alleen even duren voor je 'n reactie krijgt, omdat het hier daardoor uitermate stil is.

Ik kan er zo niet naar kijken. Althans: ik kan er natuurlijk wel naar kijken, maar kan er zo niets mee.
Wat het PHP-deel betreft: als het echt om functies en zo gaat, daar ben ik niet in thuis. Maar vermoedelijk gaat het om een probleem met css, en dat zou moeten lukken.

Ik kan echter niet zoveel met de code die jij hier hebt neergezet, want er zitten serieuze fouten in de html. Zolang er fouten in de structuur e.d. zijn, heeft het niet zoveel nut naar posities e.d. te kijken, want die worden vaak veroorzaakt door dat soort fouten. Als je heel veel geluk hebt, is je probleem gelijk opgelost als die fouten eruit zijn.

De fouten in de html:

Je begint met:
<!DOCTYPE html>
<html> (eigenljk moet hier nog een taal achter, iets als <html lang="nl"> voor Nederlands)
<head>
...
(Eigenlijk noet in de <head> ook nog de gebruikte karakter-codering. Dat is vrijwel altijd <meta charset="utf-8">)
...
</head>
<body>
... hele hoop html e.d. ...

Tot zover is het goed. Maar dan staan er plotsklaps nóg een doctype, <html> en <body>:

<div id="content">
<br>
<!DOCTYPE html>
<html>
<body>
<a href="index.php"></a>

Er is al een doctype. De openingstag van <html> is ook al gebruikt, en die van <body> ook. Elke welopgevoede browser krijgt hier acuut de hik van. Elk document mag maar één docytype, één <html> en één <body> hebben.

Vrijwel onderaan staat een </body>. Dat is correct om de openings-<body> af te sluiten, alleen zijn er dus twee openingstags <body>.

Gelijk daaronder staat <html>. Dat is ook een fout, want de afsluitende tag voor de eerste <html>-openingstag hoort </html> te zijn.

Ten slotte staan er onder die onderste <html> nog een <br>, een <div> en een <br>. Na de afsluitende </html> mag geen andere html meer staan. En ik weet eerlijk gezegd niet, of je na </html> nog php mag invoegen. In principe zet de server php om in html, dus dan zou er hier nog een script worden ingevoegd na de html. Dat mag niet.
En ik ben niet erg thuis in php, maar er staat onderaan alleen } else { ...}, zonder iets daarvoor. Mist daar niet wat?

Goed, als je geluk hebt, is het daarmee opgelost.

Als dat niet zo is, zou je dan een link naar een site kunnen geven, waar het staat?
Als dat niet kan, kun je dan - na de verbeteringen aangebracht te hebben - een exacte kopie van de html en de css hier neerzetten?
En als er met php ook dingen als een <div> of een <p> of zo worden ingevoegd, of als in die php ook css zit, dan kan het nodig zijn die php ook hier neer te zetten. Vandaar liever, als dan kan, een link naar 'n plaats waar het staat, want dat is veel makkelijker.

Jeurissen13081969 · Bericht door **Jeurissen13081969** » za 18 mei 2024, 11:14

Hoi, De oplossing die je aandraagt werkt helaas niet. Heb jij een webserver die gratis is waar ik een en ander op kan zetten?
Het gekke is bij andere pagina's werkt het wel. Ik gebruik Vivaldi, maar dat mag niks uitmaken.

Bericht door **Goeroeboeroe** » za 18 mei 2024, 13:38

Dat is jammer.
Vivaldi is op Google Chrome gebaseerd, dus dat maakt niets uit. Er zijn nog wel eens verschillen bij kleinere dingetjes omdat de een wat achterloopt bij de ander, maar dit is iets 'groots', en dan speelt dat vermoedelijk niet.

Ik heb geen eigen server, mijn site staat bij een hoster. En daar geef ik absoluut de toegangscodes niet van, want als je die hebt, kun je de site volledig overnemen. Niets persoonlijks, maar je zult begrijpen waarom ik dat niet doe.

Er zijn testomgevingen waar je gratis code kunt neerzetten en uitproberen en aan anderen laten zien. Maar dat gaat ook niet werken, want blokkeren allemaal <?php include, omdat je daar anders de meest vreselijke dingen mee kunt doen.
Je kunt online wel php testen, maar daar kun je - om dezelfde reden - weer geen html en css testen.

Je kunt zelf een server installeren om lokaal (alleen in je eigen computer) php, html, css, ... te testen, maar dat is 'n heel gedoe. Ik heb dat zelf ook niet, omdat ik - als ik al php gebruik - dat gewoon online test.

Wat je zou kunnen proberen:
1) Zet de gecorrigeerde html en css op het forum. Dan kan ik de <?!includes> even eruit halen. Als het probleem dan nog speelt, ligt het niet aan de php en kan ik het waarschijnlijk/hopelijk zo vinden.
2) Zet alle bestanden (inclusief de php) in een zip of zo en stuur het naar mij of zet het als bijlage in het forum. Wat de php-bestanden betreft gaat het om de namen die eindigen op .php, binnen zo'n < ?include> (Misschien weet je van alles al, maar ik weet niet hoeveel of hoe weinig je weet.)
Dan kan ik het zelf op 'n plekje op de server zetten en kijken wat er mis is. Dan geef ik je even het adres en kun je zelf nog altijd de code van de html en css bekijken, maar niet de php, want die wordt door de server vertaald naar html e.d.

Waar het eigenlijk om gaat: ik wil het op een of andere manier in mijn testomgeving krijgen. En daar zijn de bestanden voor nodig.

Jeurissen13081969 · Bericht door **Jeurissen13081969** » vr 24 mei 2024, 17:36

Hallo, ik heb de bestanden gezipt. De plaatjes ontbreken. De zip wordt anders te groot. Dat zou ook niks uit mogen maken. Kun je hier iets mee?

Jeurissen13081969 · Bericht door **Jeurissen13081969** » vr 24 mei 2024, 17:38

Ik gebruik Usbwebserver. Dat werkt voor mij het makkelijkst

Bericht door **Goeroeboeroe** » vr 24 mei 2024, 19:22

Ah, usbwebserver. Dat is voor Windows. Ik werk met Linux, maar dat maakt verder niets uit.
Ik weet nog niet zeker of ik hier iets mee kan, omdat het niet helemaal nette code is. De link naar de css in userhome.php linkt naar style.css, dat moet - denk ik - sidebar3.css zijn.

Maar goed, ik ga het in ieder geval even proberen. Ik weet alleen niet of ik daar vandaag nog tijd voor heb. Anders wordt het mogelijk pas maandag.

Jeurissen13081969 · Bericht door **Jeurissen13081969** » vr 24 mei 2024, 19:41

Zo Zou Het er uit moeten zien!

Bericht door **Goeroeboeroe** » vr 24 mei 2024, 20:11

Hoi,
Ik heb toch vast even heel snel gekeken.
Er zit in ieder geval een aantal fouten in de html. Welke dat precies zijn, dat red ik vandaag mogelijk niet meer.

Maar ik weet eigenlijk ook niet goed, wat de bedoeling is. Die laatste afbeelding is heel duidelijk. Maar dat lijkt één pagina. En ik heb van jou twee pagina's gekregen.
Links op de afbeelding op de groene achtergrond staat daar 'Home', 'Geo-Visualisatie', enz. Maar dat zit niet in die twee php-bestanden van jou.
Rechts staat op de witte achtergrond 'Inhoudsopgave' en nog 'n hele reeks ingangen. Maar die zitten ook niet in die bestanden.

userhome.php is duidelijk, daar kan ik de fouten uithalen (maar dat zie er dus heel anders uit dan op de afbeelding).

Overig_NLP_Vogels.php is een ander verhaal. Daar staat bovenin html e.d., dat is nog wel duidelijk voor me. Maar dan staat er later nog 'ns een <!doctype, <html>, enz., met daarin ook een link.
Dan staat er </body> en </html>, maar daaronder staat ook nog html.

Alleen: het zijn dus hoe dan ook twee pagina's. Die kun je nooit naast elkaar zetten. Je kunt er wel één pagina van maken en dan in een linkerkolom de inhoud van userhome en in de rechterkolom de inhoud van Overig_NLP_Vogels zetten, naast elkaar.

Maar die Overig_NLP_Vogels is zo niet bruikbaar voor mij, omdat ik niets zie wat zelfs maar lijkt op de afbeelding.

Jeurissen13081969 · Bericht door **Jeurissen13081969** » za 25 mei 2024, 13:17

Links op de afbeelding op de groene achtergrond staat daar 'Home', 'Geo-Visualisatie', enz. Maar dat zit niet in die twee php-bestanden van jou.
Rechts staat op de witte achtergrond 'Inhoudsopgave' en nog 'n hele reeks ingangen. Maar die zitten ook niet in die bestanden

Dat staat ook in PHP. Iedere bladzijde heeft een andere "Inhoudsopgave". De gegevens hiervan trekt ie uit PHP. Daar worden aparte tabellen voor gemaakt om die gegevens boven tafel te krijgen.

Alleen: het zijn dus hoe dan ook twee pagina's. Die kun je nooit naast elkaar zetten. Je kunt er wel één pagina van maken en dan in een linkerkolom de inhoud van userhome en in de rechterkolom de inhoud van Overig_NLP_Vogels zetten, naast elkaar.

Dat is ook wat ik wil. Het zijn 2 pagina's naast elkaar. Met de linker navigeer je en in de rechter (daar staan plaatjes en blz-nummers). Die worden ook door php naar boven gehaald.

Jeurissen13081969 · Bericht door **Jeurissen13081969** » za 25 mei 2024, 13:27

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="../../sidebar3.css">
<link rel="icon" href="../../../../../favicon.ico" type="image/x-icon" />
<title>Overig Nationale Postcodeloterij Boeken</title>
</head>

<body>

<div id="container">
<div id="sidebar">

<ul>
<li><a href="../../userhome.php">Home</a></li>

<li><a href=Overig_NPL_Vlinders.php>Nationale Postcodeloterij Vlinders</a></li>.<br><li><a href=Overig_NPL_Veldgids_Vlinders.php>Nationale Postcodeloterij Veldgids Vlinders</a></li>.<br><li><a href=Overig_NPL_Bomen.php>Nationale Postcodeloterij Bomen en struiken</a></li>.<br><li><a href=Overig_NPL_Vogels.php>Nationale Postcodeloterij Vogels</a></li>.<br>

</ul>
<div id="sidebar-content" style="height: 50px"></div>
</div>
<div id="content">
<br>
<!DOCTYPE html>
<html>

<body>
<a href="index.php"></a>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0000.png">
Blz 0
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0001.png">
Blz 1
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0002.png">
Blz 2
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0003.png">
Blz 3
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0004.png">
Blz 4
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0005.png">
Blz 5
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0006.png">
Blz 6
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0007.png">
Blz 7
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0008.png">
Blz 8
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0009.png">
Blz 9
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0010.png">
Blz 10
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0011.png">
Blz 11
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0012.png">
Blz 12
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0013.png">
Blz 13
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0014.png">
Blz 14
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0015.png">
Blz 15
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0016.png">
Blz 16
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0017.png">
Blz 17
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0018.png">
Blz 18
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0019.png">
Blz 19
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0020.png">
Blz 20
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0021.png">
Blz 21
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0022.png">
Blz 22
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0023.png">
Blz 23
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0024.png">
Blz 24
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0025.png">
Blz 25
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0026.png">
Blz 26
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0027.png">
Blz 27
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0028.png">
Blz 28
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0029.png">
Blz 29
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0030.png">
Blz 30
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0031.png">
Blz 31
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0032.png">
Blz 32
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0033.png">
Blz 33
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0034.png">
Blz 34
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0035.png">
Blz 35
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0036.png">
Blz 36
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0037.png">
Blz 37
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0038.png">
Blz 38
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0039.png">
Blz 39
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0040.png">
Blz 40
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0041.png">
Blz 41
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0042.png">
Blz 42
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0043.png">
Blz 43
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0044.png">
Blz 44
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0045.png">
Blz 45
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0046.png">
Blz 46
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0047.png">
Blz 47
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0048.png">
Blz 48
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0049.png">
Blz 49
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0050.png">
Blz 50
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0051.png">
Blz 51
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0052.png">
Blz 52
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0053.png">
Blz 53
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0054.png">
Blz 54
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0055.png">
Blz 55
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0056.png">
Blz 56
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0057.png">
Blz 57
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0058.png">
Blz 58
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0059.png">
Blz 59
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0060.png">
Blz 60
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0061.png">
Blz 61
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0062.png">
Blz 62
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0063.png">
Blz 63
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0064.png">
Blz 64
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0065.png">
Blz 65
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0066.png">
Blz 66
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0067.png">
Blz 67
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0068.png">
Blz 68
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0069.png">
Blz 69
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0070.png">
Blz 70
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0071.png">
Blz 71
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0072.png">
Blz 72
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0073.png">
Blz 73
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0074.png">
Blz 74
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0075.png">
Blz 75
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0076.png">
Blz 76
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0077.png">
Blz 77
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0078.png">
Blz 78
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0079.png">
Blz 79
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0080.png">
Blz 80
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0081.png">
Blz 81
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0082.png">
Blz 82
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0083.png">
Blz 83
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0084.png">
Blz 84
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0085.png">
Blz 85
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0086.png">
Blz 86
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0087.png">
Blz 87
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0088.png">
Blz 88
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0089.png">
Blz 89
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0090.png">
Blz 90
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0091.png">
Blz 91
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0092.png">
Blz 92
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0093.png">
Blz 93
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0094.png">
Blz 94
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0095.png">
Blz 95
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0096.png">
Blz 96
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0097.png">
Blz 97
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0098.png">
Blz 98
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0099.png">
Blz 99
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0100.png">
Blz 100
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0101.png">
Blz 101
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0102.png">
Blz 102
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0103.png">
Blz 103
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0104.png">
Blz 104
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0105.png">
Blz 105
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0106.png">
Blz 106
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0107.png">
Blz 107
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0108.png">
Blz 108
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0109.png">
Blz 109
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0110.png">
Blz 110
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0111.png">
Blz 111
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0112.png">
Blz 112
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0113.png">
Blz 113
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0114.png">
Blz 114
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0115.png">
Blz 115
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0116.png">
Blz 116
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0117.png">
Blz 117
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0118.png">
Blz 118
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0119.png">
Blz 119
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0120.png">
Blz 120
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0121.png">
Blz 121
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0122.png">
Blz 122
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0123.png">
Blz 123
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0124.png">
Blz 124
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0125.png">
Blz 125
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0126.png">
Blz 126
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0127.png">
Blz 127
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0128.png">
Blz 128
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0129.png">
Blz 129
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0130.png">
Blz 130
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0131.png">
Blz 131
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0132.png">
Blz 132
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0133.png">
Blz 133
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0134.png">
Blz 134
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0135.png">
Blz 135
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0136.png">
Blz 136
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0137.png">
Blz 137
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0138.png">
Blz 138
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0139.png">
Blz 139
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0140.png">
Blz 140
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0141.png">
Blz 141
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0142.png">
Blz 142
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0143.png">
Blz 143
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0144.png">
Blz 144
</div>

<div class="alb">
<img src="images/Overig_NPL_Vogels_blz0145.png">
Blz 145
</div>

</body>
<html>

<br>

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

<br>

De php paginabron

Bericht door **Goeroeboeroe** » za 25 mei 2024, 21:08

Ja, hier kan ik wat mee! Mogelijk lukt het vanavond nog, anders wordt het waarschijnlijk maandag.

Jeurissen13081969 · Bericht door **Jeurissen13081969** » za 25 mei 2024, 21:57

Thanks alvast!

Bericht door **Goeroeboeroe** » za 25 mei 2024, 22:57

Is dit ongeveer wat je bedoelde? De marges en zo kunnen natuurlijk nog worden aangepast.
Voordat ik ga beschrijven wat ik heb gedaan, is het handig even te weten dat dit de bedoeling is.
Het staat zolang even op https://www.css-voorbeelden.nl/test/

Het grote witte vlak onderaan is de <div id="main-content" style="height: 1800px;"></div>, die is gewoon nog leeg. Maar die staat dus onder het groene vlak links en de kolom met 'Blz' rechts.

Ik heb de code even sterk ingekort, omdat dat makkelijker werkt.

Los van de aanpassing, zaten er fouten in de code. Als je dat wilt, kan ik daar ook even 'n lijstje van geven.
Ik weet niet of je dat weet, maar in Vivaldi kun je de code bekijken met Control+U (schrik dan niet van alles wat even is weggehaald

)
Met F12 open je het ontwikkelgereedschap. Daarin kun je html en/of css tijdelijk aanpassen, om te zien wat daarvan het effect is.
Als Control+U en F12 niet werken (ik zit op Linux, jij op Windows), dan kun je ook rechtsklikken op de pagina en kiezen voor Ontwikkelaarsgereedschap.

Als het anders moet, dan graag zo precies mogelijk wát er anders moet.

Jeurissen13081969 · Bericht door **Jeurissen13081969** » ma 27 mei 2024, 18:23

De blz moeten rechts staan. Daar komen dan de plaatjes te staan. Die trek ik uit de database. Dat geldt ook voor de linkerkant. Dat komt ook uit PHP.
Immers als ik veel pagina's maak moet ik dat bij ieder blz gedaan. Dat deed ik in het begin, maar bleek veel te omslachtig cq. te veel werk.

Jeurissen13081969 · Bericht door **Jeurissen13081969** » ma 27 mei 2024, 18:33

Ik heb toch het idee dat het in de CSS zit!

Bericht door **Goeroeboeroe** » ma 27 mei 2024, 20:06

Ik weet wel zeker dat het in de css zit.
Het probleem was dat je links een breedte van 20% had gegeven, en rechts een breedte van 80%. Dat gaat prima, tot er twee scrollbalken verschijnen: dan wordt het nét te breed en komt de rechterkolom dus onder de linkerkolomt te staan.
Je kunt de breedte 19% en 79% maken of zo, maar dan heb je weer het risico van een kier.

Wat ik heb gedaan: div#container (waarin de linker- en rechterkolom zitten) display: flex; gegeven. Dat is een relatief nieuwe manier om dingen te plaatsen. De linker- en rechterkolom komen dan naast elkaar te staan, ongeacht scrollbalken, borders, enz.

Waar de tekst met 'blz' komt te staan en waar de plaatjes komen te staan, maakt niet uit. Als de grote blokken staan, kun je dat neerzetten waar je maar wilt. Dat regel je dan met text-align, marges, padding, ... Ik heb de marges in de linkerkolom ook even weggehaald, dat komt later wel.

Het pobleem zit in die grote blokken (de linker- en rechterhelft), dat moet eerst even worden opgelost. Dat is het prettige van display: flex: het werkt hartstikke makkelijk en is enorm solide. Geen div meer die naar onderen zakt omdat-ie 1 pixel te breed is.

Ik heb er even borders omheen gezet, zodat de blokken duidelijker zijn.
div#container (waar de linker- en rechterhelft in zitten) heeft even een rode border gekregen. (Dit is de div die display: flex; heeft gekregen, de 'flex container')
div#sidebar (de linkerhelft) een blauwe border.
div#content (de rechterhelft) een groene gestippelde border.
div#main-content (die onder de rest staat) een zwarte border.

Als die vier div's goed staan, kun je daarin zetten wat je maar wilt en precies waar je het wilt (plaatjes links, blz rechts, enz. (Binnen zekere grenzen natuurlijk, 'n afbeelding van 'n meter breed wordt wat lastig.)

Wat ik concreet wil weten, want dat is me nog niet helemaal duidelijk::
1) De groene linkerkolom scrollt nu mee met de witte rechterkolom met 'blz'. Moet dat? Je kunt de groene kolom ook vastzetten en alleen scrollen met de rechterkolom. Of je kunt ze allebei laten scrollen, onafhankelijk van elkaar. Of...
2) Rechts komen bladzijden te staan. Staan die er altijd? Of komen die er pas te staan als je ergens op klikt of zo, opgehaald uit 'n database?
3) Die div#main-content onderaan, wat is daar de bedoeling van? Klopt het dat die onder de linker- en rechterkolom staat?

De inhoud van de divs speelt nu nog niet echt 'n rol. Dat komt later wel.

Het staat weer op https://www.css-voorbeelden.nl/test/

Jeurissen13081969 · Bericht door **Jeurissen13081969** » di 28 mei 2024, 18:25

Wat ik concreet wil weten, want dat is me nog niet helemaal duidelijk::
1) De groene linkerkolom scrolt nu mee met de witte rechterkolom met 'blz'. Moet dat?

Je kunt de groene kolom ook vastzetten en alleen scrollen met de rechterkolom. Of je kunt ze allebei laten scrollen, onafhankelijk van elkaar. Of...

Ja de kolom moet kunnen scrollen naar beneden, want hier kunnen nog veel meer blokjes onder staan.

2) Rechts komen bladzijden te staan. Staan die er altijd? Of komen die er pas te staan als je ergens op klikt of zo, opgehaald uit 'n database?
Ja die staan er altijd. Je zou het geheel als boek moeten zien. Links de titels van de hoofdstukken en rechts de weergave van een hoofdstuk. Dit zijn allemaal plaatjes die in PHP een verwijzing hebben.

3) Die div#main-content onderaan, wat is daar de bedoeling van? Klopt het dat die onder de linker- en rechterkolom staat?
Weet niet. Wat gebeurt er als je ze weg haalt? Mocht die geen functie hebben dan kan die denk ik weg

Bericht door **Goeroeboeroe** » di 28 mei 2024, 20:04

Er staat 'n nieuwe op https://www.css-voorbeelden.nl/test

Deze keer zonder die div#main_content. En zonder borders en zo.
Ik heb de linkerkolom even wat meer inhoud gegeven, zodat die ook kan scrollen. En de rechter is ook weer min of meer zoals die was.
De afbeeldingen zie je niet, want die worden niet geladen. Om ze toch zichtbaar te maken, heb ik ze even 'n breedte en hoogte gegeven. Je ziet dat de 'Blz''s dan automatisch opschuiven.

De linker- en rechterkolom scrollen nu los van elkaar. Maar dat hoeft niet. Met 'n paar hele kleine wijzigingen in de css kunnen ze gelijktijdig scrollen. Kies maar.

Als dit ongeveer is, wat je wilt, zal ik wat preciezer opschrijven, wat ik heb gedaan. En de fouten in de html wat preciezer omschrijven (een <br> buiten een <li> bijvoorbeeld mag niet. Om een marge te krijgen aan de bovenkant gebruik je css.)

Als het nog niet goed is, laat het dan maar even weten.

www.css-voorbeelden.nl

CSS en PHP

CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP

Re: CSS en PHP