De welbekende webshop

[han52krol]

Hallo Allemaal,

Een beetje een overzicht wat er de laatste tijd gebeurd is.
Ik heb de shop nu 2 talig gemaakt, nml. NL en ENG.
Wat andere kleine aanpassingen, zoals een andere banner en de navigatieknoppen.
Het winkelwagentje idee, laat ik vallen. Te ingewikkeld, voor mij.
Alleen, een vraagje, Hoe krijg je dat nu in CSS? Men zegt dat dat mooier en makkelijk is. Geen idee.... Ik heb wel wat rondgekeken, maar geen idee. Blijft nog steeds ingewikkeld voor mij. Wat ik mij nu afvraag, moet je nu eerst alles met Kompozer in html doen en dan later met Kompozer in CSS?

Gezien mijn webshop heb ik het idee dat dit niet de makkelijkste weg is. Ik wil er grafisch niet teveel aan sleutelen. Ben er nml. zeer tevreden mee, net als de klanten. Lekker simpel en duidelijk.

Nogmaals de http adres: www.vkh-models-vroomshoop.nl

Wat het javascript-gedeelte betreft, mijn neef heeft een vaste baan bij een softwarebedrijf in Rijssen en heeft met z'n sollicitatie het ontwerp van mij meegenomen en hij heeft er wat aan gesleuteld. Het feit is dat hij mij nu niet meer mag helpen met mijn site, iets met een concurrentiebeding of zoiets. Vandaar geen basket of winkelwagen.

Gr. Han Krol, Vroomshoop

[nirwana]

Han,

CSS is vooral bedoeld voor de opmaak van een of meerdere webpagina's in een website. CSS en HTML kun je samen gebruiken om een webpagina samen te stellen.

Aangezien jouw familie jou verder niet kan helpen, dan ik dat ik dit maar weer moet oppakken.
Althans, ik neem aan dat er nog steeds een soort winkelwagen-oplossing toegevoegd moet worden.

Volgens mij hadden we best een aardig winkelwagen-systeem werkende, maar had je wat problemen om dat geheel werkend te krijgen. Op zich ziet simpleCart er ook goed uit.
Zo zien hun verzendkosten er wel flexibel uit:
- een vast totaalbedrag aan verzendkosten of
- een vast bedrag aan verzendkosten per artikel of
- een percentage van het totaalbedrag of
- een combinatie van de bovenstaande regels
https://github.com/wojodesign/simplecar ... i/Shipping

[han52krol]

Hallo Martijn,

Leuk je weer te spreken. Tja, het blijft problematisch dat Javascript. Maar goed, misschien een keer in de toekomst (Volgend jaar of zo). Eerst eens vastbijten in CSS. Vraag: kan de huidige site worden bewerkt met de CSS knop in Kompozer? Of kan ik het alleen bewerken in de bron? Ik heb bijv. de pagina afhaalservice er eens bijgehaald en op de knop CSS gedrukt.

Dan krijg je het venster met een interne stijlblad. Maar ik begrijp dat men het meest met een externe stylesheet werkt. Moet ik eerst de externe St.Sh. aanmaken of ...? Dus verwarring, verwarring.....

Gr. Han

[nirwana]

Han,

Werken met CSS doe je doorgaans als volgt:
- je begint met CSS-regels in 1 webpagina
- je kunt dan met een interne stylesheet (= stijlblad) beginnen; dat zijn CSS-regels die in de pagina zelf zijn opgenomen
- als je op een gegeven moment vindt dat de webpagina er goed uitziet, dan kun je deze CSS-regels naar een externe stylesheet exporteren

In www.mozbrowser.nl/wiki/index.php/CSS_bewerken heb ik beschreven hoe dit proces in Kompozer werkt:
1) CSS-regels toevoegen
2) CSS-regels naar een extern bestand exporteren
3) de aangemaakte stylesheet aan een webpagina koppelen

