optimering af css design

Husk lige at rette din <title> - Der er intet mere uprofessionelt end "Untitled Document".

Du bør sætte alt="" på billeder til rent dekorativ brug. (Jeg tænker især på dine Spacing"-billeder.) Ellers vil din side blive ganske irriterende for f.eks blinde brugere, og Google vil tro at din side handler om spacing. - eller endnu værre: Google vil tro, at du prøver at snyde den til at tro, at din side handler om spacing og blokere for din side.

Din header ville jeg lave således:

<h1 id="header"><img src="SiteImages/Banner.jpg" alt="dotdk.dk : dot med dot på" width="850" height="94" /></h1>

En stavefejl: Coptright

Hvis du alligevel har tænkt dig at kode "ordentligt", så du ikke har brug for de ekstra elementer og attributter, som det giver at bruge en Transitional DTD, så vil jeg anbefale dig at bruge en Strict i stedet.

Derudover er der ikke rigtig nogen fordel i at bruge XHTML, når du alligevel serverer det som text/html (selv til browsere, som godt kan forstå application/html+xml). Selv ville jeg stadig anvende HTML4.01 Strict.

... kig evt. i denne tråd for content negotiation - medmindre du skifter til html 4.01 strict istedet ... http://www.eksperten.dk/spm/719030 (der er links til php, asp og asp.net mime-type negotiation ... og lidt forskellige links til debat om xhtml vs. html) ... men, som Sandbox siger ingen bonus ved det endnu (tror der går minimum 2 år før det giver bonus) ...

Super tak.

Vedr. Transitional DTD, så skal siden smides ind i en asp.net 2.0 master page, så det bliver den som styre det.

vedr. alt="", skal man ikke have en alt på alle billeder, for at det kan valideres på imod W3C?

Jeg undrer mig lidt over:
body{...text-align: center;...}
og: #wrapper{...text-align: left;...}
- mon ikke de begge kunne undværes ?

Efter hvad jeg har hørt kommer der heller ikke understøttelse for application/html+xml i IE7, så jeg vil mene at 2 år er meget lavt skudt.

^ - Shh, jeg har lov at drømme men 2+++ lyder også mere realistisk ... medmindre at ms bliver lidt hurtigere med opdateringer af browseren (noget jeg skal se/opleve før jeg tror på det) ... men man kan da håbe ...

Jo, der SKAL være en alt-attribut på billeder, for at siden skal kunne valideres, men der er ingen regel om at attributten skal have et indhold. Det er ganske gyldigt at skrive alt="" - og det er det anbefalede for "indholdsløse" billeder.

- Og nej, rigtigt nok IE7 understøtter ikke mime-typen :)

body{...text-align: center;...}
og: #wrapper{...text-align: left;...}
- mon ikke de begge kunne undværes ?

jo :-)

alt="" har jeg mange af - det er bare træls at IE viser dem hvis nu man følte behovet for at skrive en tekst ... men en linje som "billede af (varens navn)" siger ikke meget :/

Det er ganske gyldigt at skrive alt="" - og det er det anbefalede for "indholdsløse" billeder

OK. Tak

body {
    margin:0px;
    BACKGROUND-COLOR: #222d2d;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-style:normal;
    height: 100%;
}

ville jeg måske skrive som:

html,body{margin:0px;padding:0px;height:100%;}
body{
  background:#222d2d;
  font: normal Verdana, Arial, Helvetica, sans-serif;
}

... men det er ikke en fejl - men html skal måske også have en
height 100% ... og måske nulstilles i margin og padding :)

background / background-color kan bruges på samme måde i dette tilfælde (background er som font en short definering hvor man kan definere colo - baggrundsbillede - placering - gentagelse ... Men det eneste der er sparet background linjen er kun 6 tegn så en stor besparelse på den linje (det samme gælder for font forkortelsen) - så det er kun hvis man kan overskue det eller føler at shorttags er ligeså nemt ...

prøv at slette:
#header{
    width:auto;
    background-color:#FFFFFF;
}

Prøv:
#menuwrapper{
    width:auto;
    background-color:#FFFFFF;
    background-image:url(../SiteImages/MenuBaggrund.jpg);
    height:29px;
}

->

#menuwrapper{


    background-image:url(../SiteImages/MenuBaggrund.jpg);
    height:29px;
}

#leftcontent{
    float:left;
    width: 613px;
    background-color:#FFFFFF;
}

->

#leftcontent{
    float:left;
    width: 613px;

}

