Jeg klarer ikke på stående fot å se hva som er feil i den originale koden - men jeg ser at den er veldig rotete. Det er nok også det som er problemet her; semantikken er ikke god nok. Semantikk handler om hvordan du strukturerer koden din, at alle elementer og tagger havner i rett rekkefølge. Det finnes et veldig bra online-verktøy for å sjekke om koden din er semantisk korrekt og fri for skrivefeil. Gå til
validator.w3.org og skriv inn linken til siden din - eller velg "validate by direct input" og lim inn kildekoden din. Du vil få en liste over feil i koden, med en melding om hvorfor feilen oppstår. Husk at, som i all debugging, problemet trenger ikke nødvendigvis være det validatoren peker på - den kan gi utslag på noe som er korrekt, fordi det er en feil på et tidligere punkt. Den gir også beskjed om du bruker koder som ikke følger standarden du skriver i - for eksempel, i XHTML 1.0 Strict, så er det andre regler for bruk av Flash-objekter enn det XHTML 1.0 Transitional har.
Jeg anbefaler at du bruker nettopp XHTML 1.0 Strict som standard, fordi den er rimelig solid i de aller fleste nettlesere.
Sitat av
z0p
jeg ville startet med å rydde opp markupen.
[...]
php tagger er uvessentlige i sammenhengen og du bør droppe de for ryddighetens skyld
[...]
unngå unødvendig markup
[...}
dette skal være en fullgod erstatning for markupen din.
[...]
spesielt hvordan du strukturer en side
Jeg blir ikke enig med meg selv om hvorvidt du tuller eller faktisk er seriøs nå. Bruk av PHP på denne måten er forsåvidt ikke helt stuerent i min bok - men samtidig er det en helt legitim måte å bruke dynamisk innhold på - noe trådstarter også gjør med variabelen $loggoutput. Jeg ser at du også har droppet "unødvendig" markup i koden din - du glemmer å lukke <p>-taggene, du lukker en <div>-tagg inni seg selv (det går ikke an på omsluttende tagger, som <div>, <p>, <a> og lignende - i motsettning til <img>, <meta>, <link> etc.) og du bruker foreldede tagger som <strong> og <em>. Styling bør foregå gjennom CSS alene - å blande det sammen vil på sikt lage kaos. Resultatet av markupen du postet er heller ikke i nærheten av det trådstarter - antakeligvis - ønsker å oppnå.
Her er et eksempel jeg har satt sammen med XHTML 1.0 Strict, basert på beskrivelsen du (trådstarter) gav. For å kjøre direkte, lagre CSS-en som "test.css" i samme mappe som en fil med HTML-delen.
XHTML:
Kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="test.css" />
</head>
<body>
<div id="bakgrunn">
<div id="topp">
Topp
</div>
<div id="venstre">
<h1>XHTML 1.0 Strict.</h1>
<p>Helt likt.</p>
<p>Uansett.</p>
</div>
<div id="hoyre">
<form method="post" action="?">
<p>
Brukernavn
<input type="text" name="brukernavn" id="brukernavn" /><br />
Passord
<input type="password" name="passord" id="passord" /><br />
<input type="submit" name="submit" value="Logg inn" />
</p>
</form>
<p>
Takket være clear:both så dytter begge disse kolonnene bakgrunn og meny nedover
jo mer innhold du putter inn.
</p>
<img src="http://www.google.no/intl/en_com/images/srpr/logo1w.png" alt="Eksempelbilde" />
</div>
<div id="bunn">
<ul>
<li><a href="#">Knapp</a></li>
<li><a href="#">Knapp</a></li>
<li><a href="#">Knapp</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS:
Kode
body {
font-family: verdana;
font-size: 12px;
background: #ccffcc;
}
div#bakgrunn {
width: 600px;
background: #cccccc;
padding-bottom: 5px;
}
div#topp {
background: #666666;
color: #ffffff;
font-weight: bold;
padding: 5px;
}
div#venstre {
float: left;
width: 290px;
padding: 5px;
}
div#hoyre {
float: right;
width: 290px;
padding: 5px;
}
div#hoyre form {
text-align: right;
}
div#bunn {
clear: both;
}
a {
color: #000000;
}
ul {
list-style-type: none;
}
li {
display: inline;
background: #666666;
border: 1px solid #ffffff;
padding: 5px;
}
Legg merke til hvordan jeg styler listen (ul og li) for å få menyen til å funke i alle nettlesere. Se også på clear:both, som sørger for å trekke ned bakgrunnen slik du ville. Clear:both betyr at dette elementet ikke vil ha noen flytende (floating) elementer ved sidenav seg (kan også bruke clear:left og clear:right). Dette kan du bruke til å "oppheve" float-elementene. En div skal faktisk ikke wrappe seg rundt et float-element selv om elementet er større enn div-en. Men når du legger inn et element etter float-elementene som har clear:both, så skal div-en wrappe seg rundt dette - og clear:both sørger for å dytte float-elementene unna, og dermed havner disse også på innsiden av div-en. Du kan lese mer om tagger, atributter (både for XHTML og CSS) på
W3Schools. Google "W3Schools" + elementnavn eller tag for å få opp en bra beskrivelse av hva det er for noe.
Noen tips: Spesielt for XHTML så skal alle tagger åpnes og lukkes, og i rett rekkefølge. Feil:
<div><p>Tekst[COLOR="Red"]</div></p>[/COLOR] - Korrekt:
<div><p>Tekst[COLOR="Lime"]</p></div>[/COLOR]. I forhold til XHTML 1.0 Strict er det mange kjente HTML-tagger du bør unngå å bruke - som de nevnte <i> og <strong>. Dette vil du få beskjed om i valideringen. For å strukturere siden din bør du først visualisere (les: tegne) hvordan nettsiden skal se ut. Tegn alle div-ene som firkanter og få oversikt over hvordan nestingen ("nest", eng. hvordan tagger ligger inni hverandre) skal se ut. Prøv å være konsekvent - jeg ser du bruker både fargekoder (eks. #ffcc00) OG farger som ord (eks. "White") i CSS-en din. Prøv å bare bruker fargekoder. Alle nettlesere trenger ikke å ha samme farge på "Blue" - men "#0000ff" skal være nogenlunde likt. (Teknisk notis: Nettlesere HAR faktisk ulike fargepaletter, så fargene vil ikke være like.) Jeg ser også at du bruker ulike måleenheter, som em, prosent og pixler. Prøv å holde deg til én enhet - selv bruker jeg kun pixler.
For å ta det et steg videre mot semantisk korrekthet, så har jeg også slengt inn nødvendige referanser for charset i HTML-koden - jeg skriver alltid i UTF-8 - denne koden MÅ samsvare med den faktiske tegnkodingen du skriver i. Du kan ikke endre tegnkoding i vanlig notisblokk (den lagrer som ANSI, og du må da bruke ISO-8859-1. Om jeg ikke tar helt feil), så du må laste ned noe skikkelig redigeringsverktøy for å endre det. Jeg bruker Notepad++, som er gratis å laste ned på SourceForge.
