externe Textdatei im CSS-Layout darstellen

[Marc2006]

Hey!

Ich habe eine kurze Frage an euch. Ich bin eigentlich kein sonderlich professioneller HTML-Programmierer, wie ihr sicherlich an meiner HP sehen werdet. Bin aber an sich sehr zufrieden damit, sie erfüllt ihren Zweck und das sollt eausreichen.

Nun hab ich aber mal eine Frage:
Rechts steht habe ich per Div-Container eine  kurze Liste mit ein paar Terminen eingefügt. Nun ist meine Frage, kann ich den Container evtl. über eine externe Textdatei füttern, so dass die Schriftarten etc. aber wie in dem original aussehen? Es hat halt den Vorteil, dass ich bei einer Terminänderung nur eine einzige Datei ändern muss, statt dies bei jeder einzelnen Seite zu machen.

Gibt es evtl. auch eine kleine Funktion, bei der dat aktuell kommende Datum fett dargestellt wird? Ich denke, dass das schon etwas komplizierter wird, also das wär nur das Bonbon, es muss aber nicht unbedingt sein, haben deshalb ja unseren Terminplan noch einmal auf einer extra Seite.

Wenn euch irgendwelche Verbesserungsvorschläge zu der Seite auffallen oder irgendwelche Dinge, die unsauber programmiert/geschrieben sind, auffallen, dann schreibt das ruhig bitte, ich bin über jede Hilfe Dankbar.

Hier noch kurz der Link zu der Seite:
http://www.jf-kettwig.de/

Vielen Dank schonmal für eure Hilfe.

Marc

[Joachim]

Hi,

Nun ist meine Frage, kann ich den Container evtl. über eine externe Textdatei füttern

wenn Du serverseitige Techniken zur Verfügung hast: ja.

Gruesse, Joachim

[Marc2006]

Hi,

Nun ist meine Frage, kann ich den Container evtl. über eine externe Textdatei füttern
wenn Du serverseitige Techniken zur Verfügung hast: ja.

Gruesse, Joachim

Wenn du damit php meinst, ja das funktioniert auf dem Server. Oder hast du da an andere Dinge gedacht?
Bin leider nicht der, der den Server verwaltet, hab nur von unserem zuständigen Kameraden die Zugangsdaten für unseren Bereich bekommen.

[AirMax]

Hi,

Wenn du damit php meinst...

... könntest Du z.B. die Funktion readfile() nutzen. Wichtig ist dann, dass die Zeilenumbrüche dargestellt werden. Siehe dazu auch readfile(): Zeilenumbruch in *.txt darstellen

Zum Thema HTML-Verbessungsvorschläge: Dein Datum-DIV ist eine unsortierte Liste.

[Marc2006]

Hi,

Wenn du damit php meinst...
... könntest Du z.B. die Funktion readfile() nutzen. Wichtig ist dann, dass die Zeilenumbrüche dargestellt werden. Siehe dazu auch readfile(): Zeilenumbruch in *.txt darstellen

Zum Thema HTML-Verbessungsvorschläge: Dein Datum-DIV ist eine unsortierte Liste.

Werd mich nachher mal mit dem readfile auseinandersetzen.

In wie weit meinst du das mit der unsortierten Liste? Weil es einfach nur runtergeschrieben ist oder weshalb?

[AirMax]

In wie weit meinst du das mit der unsortierten Liste? Weil es einfach nur runtergeschrieben ist oder weshalb?

Ja. Schau' mal in <http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=dieses Tutorial>.

[Joachim]

Hi,

Wenn du damit php meinst, ja das funktioniert auf dem Server. Oder hast du da an andere Dinge gedacht?

Mit php kannst Du das sehr fein lösen. file liefert Dir beispielsweise ein Array aller zeilen zurück, aus dem Du dann eine Liste oder auch nur Absätze generieren kannst.

Gruesse, Joachim

[AirMax]

Hi Joachin

Deine Idee mit file() ist ja noch viel einfacher. Aber aus der Doku werde ich nicht ganz schlau: Was definiert denn nun das Zeilenende? Der Zeilenumruch?

[Joachim]

Hi,

Was definiert denn nun das Zeilenende? Der Zeilenumruch?

jep, so isses.

Gruesse, Joachim

[Gunnar Bittersmann]

@@Marc2006:

nuqneH

Ich bin eigentlich kein sonderlich professioneller HTML-Programmierer

Solche gibt es auch nicht. Und wer sich für einen solchen hält, der outet sich als unprofessionell. HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache.

Nun ist meine Frage, kann ich den Container evtl. über eine externe Textdatei füttern, so dass die Schriftarten etc. aber wie in dem original aussehen? Es hat halt den Vorteil, dass ich bei einer Terminänderung nur eine einzige Datei ändern muss, statt dies bei jeder einzelnen Seite zu machen.

