Menunavigation
- Ersteller benny17
- Erstellt am
Hallo,
habe eine recht simple frage. bin leider noch anfänger auf dem html / php gebiet.
Ich baue mir grad eine Page, die ein ganz normales design besitzt. oben nen header, dadrunter ein horizontales menu mit 6 links und dadrunter 3 kästen, die alle auf gleicher höhe sind und nebeiander angeordnet sind. der mittlere ist der maincontent kasten, der je nach klick auf einen link mit anderem inhalt gefüllt werden soll. (hoffe ich konnte das einigermaßen verständlich machen, also die äußeren kästen sollen immer vorhanden sein, egal auf welchen link ich klicke und der mittlere soll sich ändern)
nun zur frage: kann ich per html beim klick auf den link angeben, dass sich nur der bestimmte div vom inhalt her ändern soll, oder ist es am besten, dass ganz per php zu lösen, also je nach klick auf den link einen status zu übergeben, der beim laden des mittleren div containers diesen status abfragt und sich je nach dem den inhalt aus der mysql db zieht?
kann ich als, eine reine indexseite haben und dadrüber alles steuern, oder mussich 6 seiten haben wiel ich 6 links habe? bin im mom etwas verwirrt, hoffentlich durchblickt ihr mein wortgewirr
habe eine recht simple frage. bin leider noch anfänger auf dem html / php gebiet.
Ich baue mir grad eine Page, die ein ganz normales design besitzt. oben nen header, dadrunter ein horizontales menu mit 6 links und dadrunter 3 kästen, die alle auf gleicher höhe sind und nebeiander angeordnet sind. der mittlere ist der maincontent kasten, der je nach klick auf einen link mit anderem inhalt gefüllt werden soll. (hoffe ich konnte das einigermaßen verständlich machen, also die äußeren kästen sollen immer vorhanden sein, egal auf welchen link ich klicke und der mittlere soll sich ändern)
nun zur frage: kann ich per html beim klick auf den link angeben, dass sich nur der bestimmte div vom inhalt her ändern soll, oder ist es am besten, dass ganz per php zu lösen, also je nach klick auf den link einen status zu übergeben, der beim laden des mittleren div containers diesen status abfragt und sich je nach dem den inhalt aus der mysql db zieht?
kann ich als, eine reine indexseite haben und dadrüber alles steuern, oder mussich 6 seiten haben wiel ich 6 links habe? bin im mom etwas verwirrt, hoffentlich durchblickt ihr mein wortgewirr
Phil S.
Vice Admiral Special
Hi Ben,
Deine Links sollten dann so aussehen:
Das zeigt nur die prinzipielle Vorgehensweise. Etwas mehr Code sollte schon sein. Aber nur dass du weißt um was es geht.
Ciao
Phil
Das ginge nur mit Frames. Und die sollte man nicht mehr benutzen.
Jop, ...
So in etwa. Mach es dir nicht so kompliziert: Ich empfehle dir eine Index Datei zu machen, die du schreibst, als wäre es eine deiner normalen HTML Dateien. Nur in dem Bereich wo der Inhalt reinkommt fügst du sowas in der Art ein:
PHP:
switch($_GET["section"])
{
case "home":
include("contents/home.html");
break;
case "impressum":
include("contents/impressum.html");
break;
default:
echo "404";
}Deine Links sollten dann so aussehen:
HTML:
<a href="index.php?section=home">Home</a>Das zeigt nur die prinzipielle Vorgehensweise. Etwas mehr Code sollte schon sein. Aber nur dass du weißt um was es geht.
Ciao
Phil
Ich würd das mit "include()" lösen. Also in etwa so:
<div id="maincontent">Mächtig viel Text
</div>
<?php include('zweiterkasten.html');
include('dritterkasten.html'); ?>
Die Navigation sowie Header/Footer kannst ja auch so einfügen.
Dann hast du für jede Unterseite eine php-Datei in die automatisch die "statischen" Inhalte eingefügt werden. Willst du die ändern musst du das nur in einer Datei machen -> Praktisch
MFG Max
PS: Meine Fotowettbewerb-Infoseite ist auch so aufgebaut.
<div id="maincontent">Mächtig viel Text
</div><?php include('zweiterkasten.html');
include('dritterkasten.html'); ?>
Die Navigation sowie Header/Footer kannst ja auch so einfügen.
Dann hast du für jede Unterseite eine php-Datei in die automatisch die "statischen" Inhalte eingefügt werden. Willst du die ändern musst du das nur in einer Datei machen -> Praktisch
MFG Max
PS: Meine Fotowettbewerb-Infoseite ist auch so aufgebaut.
wobei ich auch eher die version von Phil S bevorzugen würde, ist wesentlich geschickter, da du auch den vorteil hast, das er nicht immer die komplette seite neu laden muss, sondern nur den inhalt. Der rest ist im cache.
Die Variante mit case und switch ist meiner meinung nach eine der sichersten ^^
Natürlih könnte man das ganze auch mit javascript und divboxen machen, indem du alle divboxen mit dem jeweiligen inhalt übereinander setzt und dann per javascript funktion alle divboxen auf invisible setzt, bis auf die, welche du angezeigt haben willst.
Also ein link würde dann so aussehen:
javascript:inhalt('news')
Wenn du genaueres wissen möchtest, kann ich dir den kompletten code posten
Die Variante mit case und switch ist meiner meinung nach eine der sichersten ^^
Natürlih könnte man das ganze auch mit javascript und divboxen machen, indem du alle divboxen mit dem jeweiligen inhalt übereinander setzt und dann per javascript funktion alle divboxen auf invisible setzt, bis auf die, welche du angezeigt haben willst.
Also ein link würde dann so aussehen:
javascript:inhalt('news')
Wenn du genaueres wissen möchtest, kann ich dir den kompletten code posten
Ich glaub es ist wohl egal wie man es macht. Und wegen dem Cache: Ich würd jetzt einfach mal behaupten das es egal ist. Der Browser bekommt den gleichen Code zugeschickt, ob die Adresse jetzt index.php?page=impressum oder impressum.php ist ist wohl egal. Kann aber gut sein das ich da was nicht richtig versteh...
Eine Seite MUSS auch ohne JavaScript funktionieren -> Du musst zweigleisig fahren. Oder weißt du ob jeder Besucher auch einen JavaScript-fähigen Browser hat bzw JavaScript eingeschalten hat?
MFG Max
BoMbY
Grand Admiral Special
Hallo,
ich hab mir vor einiger Zeit mal ein Mini-Script gebastelt, um eine mehrseitige Webpage einfach zu handhaben. Das ganze basiert auf dem freien MiniTemplator-Script, und sieht etwa so aus:
index.php:
default.html (Template):
index.htm (Inhalt):
other.htm (Inhalt):
Alles was man tun muss, ist quasi die Variablen oben anzupassen (vor allem den Menü-Array), und entsprechende HTM-Files (oder wie man sie auch immer gerne nennen möchte), in das gleiche Verzeichniss zu legen, deren Inhalt dann 1:1 an die gewünschte Stelle im Template gepackt wird.
Ich garantiere nicht, dass diese Version hier ganz ohne Fehler ist (ich habe mehrere hier auf der Platte) - aber dafür ist mein Script ja auch kostenlos ...
Mit ein paar kleinen Anpassungen sollte sich das Ganze für so manche Seite nutzen lassen - sicherlich auch für die von benny17.
Gruß,
BoMbY
ich hab mir vor einiger Zeit mal ein Mini-Script gebastelt, um eine mehrseitige Webpage einfach zu handhaben. Das ganze basiert auf dem freien MiniTemplator-Script, und sieht etwa so aus:
index.php:
PHP:
<?php
require_once('MiniTemplator.class.php');
//////////////////////////////////////////////////////////
// CONFIG SECTION
ob_start('ob_gzhandler');
setlocale(LC_ALL, 'de_DE');
$template = 'default.html';
$content_extension = '.htm';
$title_prefix = 'Meine Seite - ';
$menu = array(
'index' => 'Startseite',
'EndBlock1' => '-',
'other' => 'Andere Seite',
'EndBlock2' => '-'
);
$default_page = 'index';
///////////////////////////////////////////////////
// CODE SECTION
if (!isset($_GET['page'])
{
$page = $default_page;
}
else
{
$page = $_GET['page'];
}
$t = new MiniTemplator;
$t->readTemplateFromFile($template);
$t->setVariable('PageTitle', $title_prefix.$menu[$page]);
$t->setVariable('PageContent', file_get_contents("./".$page.$content_extension));
foreach ( $menu as $key => $value )
{
if ( $value == '-' )
{
$t->addBlock ('MenuBlock');
}
else
{
$t->setVariable ('LinkTarget', 'index.php?page='.$key);
$t->setVariable ('LinkName', $value);
$t->addBlock ('MenuEntry');
}
}
$t->generateOutput();
?>default.html (Template):
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>${PageTitle}</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td> </td>
<td><h1>${PageTitle}</h1></td>
</tr>
<tr>
<td>
<!-- $BeginBlock MenuBlock -->
<ul>
<!-- $BeginBlock MenuEntry -->
<li><a href="${LinkTarget}">${LinkName}</a></li>
<!-- $EndBlock MenuEntry -->
</ul>
<!-- $EndBlock MenuBlock -->
</td>
<td><p>${PageContent}</p></td>
</table>
</body>
</html>index.htm (Inhalt):
HTML:
<b>Ich bin die Startseite</b>other.htm (Inhalt):
HTML:
<b>Ich aber nicht ...</b>Alles was man tun muss, ist quasi die Variablen oben anzupassen (vor allem den Menü-Array), und entsprechende HTM-Files (oder wie man sie auch immer gerne nennen möchte), in das gleiche Verzeichniss zu legen, deren Inhalt dann 1:1 an die gewünschte Stelle im Template gepackt wird.
Ich garantiere nicht, dass diese Version hier ganz ohne Fehler ist (ich habe mehrere hier auf der Platte) - aber dafür ist mein Script ja auch kostenlos ...
Mit ein paar kleinen Anpassungen sollte sich das Ganze für so manche Seite nutzen lassen - sicherlich auch für die von benny17.
Gruß,
BoMbY
Zuletzt bearbeitet:
ich greife das thema gleich mal auf. habe zum thema menü auch eine frage.
und zwar möchte ich das in der menüleiste der menüpunkt markiert ist der gerade angeklickt ist und angezeigt ist.
d.h. der menüpunkt soll auch markiert sein wenn die maus nicht drüber zeigt.
hoffe das ist jetzt so verständlich erklärt![:]](https://www.planet3dnow.de/vbulletin/images/smilies/rolleyes.gif "Augen rollen (sarkastisch) :]")
wenn nicht fragt nochmal
wie mache ich das ? da kann mir doch bestimmt einer helfen.
MrChaos
und zwar möchte ich das in der menüleiste der menüpunkt markiert ist der gerade angeklickt ist und angezeigt ist.
d.h. der menüpunkt soll auch markiert sein wenn die maus nicht drüber zeigt.
hoffe das ist jetzt so verständlich erklärt
wenn nicht fragt nochmal wie mache ich das ? da kann mir doch bestimmt einer helfen.
MrChaos
Phil S.
Vice Admiral Special
Huhu,
also ich mach das immer mit ner Abfrage und ner passenden CSS Klasse. Angenommen deine Navigation sieht so aus:
Dann frage einfach den Wert von $_GET["section"] ab und verändere deine Ausgabe. Beispiel:
In der CSS Datei hast du dann einen passenden Eintrag (z.B. #navigation li.active) und dann formatierst du das entsprechend.
Ciao
Phil
also ich mach das immer mit ner Abfrage und ner passenden CSS Klasse. Angenommen deine Navigation sieht so aus:
HTML:
<ul id="navigation">
<li><a href="index.php?section=home">Home</a></li>
<li><a href="index.php?section=1">Punkt1</a></li>
<li><a href="index.php?section=2">Punkt2</a></li>
<!-- Und so weiter -->
</ul>Dann frage einfach den Wert von $_GET["section"] ab und verändere deine Ausgabe. Beispiel:
PHP:
if($_GET["section"]==="home")
{
echo "<li><a href=\"index.php?section=home\" class=\"active\">Home</a></li>";
}
else
{
echo "<li><a href=\"index.php?section=home\">Home</a></li>";
}In der CSS Datei hast du dann einen passenden Eintrag (z.B. #navigation li.active) und dann formatierst du das entsprechend.
Ciao
Phil
irgendwas mach ich da falsch ...
der link der der nach "else" steht
wird unter dem hauptinhalt als normaler text link ausgegeben.
an welcher stelle sollte ich den php code von dir einbauen? in der seite fürs menü oder in der index seite ?
ursprünglich wird das menu per include in die index seite eingebunden. und ist in eine tabelle gepackt
wenn wir gerade mal dabei sind. ist es möglich mit <ul> <li> eine horizontale nav leiste zu erstellen ?
und wie kann ich das bild im kopf der seite bei einem klick auf einen link ändern ?
bzw wie kann ich ein bild bzw eine div box anzeigen lassen nach dem ich einen link angeklickt habe.
ohne php ging das ja mit einen javascript wo man 2 frames ändern lassen konnte. das geht sicherlich auch mit php nur wie ?
der link der der nach "else" steht
PHP:
else
{
echo "<li><a href=\"test.php?section=home\">home 1</a></li>";
}an welcher stelle sollte ich den php code von dir einbauen? in der seite fürs menü oder in der index seite ?
ursprünglich wird das menu per include in die index seite eingebunden. und ist in eine tabelle gepackt
wenn wir gerade mal dabei sind. ist es möglich mit <ul> <li> eine horizontale nav leiste zu erstellen ?
und wie kann ich das bild im kopf der seite bei einem klick auf einen link ändern ?
bzw wie kann ich ein bild bzw eine div box anzeigen lassen nach dem ich einen link angeklickt habe.
ohne php ging das ja mit einen javascript wo man 2 frames ändern lassen konnte. das geht sicherlich auch mit php nur wie ?
Zuletzt bearbeitet:
Hier ein Tipp: die Suche nach "ul li horizontal" in Google bringt bei mir gleich diese Seite als ersten Link: http://phoenity.com/newtedge/horizontal_nav/
Ich denke, dass Du Dir ganz gute Anregungen aus der Seite holen kannst. Der Schlüssel sind die "display: inline" und margin-Angaben aus dem Stylesheet. Mit "display: inline" wird die Liste horizontal. Um die Abstände loszuwerden, setzt man eben noch den margin. Ich würde aber auf jeden Fall empfehlen, grundsätzlich immer Maßeinheiten anzugeben; der Autor der Webseite hat oft einfach nur "0" anstatt "0px" drinstehen, das ist nicht so gut.
Ich denke, dass Du Dir ganz gute Anregungen aus der Seite holen kannst. Der Schlüssel sind die "display: inline" und margin-Angaben aus dem Stylesheet. Mit "display: inline" wird die Liste horizontal. Um die Abstände loszuwerden, setzt man eben noch den margin. Ich würde aber auf jeden Fall empfehlen, grundsätzlich immer Maßeinheiten anzugeben; der Autor der Webseite hat oft einfach nur "0" anstatt "0px" drinstehen, das ist nicht so gut.
feelx
Grand Admiral Special
Hi
Ja - gebe dir absolut recht, dass Masseinheiten besser ist... insb. bei z.B. font, font-size wo zusätzlich zu px, em, % noch xx-small oder pt usw möglich sind... Aber die Specs sehen tatsächlich vor, dass bei "0" die Angabe der Einheit optional ist.
(===> After a '0' number, the unit identifier is optional.)
Ich denke, das ist dann einfach die typische Faulheit einiger Coder - sie freuen sich halt über jeden noch so kleinen "Syntactic Sugar"
BoMbY
Grand Admiral Special
Ehh Leute: Soweit ich weiß sieht der CSS-Standard vor, den Wert 0 immer ohne Einheit anzugeben. Ist ja auch logisch: Denn es ist Wurscht, ob es jetzt 0px, 0em, 0 Meter, 0 Prozent oder 0 Bock ist. Null bleibt Null.
Gruß,
BoMbY
Edit: Sorry, ich hätte vieleicht erst feelx Post lesen sollen, der das ja quasi schon geschrieben hat ...
Gruß,
BoMbY
Edit: Sorry, ich hätte vieleicht erst feelx Post lesen sollen, der das ja quasi schon geschrieben hat ...
also ich hab die seite mal mit dem ie aufgerufen.
sieht so aus als wenn der ie6 das nicht gebacken bekommt das menü richtig anzuzeigen
bin gespannt ob der ie 7 besser mit css zurecht kommt.
schade eigentlich die idee hat mir gefallen.
sieht so aus als wenn der ie6 das nicht gebacken bekommt das menü richtig anzuzeigen
bin gespannt ob der ie 7 besser mit css zurecht kommt.
schade eigentlich die idee hat mir gefallen.
Zuletzt bearbeitet:
