Stylings und Menüleisten vererben?

Hallo html-Forumsmitglieder,

ich bin neu hier und genauso html-Neuling.
Im Moment besitze ich eine Access-DB, bei der nun die Anforderung besteht, diese Webfähig zu gestalten. Also habe ich mir gedacht mysql und php wird es wohl werden. Bevor ich nun starte wollte ich mir erstmal paar Grundlagen zusammenholen.
Um Programmieraufwand zu sparen, wollte ich so viel wie möglich in zentralen Dateien halten, die ich dann einfach nur aus meinen Unterdateien anspreche. Also zum Beispiel der Connect zur Datenbank.

[CODE]<?php
$mysqlhost=„localhost“;
$mysqluser=„User“; // MySQL-User angeben
$mysqlpwd=„PW“; // Passwort angeben
$mysqldb=„DB-Name“; // Gewuenschte Datenbank angeben

$connection=mysql_connect($mysqlhost,$mysqluser, $mysqlpwd) or die(„Verbindungsversuch fehlgeschlagen“);

mysql_select_db($mysqldb,$connection) or die(„Konnte die Datenbank nicht waehlen.“);

?>[/CODE]

Der Aufruf erfolgt dann einfach über:

require("db_verbindung.php");

Jetzt meine Frage: Ist dies auch mit dem Stylings möglich? Wenn ja wie müsste das aussehen.
Bei vielen Webseiten wird ja heutzutage ein extra HTML für die Menüs (links oder/und oben) geschrieben und die eigentliche Seite ist dann ein extra html/php.
Hab mir mal ein Beispiel für ein Menü organisiert:

[CODE]

Navigationsleiste mit Überschriften body { font: normal 100.01% Helvetica, Arial, sans-serif; color: black; background-color: #ffffe0; }

ul#Navigation {
width: 10em;
margin: 0; padding: 0.2em 0.8em 0.8em;
border: 1px solid black;
background-color: silver;
}

  • html ul#Navigation { /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
    }
    ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
    }

ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}

  • html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
    width: 100%; /* Breitenangabe fuer IE 5.x /
    w\idth: 8.8em; /
    Breitenangabe fuer IE 6 */
    }
    ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
    }
    ul#Navigation h2 {
    font-size: 1em;
    margin: 1.1em 0 0;
    border-color: gray;
    color: black; background-color: #eee;
    }

Navigationsleiste mit Überschriften

  • Rubrik 1

  • Seite 1
  • Seite 2
  • Seite 3
  • <li><h2>Rubrik 2</h2></li>
    <li><span>aktuelle Seite</span></li>
    <li><a href="#Beispiel">Seite 5</a></li>
    <li><a href="#Beispiel">Seite 6</a></li>
    
    <li><h2>Rubrik 3</h2></li>
    <li><a href="#Beispiel">Seite 7</a></li>
    <li><a href="#Beispiel">Seite 8</a></li>
    <li><a href="#Beispiel">Seite 9</a></li>
    
</html[/CODE]

Jetzt stellt sich für mich die Frage wie führe ich die beiden Seiten zusammen, so dass auch beide angezeigt werden?

Wenn jemand noch ein paar grundlegende Tipps hat, die ich beachten sollte bevor ich starte, wäre ich natürlich sehr dankbar.

Viele Grüße
highjumper

Also wenn ich es richtig verstanden habe
[PHP]// index.php
include ‚head.html‘;
include ‚body.html‘;
include ‚footoer.html‘;[/PHP]

[HTML]
Navigation[/HTML]

[HTML]
Body[/HTML]

[HTML]
footer[/HTML]

im end effekt würde das dann so aussehen
[HTML]head
body
footer[/HTML]

mfg Marcel

Ja das Prinzip stimmt erstmal!

