www.css-voorbeelden.nl

Hallo Goeroeboeroe,

Sorry voor mijn late antwoord, maar ik ben druk geweest met de opzet van de nieuwe site. Hij is klaar en ik ben er blij mee.

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

Hij is in het NL en ENG. Via de 2 vlaggetjes kom je in de goede taal. Ik heb hem 915px breed gemaakt en kan, eventueel tot 1000px breed, maar niet breder. Ik heb, na een gesprek met mijn neef die in de webbouwbuisness zit, hem op pixels gezet en de procenten laten vallen. Ook de begrippen absolute etc etc, heeft hij uitgelegt, maar ik snap er nog geen biet van.

Ik heb in de test site het aantal tabellen nog iets kunnen reduceren en....hij is getest door W3C en goed bevonden. Hoera, Hoera, Hoera, ik ben blij.

Maar dat CSS verhaal laat mij niet los. Wat je ook zoekt en vindt, het blijft moeilijk. Je vindt van alles en volgens mij moet ik eerst een div. container maken , met daarin div'jes voor de rest. Ik wil mijn shopje zo laten, ik ben er ontzettend trots en blij mee. Ik vindt hem er mooi en duidelijk uitzien.

Je schreef iets over liquid, spans , absolute, etc. Nu, wat ik dan wer gelezen heb is dat je spans niet zo vaak mocht gebruiken en kijk, daar wordt ik nu moe van. wat wel en wat niet? Ik wil het gewoon simpel houden. De lay-out blijft het zelfde, net als het font en de kleurstelling. Ik ga niets veranderen. Ik zoek alleen hulp met het opzetten van zo iets, maar ik stuit iedere keer weer op een muur.

in mijn hobby, modelbouw, kom je ook vaak vragen tegen die al bekend zijn, maar ik help iedereen opweg, hoe simpel hij ook is. Ik denk dat deze materie gewoon te moeilijk is voor mij. Handel ligt mij beter.

Ik zou zeggen, kijk er eens na en geef je oordeel. Ondanks de, ahum, tabellen. Maar er zijn meer sites die dit gebruiken, ondervond ik.
Jij moet mijn gezeur goed zat zijn, dus ik stop nu en wens je een goede avond.

Gr. han Krol

Hoi,

Nee, ik moet je teleurstellen. Voordat ik gezeur zat ben, is er meer nodig
Het lijkt mij eigenlijk het belangrijkste dat jij tevreden bent over de site. (En natuurlijk dat hij werkt. Als jij tevreden bent, maar elke computer die je site bekijkt vliegt in de fik, tja, ik weet niet...)
Ik vind hem er goed uitzien, lekker strak. En alles lijkt goed te werken (wat ik bekeken heb in ieder geval). Als hij valideert in w3c, zit je in ieder geval voor de toekomst goed. Want in principe blijft wat nu geldig is ook in de toekomst geldig. Ik heb hem ook even bekeken op een site die tabellen laat zien zoals zoekmachines e.d. ze zien, en het lijkt geen problemen te geven.

Waar jij tegen aan bent gelopen is, voor 'n deel, fanatisme. Die tabellen bij jou leveren geen echte problemen op. Alleen als je de breedte echt flexibel wilt maken en zo, dat is vrijwel onmogelijk met tabellen. En dan kun je beter divs en zo gebruiken.
Dat is trouwens in het algemeen zo: divs e.d. zijn beter. Maar jij hebt de mazzel, dat bij jou die tabellen niet echt problemen bij zoekmachines en zo zullen opleveren. Dan kun je dat wel helemaal gaan ombouwen, maar je kunt je afvragen of dat de tijd en moeite waard is.
Maar er zijn nogal wat mensen, en dat zijn natuurlijk precies de mensen die ook heel erg aan de weg timmeren, die bij het woord 'tabel' gelijk boven in de boom zitten. Op zich wel goed, want die felheid heeft heel wat opgeleverd. Maar soms schiet het door.
Los daarvan is 90% van wat je leest op internet ook nog 'ns zwaar verouderd of kwalitatief ronduit bagger.

