Allgemeine Steuerung für die Webseite

atex · 24. Februar 2014

Meine alte Website ist noch mit Frames gebaut. Das hat den Vorteil, wenn an der Navigation ein Punkt dazukommt oder wegfällt,
dann ist das schnell geändert. Nur im Navigationsframe den Punkt ändern und fertig.
Jetzt möchte ich die Seite aber ohne Frames neu aufbauen. Wie kann ich die Navigation gestalten, das ich einen zentralen Kopf der Seite habe (ohne Frame), sich also die ganze Seite scrollen lässt, aber die Navigation evtl ausgelagert auf einer css oder html-Seite liegt?
Ich hoffe ich habe mich verständlich ausgedrückt.

capricorne69 · 24. Februar 2014

Hallo,
ich hatte das gleiche Problem , habe aber die Frames mit Hilfe von HTML und CSS von meiner Seite verbannt.Schaue Dir doch einfach mal hier im HTML-Seminar das Beispiel an, mir hats (als Anfänger) auch geholfen.Jetzt bin ich dabei ,PHP zu lernen ,um das Ganze noch einfacher zu machen ,denke ich jedenfalls.

wolf · 24. Februar 2014

Hallo, geh von den Frames weg!

Du erstellst dir einen Ordner Inc in dem du eine Datei ablegst die nav.inc heist.

In dieser steht ungefähr folgendes:

HTML

<nav>
	<ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei</a></li>
		<li><a href="#">drei</a></li>
		<li><a href="#">vier</a></li>
	</ul>
</nav>

Halt einfach dein Menü