Du hast die Startseite des Forums gelesen? Dort steht: „Lies unsere FAQ, dort sind häufig gestellte Fragen direkt beantwortet.“

Die Frage „Wie kann ich Teile meiner Webseite auslagern?“ ist eine häufig gestellte Frage.

Qapla'

[Marc2006]

Vielen Dank für deinen Hinweis, hatte auch schon in der FAQ geguckt, jedoch einen anderen Artikel gefunden, bei dem als Beispiel eine SVG-Datei eingebunden wurde. Habe dadurch auch schon die txt-Datei eingebunden, jedoch halt ohne Formatierung.

Da ich ja wie schon gesagt, eigentlich ein Laie bin, wusste ich nicht weiter. Und ich bin ganz ehrlich, leider sind die Links, die in deinem FAQ-Tip kommen, recht großer Kauderwelsch für mich, da ich mich halt noch nicht so sehr damit auseinandergesetzt habe.

Also wenn du mir da einen etwas genaueren Tipp geben könntest, wär ich sehr dankbar, wenn nicht kann man auch nichts machen.

aber danke trotzdem für deinen Hinweis.

Marc

[EKKi]

Mahlzeit Marc2006,

Also wenn du mir da einen etwas genaueren Tipp geben könntest, wär ich sehr dankbar, wenn nicht kann man auch nichts machen.

Ich finde den Tipp

Die Frage „Wie kann ich Teile meiner Webseite auslagern?“ ist eine häufig gestellte Frage.

schon ziemlich hilfreich - insbesondere, wenn direkt darüber auf die FAQ verwiesen wurde.

MfG,
EKKi

[Marc2006]

Da ich ja wie schon gesagt, eigentlich ein Laie bin, wusste ich nicht
weiter. Und ich bin ganz ehrlich, leider sind die Links, die in deinem
FAQ-Tip kommen, recht großer Kauderwelsch für mich, da ich mich halt noch
nicht so sehr damit auseinandergesetzt habe.

Mit dem genauerein Tip meinte ich, dass man mir evtl. einen leichteren Lösungsansatz geben könnte, da ich ja kaum Ahnung davon habe. Habe die HP deshalb auch in leichterem HTML gemacht, da ich von PHP etc. an sich keine Ahnung habe. Deswegen dachte ich, dass sofern jemand genau diese Funktion leicht beschreiben kann, er sie mir kurz abtippen kann o.Ä. aber gut, dann gehe ich halt weiter auf die Suche, dann aber wohl ohne Lösung, wegen zu geringem Basiswissen.

[Patrick Andrieu]

Hallo Marc2006!

Da ich ja wie schon gesagt, eigentlich ein Laie bin, wusste ich nicht weiter. Und ich bin ganz ehrlich, leider sind die Links, die in deinem FAQ-Tip kommen, recht großer Kauderwelsch für mich, da ich mich halt noch nicht so sehr damit auseinandergesetzt habe.

Am Einfachsten wären die Server Side Includes (Link entnimmst Du dem FAQ-Artikel). Zunächst müsstest Du sicher stellen, dass diese bei Deinem Provider nicht deaktiviert worden sind. Erstelle dazu zwei Dateien, eine HTML-Datei und eine kleine Text-Datei. Die HTML-Datei speicherst Du mit der Endung .shtml ab. Die Textdatei halt .txt.

test.shtml
test.txt

Im Body der HTML-Datei notierst Du:

<!--#include virtual="test.txt"-->

Dann lädst Du beide Dateien ins selbe Verzeichnis hoch, und rufst über Deinen Browser die test.shtml.

Wenn Du den Inhalt Deiner Textdatei siehst, sind SSI vorhanden, und Du kannst mit Deinem Projekt weiter machen!

Viele Grüße aus Frankfurt/Main,
Patrick

[Marc2006]

Vielen Dank für den Tip.

Wenn ich nachher zu Hause bin und Zugriff auf den Server hab, werd ich es mal ausprobieren. Dann schau ich mal weiter, wie ich es mache.

[Marc2006]

Hallo Marc2006!

Da ich ja wie schon gesagt, eigentlich ein Laie bin, wusste ich nicht weiter. Und ich bin ganz ehrlich, leider sind die Links, die in deinem FAQ-Tip kommen, recht großer Kauderwelsch für mich, da ich mich halt noch nicht so sehr damit auseinandergesetzt habe.

Am Einfachsten wären die Server Side Includes (Link entnimmst Du dem FAQ-Artikel). Zunächst müsstest Du sicher stellen, dass diese bei Deinem Provider nicht deaktiviert worden sind. Erstelle dazu zwei Dateien, eine HTML-Datei und eine kleine Text-Datei. Die HTML-Datei speicherst Du mit der Endung .shtml ab. Die Textdatei halt .txt.

