Avatar billede groth-solholm Nybegynder
19. september 2006 - 17:43 Der er 8 kommentarer

linke mellem 2 <div>

Jeg forsøger at lave hele mit design om sådan at al layout kører gennem CSS og alt indhold i html... jeg har derfor oprettet følgende css:

body {   
    background-color: #003;
    height: 100%;
    width: 100%;
    font-family: Papyrus, sans-serif;
    text-align: center;
}

#top {
    background-color: #ccf;
    position: absolute;
    width: 75.5%;
    height: 8%;
    top: 2%;
    padding: 0;
    margin: 0;
    bottom: auto;
    left: 12%;
    background-image: url("himmel.jpg");
    background-repeat:no-repeat;
}

#venstre {
    background-color: #ccf;
    position: absolute;
    width: 10%;
    height: 72%;
    top: 12.5%;
    padding: 0;
    margin: 0;
    bottom: 14%;
    left: 12%;
    background-image: url("himmelv.jpg");
    background-repeat:no-repeat;
}

#indhold {
    background-color: #ccf;
    position: absolute;
    width: 53%;
    height: 72%;
    top: 12.5%;
    padding: 0;
    margin: 0;
    left: 23%;
    background-image: url("himmeli.jpg");
    background-repeat:no-repeat;   
}

#hoejre {
    background-color: #ccf;
    position: absolute;
    width: 10%;
    height: 72%;
    top: 12.5%;
    padding: 0;
    margin: 0;
    left: 76.5%;
    background-image: url("himmelh.jpg");
    background-repeat:no-repeat;
}

#bund {
    position: absolute;
    background-color: #003;
    width: 75.5%;
    height: 10%;
    top: 88%;
    padding: 0;
    margin: 0;
    bottom: auto;
    left: 10%;
    color: #fff;
}

#main {
    background-color: #ccf;
    position: absolute;
    width: 53%;
    height: 72%;
    top: 12.5%;
    padding: 0;
    margin: 0;
    left: 23%;
    background-image: url("himmeli.jpg");
    background-repeat:no-repeat;   
}

----

Og den tilhørende html-kode:

<html>
<head>
<!-- Minus AutoDato -->
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<link rel="stylesheet" type="text/css" href="style.css">
<base target="main">
</head>
<body>
<div id="top">
    <br>
    <ul>&sim; <a href="forside.html">home</a> &sim; <a href="nyt.html">nyt</a> &sim; <a href="os.html">os</a> &sim; <a href="http://www.rotteri-nefertari.dk" border="0" target="_blank">rotterne</a> &sim; <a href="ilderne.html">ilderne</a> &sim; <a href="galleri.html">galleriet</a> &sim; <a href="huset.html">huset</a> &sim; <a href="links.html">links</a> &sim; <a href="mailto:webmaster@groth-solholm.dk" border="0">kontakt</a> &sim;
    </ul></div>
<div id="venstre"> ... venstre ... </div>
<div id="indhold"><iframe id="main" name="main" src="forside.html" frameborder="no" ></iframe></div>
<div id="hoejre"> ... højre ... </div>
<div id="bund">&copy; 2006 - Ditte Solholm og Niels Groth Thygesen.<br>Alle billeder og tekster på denne side er beskyttet og må kun benyttes i følge skriftlig aftale.</div>
</body>
</html>

- Det jeg gerne vil vide er hvordan får jeg indholdet fra en html-fil (forside.html) der henvises til i <div>'en "top" og skal vises i <div>'en "indhold"

- Nogen der kan hjælpe mig med hvordan jeg gør det?

På forhånd tak :)

(PS: den nuværende side jeg gerne vil omlægge er www.groth-solholm.dk)
Avatar billede keysersoze Guru
19. september 2006 - 18:51 #1
du kan som udgangspunkt ikke linke til en div - men der findes en del andre måder at gøre det på;

- arbejds med en iframe og læg den ind i din div og henvis så til den. måske ikke så hensigtsmæssig en løsning da den formentlig har de samme fejl som du forsøger at komme væk fra nu med frames. Ikke søgemaskinvenligt.

- brug show/hide layer ved simpelthen at loade alt indhold ind på én gang og vis så kun de layers der er aktuelle for det enkelte menupunkt. heller ikke så hensigtsmæssigt da loadetiden så kan risikere at blive uforholdsvismæssig tung at loade. Ikke søgemaskinvenligt.

- brug javascript til dynamisk at loade indhold i din div. kræver at alle sider laves i javascript (men med html-output) og så er det ikke 100% crossbrowser. lidt højere sværhedsgrad og bestemt ikke søgemaskinvenligt.

- sidste og bedste løsning, lav alle sider som enkeltsider; forside.html, underside.html, ilderne.html osv og brug så includes (http://activedeveloper.dk/articles/category/9/) til at inkludere statiske ting som menu osv.
Avatar billede groth-solholm Nybegynder
19. september 2006 - 18:57 #2
Keysersoze >> Kender ikke rigtigt noget til includes - hvordan søren fungerer det?
Avatar billede keysersoze Guru
19. september 2006 - 19:08 #3
det står forklaret i det link jeg gav :) Og lidt ekstra her; http://www.html.dk/tutorials/ssi/
Avatar billede groth-solholm Nybegynder
19. september 2006 - 19:24 #4
Keysersoze >> jeg kan godt se hvad du mener (og så alligevel ikke). Mit problem består i at jeg ikke helt kan se hvordan jeg kan implementere det i det design jeg i forvejen kører med sådan at jeg bibeholder designet, men for omlagt hele layoutet til CSS og opnår at siden kan vises i de fleste browsere...
Avatar billede keysersoze Guru
24. september 2006 - 11:15 #5
det eneste du skal gøre at fx at lave toppen som en include-fil, dvs lave en fil hvor den tabel/layer der indeholder toppen ligger i - på alle de sider hvor du så vil vise toppen inkluderer du den fil.
Avatar billede groth-solholm Nybegynder
15. oktober 2006 - 17:09 #6
Keysersoze >> Smid lige et svar så du kan få point ;)
Avatar billede keysersoze Guru
15. oktober 2006 - 17:15 #7
jeg har allerede svaret :) men kan da gøre det igen ;)
Avatar billede keysersoze Guru
10. december 2006 - 02:15 #8
?
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
Alle kurser indenfor Microsoft 365 – både til begyndere og øvede.

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.

Du kan også logge ind via nedenstående tjenester