Hur ska html-koden se ut?
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Jag behöver egentligen inte så många rutor om jag har förstått det hela rätt. Ska försöka att få till sidan så trycker man på en länk på vänster sida så blir förstasidan "hidden" och den andra "visible". Enda kruxet är bakgrundsfärgen, då kanske man behöver ha dessa rutor?
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Jag snyggade till det hela lite.
I min kod blir så får bara texten bakgrundfärg.
Kod: Markera allt
<body>
<center><h1>Göteborgs Salongsorkester</h></center><br><br>
<a href="javascript://" onclick="showhide('main');">Förstasidan</a><br>
<a href="javascript://" onclick="showhide('historik');">Historik</a>
<div id="main" style="position:absolute; top:100px; left:200px; background:#0000FF";>
Förstasidan
</div>
<div id="historik" style="position:absolute; top:200px; left:200px; background:#FF0000;">
Här kommer historiken att finnas
</div>
</body>
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Tror att jag har fixat div-taggarna ordentligt nu.
La in lite width och height och detta gjorde susen.
CSS koncentrerar jag mig på lite senare och går därmed över till den svåra delen nu. Javascript i head-taggen.
La in lite width och height och detta gjorde susen.

CSS koncentrerar jag mig på lite senare och går därmed över till den svåra delen nu. Javascript i head-taggen.
Kod: Markera allt
<html>
<head>
</head>
<body>
<center><h1>Göteborgs Salongsorkester</h></center><br><br>
<a href="javascript://" onclick="showhide('main');">Förstasidan</a><br>
<a href="javascript://" onclick="showhide('historik');">Historik</a>
<div id="main" style="position:absolute; top:100px; left:200px; width:1000px; height:600px; background:#0000FF; visibility:hidden;">
Förstasidan
</div>
<div id="historik" style="position:absolute; top:100px; left:200px; width:1000px; height:600px; background:#FF0000; visibility:show;">
Här kommer historiken att finnas
</div>
</body>
</html>
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
-
- Inlägg: 2157
- Blev medlem: 25 okt 2007, 14:00
- OS: Ubuntu
- Utgåva: 22.04 Jammy Jellyfish LTS
- Ort: Luleå
SV: Hur ska html-koden se ut?
Ett tips med css, använd en separat css fil som du lägger till i head... detta medför att du slipper en del kod i din html kod...
tex. <div id="main" style="position:absolute; top:100px; left:200px; width:1000px; height:600px; background:#0000FF; visibility:hidden;"> räcker det att skriva <div id="main">.
I css filen har man sen allt annat. dvs style="position:absolute; top:100px; left:200px; width:1000px; height:600px; background:#0000FF; visibility:hidden;".
tex. <div id="main" style="position:absolute; top:100px; left:200px; width:1000px; height:600px; background:#0000FF; visibility:hidden;"> räcker det att skriva <div id="main">.
I css filen har man sen allt annat. dvs style="position:absolute; top:100px; left:200px; width:1000px; height:600px; background:#0000FF; visibility:hidden;".
- Konservburk
- Inlägg: 5919
- Blev medlem: 07 apr 2007, 22:28
SV: Hur ska html-koden se ut?
Förslag på hur du skulle kunna göra:
Kod: Markera allt
<html>
<head>
<script type="text/javascript">
<!--
function show(object) {
var element = document.getElementsByName('page');
for(i=0;i<element.length;i++) {
if(element[i].id == object)
element[i].style.display='';
else
element[i].style.display='none';
}
}
//-->
</script>
<style type="text/css">
<!--
div.page {
position: absolute;
top: 100px;
left: 200px;
width: 200px;
height: 200px;
}
div#\#main {
background-color: red;
}
div#\#historik {
background-color: blue;
}
//-->
</style>
</head>
<body onload="if(location.hash=='') show('#main'); else show(location.hash);">
<h1>Göteborgs Salongsorkester</h1>
<div>
<a href="#main" onclick="show('#main');">Förstasidan</a><br />
<a href="#historik" onclick="show('#historik');">Historik</a><br />
</div>
<div id="#main" name="page" class="page">
Förstasidan
</div>
<div id="#historik" name="page" class="page">
Historik
</div>
</body>
</html>
- omnius
- Inlägg: 272
- Blev medlem: 30 jan 2007, 12:38
- OS: Annat GNU/Linux
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Gnesta
SV: Hur ska html-koden se ut?
Leta upp en bra meny på följande plats.....
http://www.cssplay.co.uk
snubben som gör allt detta är sanslöst duktig CSS-trollkonstnär
http://www.cssplay.co.uk
snubben som gör allt detta är sanslöst duktig CSS-trollkonstnär
Strength in the arm, truth in the heart, honesty in speech
- Smygis
- Inlägg: 849
- Blev medlem: 21 jun 2006, 18:41
- OS: Ubuntu
- Utgåva: 24.04 Noble Numbat LTS
- Ort: Kramfors
SV: Hur ska html-koden se ut?
Alltid då jag gett mig på att försöka knacka lite xhtml så går jag till htmldog. Bättre sida finns inte.
Dem kanske inte har allt men deras tutorial är extremt bra.
Mycket bättre än den jäkla röra alla andra har. Jag hittar fan inte ens guiderna på dem flesta andra.
Dock så har dem ingen ECMAScript guide.
Dem kanske inte har allt men deras tutorial är extremt bra.
Mycket bättre än den jäkla röra alla andra har. Jag hittar fan inte ens guiderna på dem flesta andra.
Dock så har dem ingen ECMAScript guide.
A Foolish Consistency is the Hobgoblin of Little Minds.Beware: In C++, your friends can see your privates!
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Ser onekligen bra ut. Känns faktiskt som en bra lösning.Konservburk skrev: Förslag på hur du skulle kunna göra:
Kod: Markera allt
<html> <head> <script type="text/javascript"> <!-- function show(object) { var element = document.getElementsByName('page'); for(i=0;i<element.length;i++) { if(element[i].id == object) element[i].style.display=''; else element[i].style.display='none'; } } //--> </script> <style type="text/css"> <!-- div.page { position: absolute; top: 100px; left: 200px; width: 200px; height: 200px; } div#\#main { background-color: red; } div#\#historik { background-color: blue; } //--> </style> </head> <body onload="if(location.hash=='') show('#main'); else show(location.hash);"> <h1>Göteborgs Salongsorkester</h1> <div> <a href="#main" onclick="show('#main');">Förstasidan</a><br /> <a href="#historik" onclick="show('#historik');">Historik</a><br /> </div> <div id="#main" name="page" class="page"> Förstasidan </div> <div id="#historik" name="page" class="page"> Historik </div> </body> </html>
Kanske ska skapa en separat css-fil istället för att ha den inbäddad i html-filen?
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Jag testade att köra min gamla lösning med frames och jämförde med den som Konservburk hade och det är stor skillnad på snabbhet mellan dom olika lösningarna. Frames går snabbt men inte lika snabbt.
Har svårt att tänka mig att så många kör med div-taggar och javascript. Kör man med Dreamweaver eller lär sig i skolan om html så är det frames lärarna klarar av. Synd egentligen för det är så mycket smidigare om man kan ha 1 html-fil istället för 20 stycken på en hemsida. Nu ska jag se om jag kan bygga ut med fler länkar.
Det grafiska och liknande får komma i andrahand tills jag fått iordning skelettet till sidan.
Har svårt att tänka mig att så många kör med div-taggar och javascript. Kör man med Dreamweaver eller lär sig i skolan om html så är det frames lärarna klarar av. Synd egentligen för det är så mycket smidigare om man kan ha 1 html-fil istället för 20 stycken på en hemsida. Nu ska jag se om jag kan bygga ut med fler länkar.

