Link mit CSS in bestimmtem DIV öffnen

[Lotterli]

Hallo,
ich möchte links auf der Homepage die Navigation haben, rechts daneben soll der Inhalt der Links angezeigt werden. Allerdings schaffe ich es nicht, dass der Inhalt im rechten DIV erscheint, sondern stets auf einer neuen Seite, so dass der Kopf und die Navileiste nicht mehre zu sehen sind.
Wie muss programmiert werden, damit sich nur der Inhalt im Hauptfenster ändert? Gibt es dazu eine Vorlage?
Danke.

[sejuma]

Das geht nicht mit CSS.
Dazu brauchst du die veralteten und mit Nachteilen behafteten Frames.

Evtl. geht's auch mit Javascript oder PHP.

[djheke]

der beitrag ist zwar schon älter, aber es geht auch mit anker. wenn noch interesse besteht, dann melde dich einfach. werde dir eine beispielseite erstellen.

mfg

[djheke]

hier mal ein beispiel als galerie.
http://www.gipspferd.de/css/galerie/gallery.htm

[Executor]

wenn du deine Seiten kopierst und dann immer nur den Inhalt änderst, geht das auch. Hast halt dann irgendwann ewig viele seiten, was sehr unangenehm wird, da du menüänderungen in jeder seite vornehmen müsstest.

Ich empfehle ein CMS zu benutzen (ich bevorzuge Joomla!).

oder du machst eine simple php abfrage, die sich an der URL orientiert, beispiel:

index.html?section=kontkat

Das php script müsste nun die variable abfangen, einen mysql query an die datenbank schicken und den Text für "kontakt" laden und dann an der entsprechenden Stelle anzeigen. Wenn man kein php kann, ist das wohl etwas komplizierter, da das hier aber ein css forum ist, schlage ich vor - falls du interesse hast - dass du mir einfach ne PN schreibst. Dann könnten wir das klären.

[djheke]

Ich sollte vielleicht genauer lesen.So wollte er es bestimmt.
p.s. include geht auch.

[Azra]

jQuery hat eine simple Ajax-Funktion. Alles was du tun musst ist die Libary in die Seite zu laden und folgenden Code einzubinden:

Code: Alles auswählen

$(document).ready(function(){
   $("a").click(function(){
      $.ajax({url: $(this).attr("href"), success: function(response) {
         $("#DIV").html(response);
      }});
      return false;
   });
});


2. Zeile
Das "a" sagt aus, dass alle Links auf diese Funktion reagieren. Du kannst es auch durch eine Klasse ersetzen welche du dann im betroffenen <a>-Tag in HTML setzen musst.

4. Zeile
"#DIV" sagt aus, in welchem Container der Inhalt geladen werden soll.

Du musst darauf achten dass du in den anderen Seiten welche du einbinden willst kein HTML Grundgerüst hast, sondern nur der Inhalt welcher ausgetauscht werden soll.

[ndeath]

Hallo Leute,

ich erstelle gerade meine erste Homepage und bin auf genau dieses Problem gestoßen.

Der Quellcode von Azra scheint genau das zu sein, was ich suche, allerdings schaffe ich es nicht, das umzusetzen.

Der Div Container, in dem der Inhalt geladen werden soll, hat die hat die id="'main".

Ich habe Probleme mit den Begriffen, die Azra verwendet.
(1) wie lade ich die Libary in die Seite?
(2) wie binde ich den Quellcode ein?

Was ich getan habe soll der Screenshot zeigen - so habe ich das mit "laden" und "einbinden" verstanden. Funktioniert halt nicht also hab ich nen Fehler drin.

Wäre echt großartig, wenn mit jemand helfen könnte.

Ich möchte noch ergänzen, dass ich keinerlei Ahnung von JavaScript habe - HTML und CSS lerne ich seit 2 Tagen...


Viele Grüße,
Steffen

[rainer]

das jquery liegt auch tatsächlich im ordner js ?
gibt es vielleicht schon einen link zum online ansehen ?

eventuell schaust dir solang das hier an, ob es eine alternative darstellen würde.

http://www.pixelmania.at/framelose_seiten.php
http://www.pixelmania.at/framelose_seit ... ewrite.php

[ndeath]

Hallo,

vielen Dank für Deine freundliche Antwort.

Also: mein jquery.js liegt eine Ebene tiefer als die Index.htm, von der ich den Screenshot gemacht habe.

Struktur:
Hp_ordner/index.htm
Hp_ordner/js/jquery.js

(Ist es normal, dass das Anklicker der jquery.js zu einer Fehlermeldung führt?)


Nun, ich hätte keine Probleme, das Ganze auch mit PHP zu realisieren. Aber ich habe gelesen, dass PHP eine serverseitige Sprache ist - ich möchte eine Offline-Homepage erstellen, die auf verschiedenen PCs in einen Netzwerk lokal auf der Festplatte aufgerufen werden soll. Das hört sich für mich erst mal so an, als würde mein vorhaben nicht mit PHP zu realisieren sein. (oder?)

Das was sich hinter deinem ersten link verbirgt, scheint genau das zu sein was ich suche.

(Offensichtlich hab ich mich noch nie mit PHP auseinandergesetzt.)

[djheke]

Hallo Steffen,
da du nur lokal arbeiten möchtest,würde noch eine einfache Lösung mit iFrames in Frage kommen.

Code: Alles auswählen

Deine HTML-Dateien

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Eingebettete Frames</title>
<style type="text/css">

* {
margin:0;
pading:0;
}

#ausgabe {
height:20em; /* 1em ca. 16px */
width:10em;
float:left;
border:none;
}

</style>
</head>
<body id="home">
<h1>HOME</h1>

<div id="nav">
<iframe src="navigation.html" id="ausgabe" seamless="seamless">
   <a href="navigation.html">Navigation anzeigen</a>
</iframe>
</div>

....
Dein Inhalt
...
</body>
</html>


Code: Alles auswählen

Die Navigation.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base  target="_parent">
<title>Navigation</title>
<style type="text/css">
* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;
}

li {
margin-bottom:1px;
background:#09c;
}

li a {
color:#fff;
display:block;
padding:5px;
}

li a:hover {
background:#a33;
}

</style>
</head>
<body>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</body>
</html>


Nun brauchst du nur in der navigation.html dein Einträge erweitern oder ändern.
Achso, dass Attribut seamless kannst du ruhig überall eintragen. Es wird aktuell von kein Browser unterstützt, aber das wird sich bald ändern. Mit diesem Attribut wird die Navigation includiert(eingebunden). Wie PHP

[ndeath]

Ok, super! Allerbesten Dank.
Jetzt hab ich mal etwas mit dem ich arbeiten kann. Ich sehe Fortschritte. Danke mochmal.

Warum ist es denn eigentlich nicht sinnvoll mit Frames zu arbeiten?

[djheke]

Framesets sind für Barrierearme Webseiten sehr bedenklich. Einfach mal -Googeln-
iFrames sind eigentlich garnicht so schlimm wie ihr Ruf. In deinem Fall sowieso nicht, da du ja eigene Inhalte im iframe einbindest.

mfg
henry

[ndeath]

Ich hab nun auf ähnliche Weise wie mit iframes den footer eingebunden, und zwar mit dem object- Element.

<object data="../footer.htm" id="footer"
type="text/html" <!--height="300" width="110"--></object>


Eigentlich könnte ich die iframes durch objects ersetzen und es müsste genauso funktionieren.

Hat das object-Element irgenwelche Nachteile?

[manfred]

Google mal nach jQuery ist zwar etwas aufwendig aber mit Sicherheit eine ganz gute Lösung