Gå til innhold

Spørsmål om SSI (går fra frames til SSI)


Anbefalte innlegg

Siden alle mener at frames er en uting prøver jeg meg nå på en SSI-løsning i stedet. Jeg har en meny på venstre side av hjemmesiden min som jeg vil at skal dukke opp på alle sidene.

 

Først hadde jeg litt problemer med å få menyen til å bli værende på venstre side, og ikke "spise opp" hele siden sånn som den gjorde hvis jeg bare limte inn SSI-koden. Så det løste jeg ved å putte menyen og selve innholdet i siden i hver sin "div"-kode. Var det riktig måte å takle problemet på?

 

Og hvordan skal jeg ordne det med gjesteboka? Jeg vil at gjesteboka skal dukke opp med menyen på venstre side, som som alle de andre vanlige sidene. Har prøvd med iframes, men det blir bare stygt.

 

http://tonje.org/

 

Hjææælp :p

Endret av Lotielin
Lenke til kommentar
Videoannonse
Annonse
Først hadde jeg litt problemer med å få menyen til å bli værende på venstre side, og ikke "spise opp" hele siden sånn som den gjorde hvis jeg bare limte inn SSI-koden. Så det løste jeg ved å putte menyen og selve innholdet i siden i hver sin "div"-kode. Var det riktig måte å takle problemet på?

Nå har jeg forandret mening, og fikset det med tables i stedet. Føler at det er mer stabilt.

Lenke til kommentar

div er å anbefale så lenge du ikke skal liste opp en tabell med rader og kolonner.

 

Du kan spesifisere bredden på div slik at det blir stabilt :)

 

Problemet for deg blir å løse det med bloggen med SSI. Så vidt jeg kan se er det på to forskjellige domener, men siden det er et underdomene kan det jo hende at du har tilgang på menyen fra blogg domenet. Da kan du putte inn SSI koden i bloggens tema.

Lenke til kommentar
div er å anbefale så lenge du ikke skal liste opp en tabell med rader og kolonner.

 

Du kan spesifisere bredden på div slik at det blir stabilt :)

 

Problemet for deg blir å løse det med bloggen med SSI. Så vidt jeg kan se er det på to forskjellige domener, men siden det er et underdomene kan det jo hende at du har tilgang på menyen fra blogg domenet. Da kan du putte inn SSI koden i bloggens tema.

Tusen takk for svar :) Jeg har bestemt meg for å ha runde kanter på menyen, slik det er nå. Hvordan kan jeg lett løse det med div? Det frister litt lite å bytte nå som jeg endelig er ferdig etter flere timers jobbing, men er det store fordeler med div så vil jeg så klart vurdere det!

 

Jeg oppdaget først nå at jeg har tilgang til bloggens filer og koder via hjemmesidetilkoblingen i FTP-programmet (beklager, kan ikke de korrekte navnene på alt det her). Men det virker som at for hvert innlegg blir det ett eller to nye filer, så da må jeg jo oppdatere alt fortløpende... Og tanken på det virker litt demotiverende :p

 

Så jeg har endt opp med en løsning som sikkert er veldig amatørmessig, men den fungerer inntil videre... Og det er å putte gjesteboka og bloggen i iframes... Det ser kanskje ikke topp ut, men... :blush:

Lenke til kommentar

Synes løsningen din er fin den, av og til må man rett og slett ty til iframes når man skal sy sammen flere forskjellige systemer.

 

Problemet med iframe er jo alle disse scrollbarene, her er et tips som kan hjelpe på litt. (ikke testet i IE)

 

...
<head>
...
<script type="text/javascript">

/**
* iframe ligger i en td-celle i en tabell
* sett høyden til tabellen til 100% slik at den fyller web browserens høyde
* nå kan vi justere høyden på iframen basert på td-cellens høyde hos klienten
*
* td id="iframecontainer"   // td-cellen må ha denne IDen
* iframe id="frame"         // iframe må ha denne IDen
* body onLoad="load();"  // kall prepare når dokumentet er lastet hos klienten
*
* Sett gjerne bredden på iframen til 100% så fyller den cellen
* ville også satt bredden på cellen så bred at gjesteboken og bloggen passer
* uten at du får en horisontal scrollbar nede
*/

function resizeIframe() {
 /* en minste størrelse slik at iframen blir forminsket når du forminsker browseren*/
 document.getElementById('frame').style.height = "500px"; 
 /* hent høyden til td-cellen som iframen ligger i */
 var height = document.getElementById('iframecontainer').clientHeight; 
 /* setter høyden på iframen */
 document.getElementById('frame').style.height = height+"px";
}

function load() {
 /* Når siden er lastet, kan du endre størrelsen på iframen basert på td-cellen den ligger i */
 resizeIframe(); 
 /* Hver gang størrelsen på browservinduet endres: kall funksjonen */
 window.onresize = resizeIframe; 
}

