www.css-voorbeelden.nl

Hallo Allemaal,

Mijn naam is Han Krol en heb een webshop gemaakt met Kompozer. Dit is mij redelijk gelukt.Ik heb dit forum gevonden omdat ik wat meer wil weten over CSS. Ook heb ik Notepad++ , voor het geval dat...

Ik zal hier de url van de webshop neer zetten: http://www.vkh-models-vroomshoop.nl
Deze webwinkel ben ik begonnen als hobby en blijf gewoon erbij werken. Ik heb een aantal vragen.
- de banner wil ik graag zo laten, net als de teksten er onder, dus het donker rode gedeelte.
- de navigatieknoppen wil ik dolgraag vast zetten, ze scrollen nu nog mee naar boven.
- het witte tekst gedeelte heb ik veel te groot gemaakt, dit mag kleiner.
- de middelgrijze rand wil ik zo laten en kan, in mijn ogen, ook kleiner.
- als je op de navigatieknop, bijv. DECALS, klikt heb ik hem de zelfde kleur laten houden, ik weet niet of dat handig of normaal is?
- als je op deze pagina komt, dan kan je op het plaatje en/of tekst klikken om in de produktpagina te komen.
- deze pruduktpagina heb ik, voor de duidelijkheid, voorzien van 1 witte en 1 heel licht grijze leesregel, wil ik graag zo laten.
- als je op de tekst klikt (de hyperlink), dan opent zich een fotopagina met teksten eronder, dit wil ik graag zo laten.

Ik ben ook op het mozbrouwser site geweest, en wat gevraagd of dit om te zetten is naar CSS.
Helaas geen antwoord.

Dus , stel ik deze vraag hier ook. Is het mogelijk en is het moeilijk? Wat is het makkelijkste een interne of een externe stylesheet? Ik zat zelf te denken aan een externe. Maar ik heb geen idee....

En ja, ik heb geen winkelwagen systeem, heel bewust. Ik heb geen verstand van JavaScript en wat ik zag, Nopcartsysteem, pfffffff dat vind ik heel erg ingewikkeld. Speciaal omdat je 2 verschillende BTW percentages hebt en met 4% fee hebt te maken met paypal.

Dus mocht er iemand op de site klikken en kijken, hoe en waarom, dat zie ik het wel in dit forum.
Zoals ik al zei, hij is gemaakt met Kompozer en gemaakt met percentages en GEEN pixels. Ik kan redelijk overweg met dat programma, maar dat CSS verhaal van hun, dat gaat mij boven de pet. Dus graag Uw hulp hier.
Met vriendelijke groeten: Han Krol, Vroomshoop

Hallo,
Ik heb even op mozbrowser.nl gekeken en gezien dat je inmiddels daar antwoord hebt gekregen. Of in ieder geval een gedeeltelijk antwoord. Ik begrijp trouwens uit de berichten dat je daar sowieso terecht kunt over Kompozer e.d.
De site ziet er best goed uit, vind ik ook, lekker strak en overzichtelijk.
Ik weet niet zeker of ik echt iets voor je kan betekenen hier. Maar ik zal proberen wat vragen te beantwoorden en dan moet je maar kiezen wat je wilt doen.
Ik begrijp van mozbrowser dat css wat ingewikkeld voor je is. Daar ben je bepaald niet de enige in. Als je de grondbeginselen eenmaal onder de knie hebt, wordt het 'n heel stuk logischer. Maar ja, als je 't eenmaal kunt is alle begin achteraf makkelijk

In feite werk je al grotendeels met css, omdat Kompozer dat automatisch invoegt. Normaal genomen kun je die css via Kompozer exporteren, waardoor het in een apart bestand komt te staan. Om een of andere reden lukt dat niet bij de pagina van jouw site die ik heb geprobeerd. Ik heb niet veel ervaring met Kompozer, maar ik denk dat dat komt omdat de css niet in de <head> staat, netjes bij elkaar, maar overal verspreid in de html.

Het grote voordeel van een extern css-bestand is dat je dat kunt gebruik voor élke pagina. Je geeft op één plaats in dat css-bestand de lettersoort op voor (ik noem maar wat) koppen, en op elke pagina waar je dat soort koppen gebruikt, wordt dan die lettersoort gebruikt. Als je later een andere lettersoort wilt gebruiken, hoef je dat alleen maar op die ene plaats te veranderen.
Bij jou wordt 'Gunship' vaak gebruikt. Zou je dat willen veranderen, dan moet je dat op élke plaats in de html veranderen.
En dat geldt niet alleen voor de lettersoort, maar ook voor kleuren, grootte, borders, marges, noem maar op.

Omdat al die vermeldingen van 'Gunship' (en al die andere lay-out-dingen) nog maar één of enkele keren voorkomen in een apart bestand, worden de pagina's met html veel kleiner. En laden daardoor sneller, Maar dat speelt eigenlijk niet echt meer bij de tegenwoordige snelle verbindingen.
Met css zet je alles wat voor het uiterlijk, de lay-out, is bedoeld in een apart bestand. De teksten, afbeeldingen, enz., de échte inhoud, blijft gewoon in de html staan. Dit kan ook helpen om de pagina's voor zoekmachines en screenreaders e.d. toegankelijk te maken. Omdat Kompozer redelijke standaart-html e.d. maakt, is dat bij jou al redelijk in orde.