Et godt tip til at se, om man har sat alt-teksterne til noget fornuftigt er at bruge en tekstbaseret browser. Alternativt kan man bruge https://addons.mozilla.org/firefox/1944/ eller lignende.

#rightcontent{
    float:left;
    width: 237px;
    background-image:url(../SiteImages/HoejreMenuBaggrund.jpg);
    height:100%;
    background-color:#FFFFFF;
}

-> height skal som Sandbox tidligere sagde defineres i alle ydre elementer før den udvider sig så height her har ikke betydning medmindre du senere slår over i height 100% design - background-color er som de andre unødvendig da baggrunden på hoved div'en er defineret ... men sommetider kan der som vist i den anden tråd være behovet for en clear div ...

... det med background-color gør sig gældende i resten
af css defineringerne (så jeg ikke spammer så meget)

Jamen altså, det ender jo med at blive helt ”rigtigt” :-)
Jeg retter hen af vejen som i siger...

Jeg ville ca. få denne css fil:

html,body{margin:0px;padding:0px;height:100%;}
body{
  background:#222d2d;
  font: normal Verdana, Arial, Helvetica, sans-serif;
}

#wrapper{
    width:850px;
    margin: 0px auto;
    background:#fff;
}

#menuwrapper{
    background-image:url('../SiteImages/MenuBaggrund.jpg');
    height:29px;
}

#leftcontent{
    float:left;
    width: 613px;
}

#rightcontent{
    float:left;
    width: 237px;
    background-image:url('../SiteImages/HoejreMenuBaggrund.jpg');
}

#footerlogo{
    float:left;
    margin-left:84px;
    width: 120px;
}

#footermenu{
    float:left;
    width: 450px;
    font-size: 11px;
   
}

.footer{
    color: #999;
}

.clearer{clear:both;}





og så skal der lige en ekstra clear ind:
</div>
</body></html>

rettes til:

<div class="clearer"></div></div>
</body></html>



... ret evt. den anden clear div til en div med en class også ...

I skal IGEN have mange tak. Det er helt suverænt..
og så lige et par svar.

Mvh
Jakob

[ Jamen altså, det ender jo med at blive helt ”rigtigt” :-) ]
Du har ikke lavet noget af det jeg sagde forkert ;)
Det er bare små rettelser som fjernelse af unødvendig
css defineringer ... som at man siger at et element skal
have en baggrund et underliggende element har - eller at
man definerer en width til auto, hvor den allerede er auto :o)

ok :-)

Hmmm, kan godt tænkes at der lige bør en color definering på de steder, hvor der er en baggrundsdefinering (bare så man ikke får en warning fra w3c's css validator ... den del glemte jeg :o)

( lige en enkel fejl ... http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dotdk.dk%2Fcss%2Fdefault.html ( ">" -> " />")

En lille ting mere:

<div id="contentwrapper">
<div id="leftcontent">
  <p>venstre content</p>
  <br>
  <br>

</div>
<div id="rightcontent">
  <p>højre content</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div style="clear: both;">&nbsp;</div>
</div>


kan rettes til:



<div id="leftcontent">
  <p>venstre content</p>
  <br>
  <br>

</div>
<div id="rightcontent">
  <p>højre content</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div class="clearer"></div>



( <div id="contentwrapper"> </div og clear div'en rettet fra style til en class ...)

Jeg lægger lige et svar også, men det er helt klart mclemens, der har udført det meste arbejde her, så en fordeling i stil med 40/20 måske?

Hvis Sandbox synes er den fin med mig ...
Jeg har ikke mere at pege fingre af ;)
... Joh, måske at w3c's css validator
på jigsaw ... men den kører vist fint nu :o)

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.dotdk.dk%2Fcss%2Fstyle%2Fstyle.css&usermedium=all

... jeg har lavet / overførte en fejl ved det font short tag det er medium og ikke normal :/ ... color og baggrunde er også tilføjet i nedenstående rettelser for at glemme de warnings


body{
  color:#000;
  background:#222d2d;
  font:medium Verdana,Arial,Helvetica,sans-serif;
}

#wrapper{
    width:850px;
    margin: 0px auto;
    background:#fff;
    color:#000;
}


...


.footer{
    background:#fff;
    color: #999;
}

edit: ... Joh, måske at w3c's css validator
på jigsaw [edit manglede en halv sætning her: "har kørt lidt dårligt de sidste par dage" ]... men den kører vist fint nu :o)

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.dotdk.dk%2Fcss%2Fdefault.html

og

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dotdk.dk%2Fcss%2Fdefault.html

DET ER LÆKKERT. Tak igen

Velbekom, og tak for point :)