Hoofdcategorieën

[RSS] Forum » Devschuur® » Webdesign, Markup & Clientside Scripting » [CSS] Correcte schrijfwijze

Topicacties

[CSS] Correcte schrijfwijze

Pagina: 1 2 3 last

Reageer Nieuw Topic

offline Geplaatst op dinsdag 26 juli 2005 13:42

Acties: [view][quote]

Door: BtM909
Moderator WEB/GFX
( o Y o )
Berichten: 22.744
Reg. datum: 08 juni 2000

HTML:
1
2
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../styles/style.css" rel="stylesheet" type="text/css">



This should do the trick! Verderop heb je een onnodige <p> die kan je even weghalen. Weet niet of je nesting wel goed is (regel 27 en 48 heb ik weggehaald)

Daarnaast zou ik zelf gebruik maken van het stricte document model, maar die keuze is aan jou :)

Girls with an ass like this, don't talk to guys with a face like that.
You've moved up on my notch-list. You now have 1 notch...
I have a black belt in Kung Flu!

offline Geplaatst op dinsdag 26 juli 2005 13:56

Acties: [view][quote]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
ik zou die h1 van de huizen namen door h2 vervangen, ze zitten duidelijk onder de h1 "bestaande bouw" ook in je recent blok zitten ze een niveau lager eigenlijk (vandaar mijn suggestie van een hidden h1, dat maakt de boel wat logischer in elkaar.

alle hx elementen samen zouden een nette inhoud van je pagina moeten vormen

gooi de boel eens zonder css online, en kijk dan of het er logisch uitziet, dat zou wel het geval moeten zijn.

mophor wijzigde dit bericht 26-07-2005 14:00 (12%)

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op dinsdag 26 juli 2005 15:10

Acties: [view][quote]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
De code met doorgevoerde wijzigingen ('100% valide HTML 4.01 transitioneel' volgens de W3-validator) :

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <link href="../styles/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="structure" id="navigation">
            <map name="navigation">
                <h1>Woningaanbod</h1>
                <ul>
                    <li><a href="javascript://">» Kopen</a></li>
                    <li><a href="javascript://">» Verkopen</a></li>
                    <li><a href="javascript://">» Bestaande bouw</a></li>
                    <li><a href="javascript://">» Nieuwbouw</a></li>
                </ul>
            </map>
            [img]"../images/navigation_bottom_illustration.png"[/img]
        </div>
        <div class="structure" id="overview">
            <h1>Bestaande bouw</h1>
            <map name="navigation">
                <p><a href="javascript://">[img]"../images/page_navigation_previous.png"[/img]</a> Pagina 1 van 6 <a href="javascript://">[img]"../images/page_navigation_next.png"[/img]</a></p>
            </map>
            <p><span class="quantity">29</span> object(en) gevonden in de categorie: <a href="javascript://">bestaande bouw</a>.</p>
            <div class="objects">
                <h2>Akkrum, Buterwal 8</h2>
                <p>[img]"../images/image.png"[/img]</p>
                <p><span class="price">Vraagprijs:</span> E 480.000,- kk <span class="status">Status: </span><span class="statusSold">verkocht OV</span></p>
                <p>
                    In het centrum bij de pasagiershaven gelegen
                    uitstekend onderhouden VRIJSTAANDE VILLA met
                    GARAGE en AANLEGPLAATS... <a href="javascript://">Lees Verder »</a> 
                </p>
            </div>
            <div class="objects">
                <h2>Akkrum, Buterwal 8</h2>
                <p>[img]"../images/image.png"[/img]</p>
                <p><span class="price">Vraagprijs:</span> E 480.000,- kk <span class="status">Status: </span><span class="statusForSale">Te koop</span></p>
                <p>
                    In het centrum bij de pasagiershaven gelegen
                    uitstekend onderhouden VRIJSTAANDE VILLA met
                    GARAGE en AANLEGPLAATS... <a href="javascript://">Lees Verder »</a> 
                </p>
            </div>
            <map name="navigation">
                <p><a href="javascript://">[img]"../images/page_navigation_previous.png"[/img]</a> Pagina 1 van 6 <a href="javascript://">[img]"../images/page_navigation_next.png"[/img]</a></p>
            </map>
        </div>
        <div id="recent">
            <h1>Recent</h1>
            <div>
                <h2>Paulus Moreelstraat 6</h2>
                  <p>[img]"../images/image_small.png"[/img]</p>
                  <dl>
                    <dt>Plaats: </dt>
                    <dd>Leeuwarden</dd>
                    <dt>Status: </dt>
                    <dd>te koop</dd>
                    <dt>Opp. perceel: </dt>
                    <dd>86 m2</dd>
                    <dt>Vraagprijs: </dt>
                    <dd>20.990.000,- kk</dd>
                </dl>
            </div>
            <div>
                <h2>Paulus Moreelstraat 6</h2>
                  <p>[img]"../images/image_small.png"[/img]</p>
                  <dl>
                    <dt>Plaats: </dt>
                    <dd>Leeuwarden</dd>
                    <dt>Status: </dt>
                    <dd>te koop</dd>
                    <dt>Opp. perceel: </dt>
                    <dd>86 m2</dd>
                    <dt>Vraagprijs: </dt>
                    <dd>20.990.000,- kk</dd>
                </dl>
            </div>
            <div>
                <h2>Paulus Moreelstraat 6</h2>
                  <p>[img]"../images/image_small.png"[/img]</p>
                  <dl>
                    <dt>Plaats: </dt>
                    <dd>Leeuwarden</dd>
                    <dt>Status: </dt>
                    <dd>te koop</dd>
                    <dt>Opp. perceel: </dt>
                    <dd>86 m2</dd>
                    <dt>Vraagprijs: </dt>
                    <dd>20.990.000,- kk</dd>
                </dl>
            </div>
        </div>
    </body>
</html>

 

offline Geplaatst op dinsdag 26 juli 2005 15:26

Acties: [view][quote]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
gaat de goeie kant op, nog wat opmerkingen

- je hebt verschillende elementen met name="navigation" nu hoeven names geloo fik niet strikt uniek te zijn maar dat zou ik wel doen

- waar is de class op de elementen met class="object" voor? om zet te onderscheiden kan, maar dan lijkt het mij dat de div's in het laatste stuk van hetzelfde type moeten zijn. Voor css is het iig niet nodig omdat je deze div's al kan bereiken met "#overview div {}" (wat ik zeker aanraad)

- ook het gebruik van class="structure" volg ik niet helemaal. Bedenk goed of je classen van elementen zou willen onderscheiden en hoe ze dan zouden moeten heten. Voor de CSS zou het iig niet nodig hoeven zijn, als ik zo effe snel kijk.

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op dinsdag 26 juli 2005 15:27

Acties: [view][quote]

Door: BtM909
Moderator WEB/GFX
( o Y o )
Berichten: 22.744
Reg. datum: 08 juni 2000
Transactional en strict ineen, verbaast me dat dat wordt gevalideerd :?

Recommended DTDs to use in your Web document.

Girls with an ass like this, don't talk to guys with a face like that.
You've moved up on my notch-list. You now have 1 notch...
I have a black belt in Kung Flu!

offline Geplaatst op dinsdag 26 juli 2005 15:32

Acties: [view][quote]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
BtM909 schreef op dinsdag 26 juli 2005 @ 15:27:
Transactional en strict ineen, verbaast me dat dat wordt gevalideerd :?

Recommended DTDs to use in your Web document.
Ja dat was een foutje. Ik had alleen even de DTD aangepast zonder op de rest van het doctype te letten. 8)7
 

