Ich versuche gerade eine alte Seite umzustellen von Frameset und Tabellen auf einen schöneren Stil, XHTML und CSS, fein säuberlich getrennt...
Ich versuch mir dass ja, seit ich hier registriert bin, Stück für Stück beizubringen.


Auf der alten Seite gab es am oberen Rand ein Banner was sich aus drei Teilen zusammensetzte, der Ecke (links oben), dem Hauptteil mit Schriftzug und dem restteil, das sich so weit ausstreckte wie das Browserfenster breit war.
Dann gab es links ein Menü über das die Navigation auf der Seite lief und den Inhaltsframe, in dem angezeigt wurde, was der User sehen/lesen wollte.

Nun hab ich alle Inhalte in divs gruppiert
(div Banner) (div navi) (div container)
und versuche jetzt die einzelnen via css zu positionieren und gestalten. Bisher habe ich noch keine Möglichkeit gefunden, einzelne Elemente absolut zu positionieren in Bezug auf das Fenster, nicht in Bezug auf die Seite. bei position_absolute wird es ja rgendwo auf die Seite genagelt, ich möchte aber, dass Banner und Navi immer links am Rand und oben an der Decke kleben und nur der Inhalt sich bewegt, wenn man scrollt.
Der Text des Inhalts soll erst unterhalb des Banners anfangen, würde aber beim Runterscrollen hinter den Banner verschwinden.

ich versuch mich mal mit ner Ascii Zeichnung wie's aussehen soll





B = Banner
b = bannerfüller bis Seitenende
N = Navigationsmenü
T = Inhat, text, Bilder etc
<h1/2> sollen einfach nur Überschriften sein, sind an sich egal für das layout ^^



Wie bekomme ich Banner und Navi dazu, "über den Dingen zu stehen" und dort oben zu schweben während der Rest normal gescrollt wird.
Lässt sich das XHTML-valide realisieren oder nicht?

*edit*
ich hab mal weitergesucht und alle Lösungen die ich fand basierten auf Javascript und einer scrolltop() Funktion. Gibt es keine andere Möglichkeit? Falls nein, müsste ich wohl zukünftig auf dieses "Schmankerl" verzichten.
*/edit*

Danke für alle konstruktiven Antworten. ^^


---
'Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise.'
(the Duchess)

XHTML-kompatibel ja, aber der IE kann kein position:fixed. Somit müßte man die Fixierung per JS machen, was wiederum nicht sehr schön wäre. Warum soll eigentlich der Header/die Navi nicht einfach mit der Seite scrollen?

---
Weaverslave

nicht schoen, aber hilfreich

http://www.fabrice-pascal.de/artikel/posfixedie6/

siehe http://rammstein.de

---
get OPERA for free

k, danke. Ich werd damit mal rumspielen, wenn ich wieder an meinem Rechner bin. ^^
Aber wenn es nicht auf dem IE geht, ist das unangenehm, da ich denke viele IE Nutzer bei uns zu haben.


Warum es nicht mitscrollen soll? Bisher ist es so, dass Banner und Navigation eine Art Rahmen bilden und der Inhalt wie in einem Kasten hängt und sich nur "innerhalb" dieses Kastens bewegen soll.
Es hat nur stylische Gründe und wird deshalb weggelassen wenn es sich nicht realisieren lässt. War nur ne Spielerei. Dann muss ich meinen Hobby Grafiker nur bitten ein bissl was zu ändern dann geht das wieder und scrollt halt (leider) mit.

---
'Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise.'
(the Duchess)

HoRnominatoR schrieb am 14.07.2005 18:59 nicht schoen, aber hilfreich http://www.fabrice-pascal.de/artikel/posfixedie6/ siehe http://rammstein.de

