Fout gebruik van html & css

[Dennis]

Helaas wordt ik nog vrij regelmatig teleurgesteld doordat mensen het gebruik van html in combinatie met css niet helemaal begrijpen. Ik zal het even uitleggen.

CSS is ontworpen om content en lay-out te scheiden. De voordelen van css zijn groot. Het net genoemde voordeel, maar ook het aanpassen van documenten aan je eigen stijl. Als pietje een html file maakt, zou ik in staat moeten zijn om mijn eigen stylesheet daaroverheen te gooien.

Nou moet ik toegeven dat css versie 1 wel enigszins hierin tekortschoot, en dat is jammer, want daarmee was meteen de foute trend gezet. CSS2 voldoet hier echter prima aan, en ik zie ook geen reden om css2 níet te gebruiken.

Het eerste wat je moet doen om goed gebruik mogelijk te maken, is je documenten simpel houden. Veel mensen denken dat css zó gebruikt moet worden:

code:

<div class="classje1">blabla</div>
<div class="classje2">blabla</div>
<div class="classje3">blabla</div>

En dan vervolgens ook de bijbehorende css:

code:

.classje1
{
   /* rotzooi */
}

.classje2
{
   /* rotzooi */
}

.classje3
{
   /* rotzooi */
}

Dat is natuurlijk heel aardig, en het werkt allemaal geweldig, dus tja waarom niet hè. Het vervelende is echter, dat ik met mn custom made stylesheet er niks mee kan. Want ik weet niet welke classnamen jij in godsnaam wilt gaan gebruiken, dus daar is mijn stylesheet helemaal niet voor geschikt.

Hoe je het dus wél moet doen is ten eerste de tags gebruiken waarvoor ze bedoeld zijn. Dus niet div-flooding svp, maar netjes bij alinea's de p-tag.

Je denkt nu gegarandeerd dat je dat helemaal niet fijn vind, omdat je honderdduizend verschillende soorten tekst in je pagina wilt. Ten eerste kun je voor kopjes gewoon h1 t/m h5 gebruiken, en sub, sup, etc. Ten tweede (en hier komt het) kun je tegenwoordig de kracht van css2 gebruiken.

CSS2 heeft een aantal hele mooie dingen gekregen. Zo kun je de selectors veel uitgebreider maken.

code:

p > a
{
  /* direct geneste a-tags onder de p-tag */
}

p a
{
  /* álle geneste a-tags onder de p-tag */
}

Nu is het p > a voorbeeld niet het beste, maar je kunt bijvoorbeeld bepalen dat img-tags die zich in de a-tag bevinden een nette border krijgen. Dus zo:

code:

a img
{
  border: 1px solid #000;
}

Wat ik tegenwoordig ook wel zie (wel minder vaak) zijn enorme stylesheets van wel 500 regels. Dat is dus nergens voor nodig. Het kan absoluut geen kwaad om css-bestanden op te splitsen. Zo wordt je site trouwens veel makkelijker aan te passen. Je kunt er bijvoorbeeld voor kiezen om in 1 stylesheet alle lettertypen en font-eigenschappen te zetten, en in een andere stylesheet de kleuren van de letters en andere elementen.

Zet de letters in een import, en maak voor de kleuren meerdere stylesheets aan in je html, als volgt:

code:

<style type="text/css" media="all">
  @import "fontdef.css";
  @import "color_blue.css";
</style>
<link rel="alternate stylesheet" type="text/css" 
  media="screen" title="page in red" href="color_red.css" />
<link rel="alternate stylesheet" type="text/css" 
  media="screen" title="page in green" href="color_green.css" />

Op die manier kunnen bezoekers ook nog elke pagina een eigen kleurtje geven. Dit is maar even een simpel voorbeeld, je kunt dit natuurlijk op nog veel meer manieren gebruiken. Via het menu in mozilla (view > use style) kun je nu van stylesheet wisselen. Je kunt ook zelf met javascript iets knutselen.

Wil je hier meer van zien kijk dan eens op www.alistapart.com en www.topstyle.com .

Houd je pagina dus overzichtelijk qua code, gebruik html-tags waar ze voor zijn, maak gebruik van css2 en zorg ook voor scheiding binnen stylesheets.

_{van willem169 moest ik zeggen dat jullie lief moeten blijven tegen elkaar}

[drm]

't kan dan overigens ook geen kwaad om je zooi een beetje in te springen

code:

body.content {

}
   body.content h1 {

   }

body.nav {

}
   body.nav a {

   }

Verder gaat IE nog niet helemaal goed om met de '>' selector, dus die zou ik toch voorlopig nog een beetje vermijden.

[BtM909]

Waarom wordt dit geen onderdeel van de Quick Start Guide voor W&G. Ik dacht dat er zoiets gemaakt zou worden

Erg duidelijk btw!

[Verwijderd]

offtopic:
waarom gebruik je in je eigen site dan zoveel inline-CSS shit?

dit is toch een beetje overdone dan:

code:

<td style="font-size: 1px; background-color: #d59f00; border-bottom: 1px solid #dcdcdc; border-left: 1px solid #dcdcdc; border-right: 1px solid #dcdcdc; color: #ff0033;">

edit:

dit is niet onaardig bedoelt hoor

[Dennis]

Verwijderd schreef op 04 september 2002 @ 11:44:

offtopic:
waarom gebruik je in je eigen site dan zoveel inline-CSS shit?

Daar ben ik ook niet tevreden over, de reden waarom ik al 2 maanden bezig ben met iets nieuws .

[Dennis]

De discussie loopt goed

[Bosmonster]

Dus je mag geen classes gebruiken?

[tomato]

Ik zie vaak 'verkeerd' gebruik van CSS in deze vorm:

code:

<span class="rood">hoi</span>

<div class="rechtsboven">mai</div>

...

.rood {
   color   :   #f00;          /* rood */
}

.rechtsboven {
   top     :    10px;
   right   :    10px;
}

Tsja... dan leg je je opmaak alsnog min of meer vast in je content

[Blauw]

Zo had ik het eerlijk gezegd allemaal nog helemaal niet bekeken. Dank aan de topicstarter voor de heldere uitleg!

[Verwijderd]

duidelijk verhaaltje... thanks

[crisp]

Het gebruik van CSS moge hopelijk toch wel duidelijk zijn onderhand bij de vaste bezoekers hier.
Het probleem bij het gebruik van CSS is tegenwoordig toch wel de vaak gebrekkige ondersteuning van (oudere) browsers. In theorie is het allemaal heel mooi en logisch, en zou je het toch ook graag zo willen toepassen, maar als je in de praktijk geconfronteerd wordt met IE4 en NS4 dan heb je er niet zoveel meer aan...

[Verwijderd]

