Beiträge von sejuma

    Definiere (sofern nicht bereits vorhanden) noch einen zusätzlichen Container, der alle übrigen umfasst und für den du eine Breite in % oder px festlegst sowie

    Code
    margin: 0 auto;

    zuweist.
    Diesen öffnest du unmittelbar nach <body> und schließt ihn vor </body>

    Insgesamt recht ordentlich, schöne onmouseover-Effekte und gut gegliedert.
    Folgendes halte ich noch für verbesserungswürdig:

    CSS:
    Pack alle Angaben in die ausgelagerte CSS-Datei. Damit brauchst du sie nicht in jeder Seite in Head einzugeben und tust dir bei späteren Änderungen leichter.

    Header und Menue-Hintergrund:
    Wirken etwas unruhig, evtl. etwas einfacher gestalten.

    Schrift:
    Ähnliches Problem hatte (oder hab) ich auch: Das Kontrastverhältnis (helle Schrift auf dunklem Hintergrund) ist noch verbesserungsfähig. Liest sich etwas schwer. Zu Reptilien würde vielleicht auch so ein Terracotta-Hintergrund gut passen.
    Du verwendest zwar relative Schriftgrößen (Lob!), aber nicht jeder kennt die Möglichkeit, dass man die im Browser vergrößern kann. Zur besseren Lesbarkeit würde ich deshalb die Standardschriftgröße noch etwas höher setzen.

    Navi:
    Hier solltest du jeweils noch einen Link zur Startseite einfügen.

    Impressum:
    Deine Adresse ist zwar irgendwo angegeben, zur Rechtssicherheit solltest du aber dennoch ein vollständiges Impressum angeben, zumal du mit dem Verkauf gewerblich tätig bist.

    Gruß von der anderen Rheinseite! (is des jetzt vun hiwwe odder vun driwwe?)

    Jow, dann eben anders:
    Ersetze mal die folgenden Positionen mit nachgenannten Codes, ausgehend von meinem vorherigen Quelltext:

    Code
    #navi      {
    background-color:#FFA000; 
    width:550px;
              }
    Code
    #mitte   {
             width:550px; 
             text-align:left;         
             border-style:solid; 
             border-color:#FFA000; 
             padding:25px; 
             padding-top:50px; 
             border-width:10px; 
             border-bottom-width:40px; 
             height:400px;}

    Das haut dann immer noch nicht ganz hin, weil dann die Navi die Überschrift noch überlagert.
    Du musst dir mal über die Top-Abstände bewusst werden:
    h1 ist von oben 100 px entfernt und hat 50px Höhe, zusammen also 150px.
    Dann kommt der div, der nur 140 px von obern Abstand hat und ragt folglich in die Überschrift hinein.
    Vorschlag:
    Lass mal überall die top- und left-Werte weg und verzichte auch auf das position:absolute;
    Weniger ist in diesem Fall mehr.

    Dafür machst du einen allumfassenden Container, der die Seite zentriert.
    Statt der bisherigen Klasse Mitte machst du einen id. und den div bezeichnest du als navi.

    Die CSS sieht dann so aus:


    HTML


    Falls du dann noch die Top-Abstände verändern willst, kannst du ja entsprechende Werte einfügen.

    edit: Welche Schrift bzw. welcher Text soll auf dem Rahmen liegen?

    Hmm, bei mir hat das so funktioniert. Nochmal zur Sicherheit:
    Du hast eine Datei, z.B. "seite.html"
    In diese Seite fügst du den o.g. Code innerhalb des body-Bereichs ein.
    Die Datei "inhalt.php" enthält lediglich einen beliebigen Text oder auch HTML-Code.
    Beide Dateien befinden sich auf dem Server im gleichen Verzeichnis.
    Falls das dennoch nicht klappt, stell deine Frage nochmal in diesem Forum unter der Rubrik PHP. Ich habe damit gerade erst angefangen, war aber erstaunt, wie einfach gerade dieses Beispiel funktioniert hat.

    Über CSS den Inhalt einfügen geht nicht, da CSS lediglich für die Formatierungen zuständig ist.
    Du kannst aber den Inhalt eines CSS-Containers mit einem kleinen PHP-Script einfügen (includen).

    PHP
    <div>
    <?php
    include("inhalt.php");
    ?>
    </div>


    In die Datei inhalt.php schreibst du dann dein Menue oder die HTML-Tags für die Grafiken, ganz genauso wie du es mit HTML schreiben würdest.
    Dein Webspace muss dafür PHP-fähig sein und du kannst die Funktionsweise auch nur testen, wenn du die entsprechenden Dateien hochgeladen hast.

    Du müsstest mit einem Grafikprogramm eine kleine Grafik erstellen (ca. 5-10px Höhe reichen aus).
    Diese Grafik müsste im Querschnitt von links nach rechts so aufgebaut sein, dass sie den Farben und den Breiten deiner jeweiligen Container entspricht.
    Diese Grafik bindest du dann als background-image in deine content-Box ein.
    Ist nicht ganz einfach, aber eben halt auch nur eine Hilfslösung, weil sich mit CSS die Spalten nicht automatisch anpassen.
    Oder du gibst allen Spalten die gleiche Höhe und musst dann eben immer kontrollieren, ob der Inhalt nicht "zu lang" wird.

    Es ist normal, dass sich die Containerhöhe an der ihres Inhaltes ausrichtet. Insofern zeigt's eher der IE falsch und der FF richtig.
    Beheben lässt sich das, indem du z.B. dem #innercontent noch eine bestimmte height zuweist, z.B.

    Code
    height:500px;

    Ob und wie es mit background-image geht, hab ich noch nicht herausgefunden.
    Mit einem normalen image geht es so:

    Code
    [img]image.jpg[/img]


    Anstelle der Pixlewerte des Bildes gibst du im Verhältnis der Pixel Prozentwerte für Breite und Höhe an. Damit passt sich das Bild jeder Auflösung an.

    Falls jemand noch ne Lösung für background-image hat, würd's mich auch interessieren.

    edit:
    Hab' grad was gefunden: Background skalieren geht nicht. Soll aber mit CSS 3 (irgendwann in 5 - 8 Jahren) kommen.

    Man kann Breite und Höhe mit festen Werten angeben.
    Hierzu packt man den Inhalt in einen Container, dessen Breitenangabe man definiert, z.B. so:

    Code
    <div style="width:900px;background:yellow;">


    Danach kommt der HTML-Inhalt und zum Schluss wird der Container mit </div> geschlossen.

    Feste Größen können aber auch Nachteile haben:
    Mal angenommen man definiert diese für eine 800er Bildschirmauflösung. Dann wirken sie bei 1280 ziemlich mickrig.
    Umgekehrt muss man bei kleinerer Auflösung viel scrollen.

    Der "Trend" geht deshalb hin zu dynamischen Seiten. Hier werden Breiten und Höhen nicht mit festen Pixelwerten, sondern mit "relativen" Werten definiert, z.B. "%" oder "em".
    Derartige Seiten passen sich dann der Bildschirmauflösung an.

    Eine CSS-Datei kannst du mit dem ganz normalen Windows-Editor (unter Zubehör zu finden) erstellen. Du musst sie lediglich mit der Dateiendung ".css" abspeichern.
    Den Inhalt hier zu erklären sprengt sicherlich den Rahmen, da es hierzu umfangreiche Bücher und Tutorials gibt.
    Am besten du liest dich mal etwas ein und eignest dir ein paar Grundkenntnisse an. Wenn du mal das Prinzip verstanden hast, ist alles nicht mehr schwer.
    Da solltest du dich mal etwas durch- und einarbeiten:
    http://css.fractatulum.net/index.htm
    http://www.css4you.de/
    http://www.stichpunkt.de/css/bereiche.html

    Ich fange gerade an mich mit PHP zu beschäftigen.
    Aufgabe:
    Ein CSS-div soll per PHP-include mit Text gefüllt werden oder in einen div sollen die Navi-Links eingebunden werden.

    Folgende Lösung funktioniert einwandfrei:

    PHP
    <div id="navi">
    <?php
    include("navi.php");
    ?>

    Die Datei navi.php enthält dann den HTML-Code für die Links oder einen beliebigen Text.

    Ist das wirklich so einfach und korrekt? Ich kann's kaum glauben!