Weergave CSS voorbeeldsites in Kompozer raakt door elkaar

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
cr001
Berichten: 5
Lid geworden op: 22 oktober 2010, 13:00
    Windows XP Firefox

Weergave CSS voorbeeldsites in Kompozer raakt door elkaar

Bericht door cr001 »

Als relatieve beginner met Kompozer ben ik nu al een paar keer vastgelopen in het bouwen van een site op basis van mooie CSS-modellen van de site Open Webdesign. Het gebeurt niet bij alle voorbeelden, maar uiteraard vooral bij de exemplaren die ik mooi vind en als basis wil gebruiken (dat betreft vaak exemplaren met 3 kolommen).
Op zich lijkt het mij een probleem dat anderen ook moeten hebben ervaren, maar ik kon de oplossing nog niet bij de vragen op het forum vinden.

Na het downloaden van de site en het openen in Kompozer is er nog niets aan de hand. Alles ziet er prima uit.
Wanneer ik deze sites begin te bewerken in Kompozer en weer opsla, wordt de mooie opbouw door elkaar gegooid en verschijnen de kolommen niet meer NAAST elkaar maar ONDER elkaar.
Dus de kolom rechts met b.v. nieuwsberichten verschuift helemaal naar onderen en komt dan onder de tekst van de body. Wat ik niet goed begrijp is hoe dit wordt veroorzaakt. Ook als ik maar 1 letter heb gewijzigd maar de site alleen opnieuw heb opgeslagen, gebeurt het al. Het is dus blijkbaar een standaard-instelling in Kompozer die de instelling van het betreffende CSS overschrijft.
Ik zag al een bericht waarin de kolom-overflow werd besproken. Heeft dat er iets mee te maken?

Wie kan mij verder helpen?

Ik gebruik Kompozer 0.8b3 en een site waar dit bijvoorbeeld optreedt is deze:
http://www.openwebdesign.org/viewdesign ... nloadsdesc
knorretje
Berichten: 204
Lid geworden op: 8 augustus 2010, 11:37
    Windows Vista Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door knorretje »

Hallo cr001,
Als ik op jouw link klik, dan verschijnt er bovenaan een downloadknop voor een bestand multiflex32.zip. Ik heb dit bestand uitgepakt, en twee pagina's geprobeerd te wijzigen met Kompozer 0.7.10. (laatste stabiele versie). Tot nu toe geen enkel probleem met de CSS.
Welke pagina werkt er bij jouw niet? Wat heb je gewijzigd? Heb je het probleem ook met versie 0.7.10?
Wat je ook kunt doen is het CSS bestand openen met een tekstverwerker voor "platte tekst", en kijken wat er precies gewijzigd wordt.
cr001
Berichten: 5
Lid geworden op: 22 oktober 2010, 13:00
    Windows XP Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door cr001 »

Dag Knorretje,
Dank voor je reactie. Ik werkte inderdaad met de nieuwste Nederlandse download van de Kompozersite, die versie 0.8b3. Inmiddels heb ik de oudere 0.7.10 gedownload en daarmee is inderdaad de helft van het probleem weg: weliswaar wordt de pagina in het werkscherm van Kompozer nog wel een rommeltje maar als ik hem met een kleine wijziging heb opgeslagen en daarna met de browser bekijk ziet het er wel goed uit.

In de versie 0.8b3 was het toevoegen van een spatie en daarna opslaan voldoende om het probleem op te wekken, het ging dan met name om pagina met meerdere kolommen. In dit voorbeeld dus o.a. de eerste pagina. De kolommen werden deel onder elkaar maar ook door elkaar geplaatst, een complete puinhoop.

Er moet dus iets in de nieuwe versie zitten dat verkeerd omgaat met de CSS instellingen. Ik zal proberen de "goede" en de "verkeerde" versie met Wordpad te vergelijken en te zien of ik het verschil kan traceren.

