[ndeath]

Guten Abend,

ich lerne seit 2 Tagen HTML/ CSS und bin dabei meine erste Homepage zu basteln.

Ich suche eine Lösung für folgendes Problem - das Bild soll das Ganze veranschaulichen.


Links ist die Navigationsleiste. Wenn ich dort einen Link anklicke, dann soll sich die HTML Datei auf die der Link verweist in einem definierten Bereich öffnen (ohne,dass sich die ganze Seite neu lädt) - dafür habe ich einen div-Container vorgesehen.

Bei mir ist es aber so, dass sich der Inhalt des Links bzw. die HTML-Datei als neue Seite öffnet und der Navigations- und Bannerteil nicht daruf befindet. Das ist ja sehr unpraktisch.


Kennt jemand eine Lösung für mich?

Dieser Beitrag wurde von ndeath bearbeitet: 22. Februar 2012 - 23:53

[ndeath]

Ok, bin schon ein wenig weiter: Rein mit HTML und CSS lässt sich das wohl nicht realisieren.

Weiß jemand wie ich das mit JavaScript/ jQuery umsetzen könnte?

[gimpfenlord]

sowas sollte doch mit ajax gehen

[Stefan_der_held]

Zitat (gimpfenlord: 20. Februar 2012 - 15:44)

sowas sollte doch mit ajax gehen

das ist überdimensioniert...

unter PHP heißt das Zauberwort inlude()

auf diese Weise ist ca 90% meiner Website entstanden: http://s-geschwind.de

Alternativ aber äußerst unschon - ja fast schon ekelhaft und verwerflich - wäre der Weg über iFrame

Würde dir den Code zur Verfügung stellen. dies würde aber gegen den Lern-Zweck gehen... gerne gebe ich dir aber bei Bedarf tipps in die richtige Richtung.

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 20. Februar 2012 - 16:19

[J000S]

frames würden zwar noch gehen, was auch eigentlich sehr einfach ist, aber wie SdH schon sagte, iihhh. Zumal es frames mit der Standartisierung von HTML5 und CSS3 nicht mehr gibt

Am besten ist hier wiklich mit php und include()

[N1truX]

Aber wenn er gerade mit HTML/CSS anfängt ist php noch mal ein ordentlicher Schritt (immerhin sind HTML/CSS ja reine Auszeichnungssprachen). Von daher wäre der Weg via Ajax vielleicht gar nicht mal so dumm.

Für den Anfang bräuchte er nur das "Basis Ajax-Script" in dem man beim finalen "onreadystatechange" den Inhalt des Div's ersetzt. Also so in etwa:

function DoRequest(url) {
        var http_request = false;

        http_request = false;

        if (window.XMLHttpRequest) {
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
         } else if (window.ActiveXObject) {
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
		
        if (http_request != null) {		
		http_request.onreadystatechange = function() {
			if (http_request.readyState == 4) document.getElementById('DIV-Name').innerHTML = http_request.responseText;
		};        
		http_request.open('GET', url, true);
		http_request.send(null);		
	}
}

/* HTML Code zum Verlinken */
<a href="javascript:DoRequest('url')">Link-Text</a>

Nicht schön aber selten
Ich hoffe ich habe keinen Fehler eingebaut^^ Sollte aber wirklich schneller gehen als sich noch in PHP einzuarbeiten.

[Stefan_der_held]

da ist js (ajax halt) meiner meinung nach zu pompös...

ich habe erst HTML/CSS dann PHP dann JavaScript gelernt... und muss sagen, dass es stetig im schwierigkeitsgrad angestiegen ist.

und mal ernsthaft (wollte es ja nicht zeigen )...

was ist an

<?php
    include("/PFAD/ZUR/ANZUZEIGENEN/DATEI");
?>

kompliziert

OK musst vorher noch auswerten welche Variabel du auswerten sollst aber hey: das sind auch nicht viele Abbrüche. Wenn man meine (teilweise ja aus meiner Schulung) hier stammenden Code-Fitzel durchließt die ich auf diesem Board schon gepostet habe, dann sollte auch dies nun wirklich nicht schwer sein sofern man die allgemeinen Grundregeln der Programmierung kennt:

Schleifen (for-next und if)

Dieser Beitrag wurde von Stefan_der_held bearbeitet: 20. Februar 2012 - 19:45

[N1truX]

Naja so kann er auch ohne XAMPP o.ä. Umgebungen entwickeln - Und nicht jedes 0815-Hosting unterstützt PHP (traurig aber leider immer noch war). Aber klar, es ist relativ egal wie man es nun angeht, funktionieren würde beides^^

Zitat

ich habe erst HTML/CSS dann PHP dann JavaScript gelernt... und muss sagen, dass es stetig im schwierigkeitsgrad angestiegen ist.

Hmm, angefangen habe ich auch mit HTML/CSS, dann JS und seit grob einem Jahr endlich auch PHP/MySQL. Aber letztendlich nehmen sich JS und PHP ja vom Syntax (C, Perl, Java etc. verwandt) her kaum etwas, nur das Vokabular und die Schnittstellen sind eben anders.

Ich finde PHP auch etwas einfacher Bei JS komme ich öfter mal an ein paar Grenzen der Sprache und muss dann teils nicht ganz so elegante Lösungen basteln damit es so funktioniert wie ich will^^

Dieser Beitrag wurde von N1truX bearbeitet: 20. Februar 2012 - 21:12

[Witi]

Vergesst mal AJAX und irgendwelche anderen Späße...

Zitat (ndeath: 19. Februar 2012 - 22:50)

Bei mir ist es aber so, dass sich der Inhalt des Links bzw. die HTML-Datei als neue Seite öffnet und der Navigations- und Bannerteil nicht daruf befindet. Das ist ja sehr unpraktisch.

Kann es sein, dass die Links sich einfach nur in einem neuen Fenster öffnen?

Hast du in deinen links target, window.open oder etwas ähnliches angegeben? Am besten wäre es, wenn du uns dein aktuelles HTML-Dokument zeigen würdest.

[ndeath]

Hallo Leute,

vielen Dank für eure zahlreichen Hinweise. ich hätte vielleicht noch sagen sollen, dass ich die Homepage für den Offline-Betrieb gestalte. D.h. die Homepage soll auf verschiedenen Rechnern lokal laufen, ohne dass weitere Programme installiert werden müssen. Ich glaube, das ist dann ein KO-Kriterium für PHP, oder?

Zitat (N1truX: 20. Februar 2012 - 18:21)

Aber wenn er gerade mit HTML/CSS anfängt ist php noch mal ein ordentlicher Schritt (immerhin sind HTML/CSS ja reine Auszeichnungssprachen). Von daher wäre der Weg via Ajax vielleicht gar nicht mal so dumm.

Du sprichst mir aus der Seele. Ich bin alles andere als lernunwillig, dennoch habe ich auch gar nich so viel Zeit in alles mögliche einzuarbeiten. (Was auch der Grund ist, dass ich erst jetzt schreibe!)
Im Moment bin ich auch schon ganz gut mit HTML/CSS beschäftigt - es ist zwar nicht so schwer, dennoch ich muss mich erst mal die richtigen Denkweisen einarbeiten.

Zitat (Stefan_der_held: 20. Februar 2012 - 16:18)

Alternativ aber äußerst unschon - ja fast schon ekelhaft und verwerflich - wäre der Weg über iFrame

Mittlerweile habe ich trotz aller Unkenrufe eine Lösung mit Hilfe von iframes gebastelt. Kommt meiner Vorstellung recht nahe - ist aber möglicherweise recht viel Administationsaufand, falls es größere Änderungen geben sollte.


Daher wäre ich sehr an der AJAX/JS-lösung interessiert und habe das auch versucht umzusetzen.


Ich habe herausgefunden, dass man das Skript in den HEAD der HTML-Datei einfügt. Das habe ich auch gemacht...leider funktioniert es nicht. Ich fühle mich allerdings nicht mal im Ansatz der der Lage, den Quellcode zu analysieren geschweige denn, Veränderung vorzunehmen.

Noch eine Anmerkung: Ich habe JS im Browser natürlich aktiviert und habe das auch überprüft, indem ich eine lustige "Hallo Welt" Meldung mir habe ausgeben lassen.

<script type="text/javascript">
<!--
alert("Hallo Welt!");
//-->
</script>

Auf diesselbe Art und Weise habe ich auch den Quellcode von N1truX (besten Dank für Programmieren btw.) eingebunden und die id der DIV eingefügt - einmal mit und einmal ohne # - beides erfolglos. Die Div hat die ID="main"...falls ihr meine Quelltext anseht.


So, falls irgendjemand Lust hat mir zu helfen, würde ich mich wirklich sehr freuen. Im Anhang ist ein roher Versuch, der ohne iframes natürlich.

Zitat (Witi: 21. Februar 2012 - 18:51)

Kann es sein, dass die Links sich einfach nur in einem neuen Fenster öffnen?

Ja, selbstverständlich ist genau das mein Problem. Ob es jedoch ein neues Fenster oder dasselbe Fenster ist, spielt keine Rolle. Damit mir die Navigation nicht abhanden kommt, müsste ich ja in jede neue HTML Datei immer den Navigations-Quellcode einfügen, was dann spätestens ab der zweiten Navigationsebene (die später auf jeden Fall noch eingefügt werden soll) nicht wirklich schön zu verwalten ist. Mein erster Gedanke war, dass ich bei target einfach die entsprechende #main-div zuweise - was aber nicht funktioniert - und nach einigem gegoogle hab ich mich dann entschlossen hier mal einen Thread zu eröffnen.


Viele Grüße und danke nochmals - ich finds wirklich großartig wie ihr mir helfen wollt!

Angehängte Datei(en)

•  Test-HP.rar (10,9K)
  Anzahl der Downloads: 203

Dieser Beitrag wurde von ndeath bearbeitet: 22. Februar 2012 - 23:57