Meine Website von Frames befreien

[m.hupfeld]

Hallo Leute,

Ich will die Seite meines Vaters Die besondere Biologieseite so umgestalten, dass sie keine Frames mehr brauchen. Dazu habe ich ein neues Design mit Photoshop erstellt, welches ihr unten sehen könnt.

In meiner erste Konstruktion (siehe ebenfalls Bild) habe ich einen Iframe in der Mitte für den Inhalt gemacht. Das hat den Nachteil, dass ich zwei Schiebebalken habe (Browser + Iframe).



Meine Frage wäre, wie man die Homepage ganz ohne diesen Framekram gestalten könnte, sodass im mittleren Fenster immer die unterschiedlich langen Artikel von den Links aus der Navigationsleiste optimal angezeigt werden.

Vielen Dank für euer Interesse..

 

[WU*Martin]

Naja das kann man jetzt natürlich unendlich clever lösen mit php und css und bla, ich erkläre Dir mal die leichteste Möglichkeit, die aus einer simplen Tabelle besteht.

Bei meinem Code ist die Tabelle 1000 Pixel breit, achte darauf, dass Deine Hintergrundgrafiken auch 1000 Pixel einnehmen (oder eben einen anderen Wert.)
Im Grunde kannst Du jede Website auf dieses Format beschränken, es ist der Standard: 1000x768 mit etwas Platzpuffer. So kann man Deine Seite auch perfekt mit 15" Monitoren betrachten .

<table height="100%" width="1000" border="1">
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
    <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td width="10%">&nbsp;</td>
    <td width="90%">&nbsp;</td>
  </tr>
</table>

Bei Tabellen dehnen sich die Zellen halt aus. Verwende Hintergrundbilder und pass die Zellengrößen jeweils an! Die Tabelle bitte auch transparent machen (border="0")
so kann Dein Inhalt theoretisch unendlich lang werden und Du bist nicht länger auf Frames angewiesen.



Die deutlich elegantere Variante wäre natürlich mit CSS Boxen aufzuziehen, etc. - aber wenn Du gerade auf dem Iframe Level bist lassen wir das besser mal
Solltest Du Dir aber mal angucken ;P Tabellen sind immer ärgerlich

 

[Loon3y]

Naja das kann man jetzt natürlich unendlich clever lösen mit php und css und bla, ich erkläre Dir mal die leichteste Möglichkeit, die aus einer simplen Tabelle besteht.

und zugleich auch die Möglichkeit, welche falsch ist. Tabellen sind für tabellarische Daten, und nichts anderes.

... So kann man Deine Seite auch perfekt mit 15" Monitoren betrachten .

Und was ist mit einem 14,9'' Monitor? Eine Seite muss in jeder bedenklichen Browserfesterngrößer darstell- und nutzbar sein. Man kann auch einen 30'' Monitor haben und das Browserfestern nur 200 x 100 px groß haben.

Bevor man tipps gibt, sollte man wohl erst selbst einmal lernen was HTML und CSS ist und wie man es korrekt einsetzt.
Einführung in XHTML, CSS und Webdesign - Michael Jendryschik


Gruß
Loon3y

 

[m.hupfeld]

Vielen Dank für die Antwort. Ich versuche mich jetzt ein bisschen mit PHP (gerade include befehl) auseinanderzusetzen, da dies auf lange Sicht wohl besser wäre.



Bei deinen Ausführungen habe ich allerdings leider nicht ganz verstanden wie ich mit dieser Tabellenform unabhängig von Frames wäre. Wie lade ich den meine Artikel in den Hauptframe? :sad:

 

[m.hupfeld]

u

Bevor man tipps gibt, sollte man wohl erst selbst einmal lernen was HTML und CSS ist und wie man es korrekt einsetzt.

WU*Martin hat doch nur versucht einem Laien zu einer praktikablen Lösung zu verhelfen. Anstatt den Oberschlauen zu geben könntest Du vielleicht konkrete hilfreiche Tipps für mich geben.

 

[MrMurphy]

Hallo,

WU*Martin hat doch nur versucht einem Laien zu einer praktikablen Lösung zu verhelfen.

Das war aber leider ein schlechter Tip und hat weder etwas einem aktuellen Webauftritt noch mit einer zukunftssicheren und flexiblen Darstellung zu tun.

Wie lade ich den meine Artikel in den Hauptframe?

Gar nicht, da es dann keine Frames mehr gibt. Du erstellst für jeden Artikel eine komplette Seite.

Die Vorteile überwiegen die (vermeintlichen) Nachteile bei weitem. Es gibt ja auch Software, die einen mit Vorlage- bzw. Templatemöglichkeiten dabei unterstützt, so das Änderungen, die alle Seiten betreffen, nur auf einer Durchgeführt werden müssen und dann auf die anderen auch "Knopfdruck" übernommen wird.