Via CSS kun je allerlei opmaakeigenschappen centraal regelen. Bijvoorbeeld welke achtergrondkleur een webpagina krijgt of dat een tabel standaard een rand erom moet krijgen, etc.

Als je met CSS werkt, dan heb je er het meeste aan als je hier heel bewust mee bezig bent. Standaard worden alle stijlregels al snel bij het element zelf opgenomen. Als je echter met CSS werkt dan is het handig om je daar bewust van te zijn. Het heeft weinig zin om opmaak-regels bij het element zelf op te nemen en ook in de stylesheet. Anders kun je namelijk nog steeds krijgen dat een bepaald element op de pagina z'n eigen leven gaat leiden en zich niet aan de algemene CSS-regels wil onderwerpen.

Kortom, als je met CSS gaat werken dan is het handig om de bestaande style-regels in de pagina in CSS-regels op te nemen.

CSS-regels kun je opstellen voor:
1) een HTML-element (bijvoorbeeld a voor elke link, table voor elke tabel, etc)
2) een bepaalde groep elementen (met een class)
3) een specifiek element (met een ID)

ad 1: als je CSS-regels koppelt aan het a-element dan krijgt elk a-element (dus elke link) die eigenschappen.
Bijvoorbeeld:

Code: Selecteer alles

a
{
   text-decoration: none;
}

Daarmee wordt elke link standaard niet onderstreept.

ad 2: als je iets niet op elk element van toepassing wilt laten zijn, dan kun je ook een regel opstellen voor een specifieke klasse. Je kunt dan die klasse aan bepaalde elementen koppelen.
Bijvoorbeeld:

Code: Selecteer alles

a.noline
{
   text-decoration: none;
}

Daarmee wordt elke link van de klasse "noline" standaard niet onderstreept.

ad 3: hetzelfde als bij punt 2, maar dan geldt het voor 1 specifiek element.
Bijvoorbeeld:

Code: Selecteer alles

table#menu
{
   border: 0;
}

Daarmee krijgt de tabel met id=menu geen rand om zich heen.

Ik hoop dat ik het hiermee wat duidelijker heb gemaakt. Maar vraag gerust als je ergens niet uit komt.

[han52krol]

Martijn,

Bedankt voor de Wiki. Ik zal dat eens aandachtig doorlezen. Eerst wil ik wat meer weten over de "Familie van CSS " . Dus de elementen zoals hover, DIV, SPAN, FLOAT etc.
Misschien is dit een redelijke oplossing, omalles maar eens op papier te zetten en van scratch opnieuw te bouwen. Als ondernemer moet ik toch aan 1225 uur komen, dus ook het onderhouden van de webshop valt hier onder.

Gr. Han

[han52krol]

Hallo ,