test.shtml
test.txt

Im Body der HTML-Datei notierst Du:

<!--#include virtual="test.txt"-->

Dann lädst Du beide Dateien ins selbe Verzeichnis hoch, und rufst über Deinen Browser die test.shtml.

Wenn Du den Inhalt Deiner Textdatei siehst, sind SSI vorhanden, und Du kannst mit Deinem Projekt weiter machen!

Viele Grüße aus Frankfurt/Main,
Patrick

So, SSI funktioniert auf dem Server und ich habe durch deinen Tip jetzt auch die Tabelle in richtiger Form eingebunden.

Jetzt hab ich noch eine Frage, ist es auch möglich, eine .shtml als Startseite einzustellen? Hört sich jetzt vielleicht ein bissl dumm an, weiß nicht genau wie ich es beschreiben soll. Zu Beginn hatte ich halt ne index.html. Wenn ich daraus jetzt eine index.shtml mache und diese umbenenne, öffnet sich die Seite beim direkten Aufruf der URL auch. Wenn ich jetzt jedoch www.jf-kettwig.de , ohne das /index.shtml, eintippe, wird mir gar keine Seite mehr angezeigt.

Gibts da noch ne Trick oder muss ich da bei Strato was ändern?

[Patrick Andrieu]

Hallo Marc2006!

So, SSI funktioniert auf dem Server und ich habe durch deinen Tip jetzt auch die Tabelle in richtiger Form eingebunden.

Freut mich. Wenn SSI zur Verfügung stehen, ist es eine feine Sache. Schau Dir mal zum Beispiel den Quelltext einer x-beliebigen Seite von atomic-eggs an (außer Startseite): Der ganze Header der HTML-Datei, alle link-Elemente, alle meta-Tags, usw... werden von einem Perl-Script generiert, welches mittels SSI eingebunden wird (s. http://www.atomic-eggs.com/cwi/cwi_3.shtml#a5).

Jetzt hab ich noch eine Frage, ist es auch möglich, eine .shtml als Startseite einzustellen?

Na klar.

Wenn ich jetzt jedoch www.jf-kettwig.de , ohne das /index.shtml, eintippe, wird mir gar keine Seite mehr angezeigt.
Gibts da noch ne Trick oder muss ich da bei Strato was ändern?

Dann hat Strato es versäumt, in der Apache-httpd.conf die index/default/home.shtml nicht in der Reihenfolge der default-Seiten für Verzeichnisse aufgenommen.

Vielleicht kann man es mit einer .htaccess umbiegen, sonst Strato fragen!

Viele Grüße aus Frankfurt/Main,
Patrick

[Marc2006]

Hey Patrick!

Also danke erstmal für deine Tipps.

Also ich habe es jetzt mittels der .htaccess geschafft.

Versuche jetzt noch ein bissl weiter rum, mal sehen, was ich jetzt noch so alles hinbiegen kann.

Wenn du vielleicht gut in css bist, hab ich nochmal ne Frage dazu:
Habe meine DIV's jetzt mal probehalber nach folgender Anleitung zentriert darstellen lassen:
http://www.alistapart.com/articles/holygrail

Wenn ich jetzt allerdings versuche, den Navigations-DIV fixieren zu lassen, also das er nicht mitscrollt, rutscht er nach ganz rechts. Er bleibt dann zwar fix, aber ist halt nicht an der Position wo ich ihn gern hätte.

Hier noch kurz der Quellcode, den ich hier verwende:
css:
body{
width: 970px;
margin:auto;
}

#content {
padding-left: 170px;
padding-right: 90px;
}

#content .column {
position: relative;
float: left;
}

/* Box für Hauptspalte: */
#main {
width: 100%;
}

/* Box für Navigationsspalte: */
#navi {
width: 170px;
right: 170px;
margin-left: -100%;
}

/* Fixierung der Navigationsspalte */
html>body #navi.column {                        <------ wird wohl mit dem column zusammenhängen. ------->
position: fixed;
}

/* Box für Übungstermine: */
#termin {
width: 90px;
margin-right: -90px;
}

html-Datei:
<div id="content">

<div id="main" class="column">

----Seiteninhalt-----------

</div>

<div id="navi" class="column">

----Navigationsleiste------

</div>

<div id="termin" class="column">

----Terminliste------------

</div>

Hab den Inhalt jetzt mal weggelassen, damit es nicht unübersichtlich wird.

Denke auch, dass es an dem #navi.column liegt. Wenn ich es weglasse, dann wird es zwar richtig dargestellt, aber es wird nicht fixiert.