nur habe ich nun die 3 html Dokumente unter einander, wie kann ich der index.php mitgeben, dass sie die head-Datei nur links in einem bestimmten Bereich anzeigen darf.
Und gleich die nächste Frage:
Wenn ich dann in einem der drei Bereiche (z.B.: head) ein Button habe, der in einem anderen Bereich (Body) ein neue Seite aufrufen will, wie stell ich das an, ohne das mir die aufgerufen Datei alleine angezeigt wird? (D.h. ich will auch da den head und footer behalten.

Viele Grüße

Hi,
also die Trennung der Bereich machst du dann mittels CSS.
Bzgl. des Buttons, da müsstest du mir mal ein genaueres Beispiel geben :wink:
Was willste da genau machen?

mfg Marcel

Ok, ich hab mein Beispiel mal hier eingestellt:
http://www.herrmannsport.de/php/index.php

mein Dateien sehen so aus:
index.php

[code]

Herrmannsport.de

background-image:url(Bilder/logo.jpg); background-repeat:no-repeat; background-position:center center;
background-attachment:fixed;

<?php // index.php include 'head.php'; include 'body.php'; include 'footer.php'; ?> [/code]

head.php

[code]

Datenbank der Wettkämpfe der Familie Herrmann
 
Herrmannsport

<!-- Einfache Navigationsleiste -->
[
<a href="index.php">Home</a>
|
<a href="eingabe.php">Dateneingabe</a>
|
<a href="auswertung.php">Auswertung</a>
|
<a href="sonst.php">sonstiges</a>
|
]
<!-- Ende der Navigationsleiste> -->
[/code]

footer.php

[code]

Menue body { font: normal 100.01% Helvetica, Arial, sans-serif; color: black; background-color: #ffffe0; }

ul#Navigation {
width: 10em;
margin: 0; padding: 0.2em 0.8em 0.8em;
border: 1px solid black;
background-color: silver;
}

  • html ul#Navigation { /* Korrekturen fuer IE 5.x */
    width: 11.6em;
    w\idth: 10em;
    padding-left: 0;
    padd\ing-left: 0.8em;
    }
    ul#Navigation li {
    list-style: none;
    margin: 0.4em; padding: 0;
    }

ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
display:block;
padding: 0.2em;
text-decoration: none; font-weight: bold;
border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;
}

  • html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
    width: 100%; /* Breitenangabe fuer IE 5.x /
    w\idth: 8.8em; /
    Breitenangabe fuer IE 6 */
    }
    ul#Navigation a:hover, ul#Navigation span {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
    }
    ul#Navigation h2 {
    font-size: 1em;
    margin: 1.1em 0 0;
    border-color: gray;
    color: black; background-color: #eee;
    }

Menü

</html[/code]

body.php

[code]<?php
// baut die verbindung zum mysql server auf
require(„db_verbindung.php“);

$sql = mysql_query("SELECT * FROM test");
$ergebnis = mysql_fetch_array($sql);

    echo "$ergebnis[ID]";
    echo "<br>";
    echo "$ergebnis[Vorname]";
    echo "<br>";

?>
[/code]

Um head, body und footer in die richtige Position zu schieben, müsste ich die CSS ja im index definieren, oder? Wie müsste das ungefähr aussehen?
Jetzt zum Knopf, wenn ich auf den Button Dateneingabe im Head.php klicke, öffnet sich eine neue Seite eingabe.php. Nun möchte ich aber, dass weiterhin head und footer zu sehen sind und nur der Body gegen eingabe „getauscht“ wird.

Ich hoffe das war verständlich erklärt.

Viele Grüße

ok …
eine Möglichkeit … recht simple
[PHP]
$action = @$_GET[„action“];
$file = NULL;

switch($action){
case ‚body‘: $file = „body.html“;
break;
case ‚blah‘: $file = „blah.html“;
break;
// weitere
default: $file = „body.html“;
break;
}

include ‚head.html‘;
include $file;
include ‚footer.html‘;
[/PHP]
Dies ist eine relative einfach und schnelle Möglichkeit, jedoch nicht besonders schön. wenn du dann später mehr erfahrung mit php hast, fällt dir sicherlich noch mehr ein.

die head bzw. navigation sollte danach so aussehen
[HTML]Bodyblah[/HTML]

mfg Marcel