Er zijn nogal wat verschillende meningen over allerlei onderwerpen. Zo zijn er inderdaad mensen die acuut de hik krijgen van één span te veel. Maar ik heb toevallig net 'n artikel gelezen van iemand die bij w3c helpt bij het opstellen van de standaard, en zelfs die zegt dat dat overdreven is. Helemaal mee eens! Zo streng zijn is belangrijk bij het ontwikkelen van de standaard, maar als je er mee moet werken in de praktijk, moet je gewoon iets soepeler zijn. En dat mist helaas in heel veel artikelen. Mensen produceren krankzinnig ingewikkelde code om maar te voorkomen dat ze 1 span te veel gebruiken.

Dat is een van de redenen dat ik je steeds naar die Belgische cursus wilde hebben, als je met css wilt beginnen. Dan weet je enigszins wat 'n div, span, enz. is, en kun je enigszins zelf je mening bepalen. Ik begrijp die felheid wel, want het was in het verleden echt 'n onwerkbare rotzooi. Je moest letterlijk voor elke browser 'n aparte site maken. Maar dat streven naar één norm is wat doorgeschoten.

Als jouw site werkt (en dat lijkt hij te doen) en je bent er tevreden over, lekker zo laten.
En als je echt in css bent geïnteresseerd, tja, die cursus...

Hallo,

Ik heb vanmorgen, voor het werken, nog even op die site gekeken. Ik vraag mij af of een embedded style niet werkt. Voor mijn gevoel word de VKH Models Vroomshoop Nederland tekst, als dit dan een H.1 wordt, wel erg groot. Ik vind hem zo mooier.
Het gekste is, ik kan in Kompozer alles regelen wat eigenlijk fout is, volgens de CSS-standaard. Ik kan een kleurtje geven, vetter maken, een schreef aanbrengen etc. etc. Maar ook kan men met dit programma CSS instellen, dmv. een aparte knop, de CSS-pallet.

Het is jammer dat jij dit progje minder kent, maar ik ben bang dat mijn CSS-stijl heel erg lang wordt. Simpel het feit, dat ik afwijk met de inhoudsteksten, volgens de CSS-standaard geen H.2 of H.3. Laat staan mijn onduidelijk alinea's .

Dan komen er vervolgens toch nog weer tabellen in voor in de kleuren wit / lichtgrijs. Kan dit dan een inline- embedded of externe style zijn?

Ik had het gisteren ook over de Span tag. Volgens mij is dan de rode tekst "Up-date " een span tag?

Dan staat er nog zoiets als px of em voor lettertypes... Als men toch een standaard kiest, waarom geen em of zo?

Allemaal moeilijk, moeilijk.

Gr. Han

Hoi,

Een embedded style is in feite hetzelfde als een externe style. Alleen staat die style in de pagina zelf, in de <head>. Hij wordt gebruikt als je voor één pagina afwijkende css nodig hebt. Dan is het soms handiger die afwijkende css op die specifieke pagina te zetten.
Maar zodra je een embedded style gebruikt, kun je net zo goed een externe style gebruiken, die voor meer pagina's werkt. Het enige verschil is de plaats waar de css staat: op de pagina zelf of in een eigen bestand. (En een iets andere beginregel, om de externe style te kunnen vinden.)

Een <h1> kan inderdaad veel te groot worden. Het voordeel van een <h1> is wel, dat een zoekmachine e.d. weet dat hier een heel belangrijke titel in staat. Dat grote kun je weer opvangen met css: <h1 style="font-size: 1.5em;">, of zoiets. Dan heb je een <h1>, maar de tekst is toch kleiner.
Ben het trouwens met je eens dat deze maat voor VKH Models Vroomshoop Nederland mooi is.

