Tekst met opsommingstekens raakt na publicatie op het web slecht uitgelijnd

[Beewee]

Hoihoi,

Ik ben hier net nieuw en zit met een wat lastig probleem, waarvoor ik op dit forum nog geen oplossing heb kunnen vinden.

Het gaat om het volgende: Ik heb een site gemaakt met Web easy 8, en da's prima gelukt. Maar in mijn content heb ik op een aantal plekken opsommingen gemaakt, waarvoor ik, natuurlijk, opsommingstekens heb gebruikt. Echter: nadat ik de site had gepubliceerd bleek dat de tekst achter de opsommingstekens niet meer goed uitgelijnd was. Niet dat de boel vreselijk schots en scheef staat, maar gewoon: alle eerste letters staan niet meer helemaal recht onder elkaar. Ik heb van alles geprobeerd om dit aan te passen, maar het lukt niet. Uiteindelijk heb ik ervoor gekozen om de opsommingstekens maar weg te halen en alle regels simpelweg gewoon helemaal links te laten beginnen.

Hoewel de site er nu best goed uitziet vind ik dit toch hinderlijk, en mijn man helemaal ('t is de site van zijn bedrijf).

Iemand bekend met dit probleem?

 

[Martindg]

Hallo,

Wat je kunt proberen is de Compatibiliteitsweergave te gebruiken. Dit is een functie voor websites die voor oudere browsers geschikt zijn.
Om de Compatabileitsweergave inteschakelen, klik je boven aan in de adres balk op een gescheurt documentje. Of klik in het menu Extra's
op de knop. Deze functie staat niet op alle websites aan, misschien dat dit ook op deze website het geval is.
Maar je kunt het altijd proberen.

Mvg,

Martin de Groot

 

[Beewee]

Hoi Martin,

Dank je voor je antwoord. Probleem is, ik weet dit wel, maar dat geldt niet voor iedereen. Dus, als iemand die dit niet weet mijn site bezoekt, zal hij/zij gewoon de niet uitgelijnde tekst zien en dit slordig vinden. Da's geen aanbeveling. En ik vroeg me dus af of ik het bij het maken van de pagina al kon voorkomen.


Misschien heb ik een site gemaakt met een programma dat vooral voor oudere browsers geschikt is? Ik heb geen idee hoe je Web Easy 8 moet beoordelen in dit opzicht- ik vind het een redelijk goed te gebruiken programma.

 

[csshunter]

Hoi Beewee,
Het beste is inderdaad om de weergave van een website niet afhankelijk te laten zijn van de browser-instellingen van de bezoeker. Die moet alleen prettig kunnen surfen!

Dat betekent dus, dat er in de code van de gebouwde site ingegrepen moet worden om alle regels achter een rijtje opsommingstekens goed uitgelijnd te krijgen.
Hoe ze het in WebEasy-8 bekokstoofd hebben, weet ik niet. Eigenlijk hoort het gewoon goed te gaan in alle browsers.

• Vraag 1: Heb je een link naar een pagina waarop het verschijnsel te zien is?
  Dan kunnen we zien wat er precies aan de hand is, en wat daarvan de oorzaak is.
  
  
• Vraag 2: Zit er in WebEasy-8 een venster waarin je de code-weergave kunt zien? (uit hun reclame kan ik niet halen of dat zo is).
  Als dat kan, is een correctie waarschijnlijk het makkelijkst (anders moet het eventueel via een omweg).

Met vriendelijke groet,
CSShunter

 

[Beewee]

Hoi Csshunter,

Dank je voor je reactie.
Momenteel heb ik geen link naar een pagina waarop het mis is (ik heb na publicatie simpelweg online alle opsommingstekens weggehaald op zo'n manier dat de tekst goed leesbaar bleef en er goed uitzag), maar ik zal zien of ik er eentje kan maken op een ander domein, dat zou wel moeten lukken. Mijn "echte" site waag ik hier niet aan. Overigens, je kunt bij het maken van een site met Web Easy ook telkens dit soort dingen controleren door een websitevoorbeeld te maken. Ook daarbij waren er telkens problemen met de uitlijning, die ik even hardnekkig heb opgelost. Maar bij de uiteindelijke publicatie was het toch weer hommeles. En dat liet zich online niet meer regelen.

Een codeweergavevenster heb ik in Web easy nog niet ontdekt, maar zal ik ook naar kijken. Ik heb nog wat meer geknutsel te doen, dus kan even duren.

Groeten,

Beewee

 

[Beewee]

Hoihoi,

Daar was ik weer. Ik heb gezocht, maar een codeweergavevenster heb ik niet ontdekt in Web Easy.

Ondertussen heb ik wel een proefpagina gemaakt en geüpload naar mijn privéhomepage, waarop het probleem met de uitlijning zichtbaar is, da's http://home.kpn.nl/rowaa033.1/ Misschien dat jij/ jullie hier kunnen zien wat er mis is.

Met vriendelijke groeten,

Beewee

 

[Naarling]

Is dat serieus de enige manier waarop webeasy je een lijst lat maken? Het probleem is dat je daar een echte lijst hebt (een <ul met daarin <li>) maar een soort gesimulerde lijst van paragrafen en spans, het is dan ook niet vreemd dat dat niet goed werkt. Als dit inderdaad de enige manier is waarop webeasy lijsten opbouwt dan denk ik dat je beter naar ander gereedschap kunt gaan zoeken. Kompozer schijnt best goed te zijn en is gratis.

Een codeweergavevenster heb ik in Web easy nog niet ontdekt,

Als dat er inderdaad niet is is dat nog een reden om over te stappen op iets anders.

 

[Beewee]

Ahum.

Door voortschrijdend inzicht (en wat lef) ben ik er zonet wèl in geslaagd om in de "echte"site opsommingstekens in te voeren. Netjes uitgelijnd.

Pfffffffffffff. Maar blijft natuurlijk het probleem van het ontwerpen.

Met vriendelijke groeten,

Beewee

 

[Beewee]

O, naarling, thanx dat je zo snel ff hebt gekeken. Ik denk inderdaad dat ik ga overstappen op ander gereedschap. Het stomme is, Web Easy kan best wel veel en is heel toegankelijk in het gebruik. Ik vind alleen de instructies zo slecht. Het kan best zijn dat ik iets verkeerd heb gedaan waardoor er zo'n "nep"opsomming is ontstaan, maar dan zou ik toch in het programma zelf moeten kunnen zien wat er foutgegaan is.

Maar goed- ik ga weer verder met online aanpassen van mijn overige opsommingen.En daarna verder met het volgende probleem- het wegvallen van als afbeelding opgeslagen tekst.

Vriendelijke groeten,

Beewee

 

[Naarling]

En daarna verder met het volgende probleem- het wegvallen van als afbeelding opgeslagen tekst.

Tekst als afbeelding opslaan is sowieso niet handig, onder andere omdat zoekmachines het niet kunnen zien, waardoor je site moeilijker te vinden wordt, zeker voor een bedrijfswebsite niet handig.

 

[csshunter]

Hoi Beewee,
Woeps! Als ik je proefpagina bekijk, zie ik meer rariteiten & slechtigheden van WebEasy tevoorschijn komen. :shocked:
Bv.:

• Er wordt een Doctype "html4.01-Transitional" gebruikt. Dat is nogal uit de tijd. Vanaf eind 1999 wordt de "Strict" variant aanbevolen (op een enkele uitzondering na) voor de beste standaarden en de beste crossbrowser-resultaten.
• Alle blokken zijn er in gezet met een absolute positie en hebben een vaste hoogte. Dat staat garant voor uit elkaar vallen van de layout zodra je met dezelfde css meer tekst in een blok gaat zetten, of wanneer de bezoeker een groter letterformaat in zijn/haar browser instelt dan waarop de pagina gemaakt is.
• In andere browsers dan Internet Explorer kan de bezoeker de lettergrootte niet naar wens/behoefte instellen.
• De css is opgesplitst in een css-bestand voor de site als geheel, en een css-bestand voor de pagina in kwestie. Het lijkt er op dat WebEasy telkens die pagina-css gaat aanpassen als je iets in de pagina gaat veranderen. Dat is puur onhandig, want dan kan je geen universele layout gebruiken voor de hele site.
• Behalve de css in de css-bestanden zijn er ook nog "inline styles" (stijl-eigenschappen in de html zelf) opgenomen. Dat hoort niet: alle css hoort bij elkaar in een css-bestand, en moet niet gemixt worden met opmaak-eigenschappen in de html.
• De paarse achtergrond van de kop zit in een ander (onafhankelijk!) blok dan de koptekst zelf.
• In Internet Explorer (IE7, IE8 en IE9), Chrome en Safari komen nu de opsommingstekens goed uit de verf en klopt de uitlijning van de tekst er achter. Maar niet in Firefox en Opera, daar gaat het nog steeds mis:

• Alle maten zijn opgegeven in pt ("punten"). Dat is een maateenheid uit de drukkerswereld, en browsers moeten dan steeds gaan afronden om er de pixel-maten (px) op het scherm van te maken. Daarmee worden onnauwkeurigheden binnengehaald in de layout, en kunnen browsers allerlei verschillen gaan opleveren door een net iets andere afronding (afronden doen ze niet allemaal op precies dezelfde manier).
• Ook alle letterformaten zijn opgegeven in pt. Dat hoort in em's te gebeuren, dan kan de bezoeker met IE zo nodig ook opschalen. Maar ik snap wel waarom ze dat gedaan hebben: dan kan in elk geval in IE de opmaak niet bij het minste geringste uit elkaar vallen!
• Er zitten maffe/foute "mso" coderingen in de html (waarbij de gebruikte classes overigens niet in de css terugkomen!). Nu staat "mso" voor MS Office. Ofwel WebEasy heeft dat er in gegooid (fout), ofwel je hebt stukken tekst ingeplakt vanuit een Word-bestand en dan heeft WebEasy dat niet gecorrigeerd (ook fout). In elk geval: de html-validator protesteert terecht, het levert geen valid html op.
• Er zit een lege <div>&nbsp;</div> in om een afstand te creëren. Dat is html-vervuiling, en hoort met css te gebeuren.
• De uitlijning van het paarse blok en het blauwe blok aan de linkerkant is niet goed. Moet je in WebEasy de blokken soms op hun plaats brengen door slepen in een WhatYouSeeIsWhatYouDon'tGet-venster? Als er geen code-weergave is, kan je dat dan niet corrigeren!

En dan is dit nog maar een kleine pagina met een weinig ingewikkelde opmaak...

Kortom: WebEasy8 mag dan wel makkelijk lijken, maar of het z'n geld waard is voor een goede site???

Advies: ik sluit me aan bij Naarling; er is wat meer html- en css-kennis voor nodig, maar met KompoZer kan je veel betere sites maken (en onderhouden)!

Met vriendelijke groet,
CSShunter

 

[Beewee]

Ja, Naarling
(vanwaar toch deze forumnaam...je klinkt heel vriendelijk???)...en achter dit brokje informatie kwam ik pas na publicatie. Ik zal weer aan de bak moeten. Gelukkig had ik het maar met een klein deel van de tekst gedaan. Ik wil ook nog een Linkedin button maken, kijken of dat lukt (zou wel moeten gaan). Ik ga eerst maar 's ff oefenen met m'n proefsite, en gelukkig weet ik dit al wel: zet nooit een exacte kopie van je site op een ander domein. Eerst maar weer aan de slag met Web Easy (gewoon om te kijken of ik het voor elkaar krijg) en dan ook met andere gereedschappen, Kompozer, of online...Het houdt me wel lekker van de straat moet ik zeggen. Wel leuk om zoveel te leren.

Ondertussen niemand die Web easy zo goed kent dat die weet hoe het probleem met de tekstopmaak gewoon meteen bij het ontwerpen voorkomen kan worden?

Met vriendelijke groeten,

Beewee

 

[Beewee]

O CSShunter,

We hadden elkaar net gekruist. Nou, jouw commentaar doet de deur dicht. Geen Webeasy meer voor mij. Ik ga lekker andere designprogramma's proberen, zijn ze helemaal betoeterd. Jammer dat ik dit niet eerder wist, maar geen man overboord.
Ik moet dan wel nog wat leren over HTML, weten jullie nog een link voor een handige en liefst gratis cursus?
Nogmaals bedankt, en vriendelijke groeten,

Beewee

 

[Naarling]

http://www.web-garden.be/cursus-html/cursus-html/ In het Nederlands
http://www.w3.org/community/webed/wiki/Main_Page in het Engels
Beide geven zowel CSS (gebruikt om de site z'n uiterlijk te geven) als HTML en zijn gratis.

Er wordt een Doctype "html4.01-Transitional" gebruikt. Dat is nogal uit de tijd. Vanaf eind 1999 wordt de "Strict" variant aanbevolen (op een enkele uitzondering na) voor de beste standaarden en de beste crossbrowser-resultaten.

Ik zie eigenlijk geen reden om iets anders dan het HTML5 doctype te gebruiken. Het werkt met iedere browser en is lekker kort (<!DOCTYPE html>) wat de kans op fouten vermindert. Bovendien is het behoorlijk vergevingsgezind en is ook de foutafhandling in de standaard opgenomen wat de kans op verschillende weergave in verschillende browsers bij foute code verkleint (al is het uiteraard beter om gewoon geen fouten te maken).

 

[csshunter]

@Naarling:
Ja, het html5-doctype kan ook. Maar "Zachte heelmeesters maken stinkende wonden". Oftewel; uit pedagogisch oogpunt vind ik Strict (liefst xhtml) het beste om mee te beginnen: eerst goed weten hoe het hoort; daarna kan je eventueel de teugels laten vieren (maar dan zal het niet meer hoeven).

• De webrichtlijnen.nl schrijven ook nog steeds html4.01 of xhtml1.0 voor (R-pd.2.1), en daarvan dan de Strict-variant (R-pd.2.4).

@Beewee:
Hoi Beewee,
Je bent al bekeerd, zie ik.

Ik had intussen 'ns even een trial-versie van die WebEasy8-Professional gedownload.
En ja hoor:

• Er is géén code-view, dus je kunt niets met de hand bijstellen.
• Hij maakt altijd 2 css-bestanden aan.
• Alle blokken worden er in gezet met absolute posities.
• Hij maakt geen echte html-pagina's, maar slaat de gegevens op in een eigen .alb format. Pas na "Export to HTML" wordt er html van gemaakt...
• De preview is niet hetzelfde als het uiteindelijke resultaat.
• Hij maakt van gekleurde vlakken een gif-bestand ipv een blok met een html-kleur.
• Positioneren moet met slepen (er is wel een in te stellen "grid" waar mee je ze gelijk kunt krijgen).
• Hele rare manier van structureren van de pagina.
• Er moet een vaste pagina-hoogte worden opgegeven.
• Enz. enz.

Nou, als dat Professional is, dan breekt mijn hele klompenverzameling! :evil:
Dat wordt dus heel snel de-installeren. :d

• Voor een alternatieve pagina: blokjes-en-opsommingen.htm
• Zie broncode voor structuur en css.
• Voor het leerwerk: zie de links in de handtekening van Naarling. En ook bv. het Groene Boek, de Gouden Regels, of de hele boekenkast van de CSS-Wiki (momenteel even uit de lucht, weet niet waarom).

Kan je weer even voort!

Met vriendelijke groet,
CSShunter

 

[Naarling]

Ja, het html5-doctype kan ook. Maar "Zachte heelmeesters maken stinkende wonden". Oftewel; uit pedagogisch oogpunt vind ik Strict (liefst xhtml) het beste om mee te beginnen: eerst goed weten hoe het hoort; daarna kan je eventueel de teugels laten vieren (maar dan zal het niet meer hoeven).

Dat is inderdaad een punt. Maar er moet toch een manier zijn om HTML5 documenten automatisch op een strikte manier na te kijken.

• De webrichtlijnen.nl schrijven ook nog steeds html4.01 of xhtml1.0 voor (R-pd.2.1), en daarvan dan de Strict-variant (R-pd.2.4).

Eigenlijk is dat raar, HTML5 biedt veel meer semantische mogelijkheden dan zijn voorgangers. Een menu hoeft bijvoorbeeld niet meer een normale lijst met class="menu" te zijn, er is gewoon een <nav> element, voettekst kan in de <footer>, etc. Wat toegankelijkheid betreft kan dat alleen maar goed zijn, zodra de programma's die blinden en slechtzienden gebruiken er mee om leren gaan althans, maar het kan geen kwaad nieuwe sites daar alvast op in te stellen. Ook de zoekmachinebots houden van semantiek dus voor de vindbaarheid van informatie kan het ook geen kwaad.

Ik vraag me af wanneer die richtlijnen voor het laatst zijn bijgewerkt. Er staat bijvoorbeeld:

Toepassingen op het Web bewegen richting XML. Het nu al gebruiken van XHTML in plaats van HTML maakt een eventuele toekomstige overgang van een website eenvoudiger.

Wat al een aantal jaren niet meer waar is, de ontwikkeling van xhtml 2.0 is in 2009 gestopt (en was toen al stervende), HTML5 is waar alles zich nu naar toe beweegt. Zoeken naar HTML5 op de webrichtlijnen site levert ook al niets op, ik vermoed dat ze daar toch een beetje achterlopen.

EDIT: Niet dat het kwaad kan om je site in html 4.01 of xhtml op te bouwen, als je de site netjes gemaakt hebt is een eventuele omschakeling naar HTML5 een kwestie van het doctype aanpassen.

 

[csshunter]

@Naarling:
Hoi-hoi,

De webrichtlijnen.nl schrijven ook nog steeds html4.01 of xhtml1.0 voor
Inderdaad heeft html5 grote semantische voordelen. De webrichtlijnen zijn echter nogal behoudend, om een zo groot mogelijk publiek (lees: browserversies) te kunnen bedienen. Verder gaat men daar veiligheidshalve steeds uit van goedgekeurde standaarden, en html5 is nog een "Working Draft" (laatste versie momenteel: maart 2012); met als waarschuwing onderaan de pagina een sticky note:

Ook de html-validator geeft bij html5 een waarschuwing af: "The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies."

Alles is dus nog in beweging, en tot er een meer definitieve CR-versie is waar de browserfabrikanten (die in de w3c-werkgroep zitten!) het over eens zijn, plus de browsers die versie daadwerkelijk ondersteunen, zullen de webrichtlijnen.nl denkelijk hun kiezen op elkaar houden. - Ik geef ze niet helemaal ongelijk.

==========

Ik vraag me af wanneer die richtlijnen voor het laatst zijn bijgewerkt. ... enz.

Helemaal gelijk, dwz zeker wat betreft die toelichting "Alles over xhtml 1.0". Dat is inderdaad zwaar verouderde info. En inderdaad komt er met een zoekopdracht "html5" in de webrichtlijnen helemaal niets naar boven (en ook niet bij "html 5"). Foei!

• Google vindt er trouwens wel een paar: deze en deze.

 

[Naarling]

Wat ik begrepen heb is dat HTML5 bedoeld is als een levende, constant groeiende, standaard, die waarschuwing zal er dus nog wel een even blijven staan. Dat betekent niet dat het doctype en de oudere tags niet al gebruikt kunnen worden. Als het inderdaad te onstabiel zou zijn voor praktisch gebruik dan zouden de facebooks en googles het niet gebruiken.

 

[csshunter]

Ja, klopt ook weer.
Nu zijn de googles, facebooks enz. er meestal niet vies van om er een portie javascript tegenaan te gooien om onwillige browsers in het html5-gareel te dwingen.
Terwijl de webrichtlijnen uitgaan van gelaagd bouwen, dwz een site moet ook 100% werken als javascript uit staat. - Anders zou ik het ook niet weten.

 

[Beewee]

Dag lieve Naarling en CSShunter,

Jullie conversatie kan ik inmiddels niet meer volgen . Web easy gaat er bij mij uit, dat is duidelijk (al zal ik maar niet meteen gaan de-installeren CSShunter, want ik heb nu een site die goed genoeg is for the moment en niet uit de lucht mag, en waarvan ik dus de back-up moet houden), maar ik vraag me af of ik nu gewoon lekker fijn meteen met Kompozer aan de slag kan, of dat ik eerst iets ingewikkelds moet doen met HTML 5 of zo???? Ik zie ff door jullie ongetwijfeld vakkundige bomen het bos niet meer???

Verder alles goed hier hoor. Ben reuze blij dat ik lid ben geworden van dit forum.
En ga vast nog heel veel vragen stellen.

Groetjes!

Beewee