kolommen uitlijnen in kompozer

[henkvos]

Op mijn website heb ik een pagina 'Biografie' bestaande uit 2 kolommen.
De rechter kolom is gevuld met tekst.
De linker kolom bestaat uit afbeeldingen die in de tekst worden genoemd.
Het lukt niet goed om de afbeeldingen netjes op de juiste plaats te krijgen ter hoogte van de daarbij horende tekst.
En ik begrijp niet hoe dit komt en hoe ik dit kan verhelpen.

[nirwana]

Henk,

Allereerst welkom hier op het forum van MozBrowser.

Het is handig als je jouw website-adres hier vermeldt, zodat we die alvast kunnen bekijken. Dan krijgen we alvast een idee van wat je van plan bent.

Maar met jouw beschrijving kan ik ook al wel iets, dus laten we daar eens mee beginnen.

Als je een afbeelding op dezelfde hoogte als de tekst wilt krijgen dan kun je het beste bij de afbeelding in Kompozer aangeven hoe de afbeelding ten opzichte van de tekst uitgelijnd moet worden. Dat zit bij de eigenschappen van de afbeelding op het tabblad Vormgeving onder Tekst uitlijnen naar afbeelding. Daar kies ik bijvoorbeeld voor de optie Aan linkerkant. Dat zorgt ervoor dat de tekst links van de afbeelding wordt uitgelijnd en dus dat de afbeelding aan de rechterkant komt te staan. Vervolgens kun je via hspace en vspace ook nog bepalen hoeveel witruimte er tussen de afbeelding en de tekst moet komen, maar dan wordt het al iets geavanceerder: http://html.com/attributes/img-hspace/

Als ik met dergelijke uitlijning werk, dan voeg ik de afbeelding doorgaans aan het begin van een alinea in. Daarmee is de kans het grootst dat die afbeelding op dezelfde hoogte komt te staan als het begin van de betreffende alinea.

Zie http://netosisvideos.s3.amazonaws.com/l ... images.pdf voor een algemene uitleg over hoe je in Kompozer met afbeeldingen kunt werken.

Als je op een dergelijke manier met uitlijning werkt, dan komt de afbeelding wel aan de rechterkant te staan, maar er is dan niet echt sprake van 1 rechterkolom. Alle afbeeldingen komen onder elkaar te staan (tenminste, als je ze allemaal rechts uitlijnt), maar waar ze komen te staan is afhankelijk van de grootte van de afbeelding. Uiteraard kun je ook zelf de groottes van de afbeeldingen instellen, dus daar heb je ook wel enige controle over.

Als je echt met een vast afgebakende linker- en rechterkolom wilt werken, dan zou je dat voorheen misschien met tabellen hebben gedaan. Daarmee kan het nog wel lastig zijn om de afbeelding precies op dezelfde hoogte te krijgen als de tekst, maar dat terzijde. Tegenwoordig werken we liever niet meer met tabellen, als we alleen maar iets willen uitlijnen (opmaak, design).

Een modernere manier om met meerdere kolommen te werken is het gebruik van de kolommen uit de CSS3-standaard: https://developer.mozilla.org/docs/Web/ ... mn_layouts Dat wordt echter niet door alle browsers ondersteund, maar moderne browsers ondersteunen dat wel: http://caniuse.com/#feat=multicolumn

Als je ook de wat oudere webbrowsers wilt kunnen ondersteunen, dan zijn er ook voloende mogelijkheden om een pagina in 2 kolommen onder te brengen. Zo gaat dit hele artikel over verschillende (CSS-)technieken om dat voor elkaar te krijgen: https://css-tricks.com/left-and-right/

Dat artikel gaat niet specifiek over het gebruik van Kompozer, maar ik zie Kompozer vooral als een hulpmiddel om een webpagina te maken. Voor bepaalde zaken moet je soms iets dieper in de code duiken om het voor elkaar te krijgen. Gelukkig bieden Kompozer (en Bluegriffon) daartoe wel de mogelijkheid.

Het is handig om de beschikbare methodes te kennen, zodat je voor jezelf kunt bepalen welke het beste bij jou past. De ene methode kan webdesign-technisch misschien wel veel mooier zijn, maar uiteindelijk moet jij het wel met een hulpmiddel als Kompozer kunnen onderhouden. Ik hoop dat ik je hiermee wat verder op weg heb geholpen. Schroom echter niet om vragen te stellen als je hiermee niet veel verder komt.

[henkvos]

Beste Martijn,

Ik heb het op mijn eigen manier opgelost met een foefje want met dank voor je tips moet ik helaas toegeven dat ik moeite heb met de theorie zoals ik die aantref op de links die je erbij voegde.

Door er blanco foto's tussen te plaatsen, dus gewoon een afbeelding bestaande uit een wit vlak kon ik de indeling van de foto's zo manipuleren dat ze wel juist gepositioneerd werden t.o.v. de tekst in de rechter kolom. Als het niet kan zoals het moet dan moet het zoals het kan, zal ik maar zeggen.

