Alternativ till framset

erikcronberg · 2009-12-07, 18:33

Jag undrar om det finns några enkla mallar som motsvarar funktionen i en sida uppbyggd av framesets. I det här fallet en enkel sida med en meny och en del som ändras beroende på hur man navigerar i menyn. Helt enkelt en klassisk fotografportfolio med en meny med kategorier och en del med bilderna i kategorin man valt att kolla på.

Gärna någon enkel mall, eller en väldigt enkel guide!

qson · 2009-12-07, 20:00

Frameset är (som du säkert har förstått) inte alls bra i sökmotorvänlighet eller för synskadade eller annat maskinläsligt.

Bättre är när "allt innehåll ligger i samma fil".

Gör en sida med "boxar" (förslagsvis <DIV>-element), en för sidhuvudet, en för menyn, en för innehållet och en för sidfoten.

Läs på lite om <DIV> och CSS

CSS:
http://iwtjanster.idg.se/webbstudio/...ning.asp?id=27

Tabellfria designer (Wikipedia)
http://en.wikipedia.org/wiki/Tableless_web_design

Alistapart: (Mycket bra guide. Har själv räddat mig många gånger...)
http://www.alistapart.com/articles/practicalcss/

Har tyvärr ingen färdig mall, men alistapart borde hjälpa dig ett steg på vägen.

Haken är att "menyn" måste finnas med på varje undersida, och om du vill ha in en ny menyknapp måste du ändra i alla undersidor också. Såvida du inte använder någon form av webbverktyg (CMS), SSI (.shtml) eller PHP för att läsa in sidhuvud, menyer och sidfot mm...

taz76 · 2009-12-07, 21:10

Lägg menyn i en extern fil och läs in den med <?php require_once 'meny.php'; ?>

Kan göras samma med sidfot m.m också.

KarlRoos · 2009-12-07, 21:28

HTML:

Kod:

<ul id="menu">
<li><a href="sida1.html">Sida 1</a></li>
<li><a href="sida2.html">Sida 2</a></li>
</ul>
<div id="main">
</div>

CSS:

Kod:

ul
{text-align: center;}

ul li
{display: inline;}

#main
{width: 960px; margin: auto;}

JS (inom <head>)

Kod:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$("#menu li a").click(function(){
var file = $(this).attr("href");
$("#main").load(file);
return false;
});
</script>

Det här fungerar ungefär som med frames (fast mycket bättre och korrekt). Om du inte förstår själva koden så kan jag förklara den men det borde vara ganska straight forward.

JS koden använder biblioteket jQuery som även inkluderas. Den binder sedan klick på menyn till en funktion som kollar vilken fil som står i href och sedan laddar den till diven #main.

OBS: otestad kod, borde funka.

Alex · 2009-12-08, 13:55

Enda felet jag ser i KarlRoos kod är att all jQuery-kod bör köras när dokumentet är färdigt.

Kod:

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
      $("#menu li a").click(function(){
            $("#main").load($(this).attr("href"));
            return false;
      });
});
</script>

erikcronberg · 2009-12-08, 16:54

Oj, tack så mycket! Det ser ut som något jag kan klara av när det blir dags. Annars kanske jag kan höra av mig så ordnar jag ersättning för det, om ni har F-skatt.

erikcronberg · 2010-01-02, 19:31

Tänkte försöka ta tag i det här själv innan jag anlitar någon.

Hur enkelt kan http://erikcronberg.se/nyasdfasdf/ konverteras? Är det kanske enklare att börja på nytt?

erikcronberg · 2010-01-02, 20:23

Måste man ha menyn som en lista förresten?

erikcronberg · 2010-01-02, 21:10

Oj vad jag spammar.

Nu hittade jag http://www.dynamicdrive.com/dynamici...jaxcontent.htm och har lyckats få ihop allt jättefint, förutom laddningen av CSS-filer. Som jag tolkar den guiden måste man klicka på en länk för att få CSS-filerna att laddas i sidan, hur gör man det automatiskt?

kw_wasabi · 2010-01-04, 06:24

Citat:

Ursprungligen postat av erikcronberg

Nu hittade jag http://www.dynamicdrive.com/dynamici...jaxcontent.htm och har lyckats få ihop allt jättefint, förutom laddningen av CSS-filer. Som jag tolkar den guiden måste man klicka på en länk för att få CSS-filerna att laddas i sidan, hur gör man det automatiskt?

<head>
<link href="style.css" type="text/css" rel="stylesheet">
</head>

Länken du menar verkar bara vara en finess om man vill att besökarna ska kunna välja olika utséenden på sajten.

Aktiva användare som för närvarande tittar på det här ämnet: 2 (0 medlemmar och 2 gäster)

Menu

Alternativ till framset