kaxigt.com

Lästid: < 1 minut

Hjälp – sidan vill inte validera eller så har div-blocken hamnat helt fel. Jag ändrade lite i koden och nu är allt förstört!!!

Här har du ett litet ”check-schema” att följa. Jag vill bara poängtera att denna felsökning inte är någon universalmedicin eftersom jag inte vet hur just din sajt ser ut. Se den istället som ett hjälpmedel till att finna eventuella fel du kanske inte vet hur du annars skulle kunnat upptäcka.

Vi tar det från början

Börja med att kontrollera att du har rätt doctype. Använder du en texteditor som hjälpmedel kan den ibland vilja byta ut ditt doctype mot ett nytt. Med andra ord, skriver du xhtml transitional – ska du ha doctype xhtml transitional.

Du har väl inte glömt din namespacedeklaration? Om du har glömt – sätt dit den. (Gäller bara om du skriver i xhtml)

Hur många body och head har du? Kontrollera så du bara har en av varje. Head ska vara först!

Har du glömt någon av dina mime-files? Sätt dit din content-type om du inte redan har gjort det, annars är sidan bara tentativ valid. I Sverige använder vi denna:

<meta http-equiv="content-type"content="text/html; charset=iso-8859-1>

Har du inte rätt adress till din stylesheet? Ange rätt i så fall.

Använder du bara små bokstäver?

Slutligen – har du glömt eller lagt slutslashen på felaktiga ställen? Kontrollera noga!

Layouten och divar

Börja med att kika på var varje divblock börjar och slutar. Kom ihåg att att varje divblock kan innehålla fler divblock.

Gör så här:
Första divblocket brukar oftast vara det divblock som håller ihop hela layouten. Den heter ofta wrapper eller page, maincontent eller liknande. Det innebär att du måste se till att detta divblock också har sin slutslash sist innan du avslutar body.

Header

Nästa steg är att kika på hur din div head börjar och slutar. Har du dessutom en navigering som ett divblock inuti din head gör du så här: />

Divblocket head öppnas med en div, ögna sedan nedåt så du ser att du har divblockets slutdiv innan dina sidodivar. Om dessa div ligger på rätt plats går du tillbaka och tittar på nästa divblock som ligger i div head.

Är det t ex en navigering kontrollerar du att det blocket börjar och slutar med sin respektive div.

Allt som allt innebär då detta så här långt att efter din body-tagg så bör du ha ett divblock som öppnar hela layouten. Därefter har du ett till divblock som öppnar din div head.

Inuti din head finns det kanske ytterligare ett divblock som ska öppnas – om det nu är din div navcontainer (navigering) eller nåt annat divblock. Direkt efter du har avslutat din navigering (det kan hända att den är i listform – då är det efter </ul>) så stänger du ditt navigeringsblock.

Sedan stänger du också din head. Allt som allt har du då från början tre divblock på rad som ska öppnas – sedan har du två divblock som ska stängas.

Maincontent/sidebar

Nu har vi kommit fram till maincontent – eller din sidebar. Det spelar egentligen ingen roll vilken det är eftersom denna felsökning ser likadan ut då du upprepar samma moment hela tiden.

Jag vill dock påpeka att har du en trekolumnslayout så får du följa denna instruktion från och med nu extra noga eftersom jag endast gör en felsökning som om det hade varit en tvåkolumners layout.

Det du då ska tänka på är att upprepa felsökningen en gång till i det divblock jag inte tar med. Du gör denna felsökning på samma sätt som tidigare.

Förmodligen kommer din sidebar (sidotabell) efter själva maincontent, gör den inte det så spelar det ingen roll det heller. Du ska ialla fall kika på var dessa div öppnas och stängs. Funktionen för dessa är exakt samma som du hade i ditt divblock head. När det gäller din sidebar, börja att se till att den har en öppningsdiv och en slutdiv innan din footer kommer.

Inuti din sidebar gör du samma sak som i head – kontrollera alltså hur många divar du har, avsluta sedan med lika många divar.

Footer

Så har vi kommit fram till din footer. Men innan vill jag att du uppmärksammar denna kod: clear:both.

Inte alla layouter har det på själva sidan utan denna som kan ligga i en div <div class=”clear:both”></div>, kan också finnas som en css-egenskap i din stilmall.

Är det så att du inte haft denna kod som div på sidan ska du inte heller skriva in den för då finns den säkert i stilmallen.

Även här gäller samma regler som tidigare. Du tittar efter ditt divblock som heter footer. Är det öppet? Bra! Har du fler divvar inuti? Gör samma felsökning som i de andra exemplen. Se till att din div footer också stängs med sin avslutande div.

Sist bör du då ha en ensam slutdiv kvar – det är din wrapper, eller själva divblock som håller ihop layouten. Den jag berättade om i början. Se till att den också är stängd. Absolut sist i dokumentet kommer sedan dina avslutande body respektive html-taggar.

Vad du ska tänka på är alltså att det inte har försvunnit en öppnande div eller avslutande div. Du kanske rent av har glömt att stänga en div i bara farten – det brukat vara vanligt i början då man är ovan.

Räkna därför så här:
Här öppnas diven – scrolla nedåt och se var just den diven ska stängas. Gå sedan tillbaka och gör samma sak med varenda divblock. Gör du detta systematiskt och noga så kommer du att upptäcka om det är något som felar.

Felsökning i text och kodning

Ha för vana att också granska din text. Extra noga ska du vara att se hur och var du har formaterat din text. Kontrollera att alla dina <p> stycken också avslutas med </p>.

Du använder väl bara små bokstäver? Har du javascriptkoder i body – se till att även ha små bokstäver i den koden, framförallt om du använder onmouseover-scriptet.

Granska dina tomma märken. Ibland skriver man fel av gammal vana. Slashen skall vara sist i attributet. Exempel: <br />

Glöm inte dina alt-taggar i bildkoden. Glöm inte heller slutslashen. Exempel:

<img src="din_image.gif" alt="bild på en blomma" width="" height="" />

Kontrollera dina koder om du har en enkel lista. Validatorn ger ifrån sig ett tjut om du lägger in <p> attributet inne i själva koden.

Glöm inte bort att du ska definiera ditt attribut. OBS! Använder du doctype xhtml strict kan du inte använda attributet border=”0″. Det ska du egentligen aldrig göra för det är ett fulhack i html. Likaså med target-märkningen, den ska definieras i transitional men uteslutas helt i strict

Har du tabeller? Glöm inte summary=”” i tabellkoden.

Avsluta med att kontrollera så du inte har petat in någon extra-kod i din html-kod. Låt validatorn berätta vad det kan vara för fel.

Javascript och css på sidan

Kontrollera så du har angett ett cdataavsnitt i din javascript kod. Du måste också definiera koden så här:

<script> <!-- här kommer koden //--> </script>

För bäst praxis läggs javascript numer strax ovanför body.

Form-mail – sökfunktioner och liknande

I xhtml transitional och xhtml strict lägger du till en slutslash i varje rad med input. <input type=”hidden” name=”id” value=”xxxx” />

I xhtml strict låter du din form avslutas i samma kod med en slutslash, så här <form action=”koden_här” method=”get” />

I xhtml transitional avslutas den så här: </form> efter alla dina inputs och andra koder.

Detta är en mycket enkel systematisk felsökning. Börjar du förstå principen kommer du även att klara de lite svårare koderna. Läs gärna mer om vanliga nybörjarfel i länken att validera.