Testpagina Uitlijning Externe links - Bewerkingsoverzicht

Fred op 23 okt 2016 om 09:04

2016-10-23T09:04:35Z

Fred op 22 mei 2016 om 15:02

2016-05-22T15:02:12Z

Fred op 3 mei 2016 om 13:27

2016-05-03T13:27:37Z

Fred op 22 apr 2016 om 17:58

2016-04-22T17:58:04Z

Fred op 10 jan 2016 om 09:32

2016-01-10T09:32:18Z

Fred op 5 dec 2015 om 17:37

2015-12-05T17:37:40Z

Fred op 2 dec 2015 om 18:15

2015-12-02T18:15:45Z

Fred: Nieuwe pagina aangemaakt met '{{Koptekst |Vorige= Testpagina Externe links |Volgende= Testpagina Externe links |VorigeMenu= EDIT |Auteur= Redactie }} ==== Oplossing van probleem met de uitlijning…'

2015-11-18T18:03:46Z

Nieuwe pagina aangemaakt met '{{Koptekst |Vorige= Testpagina Externe links |Volgende= Testpagina Externe links |VorigeMenu= EDIT |Auteur= Redactie }} ==== Oplossing van probleem met de uitlijning…'

Nieuwe pagina

{{Koptekst
|Vorige= Testpagina Externe links
|Volgende= Testpagina Externe links
|VorigeMenu= EDIT
|Auteur= Redactie
}}

==== Oplossing van probleem met de uitlijning van externe links in de encyclopedie ====

===== Kolom-uitlijning 'ExtraInfo' bij Linkssectie. =====

We hadden al vanaf het begin het probleem dat de ExtaInfo-tekst niet goed verticaal uitgelijnd was met de er voor staande link-tekst. Heb destijds (medio 2013) in de sjablonen de 'valign' aangepast. Toen was het probleem wel minder geworden, maar helemaal wegkrijgen lukte niet. Blijkbaar beïnvloeden de interne- en externe link instellingen elkaar.

===== Opnieuw hetzelfde probleem bij de nieuwe Externe Links-methode =====
Bij de nieuwe methode om Externe links te plaatsen (sinds 15-11-2015), trad ook hetzelfde probleem met de verticale uitlijning op. Door in de nieuwe Sjabloon de valign van de link op 'top' te zetten en de valign van de ExtraInfo-tekst op 'bottom', was het hoogteverschil bijna nihil in het 'Bewerking ter controle bekijken'-scherm. Wanneer je echter op 'Opslaan' klikte, bleek echter dat de ExtraInfo-tekst toch weer iets naar boven verschoven was.