Dann gehst du in deine index.html (bzw jede Seite die du brauchst (wo die Navi eingebunden werden soll).
und benennst diese in index.php um (oder halt whatever Hauptsache .php).

In der Datei steht dann

HTML

<!-- ... -->
</head>
<body>
	<header><!-- html5 Kopfbereich (ich nehme an das deine Navigation dort sitzt ;D )--> 
		<?php
			include("Inc/nav.inc");
		?>
	</header>
	<section>
		<!-- weiter im Code ... -->

wichtig ist das

PHP

<?php//php Öffnungstag
	include("Inc/nav.inc");//Die Datei wird geladen und an dieser stelle in das Dokument platziert (Pfad beachten!)
?><!-- php schließen !!!-->

Wenn du dir dann den Quelltext im Browser anschaust sollte der so aussehen:

HTML

<!-- ... -->
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#">eins</a></li>
				<li><a href="#">zwei</a></li>
				<li><a href="#">drei</a></li>
				<li><a href="#">vier</a></li>
			</ul>
		</nav>
	</header>
	<section>
		<!-- weiter im Code ... -->

Alles anzeigen

Ich hoffe mal du verstehst den Vorgang

Ungetestet, aber ich glaube ich hab es richtig gesagt, sonnst verbessert mich

atex · 24. Februar 2014

Danke für eure schnellen Antworten. Ich bin zur Zeit dabei einen neue Seite ohne Frames zu basteln. Ich nutze dazu Html und css. In Css arbeite ich mich gerade ein, von php habe ich keinen Plan. Daher wäre es mir am liebsten, wenn sich das Ganze mit Css bewerkstelligen lässt.
Ich habe mir die Beispielseite von HTML-Seminar als Vorbild genommen:
http://www.html-seminar.de/beispielwebsite-1-spalten-layout/
Ich habe da nun schon ein Drop-Down-Menü eingefügt:
Sitz aber im body, nicht im header.

Code

<div id="menu">
	<ul>
  	<li class="topmenu">
    	<a href="index.html">Home</a>
    	<ul>

    	</ul>
  	</li>
  	<li class="topmenu">
    	<a href="">Verein</a>
    	<ul>
      	<li class="submenu"><a href="vereinsgeschichte.html">Vereinsgeschichte</a></li>
      	<li class="submenu"><a href="sponsoren">Unsere Sponsoren</a></li>
       	<li class="submenu"><a href="links.html">Links</a></li>
      	<li class="submenu"><a href="vorstand.html">Vorstand</a></li>
       	<li class="submenu"><a href="kalender.html">Kalender</a></li>
       	<li class="submenu"><a href="termine.html">Termine</a></li>
    	</ul>
  	</li>
     	<li class="topmenu">
    	<a href="">Aktuelles</a>
    	<ul>

    	</ul>
  	</li>

  	<li class="topmenu">
    	<a href="">Fotoalbum</a>
    	<ul>
      	<li class="submenu"><a href="fotos.html">Aktuelle Bilder</a></li>
      	<li class="submenu"><a href="archiv.html">Archiv</a></li>
    	</ul>
  	</li>




  	<li class="topmenu">
    	<a href="">Kontakt</a>
    	<ul>
      	<li class="submenu"><a href="mail.html">E-Mail</a></li>
      	<li class="submenu"><a href="feedback.html">Feedback</a></li>
    	</ul>
  	</li>







  	<li class="topmenu">
    	<a href="">Radsporthalle</a>
    	<ul>
      	<li class="submenu"><a href="feiern">Veranstaltungen</a></li>
      	<li class="submenu"><a href="">Radsporthalle</a></li>
    	</ul>
  	</li>
	</ul>
  </div>

Alles anzeigen

Genau den würde ich gerne auslagern, damit der wirklich nur einmal vorhanden ist.
Kann ich da was mit CSS machen?

Danke schon mal.

wolf · 24. Februar 2014

Nein das geht nicht mach es so:

Angenommen dein Code sieht so aus:

HTML

<body>
<div>Der Teil von deiner Seite, die vor dem Menü ist..</div>
<div id="menu">
	<ul>
		<li class="topmenu">
			<a href="index.html">Home</a>
			<ul>

			</ul>
		</li>
		<li class="topmenu">
			<a href="">Verein</a>
			<ul>
			<li class="submenu"><a href="vereinsgeschichte.html">Vereinsgeschichte</a></li>
			<li class="submenu"><a href="sponsoren">Unsere Sponsoren</a></li>
			<li class="submenu"><a href="links.html">Links</a></li>
			<li class="submenu"><a href="vorstand.html">Vorstand</a></li>
			<li class="submenu"><a href="kalender.html">Kalender</a></li>
			<li class="submenu"><a href="termine.html">Termine</a></li>
			</ul>
		</li>
			<li class="topmenu">
			<a href="">Aktuelles</a>
			<ul>

			</ul>
		</li>

		<li class="topmenu">
			<a href="">Fotoalbum</a>
			<ul>
			<li class="submenu"><a href="fotos.html">Aktuelle Bilder</a></li>
			<li class="submenu"><a href="archiv.html">Archiv</a></li>
			</ul>
		</li>




		<li class="topmenu">
			<a href="">Kontakt</a>
			<ul>
			<li class="submenu"><a href="mail.html">E-Mail</a></li>
			<li class="submenu"><a href="feedback.html">Feedback</a></li>
			</ul>
		</li>







		<li class="topmenu">
			<a href="">Radsporthalle</a>
			<ul>
			<li class="submenu"><a href="feiern">Veranstaltungen</a></li>
			<li class="submenu"><a href="">Radsporthalle</a></li>
			</ul>
		</li>
	</ul>
</div>
<div>Der rest von deiner Seite</div>
</body>
</html>

Alles anzeigen

ersetzt du diesen durch:

HTML

<body>
<div>Der Teil von deiner Seite, die vor dem Menü ist..</div>
<?php
	include("nav.inc");
?>
<div>Der rest von deiner Seite</div>
</body>
</html>

Dann speicherst du die Datei unter dem Namen datei.php
und erstellst eine neue Datei,

die diesen Inhalt hat:

HTML

<div id="menu">
	<ul>
		<li class="topmenu">
			<a href="index.html">Home</a>
			<ul>

			</ul>
		</li>
		<li class="topmenu">
			<a href="">Verein</a>
			<ul>
			<li class="submenu"><a href="vereinsgeschichte.html">Vereinsgeschichte</a></li>
			<li class="submenu"><a href="sponsoren">Unsere Sponsoren</a></li>
			<li class="submenu"><a href="links.html">Links</a></li>
			<li class="submenu"><a href="vorstand.html">Vorstand</a></li>
			<li class="submenu"><a href="kalender.html">Kalender</a></li>
			<li class="submenu"><a href="termine.html">Termine</a></li>
			</ul>
		</li>
			<li class="topmenu">
			<a href="">Aktuelles</a>
			<ul>

			</ul>
		</li>

		<li class="topmenu">
			<a href="">Fotoalbum</a>
			<ul>
			<li class="submenu"><a href="fotos.html">Aktuelle Bilder</a></li>
			<li class="submenu"><a href="archiv.html">Archiv</a></li>
			</ul>
		</li>




		<li class="topmenu">
			<a href="">Kontakt</a>
			<ul>
			<li class="submenu"><a href="mail.html">E-Mail</a></li>
			<li class="submenu"><a href="feedback.html">Feedback</a></li>
			</ul>
		</li>







		<li class="topmenu">
			<a href="">Radsporthalle</a>
			<ul>
			<li class="submenu"><a href="feiern">Veranstaltungen</a></li>
			<li class="submenu"><a href="">Radsporthalle</a></li>
			</ul>
		</li>
	</ul>
</div>

Alles anzeigen

Diese speicherst du unter dem Namen nav.inc.

Mehr musst du nicht ändern

in deiner Datei von z.B. Vereinsgeschichte steht dann

HTML

<body>
<h1>Vereinsgeschichte</h1>
<?php
	include("nav.inc");
?>
<div>Der Rest von deiner Seite</div>
</body>
</html>

Und das in allen Dateien, das Menü musst du nur einmal ändern und es wird auf allen Seiten richtig angezeigt!

EDIT:

Sorry für die Verwirrung.. <header> ist nicht mit <head> zu verwechseln !!!!

<head> bleibt weiterhin der "unsichtbare" Teil der Seite.
<haeder> ist ein block Element genauso wie <div> bloß mit andrem Namen

atex · 24. Februar 2014

Wenn ich das mit dem php so mache wie du das hier beschrieben hast, muss ich die style.css auch irgendwie einbinden?
Ein Teil der Angaben darauf bezieht sich ja auf das Menü.

Ich habe das nämlich gerade ausprobiert, aber das Menü ist jetzt verschwunden.
Das kann natürlich auch daran liegen, dass ich es lokal geöffnet habe?

Edit;
Nein, Menü fehlt auch, wenn ich es auf den Server hochlade.

CSS

#menu {
  font-size:14px;
  position:absolute; 
  top: 183px; 
  z-index: 2;
}




