Kritik af CSS

Du kunne altid forkorte nogle af dine udtryk, fx:
padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
kan skrives som:
padding:5px;

og:
border-top: 0px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;

som:
border:1px solid #000;
border-top-width:0px;

Har det nogen betydning at jeg forkorter det? Udover det selvfølgelig fylder en smule mindre. Jeg synes det er lettest at holde styr på det når de alle står der, men jeg kan godt se at det kunne gå hen og blive en dårlig vane.

Jo mindre kode jo bedre.. sådan plejer jeg at se på det, men det skal selvfølgeligt ikke kortes så meget ned at det ikke længere er overskueligt for dig, så det er mere eller mindre en smagssag..

Igen en smagsag:

<div id="navcontainer">
<ul>
    <li><a href="#" title="LinkLink tekst">LinkLink 1</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 2</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 3</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 4</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 5</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 6</a></li>
</ul>
</div>

Ville jeg forkorte ned til :


<ul id="navcontainer">>
    <li><a href="#" title="LinkLink tekst">LinkLink 1</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 2</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 3</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 4</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 5</a></li>
    <li><a href="#" title="LinkLink tekst">LinkLink 6</a></li>
</ul>

Der er ikke brug for et block element omkring et block element.. Men hvis det forøger læsligheden for dig, er det ikke noget at tage op..

Hvis du prøver at sætte den har først i dit stylesheet, kan du vistnok undvære de IE-undtagelser, du har på selve siden:

* {
  margin: 0;
  padding: 0;
}

Så skal du så specifikt sætte enten margin eller padding på alle de elementer, som du synes skal have det. Fidusen er nemlig, at alle browsere har deres eget indbyggede stylesheet, som bruger margin og padding til at styre det basale udseende - men det er forskelligt fra browser til browser om den bruger det ene eller det andet. Ovenstående regel nulstiller bare, så du selv kan styre det.

Så også lige at dine h1, h2, h3 ... ligner hinanden rigtigt meget.. alternativt:

h1, h2, h3, h4, h5, h6 {
  background-color: #708491;
  color: #fff;
  font-size: 12px;
  text-align: left;
  margin-top: 0px;
  padding-top: 2px;
  padding-right: 1px;
  padding-bottom: 3px;
  padding-left: 5px;
}

h2
{
font-size: 10px;
}

h3
{
font-size: 8px
}

Altså kun sætte det Specielle for hver header, ikke det hele hver gang, sammel det der er fælles for dem alle, og tildel så forskellen..

Det gør det meget lettere hvis du ex ønsker at ændre color: for dem alle, eller sætte den specifik for en header..

Men igen, bare en smagssag..

jokkejensen: Det forstår jeg ikke helt.
Hvis jeg bare flytter det fra div til ul ender jeg med en ikke-stylet list.
Er der noget jeg har overset?

sandbox: Er det ikke det samme som at sætte dem til 0px i body som jeg allerede har gjort?

Nej, det er ikke det samme. * gælder for alle elementer, hvor html, body kun gælder for netop disse to elementer. Og da de forskellige elementer netop har en fastsat værdi på disse egenskaber i browserens indbyggede stylesheet, vil de ikke bare nedarve fra html eller body.

Evt. kan du lave dit html, body afsnit om til *

#navcontainer ul {

}

du referere jo stadig til alle UL lister der ligger i #navcontainer..

Det skal jo ændres til:

#navcontainer
{

}

hele vejen ned, altså du skal ikke referere til en ul liste i #navcontaioner, men at ul listen er #navcontainer..

Ja selvfølgelig. Jeg tror jeg sad og sov da jeg kiggede på det :)

han bør nu nok ikke lave html og body om til *, da der jo er mange andre ting end bare padding og margin der bliver sat (fx højde ;-)

Angående dine skriftstørrelser, så anbefales det for tilgængeligheden, at du bruger relative størrelser (fx em eller %) i stedet for absolute størrelser (som px). Se fx http://www.useit.com/alertbox/20020819.html. Du kommer nok til at skulle rode lidt med designet, men brugeren får til gengæld mere ud af det. I hvert fald bør dit indhold, menuerne og den slags være mulige at ændre skriftstørrelse på - jeg kan personligt ikke se et større problem i at mere unødvendig tekst har en absolut størrelse.

Skovenborg: Godt fanget. Nej, det vil være bedre at lave en * som så indeholder nulstilling af margin og padding, og eventuelle ting, der skal gælde over hele siden. Generelt farvevalg f.eks. Og de ting behøver så ikke samtidig være i html, body.

Og skriftstørrelse bør stadig være i html, body blokken.

Er der en grund til, at du benytter denne DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">

... og ikke:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

?

Der er lige en ekstra ting der nager mig lidt:
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
Hvorfor er det lige, at SunSans-Regular kommer som nummer tre på den liste? Det virker som en font, som ville være det primære valg, da den er ret sjælden (ja, jeg har den i hvert fald ikke ;-). I dette tilfælde er chancen for den bliver valgt jo også minimal, da du har prioteret Verdana og Arial før - mig bekendt har de fleste (med Windows i hvert fald) netop disse to skriftyper installeret.

apo: De er jo ens de to, så det er vel et fedt?

skovenborg: Hovsa, ja det var en bummert. Den skal slet ikke være der mere.

Jeg ville nu anvende den normalle doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Det er den officielle doctype, og du kan i ikke vide om nogle browsere tolket den anden forkert. Hvis du havde anvendt den anden bare med transitional ville NS6 fx gå i quirks-mode. Om strict også gør det, ved jeg dog ikke, men der er i hvert fald ikke nogen god grund til at bruge den anden.

Okay, den er hermed ændret.

Hvis i smider et svar så fordeler jeg points sådan lidt til højre og venstre.
I er selvfølgelig forsat velkommen til at komme med flere ideer og fejl rettelse hvis i falder over nogle ;)

Her er et fra mig så.

Jeg synes forresten at skovenborg og jokkejensen har gjort det meste af arbejdet i denne tråd, så jeg vil tillade mig at komme med dette forslag til fordeling af de udlovede 30 point:

skovenborg, jokkejensen: 10 point hver.
apo, sandbox: 5 point hver.

vi kunne også bare dele lige over - synes selv vi alle gjorde en god gerning i denne tråd, især hvor det jo er et kritik-spørgsmål, hvor alle forslag jo er velkomne ;-)

men her er et svar fra mig i hvert fald :-)

Jo tak :), glad for at kunne hjælpe...

Tusind tak for hjælpen :)