plaatsbepaling in Kompozer

[sers]

Hallo allemaal,
Ik ben een amateur op Websites. Ik maak gebruik van Kompozer.
Ik heb een probleem bij de plaatsbepaling van een fot/plaatje of tabel.
Bij mij op het screen staat alles op de juiste plaats maar als ik op een andere computer kijk (bv bij de buren) staan diverse plaatjes en tabel veel te veel naar rechts of naar links
Wie kan mij helpen en vertellen wat ik fout doe.
Alvast bedankt

[sers]

Misschien voor de duidelijkheid. Ik gebruik Windows XP en de buren Windows 7

[nirwana]

Misschien voor de duidelijkheid: mogen we even meekijken naar de website ?
Oftewel, kun je hier even een linkje naar de site plaatsen ?

De Windows-versie mag niet echt uitmaken en ook het soort browser (Firefox, IE, Chrome, Opera, etc) niet. Tenminste, we proberen ons hier aan de geldende webstandaarden te houden waardoor het er in de meeste browsers goed uit moet zien.

Je ziet nogal eens dat iemand op een webpagina iets probeert uit te lijnen met spaties ( ). Daardoor kun je ook niet echt de plaats bepalen. Gelukkig bestaan er betere methodes om iets op een webpagina uit te lijnen. Maar eerst maar eens kijken hoe jouw pagina is opgebouwd, zodat we kunnen zien wat daar mogelijk fout gaat.

[sers]

natuurlijk mag dat. sry dat ik daar niet aan heb gedacht: www.hvhetslot.nl

[sers]

ter aanvullende info:
Ik gebruik een scherm met 1024/768 pixels en de buren (lid van het bestuur vd vereniging) heeft een 1280/1024 screen. Misschien dat het daaraan ligt? en zoja hoe los ik het op

mvg

[Frederik]

Dat is op te lossen door netjes te werken. Als ik in de bron van de pagina kijk staat het daar helemaal stijf van de spaties en ik vermoed dat je de tabellen nog (steeds) niet mooi hebt uitgelijnd, waar we het al eerder over hebben gehad.

In een eerder stadium en andere situatie had ik al geadviseerd om een op CSS gebaseerde template te gebruiken, waar rekening wordt gehouden met het gebruik van verschillende beeldschermen/formaten.

Waar is overigens dat contactformulier gebleven?
Dat vind je niet hier: http://www.hvhetslot.nl/contactform.htmll (moet zijn html in plaats van htmll)

[nirwana]

Gezien de code van de pagina zou ik alle spaties er eerst uit verwijderen. De spaties zijn in de code te herkennen aan  
Spaties zijn namelijk niet geschikt om elementen uit te lijnen.

Ik heb een kopie van de pagina gemaakt en daaruit eerst de spaties verwijderd. Dat waren er 416 stuks. Vervolgens heb ik alle elementen van de webpagina weer uitgelijnd (meestal gecentreerd). Hier is het resultaat van de aanpassingen: http://www.mozbrowser.nl/web/hvhetslot/

[nirwana]

Dan nu een uitleg van de aanpassingen...

Eerst heb ik een grote div aangemaakt waarmee ik alle onderdelen op de pagina wil kunnen centreren:

Code: Selecteer alles

<div style="width: 876px; margin-left: auto; margin-right: auto; border: 1px dashed black; background-color: #DCCDB0; text-align: center; padding-left: 5px; padding-right: 5px;">

...Hier komt dan de inhoud van de pagina in te staan...

</div>

Een uitleg van de eigenschappen die ik heb meegegeven:
- width: 876px; (hiermee maak ik een vlak van 876 pixels breed, omdat de tabel 874 pixels breed was gemaakt)
- margin-left: auto; margin-right: auto; (hiermee centreer ik het vlak op de pagina)
- border: 1px dashed black; (dit zorgt voor een rand met zwarte streepjes om het vlak heen)
- background-color: #DCCDB0; (zorgt voor een achtergrondkleur)
- text-align: center; (zorgt ervoor dat alle inhoud wordt gecentreerd)
- padding-left: 5px; padding-right: 5px; (zorgt voor 5 pixels ruimte aan de beide zijkanten)

Het rode bolletje (als soort opsommingsteken) heb ik een doorzichtige (transparante) achtergrond gegeven, zodat je niet steeds die witte rand eromheen ziet.

De teksten in de tabel heb ik ook gecentreerd en de afbeeldingen zijn verkleind naar het formaat dat ook echt in de pagina gebruikt wordt. Daardoor laadt de pagina sneller en het komt de kwaliteit van de afbeeldingen ook nog ten goede.

Tip: bekijk deze kopie van de website eens op de eigen computer en op die van de buren. Ik hoop dat het er dan vooral hetzelfde uitziet: een website met in het midden een gekleurd vlak met daarin de inhoud van de website.

Ook hoop ik dat daardoor duidelijk wordt hoe je een webpagina het beste op kunt zetten. Zodra je voor de uitlijning van een bepaald element spaties nodig denkt te hebben, moet je ook bedenken dat daar dan waarschijnlijk een betere methode voor bestaat.

Overigens zou het wel mooi zijn om het menu aan de onderkant van de website te verwijderen. Volgens mij voegt dat niet veel toe en doordat het menu naar onderen uitklapt moet de pagina onnodig langer worden gemaakt. Ik denk dat het uiterlijk van de website minder druk wordt als je maar 1 menu bovenaan de pagina opneemt.

[sers]

Beste Nirwana,
Heel hartelijk bedankt voor je commentaren/adviezen!
Ik ga er z.s.m. aan werken.
Al doende en vragende leert men zegt het spreekwoord.
Nogmaals heel hartelijk bedankt voor je uitleg

[nirwana]

Beste Nirwana,
Heel hartelijk bedankt voor je commentaren/adviezen!
Ik ga er z.s.m. aan werken.
Al doende en vragende leert men zegt het spreekwoord.
Nogmaals heel hartelijk bedankt voor je uitleg

Ok, ik ben benieuwd naar het resultaat.
Houd ons de hoogte !

[sers]

Ik heb hem ondertussen geprobeerd te veranderen maar weet niet of het goed is bij mijn buren.
Die slapen al.

[sers]

Nu ik weer naaar de code kijk is er niets veranderd.
Waar precies moet ik nu uw code <div style="width: 876px; margin-left: auto; margin-right: auto; border: 1px dashed black; background-color: #DCCDB0; text-align: center; padding-left: 5px; padding-right: 5px;"> zetten?
Ik heb hem helemaal bovenaan gezet tussen regel 2 en 3 (HTML en HEAD)
en </div> helemaal onderaan tussen body en html
Heb hem gesaved en geuploaded maar als ik nu weer terug kijk is dat allemaal weg.
Ik moest ook weer een plaatje centreren dus ik doe wat goed fout maar wat
Alvast bedankt voor uw antwoord

mvg
Jacques

[nirwana]

Jacques,

Als je het jezelf eenvoudig wilt maken, dan download je eens de broncode van de webpagina die ik heb aangepast.
Je kunt heel eenvoudig een webpagina lokaal opslaan. Je vraagt hem gewoon op in je browser en vervolgens kies je er in het menu voor om de pagina lokaal op te slaan. Dan kun je die pagina lokaal in elke tekst-editor openen om de code te bekijken.

Als je precies wilt weten wat ik heb aangepast, dan kun je het beste het volgende doen:
- download de door mij aangepaste code (alleen HTML)
- download en installeer WinMerge (waarmee je eenvoudig 2 bestanden met elkaar kunt vergelijken)
- open WinMerge en open daarin jouw beginpagina en de door mij aangepaste pagina
Dan zie je snel wat er zoal is aangepast en weet je ook precies waar ik wat heb toegevoegd (of juiste verwijderd).

Oh ja, dit was ik nog vergeten te vermelden:
in het menu stond bovenaan een margin-left van 200 pixels vermeld. Dat betekent dat het menu altijd 200 pixels vanaf de linkerkant komt te staan. Dat is echter niet handig als het geheel gecentreerd wordt. Daarom heb ik dit vervangen door de volgende code:

Code: Selecteer alles

#drop-down-menu
{
	width: 585px;
	margin-left: auto;
	margin-right: auto;
}

Ik heb het menu opgemeten en dat bleek 585 pixels breed. Daarna heb ik via de truc met margin-left en margin-right op auto weer het geheel gecentreerd in de beschikbare ruimte.

Die slapen al.

Laat ze dan inderdaad maar slapen. Dat lijkt me beter

[sers]

Nogmaals bedankt voor uw inzet!

Eerlijk gezegd besefte ik niet dat het allemaal zo ingewikkeld was maar ik probeer door te zetten. Tot nu toe was ik eigenlijk hoofdzakelijk alleen maar bezig in WYSIWYG dus al die codes is nog moeilijk voor me.

Nogmaals bedankt

mvg Jacques

[sers]

Beste Martijn,

Ik heb nu de index pagina aangepast (http://www.hvhetslot.nl) dmv het kopieren van uw code en hier en daar aan te passen. Heel veel geleerd waarvoor dank! De buren hebben hem nu ook goed gecentreerd.

Toch nog een paar vraagjes (als het kan) voordat ik aan de andere pagina's begin:
1) Boven spreekt u van

Dan nu een uitleg van de aanpassingen...

Eerst heb ik een grote div aangemaakt waarmee ik alle onderdelen op de pagina wil kunnen centreren[/quote] dan de code

Is deze code nu bedoeld voor de hele pagina? Ik kan hem nergens vinden. Ik heb wel het stippellijntje weggehaald zoals u ziet maar daar staat niet de hele code toch?

2) Het witte randje om de bolletjes. Ik kom er niet uit. hoe krijg ik die weg?

Alvast bedankt voor uw antwoord!

PS: ik heb de width van de menubalk ook aangepast om hem op 1 lijn te krijgen