Overigens blijf ik nog steeds met een probleem zitten: ik heb nu geen bruikbare Wysiwyg tijdens het bewerken van de pagina's, want daarin plaats Komposer alle kolommen weer onder elkaar (maar gelukkig niet door elkaar, zoals met versie 0.8b3).
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door nirwana »

Hoe staan in jouw Kompozer(s) de HTML-instellingen onder Extra > Voorkeuren > Geavanceerd ?
Dit multiflex-sjabloon gebruikt namelijk een doctype van XHTML Strict:

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Nu kan ik me voorstellen dat als jouw Kompozer bijvoorbeeld een standaard-instelling van HTML4 Strict hanteert dat dan de HTML-code er anders uit gaat zien.

Ik heb het nu ook uitgeprobeerd:
- ik heb de HTML-instelling ingesteld staan op HTML4 Strict
- ik open de index.html in Kompozer 0.8b3
- ik wijzig het woord Multiflex in Multflex
- ik sla de pagina op
- ik open de pagina in Firefox
- et voila, de hele layout is aan gort

Alleen staat in de broncode van de pagina de instelling nog wel gewoon op XHTML1 Strict. Dus mogelijk geldt die instelling in Kompozer alleen voor nieuw aangemaakte webpagina's. Ik ga nu eens de door Kompozer opgeslagen HTML-code vergelijken met de HTML-code vanuit het zip-bestand. Dan ben ik benieuwd wat dit veroorzaakt.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door nirwana »

Ik denk dat ik al een deel van de mogelijke oorzaak gevonden heb: Kompozer blijkt in een unordered list (ul, li) wat linebreaks (<br /> tussen te voegen. Zo stond het in het origineel:

Code: Selecteer alles

                <ul>
                  <li><a href="layout1.html">Layout-1 (1-col)</a></li>
                  <li><a href="layout2.html">Layout-2 (2-col)</a></li>
                  <li><a href="layout3.html">Layout-3 (2-col)</a></li>
                  <li><a href="layout4.html">Layout-4 (3-col)</a></li>
                  <li><a href="layout5.html">Layout-5 (3-col)</a></li>                                    
                </ul>
En dit is wat Kompozer ervan maakt:

Code: Selecteer alles

                <ul>
                  <li><a href="layout1.html">Layout-1 (1-col)</a><br />
</li>
                  <li><a href="layout2.html">Layout-2 (2-col)</a><br />
</li>
                  <li><a href="layout3.html">Layout-3 (2-col)</a><br />
</li>
                  <li><a href="layout4.html">Layout-4 (3-col)</a><br />
</li>
                  <li><a href="layout5.html">Layout-5 (3-col)</a><br />
</li>                                    
                </ul>
Maar goed, ik haal die extra <br />'s weer weg om te zien of ik dan de layout weer goed heb.
Edoch helaas, dat maakt geen verschil. Dus blijkbaar is dat niet de oorzaak van de vernielde layout.

Iets anders wat ik Kompozer af en toe zie doen is het samenvoegen van lege HTML-elementen. Als dit in de originele code staat:

Code: Selecteer alles

<div class="round-border-topleft"></div>
dan maakt Kompozer daar dit van:

Code: Selecteer alles

<div class="round-border-topleft" />
Volgens de regels van XML (en dus ook XHTML ?) is daar op zich niets mis mee. Het is slechts een andere schrijfwijze.

Maar als ik die aanpassingen terugdraai (in een normale tekst-editor), de pagina opsla en in Firefox bekijk dan komt de website-layout weer een beetje terug. Het blijkt dat ik nog een aantal van deze wijzigingen niet ongedaan heb gemaakt. Als ik al dit soort wijzigingen ongedaan heb gemaakt dan is de layout weer helemaal terug ;-)

De moraal van dit verhaal is dat Kompozer dit samenvoegen van de lege tags blijkbaar niet straffeloos mag doen. Want dan blijft er niets van je website-layout over.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door nirwana »

Als ik met deze wetenschap eens op Google ga zoeken dan kom ik het volgende bericht tegen:
http://justinsomnia.org/2005/12/there-a ... mpty-tags/
Daaruit blijkt dat alleen de elementen in die lijst straffeloos mogen worden omgezet. Zoals de schrijver van dat bericht al opmerkt staan de elementen a en img daar niet bij. En div staat daar ook niet bij, dus die elementen had Kompozer niet zomaar in de verkorte vorm mogen schrijven.

Nu herinner ik me inderdaad dat ik zelf wel eens een script-tag heb herschreven in de verkorte vorm en dat de browser daar ook niet goed tegen kon. Dat is in feite eenzelfde geval. Volgens de regels van XML mag je dat zo herschrijven, maar volgens de regels van XHTML blijkbaar dus niet.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door nirwana »

Inmiddels blijkt dat we niet de eerste zijn die dit gedrag van Kompozer ontdekt, want er is ook al een bug voor aangemaakt:
http://sourceforge.net/tracker/?func=de ... tid=853122
Eens kijken of we die bug kunnen aanvullen met wat extra informatie.

De tip die ene patdrummond daar geeft werkt overigens wel: [quote="patdrummond"]After changing doctype to DTD HTML 4.01 Transitional I can now edit using Kompozer[/code]Ik heb dit net uitgeprobeerd door - wederom met een tekst-editor - de bovenste regel in het HTML-bestand te wijzigen in

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Dan is het geen XHTML meer, mag Kompozer niet meer deze elementen herschrijven en gelukkig blijft-ie er dan van af.
Dus als je in het sjabloon die eerste regel aanpast, dan zou het bewerken ook verder goed moeten gaan met Kompozer 0.8b3.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door nirwana »

Inmiddels heb ik ook een opmerking aan dit bugreport toegevoegd (voor wat het waard is).
Hopelijk helpt dit om aan te geven:
- dat er meer mensen zijn die hier last van hebben
- wat er precies fout gaat
- dat dit herschrijven dus blijkbaar niet altijd mag in XHTML

Laten we hopen dat iemand dit gaat oplossen in Kompozer.

Kan iemand overigens controleren of ditzelfde gedrag in Bluegriffon zit ? Mijn Windows 7-systeem heeft namelijk nog altijd problemen met het draaien van Bluegriffon. Ik zie Bluegriffon namelijk nog steeds als de volwaardige opvolger van Nvu en Kompozer en Kompozer zie ik vooral als welkome tussenpaus om diverse bugs in Nvu op te lossen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Bluegriffon

Bericht door nirwana »

nirwana schreef:Kan iemand overigens controleren of ditzelfde gedrag in Bluegriffon zit ? Mijn Windows 7-systeem heeft namelijk nog altijd problemen met het draaien van Bluegriffon. Ik zie Bluegriffon namelijk nog steeds als de volwaardige opvolger van Nvu en Kompozer en Kompozer zie ik vooral als welkome tussenpaus om diverse bugs in Nvu op te lossen.
Ik heb nog eens een recente nightly build van Bluegriffon op mijn Windows7-systeem geprobeerd en die start gelukkig wel goed op. Dat scheelt.
Zo kan ik ook verifiëren dat dezelfde bug gelukkig (nog) niet in Bluegriffon zit.
+1 voor Bluegriffon ;-)

Dat betekent overigens niet dat ik dan Bluegriffon aanraadt om te gebruiken voor je website. Bluegriffon is namelijk nog volop in ontwikkeling en is nog niet vrijgegeven om op een website los te laten. Als je die wilt testen, doe dat dan met een kopie van je webpagina. Zo kun je goed zien waartoe Bluegriffon al in staat is en in welke richting nog extra ontwikkeling moet plaatsvinden.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
cr001
Berichten: 5
Lid geworden op: 22 oktober 2010, 13:00
    Windows XP Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door cr001 »