Um so viele Artikel online zu stellen lohnt sich aber auch ein Blick auf und die Einarbeitung in ein sogenanntes Content-Management-System (CMS) wie Joomla.

Gruss

MrMurphy

 

[kruschimappel]

Vom Prinzip würde ich dir auch zu include per PHP raten. Du passt die unterseiten so an, dass du Navigation usw. einfach einbindest, sodass du wie bei Frames immer noch eine Datei für die Navigation usw. hast, die du anpassen kannst.
oder, wie MrMurphy gesagt hat, du arbeitest dich in ein CMS ein, was häufig komfortabler zu pflegen ist.

 

[WU*Martin]

WU*Martin hat doch nur versucht einem Laien zu einer praktikablen Lösung zu verhelfen. Anstatt den Oberschlauen zu geben könntest Du vielleicht konkrete hilfreiche Tipps für mich geben.

Danke, wenn Du es verstanden und richtig interpretiert hast, ist alles in Ordnung :=)
Ich habe auch einen Programmierer, der dir hier sicherlich besser hätte helfen können, aber so muss der Designer reichen
'Habe übrigens NIE behauptet, dass mein Code gut war (ich habe in der ersten Zeile gesagt es ist die schlechteste Möglichkeit) Und jetzt sagt ihr alle: Diese möglichkeit ist schlecht. Prima Leistung ;) Ich habe sogar in der letzten Zeile erneut darauf hingewiesen, dass Tabellen immer schlecht sind.
Oh man..



Und Tabellen nutzt man für Tabellen -.- Cpt Obvious...
http://struckbyenlightning.files.wordpress.com/2010/01/thx-captain-obvious.jpg

Und was ist mit einem 14,9'' Monitor?

sagt echt alles über Deinen Post aus. Vielleciht mal demnächst alles lesen.



Der Thread-Ersteller nutzt Iframes >_> Da fang ich nicht von PHP an- denkt ihr nur was ihr wollt.

 

[mermshaus]

WU*Martin hat doch nur versucht einem Laien zu einer praktikablen Lösung zu verhelfen.

Und Loon3y hat lediglich darauf hingewiesen, dass die Lösung nicht dem richtigen Weg entspricht, HTML zu verwenden. Ob du das berücksichtigst, liegt natürlich bei dir, aber du kannst von einem Forum, in dem es um die korrekte Verwendung von HTML geht, nicht erwarten, dass die fehlerhafte Anwendung nicht zumindest angesprochen wird.

Anstatt den Oberschlauen zu geben könntest Du vielleicht konkrete hilfreiche Tipps für mich geben.

Ich sehe in dem Post einen Link auf eine sehr wortgewaltige Resource voller Tipps. Unter anderem etwa dieses Kapitel:

- Eine Beispielwebsite: Die Kochbar - Einführung in XHTML, CSS und Webdesign - Michael Jendryschik

Es gibt im Web zudem zahlreiche Hilfen und Anleitungen zu CSS-Layouts. Suche zum Beispiel nach "css spaltenlayout". Eines der ersten Ergebnisse:

- Grundlagen für Spaltenlayout mit CSS – SELFHTML aktuell Weblog

(Vielleicht poste ich -- oder jemand anders -- dir gleich noch eine kleine Demoseite dazu, die auch ein, zwei Zeilen PHP enthält. Oder ich linke ein gutes Tutorial oder einen Thread, falls ich einen finde. Will nur diesen Post erstmal vom Tisch haben. ;))

@WU*Martin:

Es ist schön, dass du dein Wissen einbringst, aber gestatte doch bitte auch Anderen, deine Meinung nicht unbedingt zu teilen oder deine Aussagen zu ergänzen, ohne dich angegriffen zu fühlen. Assume good faith, statt polemisch zu sein und rumzusticheln. (Gelingt mir ebenfalls nicht immer, dafür bitte ich auch dich um Entschuldigung.) So lernen wir vielleicht alle noch etwas dazu.

PS: Bevor wir uns hier weiter in Metadiskussionen erschöpfen, bitte ich darum, vorher die folgenden beiden Threads hier aus dem Forum zu lesen und das Thema unter Umständen lieber ruhen zu lassen, damit dieser Thread konstruktiv bleibt. Das ist im Interesse aller, denke ich.

- http://www.html.de/html-und-xhtml/32193-table-css-aufbau-problem.html (ähnelt sehr stark diesem Thread)
- http://www.html.de/feedback/32237-antworten-auf-fragen.html

 

[mermshaus]

index.php

<?php

// Alle Fehler ausgeben
error_reporting(E_ALL | E_STRICT);