Ik besloot om de rand om de tabel-cellen zichtbaar te maken, om te zien of het probleem eventueel door niet gelijk staande tabel-cellen veroorzaakt werd.
<pre>
| style="font-size: 90%; valign:top; border: 1px solid darkgray;"|
* [http://carendt.com Tekst uitlijning test]
{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border: 1px solid darkgray;" {{!}} {{{ExtraInfo}}} |}}
|-
</pre>

De cellen bleken exact op gelijke hoogte te staan. Dus moest het aan de tekst-uitlijning liggen.<br />
Heb het vermoeden dat het vierkantje, links van de blauwe link, roet in het eten gooit. Duidelijk te zien is, dat de link, ondanks valign: 'top', lager in de cel staat (zie onder).
Ik kwam op het idee om de bovenste rand om de rechter tabel-cel iets breder te maken, om zodoende de ExtraInfo-tekst te dwingen om iets lager in de tabel-cel te gaan staan.

<pre>
| style="font-size: 90%; valign:top; border: 1px solid darkgray;"|
* [http://carendt.com Tekst uitlijning test]
{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border: 1px solid darkgray; border-top:solid 3px darkgray;" {{!}} {{{ExtraInfo}}} |}}
|-
</pre>

Door daarna in het betreffende test-Sjabloon de overbodige Borders weer te verwijderen en de kleur op 'White' in te stellen, was de bredere Border aan de bovenzijde niet meer zichtbaar. De ExtraInfo-teksten achter de links stonden nu op de juiste plaats (en zijn eventueel later nog anders in te stellen).

<pre>
| style="font-size: 90%; valign:top; border: 1px solid white;"|
* [http://carendt.com Tekst uitlijning test]
{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border-top:solid 3px white;" {{!}} {{{ExtraInfo}}} |}}
|-
</pre>

Kortom, door het simpele toevoegen van
<pre>
border-top:solid 3px white
</pre>
aan de Sjablonen, was het uitlijningsprobleem uit de wereld.

{{Linkssectie begin
|Box= AlleenInfo
}}
{{Linkssectie scheiding}}
{{Linkssectie tussenkop
|Koptekst= Externe website:
}}
{{Link Uitlijning Tekst
|ExtraInfo= Deze tekst is beter uitgelijnd door een truuk met de border.
}}
{{Link conrad
|ExtraInfo= Deze tekst staat nu goed.
}}
{{Link Floodland
|ExtraInfo= Deze tekst staat nu goed.
}}
{{Link Stationsweb
|ExtraInfo= Deze tekst staat nu goed.
}}
{{Linkssectie einde}}

{{Voettekst
|Vorige= Testpagina Externe links
|Volgende= Testpagina Externe links
|VorigeMenu= EDIT
}}

[[Categorie: Beheer]]

← Oudere versie		Versie van 23 okt 2016 om 09:04
Regel 83:		Regel 83:
	}}		}}

−	[[Categorie: ~~Beheer~~]]	+	[[Categorie: Redactie]]

@@ Regel 71: / Regel 71: @@
 |ExtraInfo= Deze tekst staat nu goed
 }}
-{{Link Stationsweb-Meerkeuze
+{{Link Algemeen-Meerkeuze
-|Volgnr= 1
+|Volgnr= 259
-|ExtraInfo= Deze tekst staat nu goed.
+|ExtraInfo= Veel informatie over stations.
 }}
 {{Linkssectie einde}}

@@ Regel 63: / Regel 63: @@
 |ExtraInfo= Deze tekst is beter uitgelijnd door een truuk met de border.
 }}