Na wat kijken van een filmpje over CSS met kompozer. Heb ik wat vraagjes. Het is gemaakt door een belg. Hij heeft het over een DIV id degansepagina ; div id=banner , div id=hoofdding (wat dat mag zijn??? , div id=menu en div id= inhoud.

Hoe kan ik dat "vertalen " naar mijn site? Banner ok, menu ok, inhoud ok, maar hoofdding? Is dat soms het stuk van mijn welkoms site? Wat onder mijn banner staat?


Gr. Han

[nirwana]

Han,

Als je goed bezig bent met CSS dan maak je gebruik van div's. Een div is in HTML op zich een nietszeggend element. Van een table-element kun je je wel voorstellen dat dat een tabel oplevert. Veel anders kan een table-element niet zijn. Een table-element heeft wat dat betreft een vastgestelde vorm.

Een div-element is in eerste instantie nog weinig en die zul je via CSS-eigenschappen een bepaalde vorm moeten geven. Bijvoorbeeld via eigenschappen als width, height, border, background-color. Daarom wordt een div-element ook vaak gebruikt, want het is een veelzijdig element. Je geeft de div een id of een class mee en vervolgens kun je dit element via CSS benaderen.

Maar je kunt ook andere elementen een id / class meegeven. Dat hoeft zich dus niet tot een div te beperken. Je kunt ook zeggen "ik heb hier een tabel en daar staat mijn menu in". Die tabel wil ik nu via CSS opmaak gaan geven. Dan kun je er een id aan toekennen (als het element uniek is voor die pagina) of een class (als je meerdere elementen op een pagina dezelfde opmaak wilt geven).
Voordeel van CSS is dat als je later met een externe stylesheet gaat werken en je neemt dit element ook op een andere pagina op dat die daar hetzelfde uiterlijk moet krijgen (tenminste, als al je opmaakregels in CSS staan).

Ik hoop dat het je hierdoor weer wat duidelijker wordt.

[han52krol]

Hoi Martijn,

Ik blijf het een rot onderwerp vinden , dat CSS. Maar moet ik nu eerst een tabel maken met Kompozer en daarna dat CSS ? Of kan ik mijn shopje gebruiken als voorbeeld? en dan alleen nog maar de beginpagina.? Ik denk dat ik eerst maar eens wat structuur breng in deze site. Ik heb nml. alles in 1 map gezet.Alleen heb ik daar in een aparte map met afbeeldingen. De rest staat gewoon in mijn VKH map. Dus dat begint aardig vol te raken. Mocht iemand een goede opzet / structuur weten, dan hoor ik het graag.

Gezien het feit dat ik nu al aardig wat leveranciers heb en blijf benaderen over hun produkten.

Gr. Han

[nirwana]

Ik blijf het een rot onderwerp vinden , dat CSS.

Het is ook niet iets waar je eenvoudig mee begint. En bij mijn weten is er niemand die heeft gezegd dat je met CSS aan de slag wilt. Integendeel, ik zou me eerst weer met winkelwagen-functionaliteit gaan bezighouden en dan komt de CSS wel later. Kortom, CSS is iets wat je ook later kunt toevoegen. Als je CSS goed doet dan helpt het je bij het onderhoud van meerdere webpagina's. En als je het helemaal goed doet dan houd je hier al rekening mee als je een website opzet. Al begrijp ik natuurlijk best dat je met een eerste webpagina al blij bent als het er een beetje uit komt te zien zoals je in je hoofd had. Op dat punt weet je zelfs doorgaans niet eens van het bestaan van CSS.

Maar moet ik nu eerst een tabel maken met Kompozer en daarna dat CSS ? Of kan ik mijn shopje gebruiken als voorbeeld? en dan alleen nog maar de beginpagina?

Ik zou dan eerst met een (kopie van !) de beginpagina beginnen. Die heeft nu een bepaalde opmaak en na deze exercitie moet die dezelfde opmaak houden.

Ik denk dat ik eerst maar eens wat structuur breng in deze site. Ik heb nml. alles in 1 map gezet. Alleen heb ik daar in een aparte map met afbeeldingen. De rest staat gewoon in mijn VKH map. Dus dat begint aardig vol te raken. Mocht iemand een goede opzet / structuur weten, dan hoor ik het graag.

Alle HTML-bestanden bij elkaar is prima, hoor. Dan maak ik doorgaans nog een aparte map voor de afbeeldingen (die heb je nu al) en eventueel een aparte map voor de CSS. Daar kan dan nog een aparte map voor Javascript bijkomen. Een aparte map voor CSS kan echter ook tegen je gaan werken. Als je daarin achtergrond-afbeeldingen gaat gebruiken dan moet je namelijk gaan bedenken waar die afbeelding staat ten opzichte van het CSS-bestand. Doorgaans maak ik mapjes als ik vind dat ik wat teveel bestanden van een bepaald soort krijg. Uiteraard kun je ook wel je HTML-bestanden in mapjes plaatsen. Bijvoorbeeld op soort: catalogus-bestanden bij elkaar, etc. Alleen zul je daar bij de onderlinge verwijzingen terdege rekening mee moeten houden. Alle onderlinge verwijzingen zul je dan ook weer opnieuw moeten aanleggen.

[han52krol]

Hoi Martijn.

Ik heb van mijn index een kopie gemaakt en alle tekst, behalve de banner en het linkermenu teksten, er uit gehaald. Ik heb in de proef map een daarin nu een map---afbeeldingen en de index.html . De CSS-map heb ik er niet in. Volgens de video's is de hoofding iets waar volgens mij de tekst onder de banner in staat. Dus die laat ik maar weg. Stop ik wel in het grote, witte tekstvlak. Als het goed is heet dat dan KOP 1 ? KOP 2 moet dan de rest zijn?

Wat ik ook begrepen heb en gelezen, dat ik met procenten kan werken. Vraagje: dat linkermenu van mij, dat staat nu nog in tabellen, van tabellen etc. Kan ik daar ook een ongenummerde lijst van maken? En is het niet leesbaarder om de Engelse tekst bijv. naar rechts te transporteren? Dus een kolom erbij en de site gewoon 100% maken, zonder achtergrond?

Dat shopping cart systeem van SimpleCart, Pfffff, is leuk. Maar....ik baal er van dat alles maar voor de experts is gemaakt en niet voor een echte beginner. Net als dat nopCart. Al dat technische engels, nee dank je, ik vind het wel goed zo. Ze moeten maar een email sturen, ik zit wat prijzen betreft, onder de concurrentie..

Wat ik wel heb gelezen dat je met FF een tool hebt om in de script te kijken , dat lijkt mij wel wat.

Gr. Han

[nirwana]

Als het goed is heet dat dan KOP 1 ? KOP 2 moet dan de rest zijn?

Je bent helemaal vrij in welk soort element je waarvoor gebruikt (c.q. misbruikt).

Wat ik ook begrepen heb en gelezen, dat ik met procenten kan werken. Vraagje: dat linkermenu van mij, dat staat nu nog in tabellen, van tabellen etc. Kan ik daar ook een ongenummerde lijst van maken? En is het niet leesbaarder om de Engelse tekst bijv. naar rechts te transporteren? Dus een kolom erbij en de site gewoon 100% maken, zonder achtergrond?

Je kunt inderdaad met procenten werken. Wel is het de vraag of dat altijd even handig is. Vaak is het net zo handig als je zegt dat de complete pagina bijvoorbeeld 990 pixels breed moet zijn en dat dat gecentreerd moet worden. Dan weet je namelijk de breedte van het geheel waar je mee bezig bent. Vervolgens kun je die breedte onderverdelen en weet je ook hoe breed iets wordt. Dat wil nog wel eens handig uitkomen.

Wat ik wel heb gelezen dat je met FF een tool hebt om in de script te kijken, dat lijkt mij wel wat.

Open dan in Firefox maar eens het menu Webontwikkelaar > Webconsole. Dan komt er een venster boven de website te staan. Als je dan de website opnieuw opvraagt, dan zie je wat er zoal geladen wordt. Als jouw website Javascript gebruikt en daarin komt de browser bepaalde fouten tegen, dan zie je die ook in deze console verschijnen.

Tenslotte nog een voorbeeld van wat jouw website ook met CSS kunt bereiken: www.mozbrowser.nl/web/hankrol/webshop/

Overigens zou ik dan wel overwegen om de tweetaligheid van (bepaal)de pagina's los te laten. Het wordt eenvoudiger als je maar voor 1 taal ruimte op de pagina hoeft te maken. Zo heb ik de uitleg over de webshop op het logo geplaatst. Als ik dat in de beide talen doe, dan komt dat niet zo mooi uit. Daarom heb ik in dit geval de Engelstalige tekst achterwege gelaten.

[han52krol]

Hallo Martijn,

Ziet er mooi uit. Ik heb nu ook zoiets voor IE 8 gevonden en geinstalleerd. Dat werkt ook prima. Je kunt hier dan ook de CSS uithalen en opslaan. Ik zal die van jou eens verder gaan bekijken.

Gr. Han