Gå til innhold

hjælp med css, lage meny *løst*

opticus

Av opticus
i Programmering og webutvikling

Anbefalte innlegg

opticus

opticus

Skrevet
Skrevet (endret)

jeg skjønner ikke hvordan jeg skal lage en meny på venstre side som skal gjøre forandring i de andre rutene. Jeg prøver å komme vekk fra frames, hørt det er dårlig greier. men det gidder jeg ikke diskutere nå :) her er koden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>hubba bubba</title>

<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */

body {
 margin:5px 0px 0px 5px;
 }
#leftcontent {
 position: absolute;
 left:1%;
 width:20%;
 top:50px;
 background:#fff;
 }

#centercontent {
 position: absolute;
 left:22%;
 width:30%;
 top:50px;
 background:#fff;
 }

#rightcontent {
 position: absolute;
 left:53%;
 width:40%;
 top:50px;
 background:#fff;
 }

#rightcontent, #centercontent, #leftcontent {
 border:1px solid #000;
 }

p,h1,pre {
 margin:0px 10px 10px 10px;
 }

h1 {
 font-size:14px;
 padding-top:10px;
 }

#centercontent p { font-size:10px}

</style>
</head>
<body>

<div id="leftcontent">
<p class="greek">
 <a href=".html" target="rightside">Billeder fra huset</a><BR/><BR/>
 <a href=".html" target="rightside">Billeder fra byen og "vår" gate</a><BR/><BR/>
 <a href=".html" target="rightside">Praktiske opplysninger</a><BR/><BR/>
 <a href=".html" target="rightside">Informasjon om huset</a><BR/><BR/>
 <a href=".html" target="rightside">Informasjon om byen</a><BR/><BR/>
 <a href="test2.html" target="rightcontent">Informasjon om områder</a><BR/><BR/></p>
</div>

<div id="centercontent">
<h1>INFO</h1>

<p>Her skal det komme opp forskjellig info</p>

</div>



<div id="rightcontent">
<h1>BILDER</h1>

<p class="greek">her skal det vises bilder</p>
</div>
<div style="position:absolute; top:450px">

</div>
</body>
</html>

Endret av opticus
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Dunestar

Dunestar

Skrevet
Skrevet (endret)
det går ikke gjøre dette uten php?

Naturligvis, men vil ikke anbefale det. Det blir unødvendig tungvint.

Da må du linke til f eks "informasjon_om_huset.html" i menyvalget om

"informasjon om huset", og lage et HTML-dokument identisk med indexen,

bortsett fra innholdet. Dvs at du må "lage designet flere ganger". Bruker

du det særdeles enkle PHP include-skriptet jeg linka til slipper du unna

med kun å skrive inn selve innholdet, og slipper dermed å ha menyen

eller headeren implentert i hver eneste underside, hvis du forstår.

 

Gash .. Vanskelig å svare på noe jeg egentlig ikke har peil på.

Endret av Dunestar
Lenke til kommentar
opticus

opticus

Skrevet
  • Forfatter
Skrevet

oh right:

i head:

<script language='javascript'>

 function skiftFane(innVar) {
   document.getElementById('info1').style.display = "none";
   document.getElementById('info2').style.display = "none";
   document.getElementById('info3').style.display = "none";
   document.getElementById('info4').style.display = "none";

   if (innVar == 'info1') {
     document.getElementById('info1').style.display = "";
   } else if (innVar == 'info2') {
     document.getElementById('info2').style.display = "";
   } else if (innVar == 'info3') {
     document.getElementById('info3').style.display = "";
   } else if (innVar == 'info4') {
     document.getElementById('info4').style.display = "";
   }
 }

</script>

 

i body:

<div id="leftcontent">
<div id="button">
<ul>
 <li><a href="#">Bilder fra huset</a></li>
 <li><a href="#">Bilder fra byen og "vår" gate</a></li>
 <li><a href="#" onClick="skiftFane('info1');">Informasjon om huset</a></li>
 <li><a href="#" onClick="skiftFane('info2');">Informasjon om byen</a></li>
 <li><a href="#" onClick="skiftFane('info3');">Praktiske opplysninger</a></li>
 <li><a href="#" onClick="skiftFane('info4');">Leiebetingelser</a></li>
</ul>
</div></div>

mer i body:

div id="centercontent">
<h1>INFO</h1>

<div id='info1' style=''>
<p>
habla bable bla bla bla
</p>
</div>

<div id='info2' style='display:none;'>
<p>
habla babla bla ting og tang
</p>
</div>

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å
Gå til emneliste
×
×
  • Opprett ny...