ff de draad kwijt, HELP

Nvu, Kompozer en Bluegriffon zijn open source (WYSIWYG) programma's waarmee je een website kunt maken en onderhouden (vergelijkbaar met FrontPage / Dreamweaver).
rich-an
Berichten: 16
Lid geworden op: 24 september 2011, 13:25
    Windows Vista Internet Explorer 8

ff de draad kwijt, HELP

Bericht door rich-an »

Goedendag,

Ik ben Richard en nieuw hier.
Ben momenteel druk bezig met de website van mijn vrouw's winkel.
Deze heb ik gemaakt met NVU.
Het begint ergens op te lijken dus dacht ik zal hem eens uploaden en het resultaat bekijken.
AAAAAHHHHH.

De tekst staat links uitgelijnd terwijl andere delen wel goed staan.(meeste niet)
Al een hoop afgezocht maar kan niet ontdekken wat ik nu fout doe.

Kan iemand mij dit misschien uitleggen?
het gaat om de website http://www.pinokkiowinkel.nl/homeengels.html

BVD
Richard
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Linux Firefox

Re: ff de draad kwijt, HELP

Bericht door nirwana »

Richard,

Allereerst welkom hier op het forum.

Welke tekst staat links uitgelijnd ?
Het valt me wel op dat op de beginpagina het blok met de vlaggetjes erin wat te breed lijkt. Maar misschien was dat wel de bedoeling. Dat kan ik natuurlijk niet voorspellen, want ik weet niet wat precies de achterliggende gedachte is geweest.

Ook neem ik aan dat hetzelfde geldt voor de onderste tekst (footer) van de website, want die heeft ook de neiging om naar links te trekken.

Ik hoop eerlijk gezegd dat de Nieuws-pagina naar een oudere website-versie verwijst, want die ziet er nogal anders uit. Ook is de foto die op die pagina gebruikt wordt veel te groot wat een trage opbouw van die pagina veroorzaakt. Ook is het gebruikte logo op die pagina van een te groot formaat. Maar ik ga er dus vanuit dat dat de oude (huidige) website is en dat die vervangen moet worden door de nieuwe website.

Verder zou ik de verwijzing naar het overzicht op Marktplaats in een nieuw venster openen, want anders ben je een eventuele bezoeker van je website wel weer heel snel aan Marktplaats kwijt. Hetzelfde geldt voor het inloggedeelte voor klanten.
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
    Linux Firefox

Re: ff de draad kwijt, HELP

Bericht door nirwana »

Richard,

Vervolgens ben ik maar eens naar de code van de website gaan kijken. Daarin wordt zowel met div's als met tabellen gewerkt. Dit zijn 2 verschillende technieken om de structuur van een website op te zetten, waarbij de div-techniek zeker (ook richting de toekomst) de voorkeur geniet.

Het is doorgaans het beste om voor 1 van beide technieken te kiezen. Nu staat er in de code een tabel en daaronder staat dan een div met andere opmaakkenmerken. Die div trekt zich uiteraard niets aan van de breedte van die tabel en kan daardoor breder worden dan de tabel.

Daarom zou ik willen proberen om in elk geval de beginpagina van de website met div's op te zetten, zodat dat 1 geheel vormt en je daar straks mee verder kunt. Hiervoor zal ik een kopie van de pagina maken, zodat ik daarin enkele wijzigingen kan aanbrengen. Zodra ik dat zover heb meld ik me wel weer hier.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
rich-an
Berichten: 16
Lid geworden op: 24 september 2011, 13:25
    Windows Vista Internet Explorer 8

Re: ff de draad kwijt, HELP

Bericht door rich-an »

de link is inderdaad van de nieuwe website, de andere die je noemt is oud en moet vervangen worden.
Omdat dit inderdaad een rommeltje is.
Dacht dit op te lossen door met een nieuwe site te beginnen en alles netjes uit te lijnen.
Maar helaas....
Dat van die tabellen en div....... ik heb alleen tabellen toegevoegd om ze uit te kunnen lijnen dacht ik.
Wat die div precies en inhoud weet ik niet
Zoals je al lees........... ik ben een leek :-)
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: ff de draad kwijt, HELP

Bericht door nirwana »

Richard,

En daar is je website alweer met een kleine make-over: www.mozbrowser.nl/web/pinokkio/home_en_nieuw.html
Deze opzet bevat volgens mij nog altijd jouw ideeën, maar ziet er wat mij betreft wat strakker uit.

Overigens is dit vooral een eerste opzet, want aan het onderste gedeelte (footer) heb ik nog weinig gedaan. Ook kunnen er nog allerlei dingen aan gewijzigd worden als je vindt dat iets toch net even wat anders moet (bijvoorbeeld om het nog wat duidelijker te maken).