Dat je alles kan regelen in Kompozer is niet gek, en ook niet fout volgens de CSS-standaard. Je gebruikt namelijk gewoon css. Alleen gebruik jij inline-css. Alles waar style= voor staat, is css. In
style="font-family: Helvetica,Arial,sans-serif; color: white; font-weight: bold;"
is alles tussen de aanhalingstekens css. Alleen heeft het niet zoveel voordeel boven html in dit geval, omdat je bij elke <tr> die hele regel herhaalt. Eén van de voordelen van css is nou juist, dat je dit maar één keer hoeft op te geven. En dat je het dan maar op één plaats hoeft te veranderen als je plotsklaps een andere lettersoort wilt. Of een andere letterkleur. Of ...
Overigens is <b> gewoon html. Er is nogal wat discussie over of dat wel zou moeten, omdat het in feite opmaak is en dus in de css thuis zou horen. css is te herkennen omdat het, bij jou, altijd achter style=" staat.

Je css-bestand zou niet erg groot worden, omdat alle herhalingen eruit zouden worden gehaald. Maar, tenzij je er veel lol in hebt, vraag ik me bij jou echt af of het veel nut zou hebben.

Wel of geen tabellen is weer een heel andere discussie. Tabellen zijn bedoeld voor tabulaire gegevens, zoals een agenda, of een tabel met gewichten, enz. Omdat er in het verleden geen andere mogelijkheden waren, is dat gebruikt voor opmaak. Waar je inmiddels elementen als <div> voor kunt gebruiken.
Maar als jij echt over zou willen op css, tja, dat combineert echt niet goed met tabellen. Althans: dat wordt echt liederlijk ingewikkeld.

De up-date-tekst staat inderdaad in een span. Dat is heel makkelijk te herkennen, want een span begint met <span
Spans zijn bedoeld om een stukje tekst op te maken. <span style="font-family: Helvetica,Arial,sans-serif; color: red; font-weight: bold;">
Geef deze span de lettersoort Helvetica of Arial of in ieder geval zonder schreef, kleur de tekst rood, maak hem vet.
In een eigen css-bestand zou je deze regel maar één keer voor alle update-spans hoeven te schrijven, vandaar dat die css niet zo lang zou worden. En de lettersoort zou helemaal niet nodig zijn, want die zou je eenmalig opgeven voor de hele pagina. (Met uitzonderingen waar je dat wilt.)

Er is 'n standaard, min of meer, voor lettergrootte. En dat is em. Alleen zijn er heel veel mensen die dat niet weten. Je hebt in css ruim tien eenheden, en in css 3 nog veel meer. em, px en % worden het meest gebruikt. Ze hebben allemaal hun eigen nut.

Ik blijf erbij dat het mede moeilijk is, omdat jij achteraan begint, om het zo maar te zeggen. Je maakt met Kompozer een complete pagina, en probeert die dan te begrijpen. Daar heb ik dus al grote moeite mee.
Als je de omgekeerde weg zou volgen (komt-ie weer: Belgische cursus ) en dan beginnen met wat divs en zo voor menu, dan ga je van onder naar boven. Het is veel lastiger als je begint met het dak, als je 'n huis wilt bouwen. En dat is toch 'n beetje wat jij hebt gedaan.
Maar het belangrijkste lijkt me toch dat jij er tevreden over bent en er trots op bent, en dat het goed lijkt te werken (lijkt, want ik het het niet echt heel uitgebreid getest.)

En nou ga ik pitten...

Hallo,

Bedankt voor je adviezen. Ik wilde mijn site als voorbeeld nemen en die dan, gewoon vanaf de fundamenten, opbouwen met CSS. Een div maken ben ik inmiddels achter gekomen, da's niet zo heel ingewikkeld. De navigatie-kolom, geen idee, misschien met een ongenummerde lijst, maar dan mis ik het pseudo-knop effect.

Ook bedankt voor je kop uitleg, de H.1 is veel te groot. Ik heb gisteren een testje gedaan daarmee. Voordeel van KomPozer.....