nicht schön?
Versteh mich nicht falsch aber das ist sogar äusserst unschön.
Ich hab eben mal meine Browsergröße hin und her verändert (IE weil auf arbeit) und die Seite sah plötzlich total vermurkst aus. Hab zu erst nur die Breite verringert und das Layout sprang um auf ein grafikarmes Layout. Sehr gut gelöst, sah schön aus. Dann änderte ich die Höhe und... naja, soddom und gomorra...
Das Banner fehlte völlig, die Navigation war hin und unten war ein riesiger Block leeren Raumes in dem man nur den Hintergrund betrachten konnte. Der scrollbare Text hingegen war um genau diesen Block nach oben verschoben was bedeutete das SOWOHL Text als auch der Scrollbalken ausserhalb meines Browsers landeten, oben, wo man halt net mehr hinkommt...

Ich hab eben probiert den Fehler zu rekonstruieren, ging nicht, aber dass so etwas passieren kann lässt mich arg zweifeln ob ich sowas überhaupt möchte...

---
'Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise.'
(the Duchess)

ich meinte das eher aus technischer sicht, da es auf hacks beruht, was immer unguenstig ist, da nut eine temporaere loesung, in naechsten generationen muss das schon nichtmehr gehen.

rammstein ist auch nur ein bspl, ob dort auch genau das angewandt wurde, kann ich dir nichtmal sagen, aber die variante von fabrice pascal sollte funktionieren oder mindestens anpassbar sein.

---
get OPERA for free

ich war gestern noch mit einem anderen Problem beschäftigt, ich werd wohl heute ein bissl damit rumspielen.

---
'Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise.'
(the Duchess)

Wie wärs mit überfüllten tags?
Die würden dan wie ein Iframe (mit eigener scrolleiste) wirken.

---
MfG:Austin Power (Saturn Realm)
OMW! Zumindest sobald ich herausgefunden hab wo ich JETZT gerade bin.
<---------->
"Wenn Liebe die Antwort ist, könnst Du bitte die Frage neu formulieren?" ... Lily Tomlin
<---------->
code hier http://www.pastebin.com

Gon schrieb am 14.07.2005 13:59 Nun hab ich alle Inhalte in divs gruppiert (div Banner) (div navi) (div container)

Nachdem ich Deinen Code nicht kenne, aber weiß, dass Du Dich als CSS-Anfänger bezeichnest, wage ich mal diesen Kommentar; wenn er nicht zutreffend ist, dann bitte ich, deswegen nicht böse zu werden:

Ich hoffe, Du hast mit <div>s nicht INHALTE gruppiert, sondern nur ELEMENTE (HTML-Tags). Denn INHALTE sollst Du AUSZEICHNEN mit semantisch richtigen Tags! Ein Banner dient z.B. meist als Überschrift. Das in ein <div> zu packen ist sinnfrei. Es gehört in ein <h1>, weil es die Überschrift 1. Ordnung dieser Seite ist.
Eine Navigation besteht eigentlich immer aus einer Liste (meinst <ul>), nicht aus einem <div>. Wenn Du nicht noch andere Tags mit Inhalten hast, die sich mit dieser Liste zusammen irgendwie verhalten sollen, dann ist es sinnfrei, ein <div> um die <ul> zu legen. Wenn Du nur ein Element hast, hast Du nichts, was Du gruppieren kannst. Alles, was Du dem <div> an Eigenschaften zuweist, kannst Du auch dem <ul> zuweisen, beides sind Block-Elemente.

Alles andere führt zu div-Suppe, die semantisch keinen Deut besser ist als Tabellenmissbrauch.

Bisher habe ich noch keine Möglichkeit gefunden, einzelne Elemente absolut zu positionieren in Bezug auf das Fenster, [...] ich möchte aber, dass Banner und Navi immer links am Rand und oben an der Decke kleben und nur der Inhalt sich bewegt, wenn man scrollt.

