vise innholdet et sted på siden

8 innlegg i emnet

Skrevet

jeg prøver meg slik at jeg har en ramme på venstre siden av siden min som skal inneholde menyen ....

litt til høyre så skal jeg ha en ramme til som skal vise innhold...tekst ,bilder osv ..

når jeg sier rammer mener jeg ikke at jeg bruker frames , men jeg bruker css til å lage div-tagger :)

så til problemet : jeg vil ha det her som på itpro at jeg klikker på menyen og får det jeg vil ha i midten en plass altså hvordan kan jeg få det til ?

kan dere komme med noen forslag ? kanskje de som har ansvaret for itpro kan gi meg tips ?

som eksempel jeg trykker på forum linken og da får jeg opp alle innleggene noe sånt...

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Du bruker en div og legger den til høyre for Meny-diven.

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

jeg vet det jeg har gjort det som sagt :)

men hvordan får jeg liksom til å ha en link til venstre i menyen og når jeg trykker på den så skal et eller annet innhold dukke opp i den div-taggen til høyre ?

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet (endret)

Uten bruk av iFrame er det AJAX som er tingen.

Om jeg har forstått deg riktig.

Les og skjønn hvorfor:

http://www.w3schools.com/ajax/default.asp

Den store fordelen med Ajax er at du kan hente og bytte ut info uten å måtte reloade. Helt genialt.

Endret av bjaanes
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Uten bruk av iFrame er det AJAX som er tingen.

Om jeg har forstått deg riktig.

Les og skjønn hvorfor:

http://www.w3schools.com/ajax/default.asp

Den store fordelen med Ajax er at du kan hente og bytte ut info uten å måtte reloade. Helt genialt.

nei iframe blir sånn boks med sånne scroll greir på sidene og det er stygt... jeg tenkte mer sånn jeg trykker på en knapp i menyen til venstre og vips så skal det komme i en sånn div-tagg ( som er liksom den rammen tenkt til hovedteksten på siden ) et eller annet innhold :)

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Det gjøres slik:

<html>

<head>

</head>

<body style="text-align: center;">


<!-- Alt innhold på sida må ligge innenfor denne div-en. Endre width for bredere side, men pass på at de to elementene nedenfor har plass innenfor denne diven. -->

<div style="margin-left: auto; margin-right: auto; text-align: left; width: 800px;">


<!-- Menyen må ligge innenfor denne div-en -->

<div style="float: left; width: 200px; margin-right: 10px; border: 1px solid red;">

Meny

</div>


<!-- Alt annet innhold må ligge innenfor denne div-en -->

<div style="float: left; width: 550px; margin-right: 10px; border: 1px solid red;">

Hovedinnhold

</div>


</div>


</body>

</html>

Kan hende du vil skille ut CSSen i en egen fil, den er inline for enkelhets skyld i dette eksempelet.

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet (endret)

Dette krev litt meir enn HTML, du kan f.eks. bruke JavaScript eller PHP. Eg viser deg PHP, sidan eg ikkje kan JavaScript.

index.php:

<?php

$side = $_GET['side']


include("$side" . ".php");

?>
I menyen lagar du linkar slik:
<a href="?side=hovedside">Hovedside</a>
Det som vil skje når nokon klikkar på linken over er at sida vert lasta på nytt, og index.php hentar alt innhaldet (som er HTML) i hovedside.php, som må ligge i same mappe som index.php i dette eksempelet. hovedside.php skal ikkje vere eit sjølvstendig HTML-dokument (dvs. du skal ikkje ha <html>, <body>, </body> og </html>). hovedside.php kan sjå slik ut:
<h2>Hei</h2>


<p>Velkomen til sida mi</p>
<html>, <body> etc. set du i index.php, i start og slutt. PHP-koden vist over set du inn i innhaldsområdet (div-en som har innhaldet på sida), f.eks. slik:
<html>

<head>

head-taggane dine her

</head>

<body>

<div id="meny">

menyen din her

<a href="?side=ditt">ditt</a>

<a href="?side=datt">datt</a>

</div>

<div id="innhald">

<?php

$side = $_GET['side']


include("$side" . ".php");

?></div>

</body>

</html>

Endret av enixitan
0

Del dette innlegget


Lenke til innlegg
Del på andre sider

Skrevet

Det er en måte å imitere Ajax-effekten med innerHTML. Poenget i det følgende javascriptet er at hver gang noen klikker på en <a>-tag, kjøres en funksjon som bytter ut en tom <div> med en på forhånd definert variabel med aktuelt innhold.

JavaScript

// Bytter ut all html knyttet til <div id="div1"> med info

function getInfo() {

	var info = '<div id="div1"><p>Vår bedrift holder til i moderne lokaler i hjertet av Oslo.</p>';

	document.getElementById("div1").innerHTML = info;

}


// Bytter ut all html knyttet til <div id="div1"> med demo

function getDemo() {

	var demo = '<div id="div1"><p>Her kommer demonstrasjonen av algoritmen bak vårt enestående produkt.</p></div>';

	document.getElementById("div1").innerHTML = demo;

}
Fullstendig kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Draggable content</title>


<style type="text/css">

#container { width: 700px; height: 150px; border: 1px solid black; }

</style>


<script type="text/javascript">

//<![CDATA[


// Bytter ut all html knyttet til <div id="div1"> med info

function getInfo() {

	var info = '<div id="div1"><p>Vår bedrift holder til i moderne lokaler i hjertet av Oslo.</p>';

	document.getElementById("div1").innerHTML = info;

}


// Bytter ut all html knyttet til <div id="div1"> med demo

function getDemo() {

	var demo = '<div id="div1"><p>Her kommer demonstrasjonen av algoritmen bak vårt enestående produkt.</p></div>';

	document.getElementById("div1").innerHTML = demo;

}


//]]>

</script>


</head>

<body>

<p><a href="java script:getInfo()">Om bedriften</a> | <a href="java script:getDemo()">Demo</a></p>


<div id="container">


<div id="div1">

<p></p> 

</div>


</div>


</body>

</html>

0

Del dette innlegget


Lenke til innlegg
Del på andre sider

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å

  • Hvem er aktive   0 medlemmer

    Ingen innloggede medlemmer aktive