afgesplitst van Babbelhoek Juli

[Peer]

Ik neem aan dat je het over een stukje horizontale scrollbar hebt? Heb je een 1 of andere zijbalk in je webbrowser dan? Zelf zie ik met de meest gangbare browsers zowel in 4K op 200% alsook op full hd schermen zeker geen horizontale scrollbar.

Ik maak gebruik van Ubuntu (zowel op mijn laptop als desktop) en heb daarbij aan de linkerkant een kolom met de taakbalk. De pixels van deze taakbalk worden dan van de ruimte voor de browser afgepakt. Als ik de balk naar de onderkant van het scherm verplaatst dan verdwijnt de scrollbalk.

Heb je een website Peer?

Meerdere zelfs, waarvan enkele offline, dus op mijn desktop zelf.
Een projectje wat ik even snel uit mijn mouw heb geschud is deze: optvtas.nl waarbij ik nog het nodige aan content toe moet voegen. Het is geheel in html met css gemaakt, met een paar stukjes javascript. Om de header en footer op elke pagina hetzelfde te houden heb ik de templates header.html en footer.html gemaakt, welke met php op elke pagina word ingeladen. Het laatste wat ik heb toegevoegd zijn de og meta propertys.
Daarnaast heb ik nog 2 fora draaien (www.gouwepeer.nl en www.masterforum.nl), waarbij ik een paar aanpassingen op het standaard Xenforo template heb aangebracht. Ook heb ik dit script geschreven waarmee anderen die ook een Xenforo forum hebben hun forum kunnen aanpassen door elke categorie een eigen kleur te geven.

w3schools.com

Als je in de broncode van optvtas.nl kijk zal je zien dat ik daar een stukje van de w3.css heb gepakt Wel met een paar aanpassingen. Door daar mee bezig te zijn leer je vanzelf een hoop.

Oew, ik weet niet of ik daar mee wegkom met mijn ontwerp. De site in zijn huidige vorm is idd static as fuck en gericht op full hd of hoger, een tablet, maar zeker geen mobiel.

Ik ben zo vrij geweest om het commando wget -m -k -p https://www.starthemel.nl/ in de terminal uit te voeren zodat ik mee kan kijken naar de broncode.
Vanaf regel 128:

Code: Selecteer alles

#page-wrap {
     width: 1888px;
     margin: 0 auto;
	 }

En vanaf regel 141:

Code: Selecteer alles

.top {width:1886px; height:238px; position: sticky; top: 0; z-index: 100; margin-top:-12px;}
.top .bgheader {float:left; width:1886px; height:238px; border-width: 0px;}
.top .bgheader .header {float:left; width:1886px; height:238px; border-width: 0px;}

Dat is inderdaad behoorlijk static. Je kan voor lagere resoluties uitzonderingen aanmaken door middel van media queries. Hiermee geef je een css code die geldig is voor bepaalde resoluties. Voorbeeldje:

Code: Selecteer alles

@media screen and (max-width: 1600px) {
  #page-wrap {
     width: 100%;
     margin: 0 auto;
	 }
	
  .top {width:100%; height:238px; position: sticky; top: 0; z-index: 100; margin-top:-12px;}
  .top .bgheader {float:left; width:100%; height:238px; border-width: 0px;}
  .top .bgheader .header {float:left; width:100%; height:238px; border-width: 0px;} 
}

Hiermee geef je aan dat als de resolutie van het scherm 1600 pixels of lager is dat bovenstaande regels van toepassing zijn. Zo kan je meerdere breakpoints toepassen. Voorbeeld van een andere site waar ik offline nog mee bezig ben (met een responsive menu):

Code: Selecteer alles

@media only screen and (min-width: 952px) {
.w3-hamburger {display:none!important}
}
@media only screen and (max-width: 952px) {
.w3-6elink {display:none!important}
}
@media only screen and (max-width: 812px) {
.w3-5elink {display:none!important}
}
@media only screen and (max-width: 662px) {
.w3-4elink {display:none!important}
}
@media only screen and (max-width: 517px) {
.w3-3elink {display:none!important}
}