Gibt es da ne Stelle, die ich evtl. nur kurz einfügen muss, damit es geht?

Vielen Dank schonmal.

Marc

[Auge]

Hallo

Wenn ich jetzt allerdings versuche, den Navigations-DIV fixieren zu lassen, also das er nicht mitscrollt, rutscht er nach ganz rechts. Er bleibt dann zwar fix, aber ist halt nicht an der Position wo ich ihn gern hätte.

css:

#content .column {

position: relative;
float: left;
}

/* Box für Navigationsspalte: */
#navi {
width: 170px;
right: 170px;
margin-left: -100%;
}

/* Fixierung der Navigationsspalte /
html>body #navi.column {  / wird wohl mit dem column zusammenhängen. */
position: fixed;
}

>   
> html-Datei:  
> ~~~html

<div id="content">  

> <div id="main" class="column">  
> <!-- Seiteninhalt -->  
> </div>  
> <div id="navi" class="column">  
> <!-- Navigationsleiste -->  
> </div>  
> <div id="termin" class="column">  
> <!-- Terminliste -->  
> </div>

Denke auch, dass es an dem #navi.column liegt. Wenn ich es weglasse, dann wird es zwar richtig dargestellt, aber es wird nicht fixiert.

Die Notation ist ungewöhnlich und unnötig. Ungewöhnlich, weil eine ID keine Klasse haben kann -- das wird auch der Fehler sein (ungeprüft) --, und unnötig, weil das Element mit #navi eindeutig benannt und somit auch zu identifizieren ist. Wenn du, um Browser auszuschließen, spezifischer wirst, reicht immer noch html>body #navi, um gegen #navi zu gewinnen.

Tschö, Auge

[Marc2006]

Also ich hab den Inhalt der column jetzt in der css in die einzelnen div's geschrieben, jedoch bekomm ich wieder das Problem, dass der div #navi rechts ist. Wenn ich den folgenden Teil rausnehme, ist er zwar links, aber natürlich auch nicht fixiert:

html>body #navi {
position: fixed;
}

Gibts dann noch ne Möglichkeit, den Container zu fixieren, so dass er auch seine Position behält?

[Auge]

Hallo

Also ich hab den Inhalt der column jetzt in der css in die einzelnen div's geschrieben, jedoch bekomm ich wieder das Problem, dass der div #navi rechts ist. Wenn ich den folgenden Teil rausnehme, ist er zwar links, aber natürlich auch nicht fixiert:

html>body #navi {
position: fixed;
}

Aus deinem alten Posting:
/* Box für Navigationsspalte: */
#navi {
width: 170px;
right: 170px;
margin-left: -100%;
}

/* Fixierung der Navigationsspalte */
html>body #navi.column {
position: fixed;
}

Was erwartest du, zu erhalten, wenn du dem Container sagst, er soll die Anweisung right: 170px; beachten?

Gibts dann noch ne Möglichkeit, den Container zu fixieren, so dass er auch seine Position behält?

Für position:fixed; ist position:fixed; zuständig. Man sollte über top|right|bottom|left aber auch explizit regeln, wo diese feste Position sein soll.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

#navi.column
Die Notation ist ungewöhnlich und unnötig.

Weder noch. (Jedenfalls nicht allgemein.)

Ungewöhnlich, weil eine ID keine Klasse haben kann

'#navi' ist ein Abküzung für '*#navi'. [CSS2 §5.3] Der Selektor selektiert keine ID, sondern ein _Element_ mit der ID "navi". Dieses darf selbstverständlich eine Klasse haben.

und unnötig, weil das Element mit #navi eindeutig benannt und somit auch zu identifizieren ist.

Stylesheets werden üblicherweise von mehreren Dokumenten benutzt. In einigen könnte das Element mit der ID "navi" eine Klasse "column" haben, in anderen nicht.

Qapla'

[Gunnar Bittersmann]

@@Marc2006:

nuqneH

Habe dadurch auch schon die txt-Datei eingebunden, jedoch halt ohne Formatierung.

Sinnvoller wäre es vermutlich, die Terminliste nicht nur als Textdatei zu pflegen, sondern mit HTML-Elementen (und evtl. RDFa (Primer, Einleitung I, Einletung II) / Mikroformaten) richtig ausgezeichnet.

Sollte der Einfachheit halber wirklich der Inhalt der Textdatei nicht semantisch ausgezeichnet in HTML-Dokumente eingebunden werden, bietet sich nl2br() an.

Oder man schreibt sich ein Script, dass die Daten aus der Textdatei um semantische Auszeichnung ergänzt. Dann müssen die Daten in der Tetxtdatei freilich festgelegten Regeln entsprechen.

Qapla'

[apsel]

Hallo

Ich wäre froh, wenn meine Seite schon so aussähe.

Matthias