NVU page setup

WimVriend · Bericht door **WimVriend** » 5 december 2005, 19:38

Goeiedag,
Net begonnen met Nvu en HTML en heb daarom een vraagje.
Strak langs de boven en zijkant van mn webpagina wilde ik een plaatje zetten, deze bleef echter ongeveer een halve centimeter vanaf de zijkanten staan. Ik heb toen de page setup op 0 gezet, maar dat hielp niet.
Mijn jongste zoon had een oplossing door het volgende in te voegen.

" <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"

Dit geeft inderdaad het gewenste resultaat maar als ik "validate html" doe dan krijg ik een foutmelding. kan iemand mij adviseren hoe ik e.e.a. kan oplossen met gewone html, om nu al meteen met css te beginnen is me te hoog gegrepen.
Alvast bedankt,
Wim

nirwana · Bericht door **nirwana** » 5 december 2005, 20:18

Toch denk ik dat dit het beste met CSS opgelost kan worden. Dus we duiken eens in de CSS-editor van Nvu via het menu Extra > CSS bewerken.

Klik onderin de "Geavanceerde modus" maar uit.
Klik vervolgens op de knop Regel. Nu kiest u aan de rechterkant voor de 2e optie (stijl toegepast op alle elementen van een type) en tikt u body in. Dan klikt u op de knop "Stijlregel aanmaken".
Vervolgens klikt u in hetzelfde venster op het tabblad Blok en daar vult u onderaan bij Marges voor Boven en Links 0px in. Als u dit goed doet, dan ziet u direct het resultaat in de pagina binnen Nvu.

Dit is eigenlijk dezelfde methode als uw zoon aangaf, maar dan zodanig dat het wel goed valideert.

Uiteindelijk maakt Nvu dit ervan in de HTML-code:

<style type="text/css">
body { margin-top: 0px;
margin-left: 0px;
}
</style>

Als u alles op 0px zet, dan voegt Nvu dit samen tot:

<style type="text/css">
body { margin: 0px; }
</style>

Dat laatste geeft hetzelfde resultaat als topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0", maar het is een andere schrijfwijze en als je CSS gebruikt dan is de kans dat een pagina goed valideert nu eenmaal groter.
Anders heb je allemaal aparte attributen nodig om iets aan te geven en dan is de kans groot dat de validatie dat niet goedkeurt. Dus als je toch met een webpagina bezig bent, kun je het beter direct goed doen.

En het is een eerste oefening om eens aan de mogelijkheden van CSS te ruiken.

WimVriend · Bericht door **WimVriend** » 6 december 2005, 1:03

nirwana schreef:Toch denk ik dat dit het beste met CSS opgelost kan worden. Dus we duiken eens in de CSS-editor van Nvu via het menu Extra > CSS bewerken.

Klik onderin de "Geavanceerde modus" maar uit.
Klik vervolgens op de knop Regel. Nu kiest u aan de rechterkant voor de 2e optie (stijl toegepast op alle elementen van een type) en tikt u body in. Dan klikt u op de knop "Stijlregel aanmaken".
Vervolgens klikt u in hetzelfde venster op het tabblad Blok en daar vult u onderaan bij Marges voor Boven en Links 0px in. Als u dit goed doet, dan ziet u direct het resultaat in de pagina binnen Nvu.

Dit is eigenlijk dezelfde methode als uw zoon aangaf, maar dan zodanig dat het wel goed valideert.

Uiteindelijk maakt Nvu dit ervan in de HTML-code:
<style type="text/css">
body { margin-top: 0px;
margin-left: 0px;
}
</style>
Als u alles op 0px zet, dan voegt Nvu dit samen tot:
<style type="text/css">
body { margin: 0px; }
</style>
Dat laatste geeft hetzelfde resultaat als topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0", maar het is een andere schrijfwijze en als je CSS gebruikt dan is de kans dat een pagina goed valideert nu eenmaal groter.
Anders heb je allemaal aparte attributen nodig om iets aan te geven en dan is de kans groot dat de validatie dat niet goedkeurt. Dus als je toch met een webpagina bezig bent, kun je het beter direct goed doen.

En het is een eerste oefening om eens aan de mogelijkheden van CSS te ruiken.

Bedankt Martijn,
Werkt inderdaad prachtig, ik zal nu wel een hoop pagina's moeten nalopen

maar het is de moeite waard.
wim

nirwana · Bericht door **nirwana** » 6 december 2005, 7:24

WimVriend schreef:Werkt inderdaad prachtig, ik zal nu wel een hoop pagina's moeten nalopen maar het is de moeite waard.
wim

Dan kun je beter direct een stapje verder gaan met het gebruik van CSS en de CSS-regels in een apart bestand plaatsen. Noem dat bijvoorbeeld website.css en dan kun je daarin alle regels plaatsen die op de pagina's van toepassing zijn. Dan hoef je enkel in alle pagina's een verwijzing naar dat bestand op te nemen. Als je iets wilt wijzigen, dan hoef je dat enkel in dat centrale bestand te doen en dan hoef je niet steeds alle pagina's bij langs om overal dezelfde wijziging door te voeren.

Als je je huidige CSS met Nvu wilt exporteren naar een apart bestand dan open je eerst de pagina waar nu de CSS in zit en vervolgens open je de CSS-bewerker weer via het menu Extra > CSS bewerken.
Dan klik je links op het "intern stijlblad" en daardoor komt er aan de rechterkant een knop te staan waarmee je de CSS-regels als apart bestand kunt opslaan (Stijlblad aanmaken en ernaar overschakelen).
Sla dit bijvoorbeeld op als website.css. Dan kun je de CSS-bewerker sluiten en de pagina opslaan. Nu heeft Nvu

Code: Selecteer alles

<link rel="stylesheet" href="website.css" type="text/css">

in de HTML-code geplaatst en dat is een verwijzing naar het ge-exporteerde CSS-bestand.

Wil je het nu ook aan een andere pagina koppelen, dan open je die in Nvu en ga je weer naar Extra > CSS bewerken. Vervolgens klik je op de knop Link elt. en dan selecteer je aan de rechterkant via de knop Bestand kiezen het CSS-bestand.
Tenslotte klikt u weer op de knop Stijlblad aanmaken. Dan plaatst Nvu een verwijzing naar het CSS-bestand in de code van de pagina.

Tip: let er wel op dat Nvu niet verwijst via file:// . Als je de website publiceert krijg je daar namelijk problemen mee. Dan verwijst de website naar een hard pad op jouw computer. Daarom moeten alle verwijzingen relatief worden gemaakt (voor zover dit niet automatisch gebeurt). Plaats het CSS-bestand bij voorkeur in dezelfde map als de website om dergelijke problemen te voorkomen. Als Nvu bijvoorbeeld verwijst naar file:///D:/home/website.css dan kun je dat eerste stuk wissen en enkel naar website.css verwijzen (mits de bestanden zich in dezelfde map bevinden). Dat kun je altijd corrigeren via de bron van de pagina (als Nvu daar niet direct een mogelijkheid voor biedt). Ook kun je het 1 keer grafisch via Nvu instellen en vervolgens die code steeds in het head-gedeelte van de HTML-code van een pagina plakken. Dat gaat misschien wel net zo snel (als je weet wat je waar moet plaatsen).

Het is eventjes opletten dat overal de juiste verwijzing wordt ingevoegd, maar daarna is het onderhoud van de website en zorgen dat het er op alle pagina's hetzelfde uitziet een stuk eenvoudiger.