Voor jou is eigenlijk het enige voordeel, dat je het makkelijker kunt onderhouden, omdat alles in één centraal bestand staat. Maar...

Omdat het niet lukt om de css automatisch te exporteren naar een extern bestand, gaat dat vreselijk veel werk worden. Mogelijk weten ze op mozbrowser wel 'n manier om dat voor elkaar te krijgen. Maar zelfs als dat wel lukt, dan zit je met 1 apart css-bestand per pagina. In dat bestand staat voor tig html-elementen (div, span, enz.) bijvoorbeeld de naam van de lettersoort. Om echt voordeel te hebben, zou je dat moeten gaan combineren. Hetzelfde geldt voor kleuren, marges, noem maar op.
Vervolgens zou je dan die css-bestanden (je hebt er eentje per html-pagina) moeten gaan combineren. Pas dan gaat het echt voordeel geven.

Omdat jij jouw site al hebt gemaakt, is dat vreselijk veel werk.

Ik neem aan dat je de dingen die jij wilt veranderen ook in Kompozer kunt doen, maar daar ben ik dus niet echt heel erg thuis in. Mocht je het met externe css willen doen, dan wil ik best helpen, maar dat is dus wel behoorlijk wat werk. En je moet dan toch wel, denk ik, 'n korte (gratis) cursus css volgen. Op mijn pagina met links staat 'n aantal goede cursussen, mogelijk begrijp je het dan wat beter.

Wat gerichtere antwoorden:
De bannerknoppen (ik neem aan dat je het menu links bedoelt) kun je vastzetten met position: fixed.
Als je regel 72 (bij mij) verandert van
<tbody>
in
<tbody style="position: fixed;}
dan blijft het menu stilstaan. Het staat dan wel te laag, dus je moet het wel hoger neerzetten. position: fixed wil niets anders zeggen dan dat het element (hier tbody) vast wordt neergezet ten opzichte van het venster van de browser. Dus het scrollt dan niet meer mee. Maar: als het te hoog is voor het venster, ben je de onderkant wel kwijt, die is niet zichtbaar te krijgen.
Ik heb dit even vluchtig getest in Opera, Safari, Internet Explorer 9, Firefox en Google Chrome en het lijkt te werken. Maar écht testen moet je even zelf doen. En het menu is hoe dan ook te hoog, zoals het nu is. Op een 1024x768-scherm is het te hoog en verdwijnen de onderste regels. Dat zou je kunnen opvangen met 'n kleinere regelafstand of zo, maar het blijft wat listig. Als mensen 'n iets grotere letter hebben ingesteld...
Wat ook lijkt te werken (vluchtig getest in dezelfde browsers):
<tbody style="position: fixed; height: 300px; overflow: auto;">
De hoogte (height) kun je natuurlijk aanpassen. Als het menu hoger is dan 300 px, verschijn nu een scrollbalk (daar is de overflow voor).

Het te grote tekstgedeelte enz. zou je, denk ik, gewoon met composer moeten kunnen wijzigen. Maar daar ben ik dus niet echt in thuis, kun je beter op mozbrowser vragen. Of hier, maar dan moet je met externe css gaan werken, en dat moet je echt leuk vinden, omdat het echt veel werk is om je site om te bouwen.

Die links dezelfde kleur laten houden of niet is puur 'n kwestie van smaak. Het enige belangrijke is dat ze te herkennen zijn als links, als een menu, en dat is het geval. De een vindt 'n andere kleur mooi, de ander niet.

Ik hoop je enigszins geholpen te hebben. Mocht je echt aan de slag willen met externe css, dan ben je welkom.

Beste Goeroeboeroe,

Vriendelijk bedankt voor je antwoord. Ja, ik wil wel in de toekomst aan de slag met CSS. Ik zal mij eerst eens verdiepen ide "familie omstandigheden " van CSS.
Mocht het zo zijn dat ik met CSS de webshop opnieuw moet bouwen, dan is dat,wat tijd betreft, geen probleem. Zoals ik al schreef, heb ik Notepad++ al. Dus ik neem aan dat ik daar de CSS kan mee schrijven. Dat het een externe style sheet word, dat had ik inmiddels al een beetje gelezen. De fonttype is en blijft het zelfde, net als de kleuren.
Misschien dat ik de navigatie knoppen voorzie van een hoover? of hoe heet dat in CSS? Maar dan zoek ik er wel een bijpassende kleur bij.Het gaat mij ,idd, om het onderhoud. Ik heb het gevoel dat ik veel moet doen.

Maar ik blijf het proberen.

Gr. Han

Hallo Han,
Als je tijd en zin genoeg hebt, is het hartstikke leuk om iets met css te maken. notepad++ is prima om 'met de hand' mee te werken. 'Met de hand'-code is nog altijd beter dan de code die het beste programma automatisch aanmaakt. (Mits goed geschreven natuurlijk...)
Als ik zo'n site zou moeten ombouwen, zou ik het heel erg stap voor stap doen. De header is - als ik het zo snel goed zie - op alle pagina's hetzelfde. Je zou dus bijvoorbeeld kunnen beginnen met 'n stylesheet (css-bestand) aan de pagina's te koppelen, en dan de css voor de header daarin zitten. Omdat die voor alle pagina's hetzelfde is. Dan kom je er ook langzaamaan in.
Verder is er 'n hele reeks gereedschappen die je kunnen helpen. Op https://www.css-voorbeelden.nl/links.html#a-ger-debug staat daar 'n aantal van. Dat soort spullen kunnen enorm helpen bij het vinden van fouten.
Kleuren enz. maakt allemaal niet uit. Of je dat nou met html of css doet, dat kan gewoon hetzelfde blijven. (Behalve dat css veel en veel meer mogelijkheden heeft, omdat dat speciaal voor het uiterlijk is gemaakt, en html niet.) Je hebt dan trouwens die kuddes <br>'s ook niet meer nodig