Det grafiska och liknande får komma i andrahand tills jag fått iordning skelettet till sidan.
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
- Konservburk
- Inlägg: 5919
- Blev medlem: 07 apr 2007, 22:28
SV: Hur ska html-koden se ut?
Det bästa med den här typen av lösning är att den funkar helt ok även i enklaZX Spectrum skrev: Ser onekligen bra ut. Känns faktiskt som en bra lösning.
text-baserade webläsere (eller röst-webläsare).
Du kan ha en separat css-fil. Du kan även lägga javascripet in en egen fil omZX Spectrum skrev: Kanske ska skapa en separat css-fil istället för att ha den inbäddad i html-filen?
du vill. Bara att anropa dem i headern:
Kod: Markera allt
<head>
<link rel="stylesheet" type="text/css" href="stilmall.css" />
<script type="text/javascript" src="scriptet.js"></script>
</head>
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Nu har jag fått till det någorlunda bra tror jag. Det går riktigt snabbt att ladda sidan. 
Bara en liten smådetalj som jag reagerar över och det är att i kanske 0,02 sekunder så visas två lager samtidigt på sidan.
Lättare att se om man trycker F5 för att uppdatera sidan.
http://www.freewebs.com/kjermeus/
Jag separerade CSS och la i en separat fil för att ha bättre överblick över den. Blev grymt mycket lättare när man ska uppdatera uppgifterna på sidan vid senare tillfällen.
Antar att det är xhtml som jag använder mig av? Läste lite om att <p>-taggen inte fungerar i xhtml. Skulle använda denna för att centrera titeln på sidan. Nu använde jag mig av <center> istället och det verkar fungera. Fick lite tips från denna sidan:
http://www.december.com/html/x1tran/element/center.html
Tack för all hjälp jag fått av er alla. Skulle aldrig kunnat fixa detta på egen hand. När man nu ändå lägger ner massa jobb på att få till en bra hemsida så kan man göra det korrekt på en gång. Tråkigt att behöva göra om den i framtiden.

