tekst in master en hoofdmenu wordt in de browser op een ander plek weergegeven

[marloes]

Ik ben de website van ons koor aan het bijwerken. Daar heb ik in eerdere versies nooit problemen mee gehad. Maar in versie 21 van de wysiwyg web builder worden in de browser (zowel in de voorbeeldweergave van de editor als na het exporteren) de tekst bovenaan de pagina ("gemengd koor mask") en het hoofdmenu veel hoger weergegeven dan ze in het ontwerp staan. Via https://maskmaarssen.nl is te zien waar het zou moeten staan; een export met versie 20. En via het voorbeeld project https://mmzone.nl/parkeren-ml/maskmaarssen-demo.wbs dat ik gemaakt heb, met daarin alleen de homepagina, is te reproduceren hoe het voorbeeld in de browser en de export eruit zien in versie 21 van de editor. Hoe los ik dit op?

[Pablo]

Ik zie niet waar ik precies moet kijken om het probleem te zien Voor mij ziet het er goed uit.
Kun je iets specifieker uitleggen wat er volgens jou mis gaat?
Weet je zeker dat het niet aan de browser ligt?

[marloes]

Dankjewel voor de snelle reactie! Ja ik weet eigenlijk zeker dat het niet aan de browser ligt. Want voorheen werd het gewoon goed weergegeven in zowel Edge als Firefox. Op deze eerste afbeelding zie je de bovenkant van de website zoals deze weergegeven wordt in de browser, na export in webuilder versie 20, zo is hij bedoeld (en zo staat hij nu ook online): https://mmzone.nl/parkeren-ml/browser01versie20.jpg. Let op de positie van de items met de pijltjes erbij (titel en hoofdmenu). In de volgende afbeelding is te zien dat het ontwerp in webuilder 21 goed (hetzelfde) eruit ziet: https://mmzone.nl/parkeren-ml/ontwerp02versie21.jpg. Maar als ik het project exporteer staan in de browser de items met de pijlen ineens een stuk hoger: https://mmzone.nl/parkeren-ml/browser02versie21.jpg. Wat verder opvalt is dat de tekst van de items er qua opmaak anders uitziet en in het hoofdmenu de bovenkant van de letters weg valt. Een ander lettertype of een nieuw tekstmenu invoegen helpt niet. Dan krijg je hetzelfde effect. De letters worden groter weergegeven in de browser lijkt het. Maar de hoogte van het item past zich in het ontwerp automatisch aan; ik kan het item niet hoger maken (wel langer en dat is ook nodig). Maar door de grotere weergave in de browser is het item niet hoog genoeg denk ik en valt bovenaan een deel van de tekst weg. Hopelijk ben ik zo wat duidelijker. Voor de zekerheid ook nog een keer de link naar het demo project: https://mmzone.nl/parkeren-ml/maskmaarssen-demo.wbs .

[Pablo]

Het is voor mij lastig te zien hoe het er in de software uitziet omdat je niet alle afbeeldingen hebt gedeeld.
Dus ik zie alleen maar tekst.

Wel zie ik dat je 'font-finetuning' op 14 pixels hebt ingesteld!
Heb je dit bewust gedaan?
Dit betekent dat er 14 pixels bij de font size worden opgeteld wanneer je de pagina publiceerd.
Hierdoor ziet het er dus zowiezo anders uit dan in de software.

[marloes]

Het is voor mij lastig te zien hoe het er in de software uitziet omdat je niet alle afbeeldingen hebt gedeeld.
Dus ik zie alleen maar tekst.

Daarom had ik er screenshots van gemaakt. Ik weet niet hoe ik de afbeeldingen in een demo bestand moet delen. De items verwijzen naar bestanden op mijn computer. Maar je kunt waarschijnlijk wel aan de tekst zien dat de kop en het hoofdmenu op een andere plek terecht komen?

Wel zie ik dat je 'font-finetuning' op 14 pixels hebt ingesteld!
Heb je dit bewust gedaan?
Dit betekent dat er 14 pixels bij de font size worden opgeteld wanneer je de pagina publiceerd.
Hierdoor ziet het er dus zowiezo anders uit dan in de software.

Nee dat heb ik zeker niet bewust gedaan. Ik kan alleen niet vinden waar ik deze instelling nog meer staat ingesteld dan in de eigenschappen van het item met de titel Gemengd koor MASK (dat was zeker niet de bedoeling en heb ik nu verwijderd). Ben je het ook nog op andere plekken tegen gekomen?

[Pablo]

Maar je kunt waarschijnlijk wel aan de tekst zien dat de kop en het hoofdmenu op een andere plek terecht komen?

Ja, maar het is wel veel lastiger voor mij om je zo te helpen.

Je kunt het demo project via 'Opslaan als' opslaan as zip, dan worden alle afbeelden er ook bij gedaan.

Ik heb verder niet gekeken of dit ook bij andere objecten het geval is.

[marloes]

Oké, dat had ik nog nooit gedaan, weer wat geleerd . Ik heb het zip bestand online gezet: https://mmzone.nl/parkeren-ml/maskmaarssen-demo.zip. Hopelijk helpt dat. Super fijn dat je zo mee denkt!

[Pablo]

Bedankt voor de gegevens.

Omdat je gebruik maakt van een stijl kun je de offset het snelste aanpassen door dit =toe te voegen aan de custom stijl (in de stijl manager):

Code: Select all

vertical-align: text-top;

De volledige regel wordt dan:

Code: Select all

display: inline; vertical-align: text-top;

Ook moet je de font-finetuning van het tekst object aanpassingen, De standaard waarde is '0' (ipv 40)

Ik weet trouwens niet of dit wel specifiek met WWB1 te maken heeft.
Als je verdere hulp nodig hebt deel dan het WWB20 project zodat ik het verschil kan zien.