Dat heet inderdaad 'n hover in css, zo'n kleurverandering (je kunt er trouwens nog veel meer mee). En dat is een van de dingen die alleen in een echte style kan. Die style komt dus apart in een bestand, dan hoef je het maar één keer te doen. Je kunt hem ook bovenaan elke pagina zetten, in de <head>, maar dan moet je het tig keer herhalen, op élke pagina. En als je iets verandert dus ook tig keer.
Dat wordt zoiets:
a:hover {color: green; background: orange;}
Als je dan met de muis over 'n link gaat, wordt de tekst groen en de achtergrond oranje. (Zou ik trouwens niet doen, die combinatie...)
Maar dat levert bij jou al problemen op, omdat je in de links in het menu zelf een style hebt staan: color: white;. En zo'n stukje css wint altijd van css die elders staat. Vanwege dat soort dingen zou ik ook voor 'n stap-voor-stap-aanpak gaan.

Als je css in stukje hakt, is het wat beter te behappen. zo'n regel als hierboven:
a is een link
a:hover betekent: als ik over een <a>, dus over een link hover (met de muis erboven hang)
color: green: maak dan de tekst groen
background: orange: en de achtergrond oranje.
Het kán wel heel ingewikkeld, maar de basisprincipes zijn niet al te lastig.

Als je helemaal de geest krijgt, kun je ook de html hier en daar nog behoorlijk verbeteren. Jouw menu zit in een geneste tabel. Dat soort dingen zijn nachtmerries om iets te veranderen. Ook dat kan veel makkelijker met simpele html en css.
Maar daar zou ik niet direct mee beginnen.

Als je echt met css aan de slag wilt, zou je eerst 'ns een van de cursussen hier https://www.css-voorbeelden.nl/links.ht ... -overzicht
kunnen bekijken. Die zijn allemaal kwalitatief goed.

Je kunt het ook als 'n voordeel zien dat jouw site al draait: je hebt de html al. Die kun je in principe gewoon aan gaan passen in Notepad++. Kompozer (en meer van dat soort programma's) zijn prima om wat mee te maken. Maar zodra je met de hand dingen gaat doen, is 'n simpel programma als Notepad++ veel makkelijker en overzichtelijker.

Ha, ik wist dat ik wat vergat. Die lettersoort die jij gebruikt, heeft vrijwel niemand in z'n computer geïnstalleerd. Dat betekent dat de browser er zelf eentje gaat uitzoeken. Met behulp van css is het mogelijk om die lettersoort, als je hem beslist wilt gebruiken, te downloaden naar de computer van de gebruiker, zodat die inderdaad Gunship ziet. Alleen is dat niet bij alle lettersoorten toegestaan vanwege de licentie.

Hoi Goeroeboeroe,

Ik heb 2 VB van jouw site gehaald. Ik wil ze eens doorkijken. De ene lijkt mij zeer zeker wat. Lay-out 005. Omdat deze het meeste lijkt op die van mij en ik hem, eigenlijk, zo had willen hebben. Chapeau voor jouw VB.

Ik neem aan dat ik dat witte vlak kleiner kan maken? Ik zie alleen dat men veel met pix. werkt. Is het mogelijk om met procenten te werken, zoals ik met mijn shopje heb gedaan?
Of heeft het werken met pix. meer voordelen, dan nadelen?

Gr. Han

Dank voor het compliment.
Ja, dat wit kan kleiner, of helemaal weg. (Ik weet niet hoeveel je weet, dus mogelijk vertel ik dingen die je al weet).
De eigenlijke pagina (die prachtige kleurencombinaties, waar ik apetrots op ben) (kan iemand mij uitleggen waarom apetrots nou weer zónder 'n' moet???), heeft een breedte van 760 px. Maar elke pagina heeft een body, en die is normaal genomen even breed als het venster van de browser.
De eigenlijke pagina is oranje, groen en geel. De rest krijgt dan automatisch de kleur van de body. Dat is het wit wat je ziet.
Als je de pagina breder maakt, wordt het wit automatisch smaller.

Je vraag over px of procenten ligt wat ingewikkelder.
Voor de breedte van de pagina (het groen, oranje, geel) kun je probleemloos met procenten in plaats van px werken. Ik neem aan dat je de procenten bedoelt die je gebruikt bij de tables, dus de procenten die de breedte van je content bepalen. In principe kun je die 760 px gewoon door procenten (of 'n andere eenheid) vervangen. Maar persoonlijk vind ik procenten niet zo'n goed idee. Althans: niet zonder meer.
Als je 'n heel breed scherm hebt (en die komen steeds vaker voor) krijg je onwijs brede content, en daardoor heel moeilijk leesbare zinnen.
Op een smal scherm is het zonde als je links en rechts 'n lege strook hebt.
Wat je zou kunnen doen is bijvoorbeeld 80% breedte, met een minimumbreedte van 760 px en een maximumbreedte van 1200 px of zo. Dan heb links en rechts stroken, maar de regels worden niet te breed en op 'n klein scherm zijn de lege stroken maar heel smal.

Normaal genomen wordt voor padding (afstand tussen buitenkant van 'n kolom e.d. en de tekst e.d. erin), marge, e.d. px gebruikt, of em. px is min of meer 'n vaste maat, em past zich aan de lettergrootte aan. Als je voor dat soort maten procenten neemt, krijg je heel snel 'n foeilelijke lay-out, omdat de padding, marge, e.d. te klein of te groot worden. Bij px kun je zelf 'n soort gemiddelde opgeven, bij em wordt padding e.d. automatisch aangepast en blijft er goed uitzien.

De linkerkolom en de rechterkolom hebben feitelijk helemaal niets met elkaar te maken. (En de header ook niet, maar die is hier niet van belang).
De linkerkolom is met position: fixed vast op het scherm gezet: bij scrollen blijft die gewoon stilstaan. De linkerkolom ook, maar die staat binnen een groter blok (een div) die je niet ziet.
Ik had hier eerst 'n enorm verhaal staan, maar dat voert hier te ver en is te ingewikkeld. De simpele versie. De breedte van de linkerkolom wordt bepaald ten opzichte van de breedte van het venster van de browser.
De breedte van de rechterkolom wordt bepaald ten opzichte van de extra div waar die in staat, en die is niet even breed als het venster van de browser.
Als ik de breedte van de linker- en rechterkolom in procenten ga nemen, kom ik in de problemen, omdat ze gemeten worden ten opzichte van twee verschillende beginpunten. En dan kan ik ze niet goed meer naast elkaar zetten.
Daarom heb ik de breedte van de linkerkolom in em genomen (12 em). Bij een grotere letter wordt de breedte meer, zodat er geen tekst verdwijnt.
De rechterkolom heeft links een lege ruimte van 13 em. Die valt precies onder de linkerkolom. Bij een grotere letter, wordt ook die lege ruimte breder. De kolommen staan nu altijd goed ten opzichte van elkaar, omdat de breedte wordt afgemeten aan dezelfde eenheid: em.

Waar het op neerkomt: het ligt eraan wat je met de maten wilt doen. Afhankelijk daarvan kies je de eenheden. En dan zijn er nog wat eigenaardigheden van verschillende browsers en zo waar je rekening mee moet houden.

Op de pagina met links van mij staat 'n hele serie links naar lay-outs. Mogelijk zit daar ook iets bij. Voordeel als je die van hier gebruikt is natuurlijk wel, dat ik die goed ken. En dat je weet bij wie je moet komen schelden als je computer in de fik vliegt, grinnik.
Als je trouwens Internet Explorer 6 niet meer wilt ondersteunen, wat steeds meer mensen terecht niet meer doen, dan wordt die lay-out opeens 'n heel stuk simpeler, want dan kan er heel veel code uit.

Beste Goeroeboeroe,

Ik heb jouw vb.05 bekeken en alles is in XHTMl.1. Strict. Nou is mijn vraag, ik kan dat instellen met Kompozer.Kan ik dan de broncode kopieeren en plakken in Kompozer?. Kompozer heeft een mooie BRON knop, zodat je ook handmatig tekst(en) kunt toevoegen / verwijderen.

Mij is niet duidelijk of ik eerst een 3 koloms in HTML moet maken of met CSS, en dat word zo wie zo , dan al een hele opgave.Ik weet niet of dat CSS verhaal wel doorgaat, ik vind het knap moeilijk. En mijn shopje is , denk ik, niet de makkelijkste. Ik twijfel zeer, heb wel wat over CSS gelezen, maar helaas, ik kan alleen maar overweg met Kompozer. Wat ik mis is een echt duidelijk Nederlandse talagie uitleg van CSS en dan voor leken (Of te wel Jip & Janneke taal). Die engelstalige sites zijn leuk, maar als je een vertaler er op los laat, tjha, dan is het zo raar NL.

Gezien het feit dat mijn shopje groter groeit, denk ik dat ik maar gewoon een produktpagina kopieer en alles met de hand invul, wat toch al moet, want ik heb , tenslotte, veel merken.

Gr. Han

Ik ben bang dat je voor hulp met Kompozer hier niet echt aan het goede adres bent. Zoals je waarschijnlijk al hebt gemerkt, is dit een heel erg klein forum. Eigenlijk ben ik het begonnen om vragen over de voorbeelden te kunnen beantwoorden. Eerst deed ik dat per mail, maar dan krijg je wel heel veel vragen over waar de 'x' op het toetsenbord zit.
Het probleem is, dat ik vrijwel niets weet van Kompozer. Op grotere forums, zoals helpmij.nl, heb je meer kans dat er mensen zijn die daar mee kunnen werken. Of kompozer.nl. Ik zou er eerst zelf mee moeten leren werken.
Vragen over html en css zijn prima, maar vragen over Kompozer (of een van de vele tientallen andere soortgelijke programma's), tja, daar weet ik nauwelijks iets van.
Als ik zelf (met de hand) zou beginnen, dan maak ik eerst de grote elementen: de kolommen, header, e.d. En die ga ik dan later 'vullen'. Maar hoe dat in Kompozer zit, weet ik niet.

Je bent bepaald niet de enige die moeite heeft met Engelstalige sites. Bovendien is 'computer-Engels' ook nog 'ns heel anders dan gewoon Engels. Ik zie 'n automatische vertaler dat inderdaad niet goed doen. Krijg je 'raam' in plaats van 'window'. Maar op mijn pagina met links (link staat hier 'n eindje boven) staan ook 'n paar uitstekende Nederlandstalige cursussen. Mogelijk zou je een van die kunnen proberen.
Vragen over html en css blijven natuurlijk welkom, maar hoe je iets in Kompozer moet maken of veranderen, dat gaat hier wat moelijk lukken.

Ok,

Ik zal eens gaan rommelen met wat jij hebt gefabriceerd. Die CSS kan ik gewoon in een aparte map zetten? Ik kan het wel kopieeren met notopad++ en ergens opslaan.
Dan rommel ik wel eens wat.

Gr. Han

Ja, dat is vaak de beste manier. (Hoewel zo'n cursus het iets systematischer aanpakt.) Als je bijvoorbeeld in de css bovenaan achter h1 de font-size iets verandert, zie je wat er gebeurt. Dat maakt de geheimen van css misschien iets begrijpelijker.
Die namen zijn weliswaar in het Engels, maar dat is niet anders dan bij html en het is maar 'n beperkt aantal namen.

De css kan in een aparte map. Dat is zelfs heel gebruikelijk, om het overzichtelijk te houden. Afbeeldingen in een map (of meer, als het er veel zijn), css in 'n aparte map (soms er meer dan één css-bestand), enz. Precies wat jij handig vindt voor jouw site. De css en afbeeldingen (en JavaScript en ...) elk in 'n eigen is gebruikelijk om het snel te kunnen vinden en vooral om, als je dat wilt, indexeren van dat soort mappen door Google e.d. te voorkomen. (Hoewel dat niet waterdicht is.)

Zolang je aan het veranderen bent, is de css bovenin de html het makkelijkst. Dus zoals het nu is. Als je dan iets wilt veranderen, staat alles in één bestand bij elkaar.
Als het werkt zoals je wilt, kun je dan vervolgens de css kopiëren en in een apart bestand zetten. Als je dan vanuit de html een link naar dat bestand maakt, werkt de css precies alsof die nog bovenin de pagina stond. Voordeel is dat je vanuit 100.000 pagina's naar dat éne css-bestand kunt linken. Makkelijker te onderhouden en je pagina's laden sneller, omdat ze kleiner zijn.

Hoe je die interne css kunt veranderen in externe css staat in de bijgesloten pdf vrijwel bovenaan onder Beschrijving van code en css.
Als je daar niet uitkomt, hoor ik het wel. Zolang je met notepad++ (of 'n andere html-editor) werkt, zijn er geen specifieke 'geheimen' van 'n programma zoals Kompozer. Die html-editors werken allemaal eigenlijk hetzelfde. Ik werk zelf op Linux, maar als ik op Windows bezig ben gebruik ik ook Notepad++. Prima programma.

Hee Goeroeboeroe,

Leuk je reactie. Ik heb ook Linux, voor nood gevallen. Normaal werk ik met XP. Ik heb ook VB,083 binnen gehaald. Maar daar moet ik de CSS zelf invullen met begulp van Notepad++? Ik heb geprobeerd met Ad.Reader te kopieren en plakken, maar dat ging niet, beveiligd. Ok, dan maar eens handmatig proberen.
Ik neem aan dat ik gewoon op regel 1 kan beginnen met Notepad en zo het CSS verhaal, met behulp van wat jij hebt geschreven (Daarvoor veel dank van mijn kant) en dan gewoon iets gaan stoeien (Al weet ik wel wat anders.....

).

Het idee van jouw 3-koloms 083 is dat ik dan de linkerkolom wil gebruiken voor de NL navigatie en de rechter voor de Engelstalige navigatie. Dit kont de duidelijkheid echt ten goede, dunkt mij. De rest zie ik later wel.

Gr. han

Hoi,
Ik gebruik XP (en Windows 7) alleen nog om sites te testen.
Die pdf is beveiligd, omdat in het verleden malloten dingen veranderden en het dan weer verspreidden, met mijn naam als schrijver er nog in. Overigens is die beveiliging absoluut niet waterdicht, maar het is (kennelijk) wel afdoende tegen die figuren die fouten verspreiden. (Dat ze dingen veranderen, nou vooruit, maar dat ze er gewoon koeien van fouten in stopten, grrrr.)
Maar het kan veel simpeler. Als je gewoon lay-out-083-dl.html in notepad++ opent, heb je de exacte code. Die is precies hetzelfde als wat in de pdf staat, hoef je niets te kopiëren.
Als je dan iets verandert in de html/css in notpad++, kun je gelijk het resultaat van de verandering zien.
Nog 'n tip: maak heel veel back-ups van je tussentijdse veranderingen. Hier spreekt de Afdeling Schade en Schande

Succes!

Hoi Goeroeboeroe,

Hoe zo veel back ups?

Ik doe het voortdurend van mij belangrijkste bestanden.
Nog een rare vraag. Ik ben met Kompozer een beetje aan het stoeien geweest met een andere opzet. Nu kom ik uit op op 6 divisions.1 div. Wrapper - 2 div.banner 3 div.vkh models (tekst onder banner) 4 div. menu 5 div. content (inhoud) en 6 div. footer (copyright?) Geen paniek, geen paniek, ik kan met Komper de div. maken. Maar hoeveel div'jes kun je maken of mag je maken in een div? Ik wil nml. 2 vlaggetjes in de div.3 plaatsen met een link naar de desbetreffende pagina 's . Kan ik het menu maken door een ongenummerde lijst? Of moet elke knop een div. worden?

Is een wrapper nodig? Soms zag ik ook iets staan van een Skipper? Nu weet ik wel wat een skipper is in de zeevaart, maar in CSS....

Nog steeds bedankt voor je goede hulp.
Gr. Han

han krol schreef:
Hoe zo veel back ups? Ik doe het voortdurend van mij belangrijkste bestanden.

Hoi,
Voor de zekerheid ga ik er even serieus op in. Ik bedoel met back-ups dat je regelmatig 'n kopie maakt van wat je doet. Ik maak zelf, als iets werkt, met enige regelmaat een kopie. Als ik het dan verpest, wat regelmatig voorkomt, kan ik terugvallen op een eerdere versie die goed werkte. In principe kun je ook met Control+Z of zo teruggaan, maar niet als je hebt afgesloten of als je echt wild bezig bent geweest.

han krol schreef: Ik ben met Kompozer een beetje aan het stoeien geweest met een andere opzet. Nu kom ik uit op op 6 divisions.1 div. Wrapper - 2 div.banner 3 div.vkh models (tekst onder banner) 4 div. menu 5 div. content (inhoud) en 6 div. footer (copyright?) Geen paniek, geen paniek, ik kan met Komper de div. maken. Maar hoeveel div'jes kun je maken of mag je maken in een div? Ik wil nml. 2 vlaggetjes in de div.3 plaatsen met een link naar de desbetreffende pagina 's . Kan ik het menu maken door een ongenummerde lijst? Of moet elke knop een div. worden?

In principe kun je 'n oneindig aantal divs in een div in een div in een ... zetten (nesten). In de praktijk geef Firefox het - voor zover ik weet - als eerste op bij iets van 200 of 500 (weet ik niet meer, ooit 'ns uitgeprobeerd.) niveaus diep. Lang voor die tijd heb jij het zelf al opgegeven en hebt waarschijnlijk 'n langdurige therapie en 'n nieuwe bril nodig.
Maar in principe kun je zoveel divs in elkaar zetten als je wilt. Alleen is het 'n goede gewoonte het aantal toch zoveel mogelijk te beperken. Meer code dan nodig is, maakt het alleen maar ingewikkelder. Bovendien worden de bestanden onnodig groot. En het weergeven van elk element kost ook tijd, hoewel dat nauwelijks nog speelt met 'n moderne browser/computer (tenzij je 500 niveaus diep nest...)
Als je heel veel divs gebruikt heeft dat zelfs 'n naam: divitis.
Zes divs zoals jij hebt is heel gebruikelijk als hoofdindeling. Binnen die divs kun je dan weer divs met tekst en zo zetten. Maar vaak kun je iets neerzetten zonder div eromheen. Een div is eigenlijk alleen voor de opmaak, voor de lay-out (net als een span). Als je bijvoorbeeld een ongeordende lijst gebruikt, hoeft daar meestal helemaal geen div omheen, omdat je de lijst rechtstreeks kunt lay-outen.
Voor precieze antwoorden moet je eigenlijk de code zien, en dat is bij Kompozer (en andere soortgelijke programma's) niet direct een feest, omdat die zo ontzettende veel overbodige html en css in de code zetten. Maar als je iets af hebt en het staat op internet, kan ik altijd wel even kijken.
(Als je op je site iets neerzet, zet dan boven in de <head> even <meta name="robots" content="noindex"> Dat voorkomt dat Google e.d. het indexeren terwijl jij nog aan het schrijven bent. Als je dan klaar bent, haal je die regel gewoon weer weg.)

Een menu in een ongeordende lijst is uitstekend. Dat is de beste manier. In feite ís een verzameling links een ongeordende lijst. Het is ook makkelijk te lay-outen met css. Voor zoekmachines is het ook duidelijk dat het bij elkaar hoort. En, wat ik persoonlijk ook belangrijk vind, screenreaders e.d. zoals blinden die gebruiken herkennen een menu in een <ul> en kunnen het in één keer passeren, zodat 'n blinde niet op elke pagina eerst wordt getrakteerd op het voorlezen van alle links.
'n Zoekmachine is enigszins met 'n blinde te vergelijken. Als je site toegankelijk is voor spraakbrowsers e.d., is hij meestal ook goed toegankelijk voor Google e.d. En als je er vanaf het begin rekening mee houdt, is het nauwelijks extra werk. Zo 'n menu is in het begin makkelijk in 'n lijst te zetten. Als je dat later alsnog zou willen doen, ben je veel meer tijd kwijt.

Hoi,

Zeer bedankt, je hebt mij weer verder opweg geholpen. Met FF kon ik ,idd, veel div'jes soms zien bij bepaalde websites. Maar ik ben het met jouw eens, hou het simpel en overzichtelijk. Die ongenummerde lijst ga ik nu zeker gebruiken. Mocht het klaar zijn, ik probeer een proefje te maken, dan zal ik hem wel laten zien.

Gr. Han

Hallo Allemaal,

Ik ben gestopt met het toepassen van CSS. Ik vind het te ingewikkeld om mij er in te verdiepen en de tijd. Ik heb het geprobeerd, maar niets lukte en het lukt mij wel met KomPozer en tabellen. Ik krijg dan gewoon alles zo als ik het wil. Zonder uren te typen en te gluren of alles wel in orde is.
Ik kopieer gewoon de pagina's en pas dan gewoon de teksten aan met KomPozer, zonder moeite. Ik ben bezig met een nieuwe shop opzet en zelfs een verticale lijn werkt. Da's mij zelfs in CSS nooit gelukt. Ik heb van alles geprobeerd, maar ik geef het op. Die W3C kan van mij de boom in.

Ik vraag mij zelfs af, wat er nu tegen tabellen is, met de huidige snelle internetverbindingen? Alleen om dat zo'n organisatie dat niet wil? Ik wil ook wel eens niet wat.....

Ik vond het werken met div's in div's zelfs gecompliceerder dan met tabellen. Het overzicht vind ik totaal ontbreken met Notepad ++ . Je ziet niet wat je doet. Misschien is het wat "simpel "van mij , maar ja, ik moet er mee werken en zo'n WYSIWYG en kan daar goed mee overweg. Ik kan zien wat er gebeurd zonder rare toepassingen met CSS.

Ik had een aantal div's gemaakt, maar niets klopte wat ik deed. De banner heb ik zelfs helemaal op nieuw moeten maken, kleur en logo links van het plaatje, omdat het logo niet links bleef. De tekst onder de banner, had daar een nieuwe div van gemaakt, schoof, om onduidelijke reden, naar links boven...... Dus, ik kwaad, na vele uren werk, en heb alles van de schijf gegooit en ga weer lekker prutsen met tabellen. Dan zijn de CSS-fanaten / aanhangers maar boos op mij.

Mijn nieuwe shop is nu gemaakt met KomPozer en tabellen, soms een tabel in een tabel, maar hij gaat er uit zien zo als ik het voor ogen heb. Zonder gepruts met CSS. Zels het vkh logo blijft keurig nu staan, links en rechts, van de banner. De tekst onder de banner blijft staan zoals ik het voor ogen had. Het witte inhoudsvlak pas ik alleen aan. De rest kopieer ik wel en pas dan de inhoud aan. Dit gaat mij makkelijk af, zonder dat CSS. Sorry, maar ik zie het gewoon niet. een voetbalkwedstrijd "lees" ik beter.....

Als het klaar is, zal ik hier een link plaatsen. Tenzij met een test wil zien.\\

Gr. Han Krol

Hoi,

Leuk dat je de afloop nog even meldt.
De meeste mensen vinden css makkelijker om te onderhouden en mee te werken, als ze het eenmaal 'n beetje beheersen, dan tabellen. Maar als dat voor jou niet zo is, dan is dat natuurlijk geen argument meer. Dan kun jij kennelijk beter met tabellen uit de voeten. En 't moet natuurlijk ook wel 'n beetje leuk blijven om te doen.
Ik heb nog even snel op jouw site gekeken, en ook de andere grote voordelen om css te gebruiken spelen bij jou niet zo. Tabellen zijn vaak volslagen onduidelijk voor zoekmachines en volstrekt ontoegankelijk voor spraakbrowsers e.d. Ook dat speelt bij jou eigenlijk niet, omdat je redelijk simpele tabellen gebruikt.

Dus dan blijft als enige argument eigenlijk dat je het voor de lol gaat ombouwen. En het wordt me enigszins duidelijk dat je er niet veel lol in had

Dus ik wens je evengoed veel succes en plezier. En als het af is en je 'n linkje geeft, ga ik zeker even kijken.

Hallo Goeroeboeroe,

Bedankt voor je medeleven iedere keer. Valt soms niet mee.

Maar goed, ik wil het toch nog een keer proberen. Misschien kun jij hier eens naar kijken en advies geven. Dit is mijn nieuwe site. Ik wil hem graag zo houden.

URL: http://www.vkh-models-vroomshoop.nlvkhtest

Als ik goed begrijp, dan moet ik:1= de body maken,licht grijs,2=een algemene container of hoe heet dat? 3=een div.banner(dat is nu een complete afbeelding,vond ik makkelijker)4=div. menu/navigatie (hoe krijg ik dat zo als ik het wil?Of moet ik de Engelse vertaling alleen in de engelse index doen?Ik vind dit nml. wel apart?5=div. Inhoud/Content. 6=rechter kolom met leveranciers afbeeldingen,is 1 geheel. Met een verticale streep van boven naar onder,dun.7=div. copyright vkh. De vlaggen laat ik nu vervallen, ik zie er geen plaats meer voor.

De site is nu 1000px breed, en niet meer in procenten.(100%). Volgens, wat ik nu allemaal gelezen heb, kan de body wel in %? Pfffff, het is wel veel en je hebt het idee dat ze elkaar maar moeilijk maken. Hoe zit het nu met Absolute, Liquid, etc. Daar word ik niet wijzer van en begrijp niet goed HOE ik dat op mijn site moet toepassen.

Ik weet het, soms laat ik het een tijdje rusten en probeer dan het weer op te pakken. Met Kompozer kan ik CSS maken.Het heeft een aparte dialoogbox daar voor, dus......

Gr,Han

Sorry link werkt niet backslash vergeten.

URL: http://www.vkh-models-vroomshoop.nl/vkhtest

Nu moet het goed zijn....

Gr. Han

Hoi,

Ik heb die test-site even bekeken, maar eerlijk gezegd gaat mij dat zo niet lukken. Te ingewikkeld. En ik ben 'n beetje bang dat, als dat voor mij zo is, het voor jou zeker zo is. Ik zal proberen uit te leggen wat ik bedoel.

Je gebruikt voor de lay-out, dat is de indeling in de grote blokken zoals header, menu, e.d., tabellen. Die tabellen zijn tot vier niveaus diep genest. Dat betekent dat het vrijwel onmogelijk is om iets aan de breedte van de pagina te veranderen. Als je in een stukje van de ene tabel iets verandert, kan in 'n hele andere tabel opeens iets misgaan. Ik begrijp dat jij tabellen makkelijker vindt, maar een van de nadelen is dat het vrijwel onmogelijk is dan iets met de breedte van de pagina te doen. Althans: ik begin er niet eens aan, omdat het echt 'n onwijs ingewikkelde klus is om dat goed te doen.

Dit wordt nog gecompliceerd doordat je Kompozer gebruikt (hetzelfde zou voor andere soortgelijke programma's gelden). Je gebruikt geen extern, apart, css-bestand, maar de css staat in de html. Dat heet een inline-stijl: de css staat IN de elementen zelf. Als je dan de breedte, of wat dan ook, wilt gaan veranderen, is dat een enorme zoektocht naar welke css waarvoor zorgt. Met 'n hele grote kans op fouten.
Als css op deze manier wordt gebruikt, is er eigenlijk geen enkel voordeel boven het gebruik van de verouderde elementen uit html transitional.

Als je wel breedte e.d. relatief makkelijk wilt kunnen aanpassen, dan moet je echt divs e.d. gebruiken en geen tabellen voor opmaak.
Jij schrijft dat je 'n div.banner, div.menu en zo hebt. Maar dat is niet zo. Al die dingen zitten bij jou in tabellen. In die tabellen staat hier en daar wel 'n div, maar dat heeft eigenlijk weinig nut, omdat de tabellen voor de plaats van de onderdelen zorgen, niet de divs.

Als je kleinere aanpassingen wilt, wil ik daar best even naar kijken. Maar die breedte en zo, dat kun je volgens mij vergeten met geneste tabellen. Alleen vraag ik me af, of je dan niet beter af bent op het forum over Kompozer, want daar ben ik niet echt in thuis.

Mocht je toch aan de divs willen, dan zou ik nogmaals aanraden een van die cursussen over css op mijn pagina met links te volgen. Dat zou gelijk het gedoe over de breedtes, procenten, absoluut, enz. mogelijk iets begrijpelijker maken.
Dat is iets wat gewoon 'n beetje ingewikkeld ís. Bovendien is het heel erg snel aan het veranderen. Nog geen tien jaar geleden was er voornamelijk één maat beeldscherm, en dus één maat browserscherm. Inmiddels is er een vrijwel oneindig aantal maten, van mobieltjes tot supergrote. In relatief heel korte tijd moest alles omschakelen van één maat naar geen vaste maat. Daar komt nog bij dat pas sinds zo'n 3-4 jaar de makers van browsers (lees: Microsoft) serieus één standaard ondersteunen.
Als je begint met liquid, absoluut, noem maar op, dan begin je eigenlijk met het eind van een zich al jaren ontwikkelende techniek. Om dat te begrijpen, zul je toch 'n beetje moeten weten wat divs, spans, enz. zijn.
Als je dat niet wilt, prima natuurlijk, maar dan wordt het vrijwel onmogelijk die breedte van de pagina aan te passen.

Op zich is die pagina van jou niet heel ingewikkeld te maken. Ik wil best 'n opzetje maken, maar dat heeft alleen nut als je 'n beetje weet waar divs en zo voor dienen. En ik denk eigenlijk, als je zo'n cursus volgt, en je zou zo'n opzetje zien, dat het heel erg meevalt. Kompozer maakt de code echt veel en veel ingewikkelder dan nodig is. Voor de echte lay-out (header, menu, e.d.) heb je maar heel weinig html/css nodig. Als die grote blokken naar je zin zijn, dan pas ga je er de kleinere dingen inzetten, zoals de inhoud van het menu.

Je vraag over de inhoud in het Engels en Nederlands begreep ik niet helemaal. Als de Engelse alleen op Engelse versie moet komen, dat zou je het alleen op de Engelse versie moeten zetten. Of begrijp ik je nou verkeerd?
De banner als afbeelding kan prima, maar er zit één nadeel aan. Mogelijk vind je dat geen nadeel, dat is 'n afweging die je even zelf moet maken. Een zoekmachine kan geen afbeeldingen lezen. Dus de tekst op de afbeelding kan nooit geïndexeerd worden door Google e.d.

www.css-voorbeelden.nl

CSS voor webshop

CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop

Re: CSS voor webshop