css basierte Spalten ausgliedern

[mhel]

Ich bräuchte mal nen kleinen Tip.

Bin grad dabei meine ersten html Versuche ohne Frontpage zu unternehmen.

Bei self html habe ich ein 3 spaltiges css Layout gefunden was mir sehr gut passt.

Da dies aber nicht immer alles in der selben Datei stehen soll habe ich angefangen bissel was auszugliedern.

Mit dem Layout und dem allgemeinen Style hat das schon recht gut geklappt.

Jetzt würde ich aber gerne eine Spalte ausgliedern.

Bisher sieht die Spalte in der index html so aus:

<div id="News">

<strong>News</strong>

<p>Text</p>

</div>

Wenn ich das aber in ne seperate .htm schreibe und die mit iframe einbinde stimmt das ganze Layout nicht mehr.

Gibt es da ne andere möglichkeit oder habe ich nur was übersehen.

<iframe src="/news.htm"

</iframe>

Achja in dem iframe will ich eigentlich keine extra Größen und Positionsangaben machen weil es laut css so ist das die beiden äußerem Spalten fest sind und die mittlere je nach Auflösung dynamisch.

[Sigi]

Wieso willst du das so ausgliedern?

Wenn es wegen Navigation ist: benutze ne Serverseitige Sprache die dir die Page zusammenbaut oder verwende ein generatorscript, das dir alle Seiten aktuallisiert.

[mhel]

Hm naja das auslagern soll eigentlich geschehen um es mir einfacher zu machen. Die News sollen halt immer eingeblendet sein und ich habe da halt keine Lust die ständig auf allen Seiten zu ändern.

Dacht halt das funktioniert irgendwie wie die css Styles, die man halt in ner extra Datei hat und dort für alle global ändern kann.

Aber von was du sonst noch redest habe ich leider (noch) null Plan *g*

[Sigi]

Aber das mit Iframes tut man nicht! Wenn du noch nicht wei0ßt wie das geht, benutze Frames.

[mhel]

Welche Möglichkeit gibt es denn da statt iframes. Und allgemein Frames finde ich jetzt nicht so ne alternative.

[geloescht_JesterDay]

Und allgemein Frames finde ich jetzt nicht so ne alternative.

Wenn du in Frames keine Alternative siehst (was ich auch so sehe ), mach es ohne Frames und in einer Datei. Oder dynamisch mit einer Skriptsprache o.ä. dahinter, welche die Seite dann aufbaut. (Aus mehreren Dateien oder einer DB)

[mhel]

Da ich mich auf die schnelle erstmal in nix anderes hineinfitzen konnte habe ich es erstmal so gelassen.

Durch die Aufteilung in 3 Spalten ist die css aber leider recht groß. So sieht man bei jedem Link den man klickt erst das normale html oder Formatierung und so ner ner Sekunden alles komplett.

Wenn ich aber im Header einfach <script></script> eintrage passiert dies nicht. Kann mir das zufällig jemand erklären?

[geloescht_JesterDay]

Durch die Aufteilung in 3 Spalten ist die css aber leider recht groß. So sieht man bei jedem Link den man klickt erst das normale html oder Formatierung und so ner ner Sekunden alles komplett.

Wie groß ist die css denn? 3 Spalten sind ja im Prinzip nicht sehr viel mehr als:

css:

.Spalte {float: left; width: 25%;}


html:

<div class="Spalte">

  bla

</div>

<div class="Spalte">

  blabla

</div>

<div class="Spalte">

  blubb

</div>

Und desweiteren sollte beim Einbinden der externen CSS-Datei der Browsercache die Datei cachen und die ÜBertragung nur auf den Header beschränkt sein.

[mhel]

Also meins ist schon bissel länger. In der html im Head steht folgendes:

<style type="text/css">

@import url(css/navigation.css);

</style>

Und die css sieht so aus:

body { background-color:#3366FF; }

body {

SCROLLBAR-FACE-COLOR: #3366FF;

SCROLLBAR-ARROW-COLOR: #000000;

SCROLLBAR-TRACK-COLOR: #3366FF;

}

body, p a {

margin: 1; padding: 0em;

min-width: 41em;

}

div#banner {

margin-botton: 0em; text-align: center;

}