offline Geplaatst op dinsdag 26 juli 2005 15:40

Acties: [view][quote]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
mophor schreef op dinsdag 26 juli 2005 @ 15:26:
gaat de goeie kant op, nog wat opmerkingen

- je hebt verschillende elementen met name="navigation" nu hoeven names geloo fik niet strikt uniek te zijn maar dat zou ik wel doen

- waar is de class op de elementen met class="object" voor? om zet te onderscheiden kan, maar dan lijkt het mij dat de div's in het laatste stuk van hetzelfde type moeten zijn. Voor css is het iig niet nodig omdat je deze div's al kan bereiken met "#overview div {}" (wat ik zeker aanraad)

- ook het gebruik van class="structure" volg ik niet helemaal. Bedenk goed of je classen van elementen zou willen onderscheiden en hoe ze dan zouden moeten heten. Voor de CSS zou het iig niet nodig hoeven zijn, als ik zo effe snel kijk.


1. Je hebt gelijk, ik had het even snel aangepast om de validator te plezieren. :)
2. 'Objects' slaat op de blokken met huizeninformatie. Ik heb de klasse 'objects' inmiddels verwijderd.
3. 'Structure' gebruik ik juist op jouw aanraden? Je adviseert toch op je website om de div-elementen die voor de structuur van je website zorgen de klasse 'structure' mee te geven?

Edit:

Waarom is het beter om de afbeelding in een aparte paragraaf te plaatsen i.p.v. hem binnen de paragraaf waarin ook de tekst staat te zetten?

Edit 2:

Zou je die huizenopsomming ook in een tabel mogen zetten?

deprogrammeur wijzigde dit bericht 26-07-2005 16:09 (53%)

 