Beste Martijn,
Prachtig werk heb je verricht. Met mijn beperkte kennis en jouw eerste tips was ik ook al druk aan het experimenteren met de instellingen. Ik probeerde beide versies van Komposer met steeds weer andere instellingen, maar kon inderdaad geen verschil bereiken.

Ik ben blij dat er ook anderen hier tegen aan zijn gelopen. Ik kon me inderdaad ook al niet voorstellen dat ik de eerste was die dit vaststelt, want die voorbeeld CSS-sites zijn toch behoorlijk populair om te verbouwen.
Ik ga jouw laatste tip nu uitproberen en zo hebben we in ieder geval een workaround. Nu hopen dat het de community lukt om het probleem in een volgende release ook inhoudelijk op te lossen.

Mocht je nog iets meer ontdekken dan hoor ik het graag, anders vast mijn dank voor de tips en genomen moeite!

Mvg,
Cr001
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door nirwana »

cr001 schreef:Er moet dus iets in de nieuwe versie zitten dat verkeerd omgaat met de CSS instellingen. Ik zal proberen de "goede" en de "verkeerde" versie met Wordpad te vergelijken en te zien of ik het verschil kan traceren.
Voor het vergelijken van bestanden gebruik ik steevast WinMerge. Daarmee selecteer je eenvoudig 2 versies van een bestand en laat deze vergelijken. Overigens werkt dit programma ook prima met het vergelijken van complete mappen met bestanden.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door nirwana »

cr001 schreef:Mocht je nog iets meer ontdekken dan hoor ik het graag, anders vast mijn dank voor de tips en genomen moeite!
Ik vind dat ik hier al heel wat over heb uitgevonden, dus verwacht niet dat ik hier nog erg veel aan zal toevoegen. Of het moet zijn dat de bug in Kompozer in de toekomst zal worden opgelost.

Maar eerlijk gezegd verwacht ik een overgang van Kompozer naar Bluegriffon als laatstgenoemde voldoende stabiel wordt bevonden. Maar wanneer dat zal zijn is altijd de grote vraag...
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
cr001
Berichten: 5
Lid geworden op: 22 oktober 2010, 13:00
    Windows XP Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door cr001 »

Ik probeer dit nu ook:
nirwana schreef:Inmiddels blijkt dat we niet de eerste zijn die dit gedrag van Kompozer ontdekt, want er is ook al een bug voor aangemaakt:
http://sourceforge.net/tracker/?func=de ... tid=853122
Eens kijken of we die bug kunnen aanvullen met wat extra informatie.

De tip die ene patdrummond daar geeft werkt overigens wel:
patdrummond schreef:After changing doctype to DTD HTML 4.01 Transitional I can now edit using Kompozer[/code]Ik heb dit net uitgeprobeerd door - wederom met een tekst-editor - de bovenste regel in het HTML-bestand te wijzigen in

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Dan is het geen XHTML meer, mag Kompozer niet meer deze elementen herschrijven en gelukkig blijft-ie er dan van af.
Dus als je in het sjabloon die eerste regel aanpast, dan zou het bewerken ook verder goed moeten gaan met Kompozer 0.8b3.
maar ik heb geen idee hoe ik die eerste regel kan benaderen. Ik kan als ik in "bron" werk alles aanpassen, behalve die eerste regel. Via welke weg kom ik daar?
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door nirwana »

Daarom schreef ik ook " - wederom met een tekst-editor -" bij het beschrijven van die aanpassing...

Als je nog een goede tekst-editor zoekt dan kan ik Notepad++ aanraden.
Maar je kunt de pagina ook met Kladblok (Notepad) van Windows openen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
cr001
Berichten: 5
Lid geworden op: 22 oktober 2010, 13:00
    Windows XP Firefox

Re: Weergave CSS voorbeeldsites in Kompozer raakt door elkaa

Bericht door cr001 »

Inmiddels met de aanpassing via Wordpad alweer een paar dagen aan het werk. De oplossing werkt inderdaad uitstekend dus nogmaals dank! :D