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.lowlandsrouter schreef: ↑27 jul 2023, 10:44Ik 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.
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.
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.
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.lowlandsrouter schreef: ↑27 jul 2023, 10:44Oew, 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.
Vanaf regel 128:
Code: Selecteer alles
#page-wrap {
width: 1888px;
margin: 0 auto;
}
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;}
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;}
}
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}
}
Code: Selecteer alles
@media only screen and (max-width: 600px) and (min-width: 400px) {
..............
}
Gebruik daarvoor de comment tags (ik kwam er al meerdere tegen in de bron van jouw site).lowlandsrouter schreef: ↑27 jul 2023, 10:44Beheer 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!
In css:
Code: Selecteer alles
/* Plaats hier de css comment tag */
Code: Selecteer alles
<!-- Plaats hier de html comment tag -->
Code: Selecteer alles
// Plaats hier de js comment tag