Ook tabellen moet ik wel doorgebruiken. Voor de Produkt-pagina. Als VB, Dutch Decal. Als je op , de test-sitee, op Decals klikt, kom je in de pagina Deacals en klik nLB op het DD plaatje, dan kom je in de produktpagina daarvan. Zoals, je ziet, heb ik alles in tabellen gezet en kolommen.
Dit kan ik niet anders doen en met het wit-lichtgrijze kleurtje word alles nog duidelijker. Normaal maak ik een template van zo'n pagina en kopieer hem dan gewoon. Alles doorlinken en klaar. Duurt even....... Deze pagina-voorbeeld komt vaak bij mij voor. Ik zou niet weten hoe ik anders moet doen, ook niet in CSS.

Tja, dat het bij mnij allemaal wat langer duurt met het typen, ik pas het 2-vingersysteem toe.

Maar ik zal eens kijken, ik heb hier en daar wat uitgeprint van het maken van een simpele voorbeeld met div's. Ik vind die standaard winkel sites maar allemaal op elkaar lijken. Vandaar mijn eigen site.

Gr. Han

Tabellen zijn alleen heel lastig te onderhouden als je ze voor opmaak gebruikt. 'n Menu en een header, die zet je normaal genomen niet in een tabel. Dat wordt heel lastig als je dan de breedte of zo wilt gaan veranderen. In een tabel staan normaal genomen kolommen en regels. In een header en een menu en zo niet. Dat bijt elkaar. (Waarmee ik niet wil zeggen dat je dat beslist moet veranderen.)

Maar ook als je helemaal volgens de nieuwste ideeën en zo werkt, zijn tabellen prima, als je ze gebruikt voor tabellen. Die pagina bij jou Decals -> nLB, dat zijn tabellen. Maar dat is prima, want die gegevens hóren ook in een tabel. Dat staat hartstikke duidelijk, juist omdat het in een tabel staat, netjes in rijen en kolommen.
Dat is ook iets wat verwarrend is: omdat tabellen heel vaak verkeerd zijn gebruikt, zijn er nogal wat sites die zeggen dat tabellen helemaal fout zijn. Onzin. Als je 'n tabel gebruikt voor het maken van 'n echte tabel, zoals bij jou op die nLB-pagina, is dat juist hartstikke goed.

Als je je site wilt ombouwen, zou je dus moeten beginnen met de grote brokken: menu, header, enz. De inhoud speelt helemaal geen rol, dat komt later wel, als header enz. zijn zoals jij ze hebben wilt. De breedte van de pagina enz. die moet je met die grote brokken regelen. Ook dingen die wel of niet moeten scrollen enz. Pas dan ga je de inhoud erin zetten: tekst, links, enz.
Maar om wat voor reden dan ook wil jij kennelijk vanuit de hele pagina werken. Dat is prima, maar dat zou voor mij te ingewikkeld zijn. Dat gaat echt niet lukken. En het is me eerlijk gezegd ook niet helemaal duidelijk waarom je kennelijk beslist niet die korte basiscursus (gratis, Nederlandstalig) wilt volgen. Dat is natuurlijk je goed recht, maar het is toch wat lastig als je het verschil tussen css en html niet goed weet.

Je zit nu met een pagina die op zich goed werkt en zo, maar die werkelijk stampvol staat met overbodige html/css. Dat zit nou eenmaal ingebakken in zo'n programma als Kompozer. Het is echt onbegonnen werk om vanuit die bestaande pagina over te schakelen naar 'n modernere lay-out (los van of dat nou zo zinvol is voor jouw site).
Begin nou 'ns met die cursus. Maak daarna de hoofd-onderdelen voor je pagina. En ga dan de details invullen. Als je dan onderweg tegen problemen aanloopt, kun je altijd hier om advies vragen (of elders). Maar het op deze manier ombouwen van die bestaande pagina, dat gaat gewoon niet lukken,