[Spider84]

Jag vill ha en sida gjord på detta sätt:

http://www.akademiskridkonst.se/ex.jpg

Där nummer 1 kommer att ha en lista med länkar som är synlig från första början och 3 kommer att innehålla en kort sammanfattning om vad sidan innehåller. 2:an ska helst vara dold från början, men inget måste.

Sedan ska länkarna i 1:an ändra innehållet i 2:an och innehållet i tvåan tar upp en text i 3:an.

Går det att göra på något sätt med tabeller och/eller css?
Jag har gjort det förr, men då med frames, vilket jag inte vill göra mer.

Någon som har några bra tips?

[Dahlgren]

Klart man kan göra med tabeller iofs:

<table border="0" cellpadding="0" cellspacing="0" width="1024&

<table border="0" cellpadding="0" cellspacing="0" width="1024" height="100%"> <tr> <td> <table border="1" cellpadding="2" cellspacing="0" width="100%"> <tr> <td width="30%" valign="top"> 1 </td> <td width="40%" valign="top"> 2 </td> <td width="50%" valign="top"> 3 </td> </tr> </table> </td> </tr></table>

Nu vet jag av erfarenhet att jag kommer bli påhoppad av div-folket :)

Sedan är det väl bara att göra olika sidor för olika innehåll. Men man kan ju få det dynamiskt också utan att ladda en ny sida via lite DHTML, javascript och CSS.

Mvh

[Spider84]

Antingen så missförstod du mig eller så missförstår jag dig.

Jag kommer att lägga upp innehållet i tabeller, som kontrolleras av css annars blir det svårt att få upp innehållet.

Det jag undrade var om det går att göra så att det som är i 1:a rutan kan ladda ny info i den 2:a rutan utan att man måste göra en helt ny sida. Efter som det är en hel del info som ska in så blir det en jäkla massa sidor om jag ska ha en för varje alternativ man kan göra.

Om man bygger en hemsida med frames så kan man ju t.ex. ha en meny som alltid ligger där den ligger; den laddas inte om varje gång man väljer något i den, som det gör om man bygger utan frames.

Rätta mig om jag missförstod dig, eller om jag skriver så att ingen förstår. : p

[Dahlgren]

Nej det var nog jag som missförstod dig då :)

Menar du att du vill dölja och visa lager i den andra framen?

Du kan ju ha ett gäng med divar i en utav tabellerna, typ:

<div id="page1">
Sida 1
</div>
<div id="page2">
Sida 2
</div>
<div id="page3">
Sida 3
</div>
<div id="page4">
Sida 4
</div>
<div id="page5">
Sida 5
</div>
<div id="page6">
Sida 6
</div>

Sedan i cell 1, där du har menyn, kan du ju använda ett javascript för att visa och dölja divarna.

<script language="javascript">
			function showDiv(divID) {
				var divs = document.getElementsByTagName('div'); 
				for(i=0; i<divs.length; i++){ 
				if (document.getElementById)
					divs[i].style.display = 'none';
				else
					document.all.divs[i].display = 'none'; 
				} 
				document.all[divID].style.display = 'inline';
			}
</script>

Sedan om du vill visa innehållet i div2 (page2) t.ex. så anropar du ju bara javascript-funktionen med det ID:t som argument, typ såhär:

<a href="javascript:showDiv('page2')">Visa DIV 2</a>

Anledningen att javascript-funktionen är så omfattande är att en del av den döljer alla andra div:ar.

EDIT:
Sedan om du vill ha att länken ska visa två divar samtidigt vilket det verkar som så ändrar du ju bara i javascript-funktionen så den körs för dessa med. Säg till om du vill ha hjälp med det.

Mvh

[Inlägget ändrat 2005-10-12 18:12:21 av Dahlgren]

[Spider84]

Tack så mycket!

Det var precis det jag menade. Nu är jag helt nybörjare på javascript. Har aldrig hållt på med det mer än färdiga script där jag vetat exakt hur jag ska ändra på saker och ting för att någon berättat det för mig, men jag ska testa lite så återkommer jag garanterat när jag gett upp på någon liten grej som är hur enkelt som helst att fixa egentligen.

[Spider84]

För att nu göra det på ett sätt så jag kan fatta hur jag ska använda det.

Hur hade jag gått tillväga för att fixa sidan:

http://www.akademisk...x5/knights.html

Så att enbart första cellen (till höger) och texten (3:dje cellen/till höger) syns när man kommer in på sidan och att den 2:a cellen sedan syns efter att ha klickat på Austria länken i första cellen.

Kan jag förstå det så borde jag klara resten själv...med betoning på borde.

[Spider84]

Som du ser om du går in på sidan har jag lagt in det hela och försökte få ordning på det, men inte lyckats.
Jag har fått andra cellan att döljas, men det är ju det simplaste av allt.

css kodningen ligger under:

http://www.akademisk...ex5/snavpos.css

om du vill se den. Lite små rörigt där just nu eftersom jag inte riktigt vet vad som ska vara med eller inte.

[Dahlgren]

För att det ska fungera som du ville från början, alltså att du hade tre kolumner, en med menylänkar, en med en sammanfattning och en med innehållet. Så har jag gjort en liten kod här som du kan modifiera lite.

Den här:

<body onLoad="showDiv('summary1','page1');">

...anger ju vilken sammanfattning och vilket innehåll som ska laddas från början.

Sedan är det ganska självklart.

Hör av dig om du har några mer funderingar.

Koden:

<html> <head> <title></title> <script language="javascript"