h1 {

font-size: 48px;

margin: 0; padding: 0.3em; margin-top: 0em; margin-botton: 0em;

border: 0px ridge silver;

text-align: center;

}

h2 {

font-size: 30px;

margin: 0 0.7em; padding: 0.3em; margin-top: 29px; margin-botton: 0em;

border: 0px ridge silver;

text-align: center;

}

h3 {

font-size: 20px;

margin: 0 0.7em; padding: 0.3em; margin-top: 1em; margin-botton: 0em;

border: 0px ridge silver;

text-align: center;

}

ul#Navigation {

font-size: 0.95em;

float: left; width: 8em;

margin: 0; padding: 0;

border: 0px dashed white;

text-align: left;

}

ul#Navigation li {

list-style: none;

margin-top: 0; padding: 0.4em;

}

ul#Navigation a {

display: block;

padding: 0.2em;

font-weight: bold;

}

ul#Navigation a:link {

color: black;

}

ul#Navigation a:visited {

color: #00008b;

}

ul#Navigation a:hover {

color: white; background-color: blue;

}

ul#Navigation a:active {

color: #00008b;

}

div#News {

font-size: 0.9em;

float: right; width: 12em;

margin: 0; padding: 0.4em;

border: 0px dashed silver;

text-align: left;

}

div#News strong {

font-size: 1.33em;

margin: 0.5em;

}

div#News p {

font-size: 1em;

margin: 0.5em;

}

div#Inhalt {

margin: 0 12em 0 9em; margin-top: 1em;

padding: 0 0em;

border: 0px dashed silver;

text-align: left;

}

div#Inhalt h1 {

font-size: 1.5em;

margin: 0 0 0.3em;

}

div#Inhalt h2 {

font-size: 1.1em;

margin: 0.2em 0;

}

div#Inhalt p {

font-size: 1em;

margin: 1em 0;

}

p#Fusszeile {

clear: both;

font-size: 0.9em;

margin: 0; padding: 0.1em;

text-align: center;

border: 0px solid silver;

}

[geloescht_JesterDay]

Also meins ist schon bissel länger.

So riesig lang ist die css ja auch wieder nicht. Dennoch sollte der Browsercache die Datei ja schon haben und der Browser beim Anfordern vom Server die Meldung bekommen, dass die Datei auf dem Server nicht neuer ist und daher benutzt werden kann. Dann sollte der Browser die gecachte Datei nutzen.

Das funktioniert eigentlich problemlos, außer du hast es ausgeschalten.

Was für ein Browser und was für ein Server denn?

Lad dir mal die FF Extension LiveHTTPHeaders und schau die an, was der Browser fordert und der Server antwortet. Müsste ung. so aussehen:

...

http://mein.Server/css/navigation.css


GET /css/navigation.css HTTP/1.1

...

If-Modified-Since: Thu, 01 Dec 2005 10:10:55 GMT

If-None-Match: "2c8ae-1e2e-ab1829c0"

...



HTTP/1.x 304 Not Modified

Date: Tue, 09 May 2006 07:02:05 GMT

Server: Apache/2.0.40 (Red Hat Linux)

Connection: close

Etag: "2c8ae-1e2e-ab1829c0"

[mhel]

Also im IE ist einegestellt das er bei jedem Zugriff auf die Seite schauen soll ob es was neues gibt.

Ich weiß jetzt nicht wie es bei den Leuten war die mir das ebenfalls noch gesagt haben. Muss ich nochmal nachfragen. Bei dem einen war es aber auf jedenfall ne recht neue Firefox Version.

Und Server, gute Frage, ist bei All Inkl gehostet. Glaub mal irgendwas mit Linux / Unix bei denen gelesen zu haben.

Den Rest werd ich heut abend zuhause mal ausprobieren.

[mhel]

OK es lag an meinen IE Einstellungen wann er die Seiten überprüfen soll. Bei "Automatisch" passiert der Effekt nicht.

Dankeschön für die Hilfe.