Dass das Probleme bei alten Browsern macht, hat man Dir ja schon nahegelegt. Aber ich würde vorschlagen, zu überdenken, ob das überhaupt nötig ist. Das ist schließlich ein nicht normales Verhalten von Websites, der Nutzer erwartet normalerweise eine scrollende Seite. Warum also muss da irgendwas feststehen. Es ist nicht nötig, und es ist auch nicht wirklich schöner. Es verkleinert vor allem nur den zur Verfügung stehenden Platz im Browserfenster, was für den Nutzer immer ein Nachteil ist.

Alternativ zu den hier gemachten Vorschlägen könntest Du aber auch Deinem Content eine feste Größe geben und mit overflow:auto arbeiten. Problem dabei, Du weißt nicht, wie hoch der Content sein kann, da Du nicht 100% - <feste Größe des Banners> rechnen kannst.

<h1/2> sollen einfach nur Überschriften sein, sind an sich egal für das layout

Egal ist gar nichts. Einem CSS-Layout muss immer ein guter HTML-Code mit guter Struktur (Semantik) zugrunde liegen, sonst geht gar nichts.
Aber ich weiß schon, wie Du das hier gemeint hast

Wie bekomme ich Banner und Navi dazu, "über den Dingen zu stehen" und dort oben zu schweben während der Rest normal gescrollt wird. Lässt sich das XHTML-valide realisieren oder nicht?

Mit XHTML hat das nichts zu tun, denn es geht ja hier um das Layout. Und das ist nur CSS.
Du wirst sagen "Jaja, das meinte ich ja", aber anhand von anderen CSS-Anfängern ist meine Erfahrung, dass korrekte Ausdrucksweise das Leben ungeheuer erleichtert. Viele schmeißen diese Begriffe immer noch durcheinander und wenden sie dann auch falsch an, vermischen Inhalt und Layout, und machen sich dadurch das Leben unnötig schwer. Es ist aber bei validem XHTML, Semantik und CSS-Layout einfach wichtig, alles richtig zu machen und nicht zu "schludern".

Gibt es keine andere Möglichkeit? (JavaScript) Falls nein, müsste ich wohl zukünftig auf dieses "Schmankerl" verzichten.

Es ist in Wahrheit kein Schmankerl. Die Nutzer finden es zunehmend lästig. Ich würde darauf verzichten.

Gruß,
-Efchen

Danke für den Beitrag und ich nehm dir nichts übel. Ich betone ja, dass ich Anfänger bin, damit ich deutliche Erklärungen bekomme und nicht davon ausgegangen wird, dass ich alles wüsste.
Wobei es derzeit wohl noch stark mangelt ist die richtige Ausdrucksweise. ^^

Nun hab ich alle Inhalte in divs gruppiert (div Banner) (div navi) (div container)

war die lachse ausdrucksweise für
Ich habe zB einen <div id="navi"> in dem sich der HTML-Teil befindet, welcher sich in diesem fall aus einer Liste zusammensetzt, wie du richtig vermutet hast. Genauer gesagt 2 <ul>s mit jeweils einer Überschrift für die Seiteninternen Navigationslinks und für Links zu anderen Seiten. Das sind bei mir nur wenige, daher passt es mit der recht schlanken Liste der Navigation zusammen.
(Die Navigation besteht aus 6 Einträgen, die externen Links sind 3)

das nächste ist ein <div id="content"> in dem dann, strukturiert mit <h1> und <h2> der "Inhalt" ist. Ich hoffe ich darf das jetzt so sagen

also zB so


wäre das ein vernünftiger Gebrauch von Divs?
Das mit dem <span> hab ich von einer Seite eines Bekannten, der sich WebDesigner schimpft. Ist das wirklich sinnvoll/notwendig oder nur wenn es direkt gebraucht wird zu verwenden? Da ich auf der Seite nur einen Schrifttyp verwende und alle Ausnahmen wie Header, Links und ähnliches einzeln geregelt werden lege ich Schrifttyp, Farbe und Größe etc im Stylesheet immer für den jeweiligen <div> fest.