@media only screen and (min-width: 953px) {
.g3-6elink {display:none!important}
}
@media only screen and (min-width: 813px) {
.g3-5elink {display:none!important}
}
@media only screen and (min-width: 663px) {
.g3-4elink {display:none!important}
}
@media only screen and (min-width: 518px) {
.g3-3elink {display:none!important}
}

In bovenstaande voorbeeld heb ik meerdere menu items die in een steeds smaller wordende scherm onder het hamburgermenu komen te vallen. Zoals je ziet heb ik daarbij van een minimale waarde gebruik gemaakt in plaats van een maximale waarde. Je kan een min en max waarde ook in 1 regel gebruiken:

Code: Selecteer alles

@media only screen and (max-width: 600px) and (min-width: 400px)  {
..............
}

Beheer moet echter een genot blijven en geen nachtmerrie worden; die tijd wil ik achter me laten (waar we vroeger afwijkende code nodig hadden voor zo goed als elke webbrowser); en kwa nu, ik zie soms code op websites waarvan ik zoiets heb van omg!

Gebruik daarvoor de comment tags (ik kwam er al meerdere tegen in de bron van jouw site).
In css:

Code: Selecteer alles

/* Plaats hier de css comment tag */

In html:

Code: Selecteer alles

<!-- Plaats hier de html comment tag -->

in javascript:

Code: Selecteer alles

// Plaats hier de js comment tag

[Peer]

Nog een stukje uitleg over de responsive template: Deze regel is ook belangrijk:

Code: Selecteer alles

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bovenstaande code zal ervoor zorgen dat alle lettertypes groot genoeg blijven in bijvoorbeeld een smartphone. Een moderne smartphone heeft vaak al minimaal een full hd scherm. De viewport zorgt ervoor dat teksten leesbaar blijven.
Meer info over de viewport metatag:
https://developer.mozilla.org/en-US/doc ... t_meta_tag

Verder kan je met php meerdere templates inladen, zodat je elke template gescheiden kan houden en deze duidelijker kan overzien en aan kan passen.
- maak een header
- maak een footer
- maak voor elke pagina een eigen body.
De php template komt er dan zo uit te zien:

Code: Selecteer alles

<?php
    include 'header.html';
    include 'home.html';
    include 'footer.html';
?>

[Peer]

Je kan dit uitbreiden met een eigen titel en og meta tags voor elke pagina (waarbij ik als voorbeeld een webp logo in de map /img heb geplaatst):

Code: Selecteer alles

<!DOCTYPE html>
<html>
<title>starthemel.nl | home</title>
<meta property="og:title" content="Home | starthemel.nl" />
<meta property="og:type" content="artikel" />
<meta property="og:image" content="https://starthemel.nl/img/logo.webp" />
<meta property="og:url" content="https://starthemel.nl/index.php" />
<meta property="og:description" content="De ultieme touch startpagina met meer dan 700 links (Geoptimaliseerd voor full hd of hoger - met zoomen van uw webbrowser ook geschikt voor die laptop met een lagere resolutie)">
<?php
    include 'header.html';
    include 'home.html';
    include 'footer.html';
?>

[Peer]

De og meta property's worden gelezen zodra je alleen de link op een social media pagina plaatst (zoals Facebook of Twitter/X). Ook in een forum gebaseerd op Xenforo zal dit zo werken. In phpBB word dit tot nu toe nog niet ondersteund.
Verder is het aan te raden om ook de stylesheet als een aparte template op te slaan, bijvoorbeeld als style.css. Zelf sla ik dat soort bestanden dan op in de map /lib (van library). Die stylesheet laat ik dan weer in de header includen via de volgende regel:

Code: Selecteer alles

<link rel="stylesheet" href="/lib/style.css">

Maak je gebruik van een uitgebreide javascript dan kan je daar ook een template (als voorbeeld script.js) voor aanmaken en includen in de footer:

Hopelijk kan je met bovenstaande info weer even vooruit

[lowlandsrouter]