</script>
</head>
<body onLoad="load();"> 
...

JavaScript kjører hos klienten i browseren, og vil sørge for at høyden på iframen din justeres etter høyden på cellen den ligger i.

 

Les kommentarene, og lim inn <script> ... </script> delen i head (på samme måte som <style>)

 

du må også legge til onLoad attributtet på <body> slik at JavaScriptet kjøres når siden har lastet. Også må du legge til id="frame" på IFRAME og id="iframecontainer" på den <TD> som du har <IFRAME> i.

 

For å unngå mest mulig av scrollbarer bør du sette bredden på tabellen bred nok til å holde bloggen og menyen. Og for at scriptet skal ha noen funksjon må tabellens høyde settes til en prosentandel av høyden på siden. f.eks. height="100%"

 

Lykke til!

Lenke til kommentar
Synes løsningen din er fin den, av og til må man rett og slett ty til iframes når man skal sy sammen flere forskjellige systemer.

 

Problemet med iframe er jo alle disse scrollbarene, her er et tips som kan hjelpe på litt. (ikke testet i IE)

 

...
<head>
...
<script type="text/javascript">

/**
* iframe ligger i en td-celle i en tabell
* sett høyden til tabellen til 100% slik at den fyller web browserens høyde
* nå kan vi justere høyden på iframen basert på td-cellens høyde hos klienten
*
* td id="iframecontainer"   // td-cellen må ha denne IDen
* iframe id="frame"         // iframe må ha denne IDen
* body onLoad="load();"  // kall prepare når dokumentet er lastet hos klienten
*
* Sett gjerne bredden på iframen til 100% så fyller den cellen
* ville også satt bredden på cellen så bred at gjesteboken og bloggen passer
* uten at du får en horisontal scrollbar nede
*/

function resizeIframe() {
 /* en minste størrelse slik at iframen blir forminsket når du forminsker browseren*/
 document.getElementById('frame').style.height = "500px"; 
 /* hent høyden til td-cellen som iframen ligger i */
 var height = document.getElementById('iframecontainer').clientHeight; 
 /* setter høyden på iframen */
 document.getElementById('frame').style.height = height+"px";
}

function load() {
 /* Når siden er lastet, kan du endre størrelsen på iframen basert på td-cellen den ligger i */
 resizeIframe(); 
 /* Hver gang størrelsen på browservinduet endres: kall funksjonen */
 window.onresize = resizeIframe; 
}

</script>
</head>
<body onLoad="load();"> 
...

JavaScript kjører hos klienten i browseren, og vil sørge for at høyden på iframen din justeres etter høyden på cellen den ligger i.

 

Les kommentarene, og lim inn <script> ... </script> delen i head (på samme måte som <style>)

 

du må også legge til onLoad attributtet på <body> slik at JavaScriptet kjøres når siden har lastet. Også må du legge til id="frame" på IFRAME og id="iframecontainer" på den <TD> som du har <IFRAME> i.

 

For å unngå mest mulig av scrollbarer bør du sette bredden på tabellen bred nok til å holde bloggen og menyen. Og for at scriptet skal ha noen funksjon må tabellens høyde settes til en prosentandel av høyden på siden. f.eks. height="100%"

 

Lykke til!

Tusen takk for hjelp!!! Men beklager, jeg skjønte virkelig ikke helt det der. Jeg har bare lært meg HTML og CSS på egenhånd via www.lissaexplains.com, scripting har jeg aldri hatt noe med å gjøre, så dette gikk litt over hodet på meg... :blush: Har prøvd og prøvd å kopiere inn og gjøre det riktig, men uten resultater...

Lenke til kommentar

gjestebok.shtml ser slik ut:

<!--#include file="meny.txt" -->

  <iframe src="http://gjestebok.nuffe.net/32395" width="761" style="border:none; height:670"></iframe>


  <!--#include file="sluttkode.txt" -->

 

meny.txt ser slik ut:

<HTML><HEAD>
<link rel="shortcut icon" href="http://home.no/b-tonje/Favicon.ico"><TITLE>Tonjes side</TITLE>
<style type="text/css">
A:link {font-family:tahoma; font-size:10pt; color:#441177; text-decoration:underline}
A:visited {font-family:tahoma; font-size:10pt; color:#441177; text-decoration:underline}
A:hover {font-family:tahoma; font-size:10pt; color:#441177; text-decoration:underline}
body{font-family:tahoma; font-size:10pt; color:#000000}
td{font-family:tahoma; font-size:10pt; color:#000000}
</style>
</HEAD><BODY>

<table width="960" cellpadding="0" cellspacing="0" border="0">

<tr height="14">
 <td width="14" style="background-color: #915EC4"><img src="Design/Topleft.jpg" width="14" height="14" border="0" alt="..." /></td>
 <td width="171" style="background-color: #915EC4"></td>
 <td width="14" style="background-color: #915EC4"><img src="Design/Topright.jpg" width="14" height="14" border="0" alt="..." /></td>
 <td width="761" style="background-color: #FFFFFF"></td>
</tr>

<tr height="650">
 <td style="background-color: #915EC4"></td>
 <td style="background-color: #915EC4" valign="top"> 
<div style="position:relative; top:20">
<div align="center"><img style="border:0px" src="Design/Tonjes_side.jpg"><p>

<img style="border:0px" src="Design/Rat.jpg"></div>

<img style="border:0px" src="Design/Dilldall.jpg"><p>
<a style="color:#441177; text-decoration:none" href="index.shtml">Startsiden</a>

<a style="color:#441177; text-decoration:none" href="musikk.shtml">Musikk jeg liker</a>

<a style="color:#441177; text-decoration:none" href="kaniner.shtml">Kaninkjendis-siden</a>

<a style="color:#441177; text-decoration:none" href="blogg.shtml">Bloggen min</a>



<img style="border:0px" src="Design/Kreativt.jpg"><p>
<a style="color:#441177; text-decoration:none" href="foto.shtml">Fotoalbum</a>

<a style="color:#441177; text-decoration:none" href="tegninger.shtml">Gamle tegninger</a>

<a style="color:#441177; text-decoration:none" href="smykker.shtml">Smykker jeg har laget</a>



<img style="border:0px" src="Design/Rotter.jpg"><p>
<a style="color:#441177; text-decoration:none" href="minerotter.shtml">Mine rotter</a>

<a style="color:#441177; text-decoration:none" href="rottefakta.shtml">Om tamrotter</a>

<a style="color:#441177; text-decoration:none" href="burguiden.shtml">Burguiden</a>

<a style="color:#441177; text-decoration:none" href="rottelenker.shtml">Rottelenker</a>



<img style="border:0px" src="Design/Annet.jpg"><p>
<a style="color:#441177; text-decoration:none" href="gjestebok.shtml">Gjestebok</a>

<a style="color:#441177; text-decoration:none" href="lenker.shtml">Lenker</a>
</div>
</td>
 <td style="background-color: #915EC4"></td>
 <td style="background-color: #FFFFFF" valign="top" rowspan="3">

<div style="position:relative; top:0; left:20">

 

og sluttkode.txt ser slik ut:

</div>
</td>
</tr>


<tr height="14">
<td style="background-color: #915EC4"><img src="Design/Bottomleft.jpg" width="14" height="14" border="0" alt="..." /></td>
<td style="background-color: #915EC4"></td>
<td style="background-color: #915EC4"><img src="Design/Bottomright.jpg" width="14" height="14" border="0" alt="..." /></td>
</tr>

<tr>
<td style="background-color: #FFFFFF"><font color="#FFFFFF">.</font>
</td>
<td style="background-color: #FFFFFF"><font color="#FFFFFF">.</font>
</td>
<td style="background-color: #FFFFFF"><font color="#FFFFFF">.</font>
</td>
</tr>


</table>


</body></HTML>

Lenke til kommentar

Hei Tonje igjen,

 

har ikke rukket å sett på dette før nå! men har lagt til JavaScript til de filene du limte inn her, så kan du prøve å bruke endringene om du vil :) Dette gjelder bare da for gjesteboken, men regner med du har en fil som heter blogg.shtml også, som er stort sett lik gjestebok.shtml. Her legger du bare til id="frame" på IFRAME taggen der også. Har ikke testet dette selv nå, men håper det fungerer

 

gjestebok.shtml:

<!--#include file="meny.txt" -->
<iframe id="frame" src="http://gjestebok.nuffe.net/32395" width="761" style="border:none; height:670"></iframe>
<!--#include file="sluttkode.txt" -->

 

meny.txt:

<HTML><HEAD>
<link rel="shortcut icon" href="http://home.no/b-tonje/Favicon.ico"><TITLE>Tonjes side</TITLE>
<style type="text/css">
A:link {font-family:tahoma; font-size:10pt; color:#441177; text-decoration:underline}
A:visited {font-family:tahoma; font-size:10pt; color:#441177; text-decoration:underline}
A:hover {font-family:tahoma; font-size:10pt; color:#441177; text-decoration:underline}
body{font-family:tahoma; font-size:10pt; color:#000000}
td{font-family:tahoma; font-size:10pt; color:#000000}
</style>

<script type="text/javascript">
/**
* iframe ligger i en td-celle i en tabell
* sett høyden til tabellen til 100% slik at den fyller web browserens høyde
* nå kan vi justere høyden på iframen basert på td-cellens høyde hos klienten
*
* td id="iframecontainer"   // td-cellen må ha denne IDen
* iframe id="frame"		 // iframe må ha denne IDen
* body onLoad="load();"  // kall prepare når dokumentet er lastet hos klienten
*
* Sett gjerne bredden på iframen til 100% så fyller den cellen
* ville også satt bredden på cellen så bred at gjesteboken og bloggen passer
* uten at du får en horisontal scrollbar nede
*/

function resizeIframe() {
 /* en minste størrelse slik at iframen blir forminsket når du forminsker browservinduet */
 document.getElementById('frame').style.height = "500px"; 
 /* hent høyden til td-cellen som iframen ligger i */
 var height = document.getElementById('iframecontainer').clientHeight; 
 /* setter høyden på iframen */
 document.getElementById('frame').style.height = height+"px";
}

function load() {
 /* Når siden er lastet, kan du endre størrelsen på iframen basert på td-cellen den ligger i */
 resizeIframe(); 
 /* Hver gang størrelsen på browservinduet endres: kall funksjonen */
 window.onresize = resizeIframe; 
}
</script>



</HEAD>
<BODY  onLoad="load();"> <!-- Kjør funksjonen load() når hele siden er lastet i browseren -->

<table width="960" cellpadding="0" cellspacing="0" border="0" height="100%"> <!-- Setter høyden til hele siden, slik at IFRAME kan utvides etter størrelsen på vinduet -->

<tr height="14">
 <td width="14" style="background-color: #915EC4"><img src="Design/Topleft.jpg" width="14" height="14" border="0" alt="..." /></td>
 <td width="171" style="background-color: #915EC4"></td>
 <td width="14" style="background-color: #915EC4"><img src="Design/Topright.jpg" width="14" height="14" border="0" alt="..." /></td>
 <td width="761" style="background-color: #FFFFFF"></td>
</tr>

<tr height="650">
 <td style="background-color: #915EC4"></td>
 <td style="background-color: #915EC4" valign="top"> 
<div style="position:relative; top:20">
<div align="center"><img style="border:0px" src="Design/Tonjes_side.jpg"><p>

<img style="border:0px" src="Design/Rat.jpg"></div>

<img style="border:0px" src="Design/Dilldall.jpg"><p>
<a style="color:#441177; text-decoration:none" href="index.shtml">Startsiden</a>

<a style="color:#441177; text-decoration:none" href="musikk.shtml">Musikk jeg liker</a>

<a style="color:#441177; text-decoration:none" href="kaniner.shtml">Kaninkjendis-siden</a>

<a style="color:#441177; text-decoration:none" href="blogg.shtml">Bloggen min</a>



<img style="border:0px" src="Design/Kreativt.jpg"><p>
<a style="color:#441177; text-decoration:none" href="foto.shtml">Fotoalbum</a>

<a style="color:#441177; text-decoration:none" href="tegninger.shtml">Gamle tegninger</a>

<a style="color:#441177; text-decoration:none" href="smykker.shtml">Smykker jeg har laget</a>



<img style="border:0px" src="Design/Rotter.jpg"><p>
<a style="color:#441177; text-decoration:none" href="minerotter.shtml">Mine rotter</a>

<a style="color:#441177; text-decoration:none" href="rottefakta.shtml">Om tamrotter</a>

<a style="color:#441177; text-decoration:none" href="burguiden.shtml">Burguiden</a>

<a style="color:#441177; text-decoration:none" href="rottelenker.shtml">Rottelenker</a>



<img style="border:0px" src="Design/Annet.jpg"><p>
<a style="color:#441177; text-decoration:none" href="gjestebok.shtml">Gjestebok</a>

<a style="color:#441177; text-decoration:none" href="lenker.shtml">Lenker</a>
</div>
</td>
 <td style="background-color: #915EC4"></td>
 <td style="background-color: #FFFFFF" valign="top" rowspan="3" id="iframecontainer">

<div style="position:relative; top:0; left:20">

 

sluttkode.txt:

</div>
</td>
</tr>


<tr height="14">
<td style="background-color: #915EC4"><img src="Design/Bottomleft.jpg" width="14" height="14" border="0" alt="..." /></td>
<td style="background-color: #915EC4"></td>
<td style="background-color: #915EC4"><img src="Design/Bottomright.jpg" width="14" height="14" border="0" alt="..." /></td>
</tr>

<tr>
<td style="background-color: #FFFFFF"><font color="#FFFFFF">.</font>
</td>
<td style="background-color: #FFFFFF"><font color="#FFFFFF">.</font>
</td>
<td style="background-color: #FFFFFF"><font color="#FFFFFF">.</font>
</td>
</tr>


</table>


</body></HTML>

Endret av footnote
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...