Es ist nicht nötig, und es ist auch nicht wirklich schöner. Es verkleinert vor allem nur den zur Verfügung stehenden Platz im Browserfenster, was für den Nutzer immer ein Nachteil ist.

Wegen dem Platz werde ich nur ein sehr schlankes Banner haben, denn ich selbst mag keine Seiten auf denen das Banner schon 1/3 des ersten Anblicks einnimmt. Da aber das selbst manchen nicht gefällt werde ich einen Styleswitcher einbauen. Das hatte ich eh geplant, so hat es sogar noch einen besseren Sinn. Mit Stylesheet 1 wird die Seite in der hier überlegten Form angezeigt. Stylesheet 2 hat eine sehr ähnliche Farbgebung aber ist textbasierter (fast keine bzw nur sehr kleine Grafiken, den Rest über background-color und border) und sehr einfach gehalten. Es hat auch keine Festen Banner oder ähnliches, ebensowenig das dritte. Dieses Stylesheet hat dann ein neutraleres Farbschema, ist somit heller und wahrscheinlich noch etwas angenehmer zu lesen.
Ich werde mich auch bei den anderen zwei darum bemühen, dass es farblich gut zu lesen ist ohne dass man Kopfschmerzen bekommt aber ich möchte auch ein dem Thema entsprechend düsteres Schema haben.

Es ist in Wahrheit kein Schmankerl. Die Nutzer finden es zunehmend lästig. Ich würde darauf verzichten.

Ich widerspreche dir hier im generellen nicht. Du hast recht, dass Leute die durch Zufall auf meine Seite kommen und ein "anstrengendes Layout" sehen, abgeschreckt werden können und gehen ohne einen Teil der Seite gelesen zu haben. Auch weil ich gesehen habe, was zB die Google Cache Funktion mit dem Layout mancher sonst so "schicken" Seite anstellt, überlege ich ernsthaft ob ich Stylesheet 1 und 2 Tausche, das bedeutet, das schlichtere wäre der Standart, das andere eine Option.

Ich glaube aber, da viele der Leute die auf meine Seite kommen werden bereits Fans des Rollenspiels sind und ein wenig futuristisch angehaucht, dass nicht wenige (lies: "ein Teil aber nicht alle") von ihnen so ein Aussehen der Seite nicht als störend empfinden werden. Ich denke, ich spreche zu einem großen Teil solche an, die Spiele wie Neocron, Star Wars Galaxies oder andere Zukunftstitel spielen und mit dem "modernen bunten Layout mit großen Tasten zum klicken" (lies: "KlickiBunti") von Windows XP zufrieden sind.
Ich schere hier nicht alle über einen Kamm. Mir ist klar, dass man sich damit schnell einen Teil der Besucher verscherzt. Ich denke nur dass ein paar von ihnen gerne ihre News in einer Seite lesen, die wie ein Datenpad aufgebaut ist. Und diese Möglichkeit möchte ich ihnen bieten.

---
'Never imagine yourself not to be otherwise than what it might appear to others that what you were or might have been was not otherwise than what you had been would have appeared to them to be otherwise.'
(the Duchess)

Gon schrieb am 20.07.2005 13:40 1: 2: 3: 4: <h2>Decker und Hacker</h2> <span>Was sind Decker, was sind Hacker, was unterscheidet sie. Langer Text, viel Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span> wäre das ein vernünftiger Gebrauch von Divs?

Ja, die <div>s sind okay. Nur die <span>s hier nicht
Da kommt ein <p> hin, denn es handelt sich um einen Textabsatz. Ob Du zusätzlich noch ein <span> brauchst, für optische Effekte, ist natürlich denkbar.

Das mit dem <span> hab ich von einer Seite eines Bekannten, der sich WebDesigner schimpft. Ist das wirklich sinnvoll/notwendig oder nur wenn es direkt gebraucht wird zu verwenden?

In diesem Beispiel ist es - wie gesat - eine semantische Katastrophe.