Bara en liten smådetalj som jag reagerar över och det är att i kanske 0,02 sekunder så visas två lager samtidigt på sidan.
Lättare att se om man trycker F5 för att uppdatera sidan.
http://www.freewebs.com/kjermeus/
Jag separerade CSS och la i en separat fil för att ha bättre överblick över den. Blev grymt mycket lättare när man ska uppdatera uppgifterna på sidan vid senare tillfällen.
Antar att det är xhtml som jag använder mig av? Läste lite om att <p>-taggen inte fungerar i xhtml. Skulle använda denna för att centrera titeln på sidan. Nu använde jag mig av <center> istället och det verkar fungera. Fick lite tips från denna sidan:
http://www.december.com/html/x1tran/element/center.html
Tack för all hjälp jag fått av er alla. Skulle aldrig kunnat fixa detta på egen hand. När man nu ändå lägger ner massa jobb på att få till en bra hemsida så kan man göra det korrekt på en gång. Tråkigt att behöva göra om den i framtiden.
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
- Konservburk
- Inlägg: 5919
- Blev medlem: 07 apr 2007, 22:28
SV: Hur ska html-koden se ut?
Det är för att div:arna visas som standard ända till javascriptet döljer dem.ZX Spectrum skrev: Bara en liten smådetalj som jag reagerar över och det är att i kanske 0,02 sekunder så visas två lager samtidigt på sidan.
Lättare att se om man trycker F5 för att uppdatera sidan.
Vill du slippa det så gör du tvärt om, dvs låter dem vara dålda från början.
Det gör du genom att lägga till style="display:none;" til div:arna. Jag tror
inte det fungerar att ha just det som du vill ha som standardvärde i css-filen,
utan du måste nog ha den biten direkt i div-taggarna.
Egentligen är centrering en layoutgrej som är bäst att göra i stilmallen, typ:ZX Spectrum skrev: Antar att det är xhtml som jag använder mig av? Läste lite om att <p>-taggen inte fungerar i xhtml. Skulle använda denna för att centrera titeln på sidan. Nu använde jag mig av <center> istället och det verkar fungera.
Kod: Markera allt
h1 {
text-align: center;
font: 30pt "Courier New";
}
Såg f.ö. att du missade ändra ett par href="#historik" till href="#reportoar",
href="#villduvaramed" och href="#lyssnapaoss".
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Nu är nog det mesta fixat. Tack för all hjälp Konservburk!!!
http://www.freewebs.com/kjermeus/
Nu är det upp till orkestern att bestämma vad det ska stå på hemsidan.
Sen får jag försöka hålla stilen så det blir en så ren sida som möjligt och dessutom enligt W3C-standard.
http://www.freewebs.com/kjermeus/
Nu är det upp till orkestern att bestämma vad det ska stå på hemsidan.