<html>
<head>
<title></title>
<script language="javascript">
function showDiv(divID, divID2) {
var divs = document.getElementsByTagName('div');
for(i=0; i<divs.length; i++){
if (document.getElementById)
divs[i].style.display = 'none';
else
document.all.divs[i].display = 'none';
}
document.all[divID].style.display = 'inline';
document.all[divID2].style.display = 'inline';
}
</script>
</head>
<body onLoad="showDiv('summary1','page1');">
<table border="0" cellpadding="0" cellspacing="0" width="1024" height="100%">
<tr>
<td>
<table border="1" cellpadding="2" cellspacing="0" width="100%" height="100%">
<tr>
<td width="20%" valign="top">
<a href="javascript:showDiv('summary1','page1')">Sida 1</a><br>
<a href="javascript:showDiv('summary2','page2')">Sida 2</a><br>
<a href="javascript:showDiv('summary3','page3')">Sida 3</a><br>
<a href="javascript:showDiv('summary4','page4')">Sida 4</a><br>
<a href="javascript:showDiv('summary5','page5')">Sida 5</a><br>
<a href="javascript:showDiv('summary6','page6')">Sida 6</a><br>
</td>
<td width="20%" valign="top">
<div id="summary1">
Sammanfattning 1
</div>
<div id="summary2">
Sammanfattning 2
</div>
<div id="summary3">
Sammanfattning 3
</div>
<div id="summary4">
Sammanfattning 4
</div>
<div id="summary5">
Sammanfattning 5
</div>
<div id="summary6">
Sammanfattning 6
</div>
</td>
<td width="60%" valign="top">
<div id="page1">
Sida 1
</div>
<div id="page2">
Sida 2
</div>
<div id="page3">
Sida 3
</div>
<div id="page4">
Sida 4
</div>
<div id="page5">
Sida 5
</div>
<div id="page6">
Sida 6
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

Mvh

[Bild bifogad 2005-10-13 21:09:19 av Dahlgren]

För att få rätt indenteringar så gå hit:

http://upload.idg.se...lder/761178.jpg

Det verkar som det är en bild men det är HTML-koden, krånglar det så kan man ju byta filändelse bara.
[Inlägget ändrat 2005-10-13 21:11:35 av Dahlgren]

Bifogade filer

•  761178.jpg (0byte)
  Antal nedladdningar: 4

[Spider84]

Spelar det någon roll om det ska vara länkar i andra cellen också? Det ska det nämligen.

Annars ett stort tack för det du la. Nu tror jag att jag ska få ordning på det. Hojta om det är något som måste bytas när det ska vara länkar i cell 2.

[Spider84]

Jag har lagt in det på sidan:

http://www.akademisk...e/ex5/text.html

Jag vet dock inte vad som gör att den inte visar mitt delen av sidan och hur jag än försöker kan jag inte komma på det.

Man ser att det är rätt i en tiondels sekund när den laddar sidan och sedan drar den ihop sidan och döljer mitten av den.

Jag antar att det måste ha med javascripten att göra, eller?

Med enbart det du skrev ned på den länkade sidan så fungerar det ju bra, men jag måste ju få det att funka på själva sidan också.

Visst är det underbart att hjälpa nybörjare? : p

[Dahlgren]

Problemet är att du har fler div-taggar på din sida, utöver de som jag gjorde i den koden jag skickade. Men det kan ju lösas genom att i javascript-funktionen lägga in att dessa div-taggarna ska visas också för varje gång funktionen körs.

Funktionen var ju såhär:

<script language="javascript">
	function showDiv(divID, divID2) {
	var divs = document.getElementsByTagName('div'); 
	for(i=0; i<divs.length; i++){ 
	if (document.getElementById)
	divs[i].style.display = 'none';
	else
	document.all.divs[i].display = 'none'; 
	} 
	document.all[divID].style.display = 'inline';
	document.all[divID2].style.display = 'inline';
	}
</script>

Vad man får göra då är att utöka den sista delen av funktionen med kod som visar övriga div-taggar.

Såhär menar jag att funktionen skulle kunna modifieras:

<script language="javascript">
	function showDiv(divID, divID2) {
	var divs = document.getElementsByTagName('div'); 
	for(i=0; i<divs.length; i++){ 
	if (document.getElementById)
	divs[i].style.display = 'none';
	else
	document.all.divs[i].display = 'none'; 
	} 
	document.all[divID].style.display = 'inline';
	document.all[divID2].style.display = 'inline';
[b]                document.all["[color="#0000ff"]banner[/color]"].style.display = 'inline';
                document.all["[color="#0000ff"]right[/color]"].style.display = 'inline';
                document.all["[color="#0000ff"]content[/color]"].style.display = 'inline';
                document.all["[color="#0000ff"]fourth[/color]"].style.display = 'inline';
                document.all["[color="#0000ff"]login[/color]"].style.display = 'inline';[/b]
	}
</script>

Nu förefaller det väl sig så att jag har glömt några av dina div-taggar, men du ser ju själv hur du kan lägga till dem. Observera dock att alla div-taggar som ska kontrolleras på det här viset måste ha ett id-attribut, alltså såhär:

<div id="banner">

...den div-taggens id är banner, och det är det man använder för att referera till den i javascript-funktionen såhär:

document.all["banner"].style.display = 'inline';

Hoppas det ska fungera för dig nu :)

Mvh
[Inlägget ändrat 2005-10-16 13:48:42 av Dahlgren]
[Inlägget ändrat 2005-10-16 13:49:12 av Dahlgren]
[Inlägget ändrat 2005-10-16 13:50:04 av Dahlgren]