Maar ik ben wel benieuwd wat je van deze nieuwe opzet vindt en of dit een beetje is wat je in gedachten hebt. Daarom heb ik deze versie maar alvast online gezet, zodat je die alvast kunt bekijken.
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: ff de draad kwijt, HELP

Bericht door nirwana »

Nu ziet de footer van de website er ook al wat beter uit... (met weer de afbeeldingen van Facebook en Twitter erbij, maar ditmaal zijn deze afbeeldingen ook echt in klein formaat).
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
rich-an
Berichten: 16
Lid geworden op: 24 september 2011, 13:25
    Windows XP Internet Explorer 8

Re: ff de draad kwijt, HELP

Bericht door rich-an »

helemaal goed !
ziet er inderdaad strakker uit.
Maar als ik hem open staat de pagina zelf nog aan de linkerkant, of is dit het verschil met IE en het beeldscherm?

Maar hier kan ik inderdaad wel verder mee aan de gang, gebruik ik hem als voorbeeld pagina.
THANKS.
Gebruikersavatar
nirwana
Beheerder
Berichten: 11432
Lid geworden op: 19 september 2003, 5:09
    Windows 7 Firefox

Re: ff de draad kwijt, HELP

Bericht door nirwana »

rich-an schreef:helemaal goed !
ziet er inderdaad strakker uit.
Maar als ik hem open staat de pagina zelf nog aan de linkerkant, of is dit het verschil met IE en het beeldscherm?
Aaargh, het zal IE ook eens niet zijn... De nachtmerrie van iedereen die zich wel eens met webdesign bezig houdt. Om de pagina zo goed mogelijk op te zetten, ontwikkel en test ik deze met Firefox. Firefox houdt zich namelijk altijd goed aan de webstandaarden en als het er daarin goed uitziet, dan is de code doorgaans ook wel goed.

Daarom heb ik me in dit geval maar eens gericht op de eerste regel van de pagina (met de doctype). Die heb ik aangepast naar het volgende:

Code: Selecteer alles

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Met deze kleine aanpassing rendert ook IE (versie 9 in mijn geval) de pagina in Standards-mode (in plaats van de Quirks-mode) en dan weet IE opeens wel hoe de pagina gecentreerd moet worden. Ik moet zeggen dat dat wel een wereld van verschil maakt: niet alleen het centreren ging fout, maar ook de stukjes zwart die ik tussen de blokken van de pagina had gemaakt werden niet goed uitgelijnd.
rich-an schreef:Maar hier kan ik inderdaad wel verder mee aan de gang, gebruik ik hem als voorbeeld pagina.
Dat is mooi. Dan zal ik je zo nog wat meer informatie geven over de structuur van de pagina.
rich-an schreef:THANKS.
Graag gedaan ;-)
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: ff de draad kwijt, HELP

Bericht door nirwana »

Richard,

Wat de structuur van de pagina betreft...

Mijn voorbeeld-pagina staat online, dus kun je die downloaden. Maar ik ben ook zo vrij geweest om de bestanden te zippen en naar jouw mailadres te sturen. Overigens betekent dat niet dat jouw mailadres hier publiek opvraagbaar is, maar als beheerder van MozBrowser heb ik uiteraard wel die mogelijkheid.

Als je het zip-bestand uitpakt dan zie je een bestand met de naam home_en_nieuw.html
Die pagina mag je elke andere naam geven, dat maakt voor de werking niet uit.

CSS
Het volgende bestand is stijl.css. Dat is een stylesheet (stijlblad in Kompozer). Daarin staat zoveel mogelijk de opmaak van de pagina. Als je dat bestand een andere naam geeft dan zul je zien dat de browser niet meer weet hoe die pagina eruit moet zien. Dan is het nog steeds een webpagina en worden alle onderdelen nog steeds getoond, maar niet met de juiste opmaak en ook niet op de juiste plaats. Dat kun je dus eens proberen om te zien hoe dat eruit ziet, maar zet het daarna maar weer snel terug naar de originele naam. Als je deze naam echt wilt aanpassen dan moet je ook de verwijzing in de code van de HTML-pagina naar de nieuwe naam verwijzen. Dan zou dat geen probleem zijn. Vergeet dus ook niet bij het uploaden van de website om dit stijl.css bestand mee te uploaden, want anders ziet de website er heel anders uit. Dan ben je bijvoorbeeld de achtergrondkleur van de pagina kwijt, maar dat zul je dan snel genoeg zien.

Ook in elke nieuwe pagina zul je dus voor de opmaakkenmerken naar dit bestand moeten verwijzen. Dat kan heel eenvoudig en ook Kompozer heeft wel een manier (via het menu Extra > CSS bewerken) om een extern stijlblad aan een webpagina te koppelen. Uiteindelijk moet er in de head van de webpagina de volgende verwijzing komen te staan:

Code: Selecteer alles

<link rel="stylesheet" href="stijl.css" type="text/css">
Daarmee voeg je in 1 klap de opmaak en de structuur van de website aan je webpagina toe en hoef je eigenlijk alleen nog maar de tekst van de pagina in te vullen. Dit is vooral handig als je iets in de opmaak wilt wijzigen, want dat kan dan ook zoveel mogelijk in dat ene 1 centraal CSS-bestand. Al begrijp ik best dat je als leek hier totaal geen verstand van hebt, dus voorlopig hoef je alleen maar te weten dat dit centrale CSS-bestand er is en wat het ongeveer doet.

Titel
De titel van de pagina heb ik nog wat aangepast naar "Pinokkio Alkmaar - tweedehands kinder- en dameskleding". Bedenk dat zo'n titel ook door een zoekmachine als Google wordt gebruikt, dus het is wel handig om daar een goed pakkende titel voor te bedenken. In het geval van de Engelse pagina kun je daar dus ook een Engelse titel bovenaan plaatsen. Je kunt zelfs de taal van de webpagina aangeven, zodat een zoekmachine daar ook weer iets mee kan doen.

Opbouw (div's)
De pagina is vooral uit div's opgebouwd. Als je de code bekijkt dan zie je dat er ook nog wel ergens een table in staat, maar die wordt alleen gebruikt op plaatsen waar een tabelstructuur voor jou waarschijnlijk net wat makkelijker te onderhouden is. Bijvoorbeeld als enkele cellen naast elkaar moeten worden getoond (zoals in het menu, de uitleg van de verdiepingen van het pand en de footer).

Verder is de opzet zo eenvoudig mogelijk: ik ben begonnen met het aangeven van een div met de naam container. Die heb ik 980 pixels breed gemaakt en voor het centreren heb ik margin-left: auto; en margin-right: auto; gebruikt.
Als je dan verder naar onderen kijkt, dan zie je de volgende div's: header, spacer, menu, content, spacer en footer. Je ziet dus dat ik die spacers gebruik voor de zwarte stukjes tussen de vlakken.

Daarna is de inhoud van de verschillende vlakken redelijk recht-toe-recht-aan. Zo af en toe gebruik ik een float: left en een float: right als ik bepaalde zaken naast elkaar wil plaatsen. Al bedenk ik me net dat in het geval van afbeeldingen ook een align="left" en een align="right" hetzelfde effect zouden hebben gehad. Dergelijke zaken moet je in Kompozer ook wel via de eigenschappen van een afbeelding kunnen instellen, dus je hoeft zeker niet voor elke aanpassing in de HTML-code van de pagina te duiken.

Tenslotte heb ik op de linkjes naar Twitter en Facebook nog een target="_blank" geplaatst, zodat ze in een nieuw venster geopend worden. Dan blijft jouw website tenminste nog in het originele venster in het zicht.

Dat is zo ongeveer alles wat ik over de opbouw van de pagina kan vertellen, dus ik hoop dat je zo een goed beeld heb van wat ik heb gedaan en dat je hier zelf verder mee kunt. Mocht je toch nog ergens vragen over hebben dan kun je die gewoon hier op het forum stellen.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
rich-an
Berichten: 16
Lid geworden op: 24 september 2011, 13:25
    Windows XP Internet Explorer 8

Re: ff de draad kwijt, HELP

Bericht door rich-an »

zoooo

hier moet ik eens rustig voor gaan zitten.
Uiteraard wil ik je alvast bedanken voor de genomen moeite.
Met al deze info moet het vast gaan lukken.

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

Re: ff de draad kwijt, HELP

Bericht door nirwana »

rich-an schreef:Met al deze info moet het vast gaan lukken.
En anders: schroom vooral niet om het hier te vragen. Op het gebied van HTML + CSS bestaan domme vragen niet wat mij betreft.
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: ff de draad kwijt, HELP

Bericht door nirwana »

Richard,

Ik ben ook nog even bezig geweest met een stukje Javascript om "rounded corners" voor elkaar te krijgen: www.mozbrowser.nl/web/pinokkio/index.html
Ik moet zeggen dat het resultaat me wel bevalt.
Met vriendelijke groet,

Martijn
[ Mede-oprichter + webmaster MozBrowser | beheerder Startpagina's over freeware, GIMP, Mozilla en OpenOffice.org / LibreOffice, Ubuntu
rich-an
Berichten: 16
Lid geworden op: 24 september 2011, 13:25
    Windows Vista Internet Explorer 8

Re: ff de draad kwijt, HELP

Bericht door rich-an »

helemaal goed , zo was het de bedoeling.
Jammer dat ik het zeelf niet voor elkaar krijg.
Snap niet zoveel van de css taal.

Maar ..... nogmaals bedankt!