Scoutnet vzw

Ik zou met dit topic eigenlijk een (vrij) algemene vraag willen stellen.

De eerste eigenlijke versie van onze site staat nu al bijna 2 jaar op het net, en ik heb al redelijk veel bijgeleerd (vooral de ontdekking van php dan ). De site bestaat nu uit 3 frames en komt mij nogal 'zwaar' over, ik zou nu eens willen proberen aan een 'lichtere/fijnere' site...

nu heb ik ook al even rondgekeken, en heb al door dat ik mijn frames beter door tables zou vervangen, maar dan zit ik al direct met een paar problemen: hoe maak ik mijn menu, werkt het 'target' in de link nog?

enz.

Wie kan me hier een paar suggesties geven? of waar staat er ergens begrijpelijke tekst op het net?

mvg
Pieter

Je vraagt een suggestie, catch it:
"Als je echt een lichtere site wil, laat je best ook de tables aan de kant liggen."

Ik heb het proefondervindelijk moeten leren, ik kijk even of ik een begrijpelijk tekst hierover vind, versta je hieronder Nederlandstalig?

Je menu zet je gewoon in een bestandje dat je op elke pagina automatisch laat includen met php. Zonder frames hoef je je nooit nog zorgen te maken om targets.

PS: Op de site in mijn profiel zal je niet het goede voorbeeld vinden (2 jaar oud).

niet noodzakelijk nederlandstalig, maar nu ook geen tekst van php.net, die vind ik vreselijk.

gaat het dan over gebruik van opmaak via css ipv tables ?

dan is http://glish.com/css/ wel eens nuttig om te bekijken

euh ja, ik heb het eens bekeken, en zag als iets over kolommen met css: wist ik niet dat dat kon, maar ga ik dan zeker eens proberen!

wat ik me nog afvroeg: is het de moeite om telkens je menu en titel ofzo te laten includen? want stel nu dat de achtergrond een fotootje van 20 kb groot is, dan moet dat toch telkens worden geladen => tijd/bandbreedte die wordt gebruikt. Oftewel: tussen 2 pagina's krijg je iets blanco waarin het wordt geladen? of hoe gaat dat dan in zijn werk...

Ik doel inderdaad op het designen met css. Heel kort enkele voordelen: browsers gaan er sneller mee om, er is minder overbodige code en de code is veel eenvoudiger, dus sneller te maken en aan te passen.

Op de site hiervoor aangegeven staat er een uitleg hoe je kolommen maakt met css maar misschien dat dat toch iets te moeilijk is om zelf zoiets van nul te maken.

Ik denk dat een simpele voorbeeldpagina vrij leerrijk is. Een site die ik heel snel met dit systeem in elkaar gestoken heb is http://www.atmosfeerkortrijk.be/zweden. Let maar niet teveel op de het design en de inhoud, het gaat om de code nu die nog vrij simpel gehouden is :p Het CSS-bestand: http://www.atmosfeerkortrijk.be/zweden/basis/zweden.css

Bekijk even de broncode van de html, daar zie je dat de pagina is opgesplitst in 4 delen
* <div id="header">
* <div id="leftSideBar">
* <div id="bodyText">
* <div id="footer">

Een div is een blok waar je dan later alles in zet wat je wilt. Voor de meeste site's voldoet een dergelijke indeling. Wil je het ene wat groter of rechts nog een extra kolom, dan kan je dat zelf wel erbij zetten.

Als je nu in de CSS gaat kijken zie je dat die 4 delen daarin terugkomen Het blokje code telkens net onder de commentaarregel is om de positie, vorm, plaats te bepalen. Waar je in die code 'zoveel px' vindt staat gaat dat dus om het aantal pixels hé, door die aan te passen kan je afmetingen en verhoudingen nog wat aanpassen.

Per pagina include je dan best de header, leftsidebar en de footer, dan zijn je eigenlijke pagina's heel eenvoudig te maken en aan te passen, gewoon de code erin en geen zorgen meer maken over <td> of </tr>, hun borders en andere opties.

Het is eigenlijk nog beter om met relatieve afmetingen te werken voor de afstanden, geen pixels maar wel em of iets anders. Maar laat dit idee nog maar even aan de kant liggen.

Browsers hebben een cache voor iets, die achtergrond of foto die op elke pagina terugkomt moet maar 1 keer gedownload worden, dat vind de browser wel in de cache.