De og meta property's worden gelezen zodra je alleen de link op een social media pagina plaatst (zoals Facebook of Twitter/X). Ook in een forum gebaseerd op Xenforo zal dit zo werken. In phpBB word dit tot nu toe nog niet ondersteund.
Verder is het aan te raden om ook de stylesheet als een aparte template op te slaan, bijvoorbeeld als style.css. Zelf sla ik dat soort bestanden dan op in de map /lib (van library). Die stylesheet laat ik dan weer in de header includen via de volgende regel:

Code: Selecteer alles

<link rel="stylesheet" href="/lib/style.css">

Maak je gebruik van een uitgebreide javascript dan kan je daar ook een template (als voorbeeld script.js) voor aanmaken en includen in de footer:

Hopelijk kan je met bovenstaande info weer even vooruit

Ik heb alleen de kleuren in losse css bestanden en de afmetingen bewust in de index. Dit doe ik zo omdat losse css bestanden bij updates vaak niet ingeladen worden bij clienten omdat de oude versie in de cache staat. De index.html wordt wel ten alle tijden ververst en daarom houd ik dat soort van css in de index.

Dank je voor de info, daar kan ik zeker wat mee, al moet ik je zeggen dat ik nog niet zeker weet of ik hier werk van maak, css schrijven voor verschillende resoluties is niet voor elke site even handig, in mijn geval, als er door een lagere resolutie, een kolom of twee moeten vallen, waar moet ik daarmee dan naartoe? Horizontaal eronder zou kunnen. Ik ben er nog niet helemaal uit wat ik ga doen en wil dat eerst op papier hebben staan voor er gecodeerd wordt.

[lowlandsrouter]

Ik maak gebruik van Ubuntu (zowel op mijn laptop als desktop) en heb daarbij aan de linkerkant een kolom met de taakbalk. De pixels van deze taakbalk worden dan van de ruimte voor de browser afgepakt. Als ik de balk naar de onderkant van het scherm verplaatst dan verdwijnt de scrollbalk.

Dat verklaart wat. Waarom die balk niet slim verbergen? Dat werkt zo mooi in linux. Ik erger me dood als ik windows zit aan hun oplossingen voor de taskbar. Van alle ellende laat ik hem daar maar gewoon staan.

[lowlandsrouter]

Binnenkort heb ik een abo op gpt4. (misschien dat ik dat vanavond al afsluit) Eens zien waar "dat" mee komt ook, al kan ik met jouw info al heel wat!! Bedankt peer.
Ongeacht of ik er iets mee ga doen, toch leuke info.

[edit] bezig met gpt4

[lowlandsrouter]

Heb je een website Peer?

Meerdere zelfs, waarvan enkele offline, dus op mijn desktop zelf.
Een projectje wat ik even snel uit mijn mouw heb geschud is deze: optvtas.nl waarbij ik nog het nodige aan content toe moet voegen. Het is geheel in html met css gemaakt, met een paar stukjes javascript. Om de header en footer op elke pagina hetzelfde te houden heb ik de templates header.html en footer.html gemaakt, welke met php op elke pagina word ingeladen. Het laatste wat ik heb toegevoegd zijn de og meta propertys.
Daarnaast heb ik nog 2 fora draaien (www.gouwepeer.nl en www.masterforum.nl), waarbij ik een paar aanpassingen op het standaard Xenforo template heb aangebracht. Ook heb ik dit script geschreven waarmee anderen die ook een Xenforo forum hebben hun forum kunnen aanpassen door elke categorie een eigen kleur te geven.

Interessant, hoe heb je tijd voor dit alles. Ik werk 18 uur per week en kom al tijd te kort

[lowlandsrouter]

Ik wil overigens niet dat je er verder tijd in steekt, dat is namelijk nergens voor nodig. Ik heb alle tijd met die page van me.

[lowlandsrouter]

Daarnaast heb ik nog 2 fora draaien (www.gouwepeer.nl en www.masterforum.nl), waarbij ik een paar aanpassingen op het standaard Xenforo template heb aangebracht. Ook heb ik dit script geschreven waarmee anderen die ook een Xenforo forum hebben hun forum kunnen aanpassen door elke categorie een eigen kleur te geven.

En dat ziet er zeer gelikt uit!

Alleen op het masterforum zie ik Webdisign staan; je weet dat het webdesign is?

[Peer]