// UTF-8 als Ausgabe-Encoding sicherstellen
header('Content-Type: text/html; charset=UTF-8');

// Nur Strings, die in dieser Liste auftauchen, sind als Eingaben für mögliche
// Unterseiten erlaubt
$allowedPages = array(
    'home',
    'mathe/fibonacci',
    'test2'
);

// Falls URL-Parameter p nicht gesetzt ist, setze auf Startseite
$_GET['p'] = (isset($_GET['p']))
           ? $_GET['p']
           : 'home';

// Stelle sicher, dass nachgefragte Seite unter den erlaubten Seiten ist, lade
// ansonsten eine Seite "error"
if (!in_array($_GET['p'], $allowedPages)) {
    $_GET['p'] = 'error';
}

$contentPath = './pages/' . $_GET['p'] . '.phtml';
$fileExists  = file_exists($contentPath);

?><!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="styles.css" media="screen" rel="stylesheet" type="text/css" />
        <title>Testseite</title>
    </head>

    <body>

        <div class="wrapper">

            <div class="header">
                header
            </div>

            <div class="sidebar">
                <ul class="navigation">
                    <li><a href="./?p=home">Startseite</a></li>
                    <li><a href="./?p=mathe/fibonacci">Fibonacci-Reihe</a></li>
                    <li><a href="./?p=test2">Noch eine Unterseite</a></li>
                </ul>
            </div>

            <div class="maincontent">
                <?php if ($fileExists) :
                    include $contentPath;
                else :
                ?>
                    <h1>Fehlende Seite</h1>
                    <p>
                        Die Seite "<?php echo htmlspecialchars($contentPath); ?>"
                        sollte vorliegen, wurde aber nicht gefunden.
                    </p>
                <?php endif; ?>
            </div>

            <div class="footer">
                footer
            </div>

        </div>

    </body>

</html>

styles.css

body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #666;
}

.wrapper {
    margin: 0 auto;
    width: 900px;
    background: #cff;
}

.header {
    height: 100px;
    padding: 10px;
    background: #fcc;
}

.sidebar {
    float: left;
    width: 180px;
    padding: 10px;
    background: #cfc;
}

.maincontent {
    margin-left: 200px;
    padding: 10px;
    background: #ffc;
}

.footer {
    clear: both;
    padding: 10px;
    background: #ccf;
}

pages/home.phtml

<h1>Herzlich willkommen!</h1>

<p>
    Willkommen auf meiner Seite zu den Themen...
</p>

pages/error.phtml

<h1>Fehler</h1>

<p>
    Die angeforderte Seite existiert nicht. Bitte überprüfen Sie Ihre Links.
</p>

pages/mathe/fibonacci.phtml

<?php

// Quelle: http://www.scriptol.com/programming/fibonacci.php
function fibonacci($length)
{
   for( $l = array(1,1), $i = 2, $x = 0; $i < $length; $i++ )
   {
        $l[] = $l[$x++] + $l[$x];
   }
   return $l;
}

?>

<h1>Fibonacci-Zahlen</h1>

<p>
    Die ersten 20 Zahlen der Fibonacci-Reihe lauten:
</p>

<pre>
<?php echo implode("\n", fibonacci(20)); ?>
</pre>

 

[Loon3y]

'Habe übrigens NIE behauptet, dass mein Code gut war (ich habe in der ersten Zeile gesagt es ist die schlechteste Möglichkeit) Und jetzt sagt ihr alle: Diese möglichkeit ist schlecht. Prima Leistung ;) Ich habe sogar in der letzten Zeile erneut darauf hingewiesen, dass Tabellen immer schlecht sind.

wenn du eine Frage stellen würdest, und jemand antwortet dir, sagt aber "die Lösung ist aber schlecht", würdest du dann seinen Lösungsansatz verwenden? Das steht im wiederspruch zu sich selbst.

Herr mermshaus (danke dir.) hat ja schon ein praktiables Beispiel gepostet, dennoch kommst du wohl nicht drumrum, die Grundlagen von HTML und CSS zu lernen. Bedenke, dass eine Homepage erstellen keine einfache Aufgabe ist, sondern man dafür einiges an Wissen benötigt. Aber mit viel eigeninitative und ein bisschen Können, sollte das machbar sein.


Bei weiteren Fragen, kannst du gerne dir weitere Informationen von uns einholen


Gruß
Loon3y

 

[m.hupfeld]

Danke für deinen Code mermshaus !! Sehr hilfreich. Darauf kann ich aufbauen.
Ich werde es gleich versuchen umzusetzen.

An solchen Antworten können sich Wichtigtuer wie Loon3y ein Beispiel nehmen!

 

[burbot]

Puhhh, zur Zeit gehts ja überall ab..
Beruhigt Euch mal ein wenig..