Hur ska html-koden se ut?

ZX Spectrum · Inlägg av **ZX Spectrum** » 29 feb 2008, 19:45

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?

ZX Spectrum · Inlägg av **ZX Spectrum** » 29 feb 2008, 19:49

Jag snyggade till det hela lite.

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>

I min kod blir så får bara texten bakgrundfärg.

ZX Spectrum · Inlägg av **ZX Spectrum** » 29 feb 2008, 20:09

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.

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>

KiviE · Inlägg av **KiviE** » 29 feb 2008, 20:29

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;".

Konservburk · Inlägg av **Konservburk** » 29 feb 2008, 21:34

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 av **omnius** » 29 feb 2008, 21:59

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

Smygis · Inlägg av **Smygis** » 29 feb 2008, 22:01

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.

ZX Spectrum · Inlägg av **ZX Spectrum** » 29 feb 2008, 23:12

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>

Ser onekligen bra ut. Känns faktiskt som en bra lösning.
Kanske ska skapa en separat css-fil istället för att ha den inbäddad i html-filen?

ZX Spectrum · Inlägg av **ZX Spectrum** » 29 feb 2008, 23:23

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.

Konservburk · Inlägg av **Konservburk** » 29 feb 2008, 23:35

ZX Spectrum skrev: Ser onekligen bra ut. Känns faktiskt som en bra lösning.

Det bästa med den här typen av lösning är att den funkar helt ok även i enkla
text-baserade webläsere (eller röst-webläsare).

ZX Spectrum skrev: Kanske ska skapa en separat css-fil istället för att ha den inbäddad i html-filen?

Du kan ha en separat css-fil. Du kan även lägga javascripet in en egen fil om
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 av **ZX Spectrum** » 01 mar 2008, 00:41

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.

Konservburk · Inlägg av **Konservburk** » 01 mar 2008, 02:11

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.

Det är för att div:arna visas som standard ända till javascriptet döljer dem.
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.

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.

Egentligen är centrering en layoutgrej som är bäst att göra i stilmallen, typ:

Kod: Markera allt

h1 {
   text-align: center;
   font: 30pt "Courier New";
}

Då behöver du inga separata center-taggar.

Såg f.ö. att du missade ändra ett par href="#historik" till href="#reportoar",
href="#villduvaramed" och href="#lyssnapaoss".

ZX Spectrum · Inlägg av **ZX Spectrum** » 01 mar 2008, 02:39

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.

Konservburk · Inlägg av **Konservburk** » 01 mar 2008, 04:51

ZX Spectrum skrev: och dessutom enligt W3C-standard.

Jag provade att köra sidan genom w3c-validator. Den blev inte helt glad, så
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;
}

omnius · Inlägg av **omnius** » 01 mar 2008, 10:30

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">

Konservburk · Inlägg av **Konservburk** » 01 mar 2008, 11:24

herr johansson, tack för påpekandet. Jag har rättat till det nu.

ZX Spectrum · Inlägg av **ZX Spectrum** » 01 mar 2008, 13:28

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/

Konservburk · Inlägg av **Konservburk** » 01 mar 2008, 13:34

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.

ZX Spectrum · Inlägg av **ZX Spectrum** » 01 mar 2008, 14:34

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.

ZX Spectrum · Inlägg av **ZX Spectrum** » 01 mar 2008, 15:13

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.

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"?>

Ubuntu Sverige

Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?

SV: Hur ska html-koden se ut?