#menu ul {
  list-style-type:none;
  list-style-image:none;
  margin:0px;
  padding:0px;




}




#menu li.topmenu {
  float:left;




  
}




.topmenu a {
  float:left;
  width:110px;
  text-align:center;
}




.topmenu ul{
  display:none;
}




.topmenu a, .submenu a{
  padding:1px 5px;
  border:0px solid #000000;
  border-collapse:collapse;
  color:#000000;
  font-weight:bold;
  text-decoration:none;
  background-color:#fbed07;
  margin:0;  
}




.submenu a{
  font-size:10px;
  width:110px;
  position:relative;
  clear:both; /* special IE6 */
}




#menu a:hover, .topmenu.on a {
  color:#ffffff;
  background-color:#A29500 !important;

}




.topmenu:hover ul {
  display:block;  
  z-index:500;
}

Alles anzeigen

wolf · 24. Februar 2014

Du musst am Style NICHTS ändern, ja es liegt daran das du es Lokal geöffnet hast, da dein Browser kein PHP Interpretieren kann,

HTML >> Client seitige Sprache (Browser)
CSS >> Client seitige Sprache
JS >> Client seitige Sprache

PHP >> Server seitige Sprache

Alles was Client seitig Interpretiert werden kann, kann vom Nutzer manipuliert werden und ist nicht sicher, außerdem kann es auch teilweise nicht benutzt werden, wenn z.B. CSS oder JS beim Benutzer deaktiviert sind.

Heißt wir bleiben bei PHP und du installiert dir am besten einen Localhost wie z.B. Xammp.

EDIT:

Hast du einen Link zu der Seite? Das hilft immer weiter wenn wir uns das Live ansehen können!

atex · 24. Februar 2014

Ich schick ihn dir als PN.

wolf · 24. Februar 2014

So, da wir die anderen nicht in Ungewissheit leben lassen wollen..

Das Problem war das die datei index.html hies und nicht index.php.

The Scout · 25. Februar 2014

Und atex: Da eine dynamische Seite heutzutage eigentlich immer auf PHP aufbaut, schau die das mal an: PHP Kurs, das ist die Schwesterseite zum HTML Seminar, mit Thema PHP.

Also, zuerst baust du dir deine Seite mit dem HTML Smeinar auf (also Semantik und Style), dann veraenderst du sie mithilfe des PHP Kurses zu einer dynamisch on-the-fly zusammengesetzten Seite und dann kannst du uns Loecher in den Bauch fragen.
Oder auch, wenn du irgendwas im Kurs nicht verstehst. Oder, wenn da was nicht angesprochen wird. Oder...

Und ein Tipp zum Schluss: JavaScript musst du dir noch nicht anschauen (kannst du natuerlich gerne), da die Seite auch ohne funktionieren koennen muss, auch heutztutage gibt es immer noch diese Scriptophobiker, die JS deaktiviert haben

Viel Spass!

wolf · 25. Februar 2014

Zitat von The Scout

Und ein Tipp zum Schluss: JavaScript musst du dir noch nicht anschauen (kannst du natuerlich gerne), da die Seite auch ohne funktionieren koennen muss, auch heutztutage gibt es immer noch diese Scriptophobiker, die JS deaktiviert haben

So ziemlich das wollte ich eig. ausdrücken aber in dem Moment stand ich auf dem Schlauch und wusste nicht wie

Allgemeine Steuerung für die Webseite

Jetzt mitmachen!

Teilen