centreren website bij groter beeldscherm

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
mariakompozert
Berichten: 5
Lid geworden op: 20 september 2010, 8:27
    Windows 7 Firefox

centreren website bij groter beeldscherm

Bericht door mariakompozert »

Allereerst bedankt voor jullie hulp bij de vorige vragen. Het resultaat van de site is erg mooi geworden.

Nu de volgende uitdaging: ik heb een website gebouwd met 17 losse pagina's ( ja beginners model maar ik kom er wel) mijn pagina's zijn links uitgelijnd en bevatten kolommen en foto's. Ik heb het gebouwd op 1024 pixels maar veel beeldschermen zijn tegenwoordig breder. Het resultaat is dat mijn website in zijn geheel links uitgelijnd wordt en ik wil de hele opmaak op grotere beeldschermen in het midden.

Weet iemand welke commando regel moet ik invoeren?

groetjes en bedankt,

Maria
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: centreren website bij groter beeldscherm

Bericht door nirwana »

Maria,

Waar kunnen we jouw huidige website vinden ?
Voor zover ik kan nagaan heb je 1 keer eerder een vraag hier op het forum gesteld, maar misschien zie ik iets over het hoofd.

Tip: je kunt ook een link naar jouw website opnemen in je profiel hier op het forum.
Dan hoeven we je niet nogmaals te vragen waar we jouw website kunnen vinden.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
mariakompozert
Berichten: 5
Lid geworden op: 20 september 2010, 8:27
    Windows 7 Firefox

Re: centreren website bij groter beeldscherm

Bericht door mariakompozert »

Ik heb mijn website bij mijn profiel gezet hoor....dank voor de tip.


Groet,

Maria
Gebruikersavatar
nirwana
Beheerder
Berichten: 11423
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: centreren website bij groter beeldscherm

Bericht door nirwana »

Maria,

Hier is de website weer, maar dan gecentreerd: www.mozbrowser.nl/web/memendam/index.html

Nu wil je vast ook wel weten wat ik heb aangepast. Zo heb ik een div om de hele website geplaatst. Deze heb ik een klasse van container gegeven.

Zo zie je bovenin de pagina de volgende code staan:

Code: Selecteer alles

<div class="container">
en onderin staat dan de afsluitende

Code: Selecteer alles

</div
Vervolgens heb ik bovenin de pagina (in de head) een stukje CSS-code toegevoegd waarmee ik aangeef wat er met deze div gedaan moet worden:

Code: Selecteer alles

<style type="text/css">
div.container
{
	border: 0;
	width: 1024px;
	height: 100%;
	
	margin: 0 auto;
	margin-top: 10px;
}
</style>
Deze CSS-code kun je overigens ook in 1 van je beide stylesheets opnemen, want CSS is juist bedoeld om over meerdere pagina's te delen.

Enkele andere zaken die ik in dit voorbeeld heb aangepast:
- de titel van de pagina (dit was memendam2 en is nu "Memendam uitvaartverzorging" geworden)
- het logo van de onderneming (juiste formaat, achtergrond + paar witte pixels weggewerkt, maar is nog niet helemaal goed)
- de afbeelding in het midden heb ik nu als JPG opgeslagen, omdat het een foto is (GIF / PNG kun je het beste voor afbeeldingen met relatief weinig kleuren gebruiken en JPG het beste voor foto's). Daardoor wordt de afbeelding 129 kilobytes in plaats van 271 kilobytes. Als het goed is wordt de afbeelding daar niet minder mooi van, maar die conclusie laat ik liever aan jou over.

Overigens zou het logo nog wel verbeterd moeten worden, want het omzetten naar een gif met een transparante achtergrond heeft de afbeelding geen goed gedaan. Heb je dit logo ook nog ergens in een andere afbeelding liggen ?
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu