Søg
Avatar billede Slettet bruger
05. maj 2010 - 16:57 Der er 10 kommentarer og
1 løsning

Basis opbygning, med menu og side der skal skifte.

Hejsa.
Kunne ikke rigtig formulere min overskrift ordentligt, så jeg skriver det her.

Jeg vil lave mig en hjemmeside ud af ren HTML, og det skal være sådan så, jeg har en "ramme" hvor jeg har min menu i, og en "ramme" hvor de forskellige sider skal vises.

Altså: I menuen er der nogle punkter, når man så trykker på fx "Produkter", så skal ikke hele siden opdatere, men bare indholdet i den ene "ramme", hvor siderne skal vises i.

Håber det er info nok, til at i kan hjælpe mig med hvordan dette skal gøres.

Tak på forhånd :)
Avatar billede danco Nybegynder
05. maj 2010 - 17:27 #1
jeg er ikke sikker på jeg forstår hvad du mener.
Men umiddelbart lyder det til at du vil bruge <frames>, det er absolut ikke anbefalelsesværdigt.

Hvorfor vil du ikke have "hele siden" til at opdatere?

Den måde man normalvis laver det på er at opbygge et layout ud fra CSS og <div> og så opdatere hele siden når der trykkes på et link.
Avatar billede claes57 Ekspert
05. maj 2010 - 17:30 #2
så vil du have en iframe-løsning.
Her skal du bare lave intro-html og side 2 til 4, og typisk gemme dette som default.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Min side</title>
  <meta http-equiv="Content-type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
body, td {
  background: #c0c0c0;
  color: #000000;
  text-align: center;
  font-size: 9pt;
  font-family: Verdana, sans-serif;
}
</style>

</head>
<body>
<table border="0"  width="800">
  <tr><!-- toprække -->
    <td colspan="2" height="50">Mit Firma</td>
  </tr>
  <tr><!-- midten med menu og data -->
    <td height="700" width="100" style="background-color:ffffff; text-align:left; vertical-align:top;"><!-- menu heri -->
    <a href="#" onClick="document.getElementById('data').src= 'intro.html';">Introduktion</a><br>
    <a href="#" onClick="document.getElementById('data').src= 'side2.html';">Side 2</a><br>
    <a href="#" onClick="document.getElementById('data').src= 'side3.html';">Side 3</a><br>
    <a href="#" onClick="document.getElementById('data').src= 'side4.html';">Side 4</a><br>
    </td>
    <td><!-- data heri -->
    <iframe frameborder="0" height="700" id="data" scrolling="auto" width="700" src="intro.html"></iframe>
    </td>
  </tr>
  <tr><!-- bundtekst -->
    <td colspan="2" height="10">© mig 2010</td>
  </tr>
</table>

</body>
</html>
Avatar billede danco Nybegynder
05. maj 2010 - 17:35 #3
Jeg synes nu stadig ikke iframes lyder som den optimale løsning sammenlignet med CSS modellen.
Avatar billede keysersoze Ekspert
05. maj 2010 - 17:46 #4
(i)frames er til gengæld det eneste der på en bare nogenlunde måde kan løse den udfordring spørgsmålet går på - et alternativt er at benytte AJAX men det er også sjældent en god idé og teknisk er det også betydelig sværere.

Men bortset fra det så jo, man skal nok 10-15 år tilbage i tiden for at finde nogle der havde problemer med at hele siden opdaterede :)
Avatar billede danco Nybegynder
05. maj 2010 - 17:56 #5
Præcis,
Mit forsøg gik blot på at identificere nærmere hvorfor man skulle ønske at kun dele af siden skulle opdateres.
Derudover, så vidt jeg ved, er (i)frames forældet i forhold HTML standarder.
Avatar billede keysersoze Ekspert
05. maj 2010 - 18:08 #6
Den sidste linje vil jeg gerne se en kildehenvisning til (:
Avatar billede claes57 Ekspert
05. maj 2010 - 18:13 #7
skal det være uden iframe, så kan det hele laves på én side - bare med skjulte elementer.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>faneblad8</title>

<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

    var ver3 = (navigator.appVersion.charAt(0) <= "3") ? true : false;
    var dom = (document.getElementById) ? true : false;
    var ie4 = (document.all && !document.getElementById) ? true : false;
    var ns4 = (document.layers) ? true : false;
    var ie5 = (document.all && document.getElementById) ? true : false;
    var n6 = (document.getElementById && !document.all) ? true : false;
   
    function findObjekt(objekt) {
        var blok;
        if (dom) blok = document.getElementById(objekt).style;
      else if (ie4) blok = document.all[objekt].style;
      else if (ns4) blok = document.layers[objekt];
      return blok;
    }
   
    function setBgColor(objekt, color) {
    var blok = findObjekt(objekt);
        blok.backgroundColor = color;
    }
    function setFgColor(objekt,color) {
    var blok = findObjekt(objekt);
        blok.color = color;
    }
    function visObjekt(objekt){
    var blok = findObjekt(objekt);
        blok.visibility = "visible";
    }
    function skjulObjekt(objekt){
    var blok = findObjekt(objekt);   
        blok.visibility = "hidden";
    }
    function expand(objekt){
    var blok = findObjekt(objekt);
        blok.display="block"
    }
    function collapse(objekt){
    var blok = findObjekt(objekt);
        blok.display="none"
    }
    function setBorderBottomColor(objekt,color){
    var blok = findObjekt(objekt);
        blok.borderBottomColor = color;
    }
    function setBorderBottomWidth(objekt,width){
    var blok = findObjekt(objekt);
        blok.borderBottomWidth = width;
    }
    function skjulAlle(){
    for (i=1;i<9;i++)
        collapse('indhold'+i)
    }
    function resetColors(){
    for (i=1;i<9;i++){
      setBgColor('indhold' + i,'#fff');
      setBgColor('menupunkt' + i,'#ccc')
//      setBorderBottomColor('menupunkt'+i,'black');
    }
    }
    function visIndhold(nr) {
      skjulAlle();
      resetColors();
      expand('indhold'+nr);
      setBgColor('menupunkt' + nr,'#eee');
      setBgColor('indhold' + nr,'#eee');
//      setBorderBottomColor('menupunkt'+nr,'#eee');
    }
  </script>

<style type="text/css">
<!--
body  {
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background:#ffcc55; 
font-family:arial, helvetica,sans-serif;
text-align:center;
line-height:115%;
font-size:14px;
}
#menuholder  {
position: relative;
width: 800px;
padding: 0px;
margin: 0px auto;
z-index: 10;
}
#menuholder .menupunkt  {
position: absolute;
padding-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
margin: 0px;
color: black;
text-decoration: none;
text-align: center;
font-size: 12px;
font-weight: bold;
}
#menupunkt1  {
left: -1px;
width: 100px;
border: 1px solid black;}
#menupunkt2  {
left: 99px;
width: 100px;
border: 1px solid black; }   
#menupunkt3  {
left: 199px;
width: 100px;
border: 1px solid black; }
#menupunkt4  {
left: 299px;
width: 100px;
border: 1px solid black; }
#menupunkt5  {
left: 399px;
width: 100px;
border: 1px solid black; }   
#menupunkt6  {
left: 499px;
width: 100px;
border: 1px solid black; }
#menupunkt7  {
left: 599px;
width: 100px;
border: 1px solid black; }   
#menupunkt8  {
left: 699px;
width: 100px;
border: 1px solid black;}
.indhold  {
position: relative;
z-index: 5;
top: 25px;
width: 800px;
height: 500px;
margin: 0px auto;
text-align: left;
display:none;
overflow:auto;
padding-bottom:10px;
cursor:default;
border: 1px solid black;
}
.tabel{
width: 800px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
-->
</style>
</head>
<body onload="visIndhold(1)">
<table class="tabel" summary="">
<tr><td>
<!-- Fanebladshoved -->
<div id="menuholder">
<A class=menupunkt id=menupunkt1 onfocus=this.blur() href="java script:visIndhold(1)">Fane 1</a>
<A class=menupunkt id=menupunkt2 onfocus=this.blur() href="java script:visIndhold(2)">Fane 2</a>
<A class=menupunkt id=menupunkt3 onfocus=this.blur() href="java script:visIndhold(3)">Fane 3</a>
<A class=menupunkt id=menupunkt4 onfocus=this.blur() href="java script:visIndhold(4)">Fane 4</a>
<A class=menupunkt id=menupunkt5 onfocus=this.blur() href="java script:visIndhold(5)">Fane 5</a>
<A class=menupunkt id=menupunkt6 onfocus=this.blur() href="java script:visIndhold(6)">Fane 6</a>
<A class=menupunkt id=menupunkt7 onfocus=this.blur() href="java script:visIndhold(7)">Fane 7</a>
<A class=menupunkt id=menupunkt8 onfocus=this.blur() href="java script:visIndhold(8)">Fane 8</a>
</div>
<!-- Indhold 1 -->
<div id="indhold1" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 1, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 2 -->   
<div id="indhold2" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 2, sættes ind her!
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
fdsgsdfhsdfhdhghjjd
</TD></TR></TABLE>
</div>
<!-- Indhold 3 -->   
<div id="indhold3" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 3, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 4 -->   
<div id="indhold4" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 4, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 5 -->
<div id="indhold5" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 5, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 6 -->   
<div id="indhold6" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 6, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 7 -->
<div id="indhold7" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 7, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Indhold 8 -->   
<div id="indhold8" class="indhold">
<br><br>
<TABLE BORDER="0" CELLPADDING="10" width="100%">
<TR><TD>
Side indhold for fane 8, sættes ind her!
</TD></TR></TABLE>
</div>
<!-- Afslutning -->
</td></tr>
</table>
</body></html>
Avatar billede olebole Juniormester
05. maj 2010 - 21:21 #8
<ole>

keysersoze >> "Den sidste linje vil jeg gerne se en kildehenvisning til (:"

Sætningen gik på kommentaren: "Derudover, så vidt jeg ved, er (i)frames forældet i forhold HTML standarder."

iframe elementet er ikke del af HTML4.01 Strict - som jo er den egentlige HTML4.01 standard. Det er kun understøttet i HTML4.01 Transitional - men Transitional flavor'en er kun beregnet til en kort overgang, mens man lærer at kode til den stringente version af standarden.

Da HTML4.01 er fra 1999 og dens Transitional flavor kun var beregnet for en kort overgangsfase, er det nok ikke at tage munden særlig fuld, når/hvis man påstår, at iframes er forældet i forhold til dagens HTML standarder  =)

/mvh
</bole>
Avatar billede keysersoze Ekspert
05. maj 2010 - 22:23 #9
næsten enig - men da det er fuldt ud gyldigt at vælge transitional, specielt set i forhold til det niveau jeg gætter på spørgeren har at bedømme ud fra det der bliver søgt, er det jo ikke ugyldigt. At det så ikke er videre hverken smart eller nutidigt er en anden sag.
Avatar billede Futtexb Nybegynder
05. maj 2010 - 23:08 #10
Personligt kan jeg bedst lige at bruge <div> tags, og derefter redigere, hvordan de skal se ud i et stylesheet, som jeg har knyttet mit HTML-dokument til. Her kan du bruge "class" funktionen:

<div class="bestemselv">

Dit indhold her..

</div>



Derudover kan du også bare lave det direkte i dit HTML-dokument:

<div style="border: 1px solid black; height: 500px; width: 300px;">

Dit indhold her..

</div>
Avatar billede keysersoze Ekspert
27. juni 2010 - 11:08 #11
Lukketid?
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
27/1222:02 Låse brugt iPad op Af drstein i iOS, iPhone & iPad
27/1219:21 Hvor finder jeg en oversigt over mine spørgsmål Af KurtG i Hjælp og fejl
27/1211:31 TP-Link Wifi extender opsat som accesspoint giver 50% up- og download, Af Uvanga i Wifi
26/1213:05 Hvorfor bliver tiff-filer større ved konvertering til samme format Af KurtG i Billedbehandling
23/1221:36 Gøre Ikonerne lidt større i proceslinjen (Windows 10) Af Ikke-ekspert i Windows
White papers
Flere white papers »