Waarom die balk niet slim verbergen? Dat werkt zo mooi in linux.

Een stukje gewenning dat het nu zo staat. Ik werk al weer de nodige jaren met Ubuntu. Daarvoor heb ik een tijd met Gentoo gewerkt. Super stabiel, maar het installeren neemt aardig wat tijd in beslag. En na een kernel panic door een brakke harde schijf heb ik besloten om Ubuntu uit te proberen. Gentoo staat nog wel op mijn wensenlijst om weer eens te installeren.

Alleen op het masterforum zie ik Webdisign staan; je weet dat het webdesign is?

Webdesign is een ruim begrip. Ik schuif daar alles onder wat met html, css (waarmee je de boel vorm geeft) en javascript onder.
Ik heb het forumdeel Software, drivers en codes inmiddels al iets aangepast. Voor de drivers moet daar nog een forumdeel bij worden geplaatst.
Edit: onderdeel websisign is omgedoopt tot Webdesign en webdevelopment

[lowlandsrouter]

Waarom die balk niet slim verbergen? Dat werkt zo mooi in linux.

Een stukje gewenning dat het nu zo staat. Ik werk al weer de nodige jaren met Ubuntu. Daarvoor heb ik een tijd met Gentoo gewerkt. Super stabiel, maar het installeren neemt aardig wat tijd in beslag. En na een kernel panic door een brakke harde schijf heb ik besloten om Ubuntu uit te proberen. Gentoo staat nog wel op mijn wensenlijst om weer eens te installeren.

Zo veel keuze als het op linux aankomt. Zelf heb ik een voorkeur voor stabiliteit en cinnamon. Ik zit niet te wachten op bleeding edge met gebroken packages.
Kwa ubuntu was het kwa 4K lange tijd zo dat je aangewezen was op gnome; en ik ben geen fan van gnome.

Als het op webdesign aankomt zit ik toch liever in windows dan in linux. Dat heeft te maken met voor mij onmisbare software die niet voor linux beschikbaar is.
Ik ben dan ook wat huiverig voor toekomstige windows iteraties. Er is sprake van windows als een service in de cloud. Als ik ergens niet op zit te wachten dan is het dat.
B.v. Heb me een jaar of twee geleden dreamweaver gekocht. Nu is dat pakket als een service beschikbaar via adobe cloud a 22 euro per maand. Ik heb eenmalig veertig euro betaald voor een opgekochte licentie van een failliet bedrijf. Zie het gebeuren dat je via windows die in de cloud alleen maar gebruik kan maken van dat soort peperdure pakketten en niet meer je eigen software kan installeren /uploaden.

Maar goed, als het zo is, dan zijn er natuurlijk wel alternatieven, een notepad++ zal ook in de windows als een cloud service functioneren en paintshop pro en picpick neem ik toch al af.
Voor mij geen Gimp en een fatsoenlijke screenshottool ben ik in linux nog niet tegengekomen (1 waarbij je de pixelmaten van de shot van tevoren snel kan definieren)

[lowlandsrouter]

Gisteren ook maar eens een cookieconsent script geschreven. De trigger was daarvoor een tooltje dat ik op jouw forum zag (i dont care about cookies). Mooie vondst peer - essentieel tegenwoordig.

[Peer]

i dont care about cookies

Ik moet bekennen dat ik heel dat "I dont care about cookies" niet meer in de gaten had, die tekst staat er al sinds juli 2019. Ik heb daar zelf een hele tijd gebruik van gemaakt, maar na problemen met bepaalde sites de plugin toch maar weer uitgeschakeld. Het zal nu inmiddels waarschijnlijk weer wel met meerdere updates zodanig zijn aangepast dat het weer wel zonder problemen zal werken, toch maar weer eens opnieuw in gaan schakelen

[Peer]

De og meta property's worden gelezen zodra je alleen de link op een social media pagina plaatst (zoals Facebook of Twitter/X).

Ik was vandaag op tijd thuis en ben er ff voor gaan zitten. Het was even een gedoe omdat de tekens < > en " niet als losse tekens worden ondersteund in php echo, maar dat heb ik opgelost door de html entities toe te passen.
Het resultaat:
Open Graph Generator