online Geplaatst op dinsdag 26 juli 2005 16:10

Acties: [view][quote]

Door: crisp
Devver / Moderator WEB
Papa van Jeremy \o/
Berichten: 32.925
Reg. datum: 24 februari 2000

HTML:
1
<a href="javascript://">

"als het geen link is, gebruik dan geen anchor..."

Crisp's blog minitracker:
04-11 Inline validatie met een Ajax sausje
20-08 Having fun with IE - part 4: invalid argument

offline Geplaatst op dinsdag 26 juli 2005 16:13

Acties: [view][quote]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
crisp schreef op dinsdag 26 juli 2005 @ 16:10:
HTML:
1
<a href="javascript://">

"als het geen link is, gebruik dan geen anchor..."
Het is een opzet voor een template, dus die links worden later ingevuld. ;)
 

offline Geplaatst op dinsdag 26 juli 2005 16:20

Acties: [view][quote]

Door: mophor
zie 23648
Berichten: 5.427
Reg. datum: 27 juli 2000
huizenopsomming kan ook in een tabel, dan is elk huis een soort record
wat je ook kan doen is wat cheatah aangaf, alleen de eigenschappen in een tabel ipv een dl, denk dat dat niet heel veel uitmaakt, maar als ik kijk naar hoe je ontwerp in elkaar steekt lijkt me de huidige structuur makkelijker stylen dan een tabel

class="structure" geef ik idd ook aan div's die verder geen semantische waarde hebben en dus puur voor structuur (/opmaakdoeleinden) zijn toegevoegd. In jouw geval is dat volgens mij alleen de eerste.

Afbeeldingen kan je in een paragraaf zetten als ie ermee gerelateerd is. Je moet zelf even bedenken in hoeverre dat het geval is. Het komt niet zo heel nauw imho.

Je hebt nu de belangrijkste dingen op orde denk ik, dingen als wel of geen classes, en de naam ervan, een paar extra div's omwille van opmaak, plaatjes al of niet bij een paragraaf trekken of een tabel ipv een dl zijn allemaal kleine dingetjes, kies gewoon wat het makkelijkst te stylen valt en wat voor jou het handigst overkomt.

var _ = {_: 'unreadable code detected!'};
alert(_._);

offline Geplaatst op dinsdag 26 juli 2005 16:54

Acties: [view][quote]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
mophor schreef op dinsdag 26 juli 2005 @ 16:20:
huizenopsomming kan ook in een tabel, dan is elk huis een soort record
wat je ook kan doen is wat cheatah aangaf, alleen de eigenschappen in een tabel ipv een dl, denk dat dat niet heel veel uitmaakt, maar als ik kijk naar hoe je ontwerp in elkaar steekt lijkt me de huidige structuur makkelijker stylen dan een tabel

class="structure" geef ik idd ook aan div's die verder geen semantische waarde hebben en dus puur voor structuur (/opmaakdoeleinden) zijn toegevoegd. In jouw geval is dat volgens mij alleen de eerste.

Afbeeldingen kan je in een paragraaf zetten als ie ermee gerelateerd is. Je moet zelf even bedenken in hoeverre dat het geval is. Het komt niet zo heel nauw imho.

Je hebt nu de belangrijkste dingen op orde denk ik, dingen als wel of geen classes, en de naam ervan, een paar extra div's omwille van opmaak, plaatjes al of niet bij een paragraaf trekken of een tabel ipv een dl zijn allemaal kleine dingetjes, kies gewoon wat het makkelijkst te stylen valt en wat voor jou het handigst overkomt.
Okee, thanks! Blijf ik alleen met die border-attribuut zitten die ik omwille van MSIE aan de paginanavigatie moet toevoegen:

HTML:
1
<a href="javascript://">[img]"../images/page_navigation_next.png"[/img]</a>

deprogrammeur wijzigde dit bericht 26-07-2005 16:58 (14%)

 

offline Geplaatst op dinsdag 26 juli 2005 17:01

Acties: [view][quote]

Door: Bosmonster
Berichten: 18.682
Reg. datum: 05 juni 2001

code:
1
2

img {
    border: none;
}

 

offline Geplaatst op dinsdag 26 juli 2005 17:14

Acties: [view][quote]

Door: deprogrammeur
Berichten: 170
Reg. datum: 20 januari 2004
quote:
Bosmonster schreef op dinsdag 26 juli 2005 @ 17:01:
code:
1
2

img {
    border: none;
}

Vaag.. nu werkt het wel inderdaad. Thanks!
 

Pagina: 1 2 3 last

VNU Media logo Powered by True

© 1998 - 2009 Tweakers.net - Alle rechten voorbehouden - Uw Privacy - Algemene Voorwaarden

Uitgever van: