2006-02-08, 14:07
#1
Tanken är ju att som alla vet - Frames är en styggelse - och dessa skall ersättas med en lösning baserad på CSS och Javascript.
Nå, hur gör man det då?
Jo, så här:
Man har en meny-DIV med länkar som i stället för vanliga hrefs använder sej av javascripts.
Dessa javascripts byter sonika ut källan på en iframe ( t ex - andra lösningar fungerar ju också).
Både meny-diven och iframen placeras ut medelst CSS.
För att nedanstående skall fungera så måste alla filerna ligga i samma katalog. Trivialt är ju att lägga de i olika kataloger.
Fil #1: Huvudfilen.
Fil #2: 0.html
Fil #3: 1.html
Fil #4: 2.html
(De senare filerna skall givetvis innehålla vettigare saker än så här. Bara ett exempel helge.)
Kvar att fixa är väl den där irriterande IE-buggen som göra att ramarna blir olika stora, samt att menyalternativet som är valt också markeras - något som bör göras med javascript.
Men, som en liten stomme att bygga på, kanske det duger?
Synpunkter, kommentarer, förbättringar?
Nå, hur gör man det då?
Jo, så här:
Man har en meny-DIV med länkar som i stället för vanliga hrefs använder sej av javascripts.
Dessa javascripts byter sonika ut källan på en iframe ( t ex - andra lösningar fungerar ju också).
Både meny-diven och iframen placeras ut medelst CSS.
För att nedanstående skall fungera så måste alla filerna ligga i samma katalog. Trivialt är ju att lägga de i olika kataloger.
Fil #1: Huvudfilen.
HTML-kod:
<HTML>
<HEAD>
<STYLE>
.Cbox { position: absolute; background-color:#ffffff; top: 10px; height: 400px;
padding:2px;
border-top: 1px solid #000000; border-right: 1px solid #000000;
border-left: 2px solid #000000; border-bottom: 2px solid #000000;
}
Body { background-color:#aaaaaa; }
#Menu { left: 10px; width: 100px; }
#Main { left: 120px; width: 500px; margin:0px;}
.linknormal { font-family: arial; sans-serif; font-weight: normal; }
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function KlickMeny(nr) {
document.all.Main.src=nr;
}
</SCRIPT>
</HEAD>
<BODY>
<DIV ID=Menu CLASS="Cbox" >
<a href="#" onclick=KlickMeny("0.html") class="linknormal">Start</a>
<a href="#" onclick=KlickMeny("1.html") class="linknormal">Ett</a>
<a href="#" onclick=KlickMeny("2.html") class="linknormal">Två</a>
</DIV>
<IFRAME ID=Main frameborder=0 CLASS=Cbox SRC="0.html">
</IFRAME>
</BODY>
</HTML>
Fil #2: 0.html
HTML-kod:
<HTML> <BODY> NOLL </BODY> </HTML>
Fil #3: 1.html
HTML-kod:
<HTML> <BODY> ETT </BODY> </HTML>
Fil #4: 2.html
HTML-kod:
<HTML> <BODY> TVÅ </BODY> </HTML>
(De senare filerna skall givetvis innehålla vettigare saker än så här. Bara ett exempel helge.)
Kvar att fixa är väl den där irriterande IE-buggen som göra att ramarna blir olika stora, samt att menyalternativet som är valt också markeras - något som bör göras med javascript.
Men, som en liten stomme att bygga på, kanske det duger?
Synpunkter, kommentarer, förbättringar?