Helaas kan ik mijn website niet online krijgen zodat je hem kan bekijken want dat lukt me niet via filezilla, waarbij ik er wel bij moet vermelden dat hij al 10 jaar oud is, via kompozer is gemaakt (niet door mij) en via kompozer wordt bijgehouden (wel door mij). Hij is 3/4 jaar offline geweest wegens hackproblemen en nu heb ik hem gerestyled. Maar error 404 en 403 beletten verdere voortgang.

[nirwana]

Henk,

Wat gaat er dan fout bij het publiceren via Filezilla?

Als iets mij niet lukt via Filezilla dan wijk ik meestal uit naar Core FTP LE. Dat programma oogt wat eenvoudiger, maar heeft mij dikwijls kunnen helpen waar Filezilla faalde.

Dus dat kan ook eens het proberen waard zijn.

[henkvos]

Dag Martijn,

Omdat het meer dan 3/4 jaar geleden is dat ik gewerkt heb met filezilla, want zo lang is mijn site offline geweest, wist ik niet goed meer hoe dat moest en heb ik er een zootje van gemaakt. Gelukkig was mijn provider zo aardig om filezilla te herstellen en mijn website in de juiste map te plaatsen zodat hij nu weer online is. http://www.henkvosbeelden.nl

Je ziet dat bij de pagina 'biografie' de foto's toch weer wat naar boven zijn verschoven terwijl dat op mijn pc vanuit 'mijn documenten' niet het geval is. Doordat hij nu op internet zichtbaar is werkt dat toch weer net even anders. Ik ga er nog wel weer mee bezig maar voorlopig even niet want het heeft me heel wat hoofdbrekens gekost om het weer in orde te krijgen.

Henk

[nirwana]

Henk,

Hier een kopie van jouw pagina waarmee ik wil aantonen dat hetgeen jij wilt bereiken toch wel mogelijk moet zijn:
http://www.mozbrowser.nl/web/henkvos/Biografie.html

Uit jouw code heb ik eerst de tabel verwijderd, want tabellen zijn niet handig voor een precieze uitlijning.
Uiteindelijk heb ik de align="left" en align="right" en hspace="5" en vspace="5" gelaten voor wat het is.

Daarentegen heb ik voor de div's gekozen.
Daarbij heb ik een linker-gedeelte en een rechter-gedeelte gemaakt.

Die staan dan op dezelfde hoogte.
Ook kun je nog wat witregels toevoegen, als je wat meer ruimte ertussen wilt.

De globale structuur ziet er als volgt uit:

Code: Selecteer alles

<div class="container">
	<div class="links">
		<a href="Images/stadskanaalg3.jpg" data-lightbox="henkvos"><img src="Images/stadskanaalg3.jpg" border="0" height="132" width="77"></a>
	</div>

	<div class="rechts">
             Stukje tekst
	</div>
</div>

<div class="scheiding"></div>

Daar hoort de volgende CSS-code bij:

Code: Selecteer alles

.container
{
	width: 750px;
}

.links
{ 
	float: left; 
	width: 250px;
	
	text-align: center;
}

.rechts
{
	float: left; 
	width: 500px;
}

.scheiding
{
	clear: both;
}

Dat zijn de classes die in de HTML-code worden gebruikt.
Die classes maken het mogelijk om eenvoudig bepaalde eigenschappen aan te passen.
Dus als je alles opeens 1000 pixels breed wilt maken, dan kan dat eenvoudig.

[nirwana]

Tip: je kunt deze pagina in Kompozer openen via het menu Bestand > Weblocatie openen...
Daar voer je dan het adres van de pagina in: http://www.mozbrowser.nl/web/henkvos/Biografie.html

[henkvos]

Martijn,
Wat codes betreft ben ik in staat om target=blanc achter een href te plaatsen, gewoon omdat mij verteld is dat dit daar hoort.
En een kleurcode veranderen lukt ook nog wel als het via het menu niet lukt. Dan probeer ik gewoon wijs te worden uit de andere codes en onregelmatigheden te ontdekken en dan de juiste code te kopiëren op de plaats waar het hoort omdat het ergens anders ook op die plaats staat. Maar wat een div is en een class, daar hoor ik nu voor het eerst van. Dit zou ik zelf niet voor elkaar krijgen.

[nirwana]

Henk,

Dit gaat inderdaad iets verder dan "my first website", maar ik doe dit al wat langer dan vandaag (en leer nog elke dag bij).

Maar de vraag is vooral of dit is wat je zoekt. Je hoeft de structuur niet op te kunnen zetten, maar met wat hulp kun je die vast wel doorgronden en uiteindelijk gebruiken.

[henkvos]

Martijn, hartelijk bedankt voor al je reacties. Ik ga er mee bezig.

Groeten,
Henk

[nirwana]

Henk,

Kom je er even niet uit, schroom dan niet om het hier weer te vragen.