Sen får jag försöka hålla stilen så det blir en så ren sida som möjligt och dessutom enligt W3C-standard.
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
- Konservburk
- Inlägg: 5919
- Blev medlem: 07 apr 2007, 22:28
SV: Hur ska html-koden se ut?
Jag provade att köra sidan genom w3c-validator. Den blev inte helt glad, såZX Spectrum skrev: och dessutom enligt W3C-standard.
jag fixad runt lite så att den kommer igenom ostraffat. Jag flyttade allt som
har med javascript att göra till en egen fil så att det inte blir så grötigt i själva
html-filen:
Kod: Markera allt
<?xml version="1.0" encoding="UTF-8"?>
<!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="sv" lang="sv">
<head>
<title>Göteborgs Salongsorkester</title>
<link rel="stylesheet" type="text/css" href="mall.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Göteborgs Salongsorkester</h1>
<div id="meny">
<a href="#main" class="page">Förstasidan</a><br />
<a href="#historik" class="page">Historik</a><br />
<a href="#reportoar" class="page">Reportoar</a><br />
<a href="#villduvaramed" class="page">Vill du vara med?</a><br />
<a href="#kalendarium" class="page">Kalendarium</a><br />
<a href="#lyssnapaoss" class="page">Lyssna på oss</a><br />
<p><a href="mailto:salongsorkester1234567@comhem.se">Skicka E-post</a></p>
<p><a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</div>
<div id="main" class="page" style="display:none;">
Detta är förstasidan. Här kan det finnas ett foto över orkestern och något som lockar besökare.
</div>
<div id="historik" class="page" style="display:none;">
Här kommer historiken att stå.
</div>
<div id="reportoar" class="page" style="display:none;">
Här kan vi visa besökaren av hemsidan vilka låtar vi framför för.
</div>
<div id="villduvaramed" class="page" style="display:none;">
Här kan man annonsera att man söker musiker.
</div>
<div id="kalendarium" class="page" style="display:none;">
Kalendarium
</div>
<div id="lyssnapaoss" class="page" style="display:none;">
Här ska man kunna provlyssna på några av låtarna vi framför.
</div>
</body>
</html>
script.js:
Kod: Markera allt
window.onload = init;
function init() {
var page = location.hash.substring(1);
if(page == '') page = 'main'; show(page);
var element = document.getElementsByTagName('a');
for(i = 0; i < element.length; i++) {
if(element[i].className == 'page') {
element[i].onclick = click;
}
}
}
function click(event) {
show(event.target.hash.substring(1));
}
function show(object) {
var element = document.getElementsByTagName('div');
for(i = 0; i < element.length; i++) {
if(element[i].className == 'page') {
if(element[i].id == object) {
element[i].style.display = '';
}
else {
element[i].style.display = 'none';
}
}
}
}
mall.css:
Kod: Markera allt
h1 {
text-align: center;
font: 30pt "Courier New";
font-weight: bold;
}
div.page {
position: absolute;
top: 100px;
left: 200px;
}
img {
border: none;
}
Senast redigerad av 1 Konservburk, redigerad totalt 1 gånger.
- omnius
- Inlägg: 272
- Blev medlem: 30 jan 2007, 12:38
- OS: Annat GNU/Linux
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Gnesta
SV: Hur ska html-koden se ut?
herr konservburk, eftersom se är vår landskod men språkkoden är sv bör det nog vara:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
Strength in the arm, truth in the heart, honesty in speech
- Konservburk
- Inlägg: 5919
- Blev medlem: 07 apr 2007, 22:28
SV: Hur ska html-koden se ut?
herr johansson, tack för påpekandet. Jag har rättat till det nu.
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Så där ja, nu är det ändrat. Jag tog bort W3C-bilden. Är det någon fördel med att visa att sidan är W3C-säker?
http://www.freewebs.com/kjermeus/
http://www.freewebs.com/kjermeus/
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
- Konservburk
- Inlägg: 5919
- Blev medlem: 07 apr 2007, 22:28
SV: Hur ska html-koden se ut?
Bara showoff. Men den är praktisk att klicka på då och då när man håller på och
kodar sidan för att se att den fortfarande slinker igenom testet.
kodar sidan för att se att den fortfarande slinker igenom testet.
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Aha.... Kanske är bättre att återplacera den för att lättare kunna testa min sida tills den är helt färdig. Då kan jag ta ställning till om den ska vara där eller inte.
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om
- ZX Spectrum
- Inlägg: 4905
- Blev medlem: 04 jan 2007, 22:58
- OS: Ubuntu
- Utgåva: Vet inte/ingen utgåva passar
- Ort: Göteborg
SV: Hur ska html-koden se ut?
Förstår inte att jag får klagomål på att <?xml version="1.0" encoding="UTF-8"?> inte ligger på förstaraden?
När jag kollar i pico/textredigeraren så är den raden på rad 1.
När jag kollar i pico/textredigeraren så är den raden på rad 1.
Kod: Markera allt
Line 2, Column 5: XML Parsing Error: XML declaration allowed only at the start of the document.
<?xml version="1.0" encoding="UTF-8"?>
Jag vet vad jag vill, men vill inte det jag vet, men ändå vet jag ingenting och nu vet jag garanterat inte vad jag snackar om