wauw, wist niet dat dit met css ging, ga me daar zeker eens mee bezighouden....

Zeker eens doen

Uiteindelijk is het omschakelen van frames naar dit soort css-based design eenvoudiger dan naar tables (en de andere voordelen niet vergeten).
Het is een kwestie je verschillende frames in 1 pagina in de juiste <div> te plakken (includen met php) en die css eraan te hangen.

ook een heel degelijke site: http://www.htmldog.com/

_________________
Als het konijn niet in de hoed wil ...

ik ben wat aan het prutsen voor een site, om met div's te leren werken...

nu doe ik nog iets verkeerd met de mouse-overs van mijn menu... heeft iemand een idee hoe het komt dat bij de mouseovers, eerst iets anders kort te voorschijn komt ??

de url is

http://www.scoutsboekhoute.be/gja/test/index.php

bedankt alvast

De div's en xhtml 1.1 zien er alvast goed uit.

Dat die mouse-overs eerst iets anders doen zal zijn omdat de afbeeldingen nog geladen moeten worden terwijl je er met je muis over gaat.
Oplossing kan zijn die afbeeldingen ergens op de pagina te zetten maar niet zichtbaar.

daar zijn 'properdere' oplossingen voor:
1. Gebruik gewoon tekst. Het maakt dat je site lichter wordt, gemakkelijker aan te passen en minder CSS-code nodig heeft.
2. zet die A's in een UL en je moet al heel wat minder positioneren.
3. Als je dan toch om de één of andere duistere reden figuren wilt gebruiken is het volgende volgens mij de elegantste oplossing:
Stel je A is 100px op 100px, je hebt dus twee figuurtjes van 100px op 100px. Je plakt die twee figuurtjes (a en a:hover) onder elkaar zodat je een figuur hebt van 100px op 200px. CSS-code:
a{
display: block;
width: 100px;
height: 100px;
background: transparent url(afbeelding.gif) no-repeat scroll left top;
}

a:hover{
background-position: left bottom;
}

Als ik die CSS-code zo'n beetje bekijk dan is het meest voorkomende woord: "absolute". Je zet met andere woorden alles vast zoals in een tabelstructuur. Er zijn mogelijkheden en redenen genoeg (bv: schermgroottes durven veel te variëren) om over te stappen naar een fluid design. Het begint volgens mij bij de opdeling van je site in drie blokken: bovenaan een div id="menu" rechts een div id="toolbar" en dan voor de inhoud een div id="content".
Bij onze eigen scoutssite zit ik ook nog met een vaste breedte, maar daar zou bij de overschakeling naar een content management system verandering in moeten komen. Onze toekomstige jeugdraadsite
http://www.jeugdraadoosterzele.be/webgroups2/ heeft een fixed menu en een vloeiende inhoud div. (De CSS-code is niet valid, wat ik minder belangrijk vind.)
ook onze gouwsite: http://gouwlve.scoutnet.be/ (hier een voorbeeldje van een ul als menu) heeft een inhoud div die met veranderlijke breedte.

Veel links naar kant en klaar templates vind je hier: http://www.cssvault.com/cat_layouts.php .

_________________
Als het konijn niet in de hoed wil ...

ach ja, er loopt nog iets fout in Firefox 0.9 met het submenu. Ik zie hier oo geen reden om hier een tabel te gebruiken ipv een ul.

over de layout zelf: nogal donker, maar het linker gedeelte is best geslaagd. Het rechtergedeelte met nieuws en kalender is heel wat minder.

_________________
Als het konijn niet in de hoed wil ...

hello

merci voor jullie snelle reacties allemaal, ik ga het zeker allemaal in beschouwing nemen

en dat de lay-out nog vele beter kan, daar ben ik me zeker van bewust, tis de eerste keer dat ik nu met div's begin te werken, ik moet zeker nog wat sites doornemen eer ik alles onder de knie zal hebben

merci alvast !

Ik vind het eigenlijk niet zo erg dat je site een vaste breedte heeft. Het is veel aangenamer om tekst te lezen op een "blad" die hoger is dan hij breed is. Natuurlijk gaat je site er dan wel een beetje belachlijk uitzien bij mensen met marginaal grote schermen en oogdichtknijpende resoluties, maar die zijn waarschijnlijk maar een klein deel van je publiek.
Jullie site is trouwens prachtig, ik snap niet waarom je hem wil veranderen :p