dat geldt niet alleen voor oudere browsers. Mozilla, NS 6 en 7 hebben problemen met relatieve includes van style sheets. Ik heb gemerkt dat ze dat niet hebben wanneer een ingeladen style sheet met een absoluut pad aangegeven wordt. Volgens mij hebben ze dat trouwens op die nieuwe volkskrant site met een javascript mooi opgelost. (p.s.: als dit in een andere topic hoort, vergeef me dan, ben een newbie op dit forum

[crisp]

Verwijderd schreef op 05 september 2002 @ 01:51:
dat geldt niet alleen voor oudere browsers. Mozilla, NS 6 en 7 hebben problemen met relatieve includes van style sheets. Ik heb gemerkt dat ze dat niet hebben wanneer een ingeladen style sheet met een absoluut pad aangegeven wordt. Volgens mij hebben ze dat trouwens op die nieuwe volkskrant site met een javascript mooi opgelost. (p.s.: als dit in een andere topic hoort, vergeef me dan, ben een newbie op dit forum

Inderdaad, de meeste browsers van dit moment ondersteunen nog steeds niet volledig CSS2, dus is het als webbouwer nog niet interessant om het te gaan ondersteunen; Mozilla komt een heel eind, maar IE (met 97% marktaandeel) laat nog behoorlijk wat steken vallen, of interpreteert de standaards op hun eigen manier...

[Dennis]

Bosmonster schreef op 04 september 2002 @ 19:43:
Dus je mag geen classes gebruiken?

Beperk het. En gebruik als je de css defineert niet alleen de classes. Dus ook al gebruik je veel classes, probeer dan de style-properties die al die classes gemeen hebben toch direct aan de tag toe te kennen.

[Woudloper]

Leuk artikeltje Nu begin ik het dus een beetje te begrijpen Ik heb altijd gedacht dat je dus gewoon met .classnaam kon werken...

Zijn er toevalling nog linkjes over

[Verwijderd]

Interessant verhaal, inderdaad. Ik moet zeggen dat ik ook classes misbruik om de vorm aan te geven, terwijl het eigenlijk een beschrijving van de inhoud zou moeten weergeven (toch?).
Is het nog wel zinvol om rekening te houden met IE4 en NS4. Ik geloof niet dat veel mensen deze browsers nog gebruiken.
Ik denk alleen wel dat helaas veel dingen bij CSS niet bruikbaar zijn, omdat de meest gebruikte browser (lees:IE5&6) de vele mogelijkheden ervan niet (goed) ondersteund.
De > selector werkt geloof ik al niet onder IE. Ik bedoel, als je dat soort dingen al niet kunt gebruiken, dan ben je geloof ik wel min of meer gedwongen om classes te gebruiken, toch?

[drm]

De hierarchie wordt vaak vergeten, da's een beetje zonde

als je een <body class="content"> hebt, hoef je in feite voor de rest van de elementen (mits goed gebruikt) al geen classes meer op te geven, want dat staat voor de body al aangegeven.

zet je vervolgens in je css

code:

body.content p { ... }

dan heb je de <p> ... </p> die voorkomt in die body met class content al te pakken.

Da's een van de belangrijkste dingen om te weten. De leuke geintjes met :first-letter en [attr="value"] enzo, tja, da's allemaal mooi, maar niet echt 't belangrijkste.... imho

[Dennis]

drm schreef op 05 september 2002 @ 11:52:
De hierarchie wordt vaak vergeten, da's een beetje zonde

als je een <body class="content"> hebt, hoef je in feite voor de rest van de elementen (mits goed gebruikt) al geen classes meer op te geven, want dat staat voor de body al aangegeven.

zet je vervolgens in je css

code:

body.content p { ... }

dan heb je de <p> ... </p> die voorkomt in die body met class content al te pakken.

Da's een van de belangrijkste dingen om te weten. De leuke geintjes met :first-letter en [attr="value"] enzo, tja, da's allemaal mooi, maar niet echt 't belangrijkste.... imho

Precies, goed gezegd. Alleen dat body.content zullen veel mensen niet gebruiken, omdat je dan alsnog niet verschillende stijlen aan hetzelfde element gemakkelijk kunt toekennen. Het is eigenlijk alleen maar handig bij verschillende pagina's, en als meerdere pagina's niet in dezelfde stijl zijn dan gebruik je eigenlijk al niet dezelfde stylesheet, maar goed .

De first-letter en first-line e.d. kunnen zeker wel handig zijn hoor, zeker bij hetgeen waar css echt prachtig voor geschikt is, namelijk documentarchieven. Zo kun je bij elk document de eerste letter met een grote letter kunnen aangeven of de eerste hele zin met hoofdletters.

attr= css zou in de toekomst wel eens belangrijker kunnen worden en is nu al heel handig in combinatie met <input>-tags.

code:

input[attr="radio"]
{
  border: 0px solid #fff;
}

[DeFeCt]

ddc schreef op 05 september 2002 @ 13:34:
[...]
attr= css zou in de toekomst wel eens belangrijker kunnen worden en is nu al heel handig in combinatie met <input>-tags.

code:

input[attr="radio"]
{
  border: 0px solid #fff;
}

Hoe werkt dat dan precies?

code:

<html>
<head>
    <title>Untitled</title>
<style>
input[attr="radio"]
{
  border: 1px solid #000000;
  background-color: red;
}
</style>
</head>
<body>
<form>
<input type="radio" value="1" name="1">
<input type="radio" value="2" name="1">
</form>
</body>
</html>

Doet bij mij namelijk helemaal niks

[Verwijderd]

DeFeCt schreef op 05 september 2002 @ 13:48:
[...]


Hoe werkt dat dan precies?

code:

<html>
<head>
    <title>Untitled</title>
<style>
input[attr="radio"]
{
  border: 1px solid #000000;
  background-color: red;
}
</style>
</head>
<body>
<form>
<input type="radio" value="1" name="1">
<input type="radio" value="2" name="1">
</form>
</body>
</html>

Doet bij mij namelijk helemaal niks

Je moet dan ook input[type=radio] doen: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

-edit-
Kennelijk werkt het niet onder IE, maar wel in Mozilla.

[DeFeCt]

Verwijderd schreef op 05 september 2002 @ 14:07:
[...]
Je moet dan ook input[type=radio] doen: http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Van die pagina heb ik ook een printje liggen, maar kennelijk doe ik toch iets fout...

code:

<html>
<head>
    <title>Untitled</title>
<style>
input[type="radio"]
{
  border: 1px solid #000000;
  background-color: red;
}
</style>
</head>
<body>
<form>
<input type="radio" value="1" name="1">
<input type="radio" value="2" name="1">
</form>
</body>
</html>

Doet namelijk ook niks

[Verwijderd]

DeFeCt schreef op 05 september 2002 @ 14:11:

Je was mij net te snel af: ik heb mijn bericht even bewerkt. Bij mij werkt het wel onder Mozilla, maar niet onder IE.

[DeFeCt]

Verwijderd schreef op 05 september 2002 @ 14:12:
[...]
Je was mij net te snel af: ik heb mijn bericht even bewerkt. Bij mij werkt het wel onder Mozilla, maar niet onder IE.

Jammer want dan is het dus nog steeds vrij nutteloos

[drm]

Mozilla heeft idd een veel betere implementatie van CSS2. Vandaar ook deze post drm in "Fout gebruik van html & css"

[disjfa]

DeFeCt schreef op 05 september 2002 @ 15:08:
[...]


Jammer want dan is het dus nog steeds vrij nutteloos

welke ie gebruik jij dan.... hier doet ie t namenlijk prima...

jupz.... werkt hier prima

[Verwijderd]

disjfa schreef op 05 september 2002 @ 15:46:
[...]

welke ie gebruik jij dan.... hier doet ie t namenlijk prima...

jupz.... werkt hier prima

misschien wil je even zeggen welke versie dat is dan?

[disjfa]

6

[drm]

disjfa:
6

Ik weet dat je liegt

[disjfa]

drm schreef op 05 september 2002 @ 16:10:
[...]

Ik weet dat je liegt

ok ok 6.0.2600.0000

[Woudloper]

disjfa schreef op 05 september 2002 @ 17:04:
[...]

ok ok 6.0.2600.0000

Heb ik ook Maar bij mij werkt het voorbeeld ook niet Dus er moet toch echt nog wel wat anders zijn geweest...

_{Maar ehm, begint dit verhaal niet heel erg van het verhaal van de topicstarter (ddc) af te lopen Het is namelijk zo interessant en nu gaan we voortborduren op een klein puntje}

[DeFeCt]

disjfa schreef op 05 september 2002 @ 15:46:
[...]
welke ie gebruik jij dan.... hier doet ie t namenlijk prima...
jupz.... werkt hier prima

6.0.2600.0000

[DeFeCt]

Woudloper schreef op 05 september 2002 @ 17:09:
[...]
Het is namelijk zo interessant en nu gaan we voortborduren op een klein puntje

Vooralsnog draagt de topicstarter een voorbeeld aan dat bij sommigen van ons niet werkt, denk dat het wel degelijk interessant is voor de discussie...

Sowieso is het belangrijk om je af te vragen of je al volledig css2 moet gebruiken

[Verwijderd]

Ik heb ook 6.0enz en bij mij doet i ut ook ni.

Ik ben wel van mening dat de nieuwe/ proffesionele webdesigner zeker css dient te gebruiken, omdat dit je pagina (vaak) veel overzichtiger houd en de mogelijkheden (bijna) eindeloos zijn.

[Dennis]

Owja, ik noemde eerder al dat CSS ideaal is voor documentbeheer en artikelen ed, in die zin is www.alistapart.com (die ik ook eerder noemde) een perfect voorbeeld.

[drm]

Wat ik bedoelde, disjfa, met dat je liegt, is dat ik eerst een screenshot wil zien voor dat ik je geloof. IE heeft CSS2 op die punten namelijk nog helemaal niet geimplementeerd. En niet valsspelen, he

[crisp]

drm schreef op 06 september 2002 @ 00:08:
Wat ik bedoelde, disjfa, met dat je liegt, is dat ik eerst een screenshot wil zien voor dat ik je geloof. IE heeft CSS2 op die punten namelijk nog helemaal niet geimplementeerd. En niet valsspelen, he

En dat markeert mijn eerder genoemde punt weer. CSS2 is inderdaad fantastisch, en biedt vergaande mogelijkheden om content van style te scheiden, maar zolang de marktleider (IE) achter blijft lopen op de ontwikkelingen in deze blijf je als webdesigner genoodzaakt achterhaalde methoden te gebruiken...
Misschien... over een jaar of 5....

[Verwijderd]

Ik snap neit dat je je kan storen aan het zogenaamde "fout gebruik". Als het er uiteindelijk goed uitziet is mij alles best. Ik ga echt niet bij elke website de broncode bekijken hoor, tenzij ik iets interessant gemaakt vind ofzo. Er zijn ook geen regels of wetten voor, dus het zal mij een worst wezen hoe iemand zijn page in elkaar zet. Een ander verhaal is het als je als bezoeker een foute layout krijgt door foute codering..

[crisp]

Verwijderd schreef op 06 september 2002 @ 00:49:
Ik snap neit dat je je kan storen aan het zogenaamde "fout gebruik". Als het er uiteindelijk goed uitziet is mij alles best. Ik ga echt niet bij elke website de broncode bekijken hoor, tenzij ik iets interessant gemaakt vind ofzo. Er zijn ook geen regels of wetten voor, dus het zal mij een worst wezen hoe iemand zijn page in elkaar zet. Een ander verhaal is het als je als bezoeker een foute layout krijgt door foute codering..

Er zijn inderdaad geen regels of wetten, maar wel richtlijnen, opgesteld door het World Wide Web Consortium
Waarom zijn die richtlijnen er? Juist om ervoor te zorgen dat een webpagina er goed uit ziet in jouw browser ongeacht welk merk browser jij gebruikt!
IE is echter een browser die wat milder omgaat met fouten in een webpagina, dit leidt echter tot 'sloppy' programmering waardoor pagina's die er prima uitzien in IE er heel verfromfraaid vanaf komen in bijvoorbeeld Mozilla die veel stricter is wb de standaarden.
Het idee van: 'iedereen moet een homesite in elkaar kunnen slepen en pleuren' is heel leuk en aardig, maar zitten we daar uiteindelijk wel op te wachten?
Webdesign is over het algemeen een serieuze aangelegenheid waar kennis en kunde een must is.
In mijn ogen is de inburgering van IE in deze een remmende factor; ze hebben wel tijd om allemaal leuke filters in te bouwen (leuk voor je persoonlijke cavia-website), maar fatsoenlijke CSS2-support ontbreekt....

[Morrar]

Om dan toch weer een beetje de discussie in gang te houden...

Ben het helemaal met de topic starter eens: CSS2 is mooi om layout en data te scheiden, die trend is ingezet en de vormt de toekomst imho. Bij totale scheiding zou je een website compleet kunnen 're-disignen' terwijl je de data kunt houden, en andersom ook zelfs... theoretisch.

Helaas is het in de praktijk nog niet haalbaar zoals velen imho terecht opmerken. Denk dat het nog 1 jaar ofzo gaat duren voordat de (standaard-) ondersteuning eindelijk een beetje redelijk is... Dat zou echt enorm veel gemak beteken voor de webmasters... De crime van alles 3x maken voor de verschillende browsers zou dan voorbij zijn (ja ja dream on, want dit gaat vrees ik nooit helemaal komen, zeker aangezien sommige bedrijven poep hebben aan standaards )

Maar waar ik zelf ook steeds meer geintresseerd in begin te raken is XML en bijbehoren. HTML + CSS is in feite al object-georienteerd, maar gooit data en layout toch nog teveel door elkaar (dwz data staat nog steeds tussen de tags in hetzelfde document). Met XML en XSL (en XSLT eventueel) zou je volledige scheiding van data en layout moeten kunnen halen. Ook interessant is in dit licht de opkomst van XML-databases: de databases waar je gewoon XML in kunt gooien en uit kunt trekken. Volgens mij gaan we steeds meer die kant uit.

Helaas heb ik (zoals sommigen misschien al uit dit stuk hebben kunnen opmerken) nog niet veel tijd kunnen steken in deze ontwikkelingen, maar ik hoop dat binnenkort te gaan doen. Vroeg me af wat anderen hierover denken...

[Dennis]

Verwijderd schreef op 06 september 2002 @ 00:49:
Ik snap neit dat je je kan storen aan het zogenaamde "fout gebruik". Als het er uiteindelijk goed uitziet is mij alles best. Ik ga echt niet bij elke website de broncode bekijken hoor, tenzij ik iets interessant gemaakt vind ofzo. Er zijn ook geen regels of wetten voor, dus het zal mij een worst wezen hoe iemand zijn page in elkaar zet. Een ander verhaal is het als je als bezoeker een foute layout krijgt door foute codering..

Als je zelf websites gaat maken ben je natuurlijk helemaal vrij in je doen en laten. Maar als iedereen oude manieren van coden gaat gebruiken, blijft het web altijd één grote rotzooi, dus kun je beter je zoveel mogelijk inzetten om een site netjes te coden .

[Woudloper]

ddc:Als je zelf websites gaat maken ben je natuurlijk helemaal vrij in je doen en laten. Maar als iedereen oude manieren van coden gaat gebruiken, blijft het web altijd één grote rotzooi, dus kun je beter je zoveel mogelijk inzetten om een site netjes te coden .

Daar heb je helemaal gelijk in Helaas is het zo dat de boeken en online tuturials het nog steeds niet allemaal goed uitleggen. En dat is toch de plek waar de nieuwe html-ers mee beginnen als ze een website gaan maken....

Daarnaast is het ook nog zo dat de programma's niet direct het gebruik van css ondersteunen zoals jij bedoel (met externe .css bestanden e.d.), want daar wordt ook altijd nog veel gebruik gemaakt van inline css e.d.

Er zijn nog genoeg opmerkingen te plaatsen, maar als het aan die kant niet goed begint, dan blijft het nog wel een tijdje bagger... Daarnaast moet het natuurlijk ook zo zijn dat de ontvangende kant (lees: IE) wat strenger zou moeten zijn met het verwerken van zijn content. Hoewel ik echter goed kan begrijpen dat Microsoft dit niet doet, want dan worden je gebruikers onnodig geconfronteerd met fouten die ze helemaal niet willen zien....

[DeFeCt]

Ik snap niet helemaal dat er een topic wordt geopend met de titel "Fout gebruik van html & css" en de topic starter vervolgens met een voorbeeld komt dat bij de grootste groep gebruikers niet werkt, in mijn ogen is dat dus ook "Fout gebruik van html & css"...

[André]

Maar sowieso, wat is fout gebruik?

Wat hier besproken word is onhandig (of minder handig) gebruik van html & css maar geen fout gebruik.

[Dennis]

DeFeCt schreef op 06 september 2002 @ 09:25:
Ik snap niet helemaal dat er een topic wordt geopend met de titel "Fout gebruik van html & css" en de topic starter vervolgens met een voorbeeld komt dat bij de grootste groep gebruikers niet werkt, in mijn ogen is dat dus ook "Fout gebruik van html & css"...

Als je het over het > voorbeeld hebt, die kun je eigenlijk vervangen door de spatie, vaak maakt het niet zoveel uit op een pagina. Alleen als je <div><p>bla<div>bla<p>bla</p></div></p></div> e.d. gaat maken is het wel vervelend.

[DeFeCt]

ddc schreef op 06 september 2002 @ 10:50:
[...]

Als je het over het > voorbeeld hebt, die kun je eigenlijk vervangen door de spatie,

Ik heb het over het input [atrr="radio"] voorbeeld

[Dennis]

DeFeCt schreef op 06 september 2002 @ 10:53:
Ik heb het over het input [atrr="radio"] voorbeeld

Dat was voornamelijk een hint
Tis wel jammer trouwens dat ie zo weinig ondersteunt

[Dennis]

Kwam net wéér een leuk voorbeeldje tegen van wat eigenlijk fout is.

code:

<style type="text/css">
  p
  {
    font-size: 9px;
    font-family: verdana, tahoma;
  }

  strong
  {
    font-weight: bold;
  }
</style>

<p>
  <strong>Informatie over de produkten</strong><br />
  Hier kan een leuk stukje informatie staan.
</p>

Zo zou het moeten:

code:

<style type="text/css">
  p, h5
  {
    font-size: 9px;
    font-family: verdana, tahoma;
  }

  h5
  {
    font-weight: bold;
    margin-bottom: 0px;
  }
</style>

<h5>Informatie over de produkten</h5>
<p>
  Hier kan een leuk stukje informatie staan.
</p>

Nu denken een aantal mensen: wat is die ddc een muggenzifter
Maar zoals ik al had uitgelegd, je maakt in het eerste voorbeeld een verkeerde structuur. Als je alinea's hebt met een titel erboven moet je de titel-tags (h1 t/m h5) gebruiken, en niet strong gebruiken (die is bedoeld voor het benadrukken van delen tekst).

Tis zo simpel eigenlijk

[Verwijderd]

Normaal ben ik niet zo'n copy-paster maar hier wil ik toch even het mooiste stukje css code laten zien wat ik tot nu toe ben tegen gekomen. Het is van (hoe kan het ook anders natuurlijk) w3schools.com:

Uw gevalideerde Cascading Style Sheet :
body {
font-size : 70%;
color : #000000;
background-color : #eeeedd;
margin-top : 2px;
margin-left : 3px;
margin-right : 0;
margin-bottom : 0;
}
body , p , h1 , h2 , h3 , table , td , th , ul , ol {
font-family : verdana, helvetica, arial, sans-serif;
}
table , input {
font-size : 100%;
}
table.ex {
color : #000000;
background-color : #eeeedd;
font-size : 100%;
}
table.db {
color : #000000;
background-color : #ffffff;
font-size : 100%;
}
th.db {
color : #000000;
background-color : #eeeedd;
}
div {
width : 100%;
}
h1 {
font-size : 160%;
}
h2 {
font-size : 120%;
margin-top : 10px;
margin-bottom : 10px;
}
h3 {
font-size : 110%;
}
h4 {
font-size : 100%;
}
h5 {
font-size : 90%;
}
h6 {
font-size : 80%;
}
td.right {
color : #000000;
background-color : #ffffff;
}
td.content {
color : #900b09;
background-color : #eeeedd;
}
td.deprecated {
color : #ff0000;
background-color : transparent;
}
td.red {
color : #ff0000;
background-color : transparent;
}
p.red {
color : #ff0000;
background-color : transparent;
}
p.intro {
font-size : 100%;
font-weight : bold;
color : #000000;
background-color : transparent;
margin-top : 10px;
}
p.introcenter {
text-align : center;
font-size : 110%;
color : #8b4513;
background-color : transparent;
}
pre {
font-family : "Courier New", monospace;
font-size : 110%;
margin-left : 0;
margin-bottom : 0;
}
span.blue {
color : #00008b;
background-color : transparent;
}
span.red {
color : #ff0000;
background-color : transparent;
}
span.ieonly {
color : #000080;
background-color : transparent;
font-size : 70%;
}
span.t {
color : #0033cc;
background-color : transparent;
font-size : 80%;
}
img.float {
float : left;
}
h1 , h2 , h3 {
background-color : transparent;
color : #000000;
}
h1.att , h2.att , h3.att , hr.att {
background-color : transparent;
color : #000000;
}
hr {
background-color : transparent;
color : #000000;
height : 1px;
}
table.front {
color : #000000;
background-color : #8b4513;
}
th.front {
color : #ffffff;
background-color : #900b08;
}
td.front {
color : #000000;
background-color : #eeeedd;
}
a.nounderline {
text-decoration : none;
}
a:link {
color : #900b09;
background-color : transparent;
}
a:visited {
color : #900b09;
background-color : transparent;
}
a:active {
color : #ff0000;
background-color : transparent;
}
a:hover {
color : #ff0000;
background-color : transparent;
}
a.left:link {
text-decoration : none;
color : black;
background-color : transparent;
}
a.left:visited {
text-decoration : none;
color : black;
background-color : transparent;
}
a.left:hover {
text-decoration : underline;
color : #900b09;
background-color : transparent;
}
a.left:active {
text-decoration : underline;
color : #900b09;
background-color : transparent;
}
ma.right:link {
text-decoration : none;
color : black;
background-color : transparent;
}
ma.right:visited {
text-decoration : none;
color : black;
background-color : transparent;
}
ma.right:hover {
text-decoration : underline;
color : #900b09;
background-color : transparent;
}
ma.right:active {
text-decoration : underline;
color : #900b09;
background-color : transparent;
}
a.red:link {
color : #900b09;
background-color : transparent;
}
a.red:visited {
color : #900b09;
background-color : transparent;
}
a.red:active {
color : #ff0000;
background-color : transparent;
}
a.red:hover {
color : #ff0000;
background-color : transparent;
}

iemand nog kritiek op deze lap code?

[Dennis]

Je gebruikt veel classes, maar ik zie niet de html die erbij hoort .

[drm]

* drm kent geen 'ma' element

Cascading Stylesheet:

ma.right:link {
/* .... */
} 

verder vind ik 't behoorlijk onleesbaar, maar je hebt ook geen code tags gebruikt, dus, ik weet niet of dat daar aan ligt

[Verwijderd]

ddc schreef op 06 september 2002 @ 21:45:
Nu denken een aantal mensen: wat is die ddc een muggenzifter
Maar zoals ik al had uitgelegd, je maakt in het eerste voorbeeld een verkeerde structuur. Als je alinea's hebt met een titel erboven moet je de titel-tags (h1 t/m h5) gebruiken, en niet strong gebruiken (die is bedoeld voor het benadrukken van delen tekst).

Helemaal mee eens. Maar ik vind het raar dat je begint bij h5, i.p.v. h1. Ik dacht trouwens dat ze t/m h6 gingen, maar dat weet ik niet zeker.

drm schreef op 07 september 2002 @ 16:56:
* drm kent geen 'ma' element

Dat hoeft ook niet te bestaan. Probeer dit maar eens in Mozilla:

PHP:

<offtopic>Stukje off-topic tekst</offtopic>

CSS:
offtopic {
     font-size:9px;
     color: #666666;
     background-color: #FFCCCC;
}

[Verwijderd]

dat komt waarschijnlijk doordat XML ook prima geparsed wordt in Mozilla. En offtopic is gewoon een XML tag in dit geval.

[Dennis]

ma moest natuurlijk a zijn getuige de :link .

Verwijderd schreef op 07 september 2002 @ 17:17:
Helemaal mee eens. Maar ik vind het raar dat je begint bij h5, i.p.v. h1. Ik dacht trouwens dat ze t/m h6 gingen, maar dat weet ik niet zeker.

Het maakt in principe niks uit, maar als dit kopjes op het laagste niveau zijn (waar ik vanuit ga omdat er niks meer tussen deze kopjes en de paragraaftekst komt) dan is h5 goed. Mocht je geen andere koppen hebben zou je idd bij h1 kunnen beginnen.

[drm]

Blues:
Dat hoeft ook niet te bestaan. Probeer dit maar eens in Mozilla:

PHP:

<offtopic>Stukje off-topic tekst</offtopic>

CSS:
offtopic {
     font-size:9px;
     color: #666666;
     background-color: #FFCCCC;
}

Dat weet ik Maar we hadden 't over HTML, en ma is geen bestaand HTML element

[Verwijderd]

Er mag heus wel een niet-HTML element in een HTML document. Als je dan in de doctype maar even aangeeft dat deze bestaat.

Zelfs ook binnen een XHTML doc, maar dan moet deze wel binnen een andere namespace vallen. En ik zie nergens een prefix, dus daar is op deze manier niets over te zeggen.

[Verwijderd]

Verwijderd schreef op 05 september 2002 @ 11:17:
[...]

Is het nog wel zinvol om rekening te houden met IE4 en NS4. Ik geloof niet dat veel mensen deze browsers nog gebruiken.

[...]

En nu praten we....

[David]

aan de topicstarter.

Ikzelf probeer al altijd vorm en inhoud te scheiden. Dat van het importeren van stylesheets dmv. @import wist ik niet, net als de alternate stylesheets en 'p > a'.

Ik zit alleen nog met een CSS vraagstuk. Ik heb een site gemaakt (www.chiromedico.com <- let niet op de inhoud) waarbij alle teksten in een cel van een tabel terechtkomen. De inhoud wordt geinclude (dmv PHP). Om de inhoud heen zit een <span>-tag, met als attributen een hoogte, een breedte en 'overflow = auto'. De bedoeling is dat de inhoud van deze span-tag bij overflow verticaal gaat scrollen. In IE werkt dit perfect, maar in Mozilla niet. Ook als ik overflow=scroll gebruik bakt Mozilla er niks van en resizet die span gewoon. Weet iemand hier een oplossing voor (volgens W3C is de site geldig XHTML1.0 Transitional en is de stylesheet ook OK)

[Verwijderd]

Probeer dit niet verkeerd op te vatten, maar dit is echt nog een voorbeeld van slecht gebruik van HTML. Je legt een deel van het uiterlijk al stevig vast met een tabel. Ook je scripts voor die mouseovers zijn waardeloos als je die site moet gaan onderhouden. Kun je in de source even alle kleuren veranderen bijvoorbeeld. Dat kun je beter oplossen met:

1: externe scripts en stylesheets
2: veranderen van className ipv een style property

Wel moet ik zeggen dat ook zonder stylesheet je pagina er redelijk uitziet, maar het kan beter. Opeene PDA oid is die pagina véél te breed, en dat wordt nergens goed opgevangen.

Kijk eens naar de volgende - simpele - pagina:
http://tweakers.net/~crew/Cheatah/layout/block.html

Okay, erg eenvoudig, maar het gaat me nu even om de HTML. Nergens is CSS of Javascript te bekennen. Kijk vooral naar het menu'tje, simpeler dan dat krijg je het niet.
Het script laat de links in een nieuw venster openen.

http://tweakers.net/~crew/Cheatah/layout/block2.html

Dezelfde HTML source, echter de CSS en Javascript worden er niet bijgehaald. Het menu'tje is ineens horizontaal in plaats van vertikaal, de links worden in dezelfde pagina geopend.

Met een andere stylesheet kun je het menutje wel rechts krijgen, en de content links, dat gaat dus _nooit_ als je tabellen gebruikt om stukken van je site te positioneren.

Nog even het antwoord op de vraag van DiMension: span is een inline level element, overflow werkt op block-level elements, zoals p en div.

[David]

Verwijderd schreef op 08 september 2002 @ 15:24:
[nuttige info die ik niet hoef te herhalen]

Nog even het antwoord op de vraag van DiMension: span is een inline level element, overflow werkt op block-level elements, zoals p en div.

Dat is mijn probleem nou juist: in die <span> komen nog meerdere <p> en <div>-tags (de hele tekst, inclusief paragrafen, moet natuurlijk scrollen)

Dat de site te breed is is bekend. Ik heb in overleg met de opdrachtgever bepaald dat de site geoptimaliseerd is voor 1024x768 en prima browsbaar is in 800x600. Het is geen site die door mensen met een PDA benaderd gaat worden (iig niet op grote schaal)

Maar iig. bedankt voor de hulp (veranderen van classname had ik niet eens aan gedacht )

edit:
[quote]
1: externe scripts en stylesheets
[/quote]

Ze zijn eigenlijk extern, maar worden geinclude dmv. PHP. Dat zie je dus niet in de source terug

[ Voor 0% gewijzigd door David op 08-09-2002 15:35 . Reden: eventjes iets ophelderen ]

[Verwijderd]

offtopic:
Je pagina bevat niet valid XHTML, zoals ik zei moet die span een div worden, aangezien dat element nog andere block-level elementen bevat (div en p), en dat mag een span niet. Ook heb je een p tag niet goed afgesloten.

[Verwijderd]

Misschien al bekend bij de meesten, maar ik kwam dit dus vandaag tegen:

http://www.hixie.ch/advocacy/xhtml

[David]

Verwijderd schreef op 08 september 2002 @ 15:42:

offtopic:
Je pagina bevat niet valid XHTML, zoals ik zei moet die span een div worden, aangezien dat element nog andere block-level elementen bevat (div en p), en dat mag een span niet. Ook heb je een p tag niet goed afgesloten.

Sorry, ik had de versie die ik lokaal had staan gecheckt en verbeterd, ik had hem alleen nog niet geupload.

Die tabel verwijder ik wel in de volgende versies. Dat van die p-tag moet nu ook goed zijn.

[crisp]

Verwijderd schreef op 08 september 2002 @ 16:05:
Misschien al bekend bij de meesten, maar ik kwam dit dus vandaag tegen:

http://www.hixie.ch/advocacy/xhtml

Dat zijn inderdaad een aantal redenen waarom ik nog steeds HTML4.01 gebruik voor mijn documenten; ik zie de meerwaarde van het gebruik van XHTML1.0 ook nog niet echt in, plus dat pagina's in XHTML1.0 door een aantal veelgebruikte browsers verkeerd geinterpreteerd wordt zonder allerlei 'truuks' uit te halen.
Echter lees ik wel veel over XHTML om toch bij te blijven mocht het ooit zover komen dat het echt common-good gaat worden.
Met CSS2 ben je al van een hoop legacy-tags af, en kan je al redelijk wel-formed documenten maken in HTML; simpelweg de doctype wijzigen en je hebt vaak al een geldig XHTML1.0 document. De meerwaarde van XHTML1.0 is dan ook in mijn ogen maar minimaal, tenzij je er echt specifieke dingen mee wilt doen.

[Dennis]

Verwijderd schreef op 08 september 2002 @ 16:05:
Misschien al bekend bij de meesten, maar ik kwam dit dus vandaag tegen:

http://www.hixie.ch/advocacy/xhtml

Dat ben ik dus wel gedeeltelijk met de schrijver eens. Maar het staat soms toch wel netter. Nu ga ik hem weer noemen (hij is zo goed ) maar sites als alistapart.com die vooroplopen in webdesign-technologie willen gewoon xhtml gebruiken.

Als jij een microsoft educatie center bent ga je toch ook niet les geven in windows nt 4 ?

[crisp]

ddc schreef op 08 september 2002 @ 22:52:
[...]

Dat ben ik dus wel gedeeltelijk met de schrijver eens. Maar het staat soms toch wel netter. Nu ga ik hem weer noemen (hij is zo goed ) maar sites als alistapart.com die vooroplopen in webdesign-technologie willen gewoon xhtml gebruiken.

Als jij een microsoft educatie center bent ga je toch ook niet les geven in windows nt 4 ?

Ik zou er als microsoft educatie center toch zeker wel een lesje aan wijden hoor, want je gaat het in de praktijk *zeker* tegenkomen...

[drm]

Cheatah:
Er mag heus wel een niet-HTML element in een HTML document. Als je dan in de doctype maar even aangeeft dat deze bestaat.

Ja, zo ken ik er nog een paar Natuurlijk kan en mag dat, maar als je 't zover gaat brengen dat je je eigen DTD-tjes gaat gebruiken voor HTML, heeft het m.i. weinig zin meer om over standaarden te praten

[Verwijderd]

ddc schreef op 08 september 2002 @ 22:52:
maar sites als alistapart.com die vooroplopen in webdesign-technologie willen gewoon xhtml gebruiken.

Je gaat voorbij aan een aantal argumenten in zijn betoog, bijv de eerste:

Document sent as text/html are handled as tag soup [1] by most UAs.
This means that authors are not checking for validity, and thus
most XHTML documents on the web now are invalid. Therefore the main
advantage of using XHTML, that it has to be valid, is lost of the
document is then sent as text/html.

Dit is dus ook het geval bij alistapart (hoe goed ik die site ook vind).

Tweede argument van hem is ook van toepassing op alistapart, niks wat zij in de code hebben gedaan zou niet met HTML 4.01 bereikt kunnen worden.

HTML 4.01 contains everything that XHTML contains, so there is
little reason to use XHTML in the real world. It appears the main
reason is simply "jumping on the bandwagon" of using the latest and
(perceived) greatest thing.

Ik vind dit betoog van hem dan ook zeer helder en zie dan ook geen nut in het gebruik van XHTML als 95+% van de browsers het niet goed interpreteerd. En een document opgemaakt in HTML 4.01 Strict met alle opmaak gescheiden in een CSS document ziet er net zo netjes uit als een XHTML 1.0 strict document.

Neemt niet weg dat (wat Crisp al zei) je gewoon op de hoogte moet blijven van de ontwikkelingen.