8 innlegg
• Side 1 av 1
Hjelp med å fikse nettside for flere nettlesere
Hjelp med å fikse nettside for flere nettlesere
av srb » tir 08.07.2008 0:15
Har en site (skoleoppgave) som virker i Safari.
Etter en sjekk i http://validator.w3.org/ finner jeg at det er noen feil. Det er stort sett markeringer på "<>" tagger...
Jeg har gjort en browsertest også (http://browsershots.org/), og finer noen feil der, de skal vekk.
Er det noen som har god greie på dette som kan se på denne siten og forklare meg hvordan få den til å fungere også i andre browsere
?
Adr er: http://home.online.no/~pedebe/index.html
Etter en sjekk i http://validator.w3.org/ finner jeg at det er noen feil. Det er stort sett markeringer på "<>" tagger...
Jeg har gjort en browsertest også (http://browsershots.org/), og finer noen feil der, de skal vekk.
Er det noen som har god greie på dette som kan se på denne siten og forklare meg hvordan få den til å fungere også i andre browsere
?Adr er: http://home.online.no/~pedebe/index.html
- medlem i 193 måneder
Re: Websites and browsers
av decodex » tir 08.07.2008 3:43
Vel, vi kan vel starte med å fikse de grove feilene i selve HTML-koden først - dette kan fort løse floker i forskjellige nettlesere. Årsaken er at når du har såpass grove feil som du har et par steder, så blir det veldig åpent for nettlesere hvordan de skal tolke/feilkorrigere, og da støter man fort på forskjellig måte å vise ting på. Jeg bruker «CSS Selector»-syntaks nedenfor for å henvise til elementer i HTML-koden, regner med du er kjent med det.
Den aller første feilen er at du har div#textbox direkte innenfor ul#meny. Ettersom listen er merket opp som en meny, vil jeg egentlig anta hele div#textbox bør flyttes utenfor ul#meny.
Neste er en grovere syntaktisk feil, hvor du starter ul#navlist med li.active som aldri avsluttes. Den har heller ikke egentlig noe annet innhold enn de påfølgende elementene som den «sluker», så her vet jeg ikke helt om li.active skal slettes helt eller om resten av den bare mangler.
Til sist har du en ekstra avsluttende div-tag helt til slutt i dokumentet, som bare kan slettes. Og så burde du, ved bruk av XHTML DOCTYPE, avslutte link-elementet skikkelig:
De to feilene hvor du har manglende/overflødig avsluttende tag for elementer kunne veldig enkelt vært unngått om du indenterte koden din skikkelig mens du skriver den. Når jeg skal se på andres kode starter jeg alltid med å rydde opp i indentering om den er rotete - da blir strukturen på dokumentet straks mye klarere og feil vises fort. En god editor vil gjøre det automatisk for deg i de aller fleste situasjoner.
(Forøvrig, en engelsk og samtidig så generell tittel på denne tråden er ikke veldig beskrivende.)
Den aller første feilen er at du har div#textbox direkte innenfor ul#meny. Ettersom listen er merket opp som en meny, vil jeg egentlig anta hele div#textbox bør flyttes utenfor ul#meny.
Neste er en grovere syntaktisk feil, hvor du starter ul#navlist med li.active som aldri avsluttes. Den har heller ikke egentlig noe annet innhold enn de påfølgende elementene som den «sluker», så her vet jeg ikke helt om li.active skal slettes helt eller om resten av den bare mangler.
Til sist har du en ekstra avsluttende div-tag helt til slutt i dokumentet, som bare kan slettes. Og så burde du, ved bruk av XHTML DOCTYPE, avslutte link-elementet skikkelig:
- Kode: Merk alt
<link type="text/css" ... />
De to feilene hvor du har manglende/overflødig avsluttende tag for elementer kunne veldig enkelt vært unngått om du indenterte koden din skikkelig mens du skriver den. Når jeg skal se på andres kode starter jeg alltid med å rydde opp i indentering om den er rotete - da blir strukturen på dokumentet straks mye klarere og feil vises fort. En god editor vil gjøre det automatisk for deg i de aller fleste situasjoner.
(Forøvrig, en engelsk og samtidig så generell tittel på denne tråden er ikke veldig beskrivende.)
-
- medlem i 218 måneder
Re: feil i html koding
av srb » tir 08.07.2008 11:04
Takk for svar.
Jeg har forsøkt å endre plasseringen av textboksen, men det synes jeg ikke fungerer. Jeg har gjort andre endringer. Før jeg begynner å endre her, vil det være bedre nå tror du, med de endringene jeg har gjort?
Den "li.active" saken, hvorfor er ikke den nødvendig?
Jeg har forsøkt å endre plasseringen av textboksen, men det synes jeg ikke fungerer. Jeg har gjort andre endringer. Før jeg begynner å endre her, vil det være bedre nå tror du, med de endringene jeg har gjort?
Den "li.active" saken, hvorfor er ikke den nødvendig?
- Kode: Merk alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="aikis.css">
</head>
<body>
<div id="belte">
<div id="arrangement"><ul id="meny">
<div id="textbox">
<h3><a name="arrangement.html">Arrangement</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p><p>Donec
Donec vitae sapien ut libero venenatis faucibus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
Donec vitae sapien ut libero venenatis faucibus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. </p><p>Lorem ipsum dolorulus mus. sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridic Donec
Donec vitae sapien ut libero venenatis faucibus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p></div>
<li id="meny-hjem"><a href="index.html"><span>Hjem</span></a></li>
<li id="meny-studio"><a href="studioogpris.html"><span>Studio</span></a></li>
<li id="meny-utstyr"><a href="mixepultermicrofoneroglydrom.html"><span>Utstyr</span></a></li>
<li id="meny-erfaring"><a href="mixepultermicrofoneroglydrom.html"><span>Erfaring</span></a></li>
<li id="meny-kontakt"><a href="kontakt.html"><span>Kontakt</span></a></li></ul>
<div id="widescreen"></div></div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="bak_scenen.html">bak scenen</a></li>
<li><a href="nyheter.html">nyheter</a></li>
<li><a href="demo.html">send demo</a></li>
<li id="active"><a href="arrangement.html"id="current">arrangement</a></li>
</ul></div>
</div>
<link type="text/css".../>
</body>
</html>
- medlem i 193 måneder
Re: Websites and browsers
av tjodolv » tir 08.07.2008 12:25
li.active antyder at listeelementet skal være "aktivt", noe man ofte bruker for å legge på noe ekstra via css som viser brukeren at "Du er her". En slik åpen tagg gir her ingen mening.
Fremdeles bør du flytte en del av disse taggene ut av hverandre. div#textbox hører ikke hjemme innenfor ul-taggene. Igrunnen mener jeg på at du med fordel kan kode opp siden på nytt for å få en litt bedre struktur på det hele. Du har noe overflødig css, blant annet #wrapper som ikke finnes i html-dokumentet. Det at du bruker forskjellige farger på lenker er ikke bra. Med mindre det er spesifikt for at lenkene i en meny eller overskrifter skal skille seg ut, bør du ha likt utseende lenker overalt i dokumentet. Sett for eksempel de forskjellige a:link, a:visited, a:hover osv i starten av dokumentet, og så kan du legge på mer spesifikke selectors for å justere utseendet på menylenkene etterpå.
Husk også en tittel i title-taggen!
Ikke undervurder mulighetene du har med CSS!
Hvilket program har du brukt for å lage siden?
edit: skriveleif, form og tittel-tagg
Fremdeles bør du flytte en del av disse taggene ut av hverandre. div#textbox hører ikke hjemme innenfor ul-taggene. Igrunnen mener jeg på at du med fordel kan kode opp siden på nytt for å få en litt bedre struktur på det hele. Du har noe overflødig css, blant annet #wrapper som ikke finnes i html-dokumentet. Det at du bruker forskjellige farger på lenker er ikke bra. Med mindre det er spesifikt for at lenkene i en meny eller overskrifter skal skille seg ut, bør du ha likt utseende lenker overalt i dokumentet. Sett for eksempel de forskjellige a:link, a:visited, a:hover osv i starten av dokumentet, og så kan du legge på mer spesifikke selectors for å justere utseendet på menylenkene etterpå.
Husk også en tittel i title-taggen!
Ikke undervurder mulighetene du har med CSS!
Hvilket program har du brukt for å lage siden?
edit: skriveleif, form og tittel-tagg
-
- medlem i 209 måneder
Re: Websites and browsers
av srb » tir 08.07.2008 15:22
Igrunnen mener jeg på at du med fordel kan kode opp siden på nytt for å få en litt bedre struktur på det hele.
Sette opp alt igjen på nytt mener du?
Om jeg endrer html´en må jeg inn å endre plassering av alle elemnter i css´en og da?
Vil bli en stygg jobb...
(programmet som er brukt er Dreamweaver).
- medlem i 193 måneder
Re: Websites and browsers
av tjodolv » tir 08.07.2008 23:28
Dersom du endrer noe i HTMLen er det sannsynlig at du må justere noe i CSSen også, men siden du har der er ikke så voldsomt stor, så jeg skulle mene på at det ikke vil ta så veldig mye tid.
En grei metode kan være å først lage en skisse med blyant og papir på hvordan siden skal se ut, helt grovt. Så lager du siden helt enkelt i HTML, med riktig semantisk oppbygging, uten noen CSS. Da vil du få en hvit side med svart tekst hvor alt kommer under hverandre – slik det vil se ut for en som har en nettleser som ikke støtter CSS. Etter det starter du med CSS, fra ytterst til innerst, ovenfra og ned, eventuelt går litt tilbake i blant for å justere (jeg liker i alle fall å gjøre det slik). Selv har jeg ikke brukt Dreamweaver så mye – er det "WYSIWYG"-delen du bruker eller skriver du noe av (hele?) koden selv?
En grei metode kan være å først lage en skisse med blyant og papir på hvordan siden skal se ut, helt grovt. Så lager du siden helt enkelt i HTML, med riktig semantisk oppbygging, uten noen CSS. Da vil du få en hvit side med svart tekst hvor alt kommer under hverandre – slik det vil se ut for en som har en nettleser som ikke støtter CSS. Etter det starter du med CSS, fra ytterst til innerst, ovenfra og ned, eventuelt går litt tilbake i blant for å justere (jeg liker i alle fall å gjøre det slik). Selv har jeg ikke brukt Dreamweaver så mye – er det "WYSIWYG"-delen du bruker eller skriver du noe av (hele?) koden selv?
-
- medlem i 209 måneder
Re: Websites and browsers
av martin » tir 08.07.2008 23:36
Hvis jeg skal ta utgangspunkt i koden du har skrevet, ville jeg ryddet den opp slik:
Mvh Martin
- Kode: Merk alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="aikis.css" />
</head>
<body>
<div id="belte">
<div id="kontakt">
<ul id="meny">
<li id="meny-hjem"><a href="index.html"><span>Hjem</span></a></li>
<li id="meny-studio"><a href="studioogpris.html"><span>Studio</span></a></li>
<li id="meny-utstyr"><a href="mixepultermicrofoneroglydrom.html"><span>Utstyr</span></a></li>
<li id="meny-erfaring"><a href="relasjoner.html"><span>Erfaring</span></a></li>
<li id="meny-kontakt"><a href="kontakt.html"><span>Kontakt</span></a></li>
</ul>
<div id="textbox">
<p>For henvendelser til Aiki ber vi om at det sendes henvendelser pr <a href="mailto:sr-berg@online.no">mail</a>,<br /> alternativt at det gjøres avtale pr tlf. <br />T:22909087 <br /> M:48948123</p>
<h3>mail oss på <a href="mailto:sr-berg@online.no">aiki@musikk.no</a></h3>
</div>
<div id="widescreen"></div>
</div>
</div>
</body>
</html>
Mvh Martin
-
Administrator
- medlem i 249 måneder
Re: Hjelp med å fikse nettside for flere nettlesere
av srb » ons 09.07.2008 0:04
Takk folkens! Det er kjempebra hjelp å få her.
I DW skriver jeg litt av det jeg skal ha, så velger jeg fra en liste som kommer opp da. Av og til skriver jeg selv i stedet for å velge fra listen.
Jeg setter inn "< >" selv, og slik jeg skjønner det, har jeg ikke vært konsekvent med det.
Har jeg gjort det tungvint eller feil, ved å ha for mye av slikt som må lastes inn for hver side eller? Burde jeg bygge opp sidene slik at jeg ikke laster inn mer enn skjermen og de andre elementene som er nye for hver side? Hvis jeg hadde greid å ha "skallet" som mal og bare laste inn de skiftende elementene hadde det sikkert vært best. Men, jeg ser for meg at det vil være tungvint å gjøre nå.
Takk for oppryddingen Martin:)
MEN:
hvorfor blir det slik her?
Jeg får ikke endret plasseringen av : <div id="navcontainer">, den blir "borte" på en måte i kodingen...
I DW skriver jeg litt av det jeg skal ha, så velger jeg fra en liste som kommer opp da. Av og til skriver jeg selv i stedet for å velge fra listen.
Jeg setter inn "< >" selv, og slik jeg skjønner det, har jeg ikke vært konsekvent med det.
Har jeg gjort det tungvint eller feil, ved å ha for mye av slikt som må lastes inn for hver side eller? Burde jeg bygge opp sidene slik at jeg ikke laster inn mer enn skjermen og de andre elementene som er nye for hver side? Hvis jeg hadde greid å ha "skallet" som mal og bare laste inn de skiftende elementene hadde det sikkert vært best. Men, jeg ser for meg at det vil være tungvint å gjøre nå.
Takk for oppryddingen Martin:)
MEN:
hvorfor blir det slik her?
Jeg får ikke endret plasseringen av : <div id="navcontainer">, den blir "borte" på en måte i kodingen...
- Kode: Merk alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>aikihjem</title>
<link type="text/css" rel="stylesheet" href="rebuilding.css" />
</head>
<body>
<div id="maincontent">
<div id="textbox">
<h1>Om Aiki</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />Aenean commodo ligula eget dolor. Aenean massa.<br />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br />Donec.
Donec vitae sapien ut libero venenatis faucibus. Maecenas tempus,<br /> tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.<br /> Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.<br /> Donec
Donec vitae sapien ut libero venenatis faucibus.</p></div></div>
<ul id="meny">
<li id="meny-hjem">
<a href="index.html"><span>Hjem</span></a></li>
<li id="meny-studio">
<a href="studioogpris.html"><span>Studio</span></a></li>
<li id="meny-utstyr">
<a href="mixepultermicrofoneroglydrom.html"><span>Utstyr</span></a></li>
<li id="meny-erfaring">
<a href="mixepultermicrofoneroglydrom.html"><span>Erfaring</span></a></li>
<li id="meny-kontakt">
<a href="kontakt.html"><span>Kontakt</span></a></li></ul></div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="bak_scenen.html">bak scenen</a></li>
<li><a href="nyheter.html">nyheter</a></li>
<li><a href="demo.html">send demo</a></li>
<li id="active"><a href="arrangement.html"id="current">arrangement</a></li></ul>
</body>
</html>
- medlem i 193 måneder
8 innlegg
• Side 1 av 1
Hvem er i Forumene
Registrerte brukere: Google [Bot]