-{{Link conrad
+{{Link Conrad-Meerkeuze
 |ExtraInfo= Deze tekst staat nu goed.
 }}
 {{Link Algemeen-Meerkeuze
 |Volgnr= 44
-|ExtraInfo= Avontuur in miniatuur (Huib Maaskant)
+|ExtraInfo= Deze tekst staat nu goed
 }}
 {{Link Stationsweb-Meerkeuze

@@ Regel 66: / Regel 66: @@
 |ExtraInfo= Deze tekst staat nu goed.
 }}
-{{Link Floodland
+{{Link Algemeen-Meerkeuze
-|ExtraInfo= Deze tekst staat nu goed.
+|Volgnr= 44
 }}
 {{Link Stationsweb-Meerkeuze

@@ Regel 1: / Regel 1: @@
 {{Koptekst
-|Vorige= Testpagina Externe links
+|Vorige= Overzicht Externe links
-|Volgende= Testpagina Externe links
+|Volgende= Overzicht Externe links
 |VorigeMenu= EDIT
 |Auteur= Redactie
@@ Regel 76: / Regel 76: @@
 {{Voettekst
-|Vorige= Testpagina Externe links
+|Vorige= Overzicht Externe links
-|Volgende= Testpagina Externe links
+|Volgende= Overzicht Externe links
 |VorigeMenu= EDIT
 }}
 [[Categorie: Beheer]]

@@ Regel 11: / Regel 11: @@
 ===== Kolom-uitlijning 'ExtraInfo' bij Linkssectie. =====
-We hadden al vanaf het begin het probleem dat de ExtaInfo-tekst niet goed verticaal uitgelijnd was met de er voor staande link-tekst. Heb destijds (medio 2013) in de sjablonen de 'valign' aangepast. Toen was het probleem wel minder geworden, maar helemaal wegkrijgen lukte niet. Blijkbaar be&iuml;nvloeden de interne- en externe link instellingen elkaar.
+We hadden al vanaf het begin het probleem dat de ExtaInfo-tekst niet goed verticaal uitgelijnd was met de er voor staande link-tekst. Heb destijds(medio 2013) in de sjablonen<br />
 ===== Opnieuw hetzelfde probleem bij de nieuwe Externe Links-methode =====
-Bij de nieuwe methode om Externe links te plaatsen (sinds 15-11-2015), trad ook hetzelfde probleem met de verticale uitlijning op. Door in de nieuwe Sjabloon de valign van de link op 'top' te zetten en de valign van de ExtraInfo-tekst op 'bottom', was het hoogteverschil bijna nihil in het 'Bewerking ter controle bekijken'-scherm. Wanneer je echter op 'Opslaan' klikte, bleek echter dat de ExtraInfo-tekst toch weer iets naar boven verschoven was.
+Bij de nieuwe methode om Externe links te plaatsen (sinds 15-11-2015), trad ook hetzelfde probleem met de verticale uitlijning op. Door in de nieuwe Sjabloon de valign van de link<br />
 Ik besloot om de rand om de tabel-cellen zichtbaar te maken, om te zien of het probleem eventueel door niet gelijk staande tabel-cellen veroorzaakt werd.
@@ Regel 26: / Regel 29: @@
 De cellen bleken exact op gelijke hoogte te staan. Dus moest het aan de tekst-uitlijning liggen.<br />
-Heb het vermoeden dat het vierkantje, links van de blauwe link, roet in het eten gooit. Duidelijk te zien is, dat de link, ondanks valign: 'top', lager in de cel staat (zie onder).
+Heb het vermoeden dat het vierkantje, links van de blauwe link, roet in het eten gooit. Duidelijk te zien is, dat de link, ondanks valign: 'top', lager in de cel staat (zie onder). Ik kwam op het<br />
-Ik kwam op het idee om de bovenste rand om de rechter tabel-cel iets breder te maken, om zodoende de ExtraInfo-tekst te dwingen om iets lager in de tabel-cel te gaan staan.
+idee om de bovenste rand om de rechter tabel-cel iets breder te maken, om zodoende de ExtraInfo-tekst te dwingen om iets lager in de tabel-cel te gaan staan.
 <pre>
 | style="font-size: 90%; valign:top; border: 1px solid darkgray;"|
 * [http://carendt.com Tekst uitlijning test]
-{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border: 1px solid darkgray; border-top:solid 3px darkgray;" {{!}} {{{ExtraInfo}}} |}}
+{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border: 1px solid darkgray; border-top:solid 2px darkgray;" {{!}} {{{ExtraInfo}}} |}}
 |-
 </pre>
-Door daarna in het betreffende test-Sjabloon de overbodige Borders weer te verwijderen en de kleur op 'White' in te stellen, was de bredere Border aan de bovenzijde niet meer zichtbaar. De ExtraInfo-teksten achter de links stonden nu op de juiste plaats (en zijn eventueel later nog anders in te stellen).
+Door daarna in het betreffende test-Sjabloon de overbodige Borders weer te verwijderen en de kleur op 'Transparant' (=achtergrondkleur) in te stellen, was de bredere Border<br />
 <pre>
 | style="font-size: 90%; valign:top; border: 1px solid white;"|
 * [http://carendt.com Tekst uitlijning test]
-{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border-top:solid 3px white;" {{!}} {{{ExtraInfo}}} |}}
+{{#if: {{{ExtraInfo|}}} | {{!}} style="font-size: 95%; valign:bottom; border-top:solid 2px transparant;" {{!}} {{{ExtraInfo}}} |}}
 |-
 </pre>
@@ Regel 47: / Regel 51: @@
 Kortom, door het simpele toevoegen van
 <pre>
-border-top:solid 3px white
+border-top:solid 2px transparant;
 </pre>
 aan de Sjablonen, was het uitlijningsprobleem uit de wereld.