• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Stylings und Menüleisten vererben?

H

highjumper83

Neues Mitglied
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.");
    
?>

Der Aufruf erfolgt dann einfach über:
Code: 
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: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Navigationsleiste mit Überschriften</title>
<style type="text/css">
  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;
  }

</style>
</head>
<body>
  <h1 id="Beispiel">Navigationsleiste mit Überschriften</h1>

  <ul id="Navigation">
    <li><h2>Rubrik 1</h2></li>
    <li><a href="#Beispiel">Seite 1</a></li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a></li>

    <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>
  </ul>

</body>
</html

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';

HTML: 
<!-- head -->
Navigation

HTML: 
<!-- body -->
Body

HTML: 
<!-- footer -->
footer

im end effekt würde das dann so aussehen
HTML: 
head
body
footer


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 ;)
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: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Herrmannsport.de</title>
<style type="text/css">


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

</style>
</head><body>

<?php
// index.php
include 'head.php';
include 'body.php';
include 'footer.php';  
?> 
</body>
</html>

head.php
Code: 
<html>
  <head>
    <title>Datenbank der Wettkämpfe der Familie Herrmann</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
  </head>
  <body>
    <table border="0" width="750" align="center">
    <tr>
    <td>
    &nbsp;<br /><div align="center"><img src="Bilder/logo.jpg" width="480" height="80" alt="Herrmannsport" /></div><br />
    
    <!-- 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> -->
    

  </td>
  </tr>
  </table>
  </body>
</html>

footer.php
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menue</title>
<style type="text/css">
  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;
  }

</style>
</head>
<body>
  <h1 id="Beispiel">Menü</h1>

  <ul id="Navigation">
    <li><h2>Eingabe</h2></li>
    <li><a href="#Beispiel">Seite 1</a></li>
    <li><a href="#Beispiel">Seite 2</a></li>
    <li><a href="#Beispiel">Seite 3</a></li>


  </ul>

</body>
</html

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>";
?>

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';
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: 
<a href="index.php?action=body">Body</a> ... <a href="index.php?action=blah">blah<a>

mfg Marcel
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben