Layout mit CSS aber wie?
0 0 0 -1 
at
0
Layout mit CSS aber wie?
Hallo Leute
Ich versuche das im Bild dargestellte Layout mit CSS hinzubekommen.
Leider will es mi nicht gelingen.
Mein Code sieht ungefahr so aus.
<div id="Fenster">
<div id="Titelleiste">
</div>
<div id="Navigation">
</div>
<div id="Inhalt">
</div>
<div id="Fusszeile">
</div>
</div>
Die Boxen sind ale als position: absolute; definiert.
Was ich nicht haben will:
- Keinen Scrollbalken unten (habe ich leider zur Zeit)
- Keinen Scrollbalken auf der Seite (vom Browser) ausser in der Box "Inhalt"
- Die Boxen sollen denn ganzen Bildschirm ausfühlen
- Die Boxen sollen sich der Bildschirmgrosse anpassen
Wenn ihr auf meiner Homepage geht seht ihr noch das Frameset-Layout.
Das Layout soll so bleiben, aber eben einfach mit CSS erstellt.
Ich danke für eure Hilfe
Fabian Gamboni
-
Hi,
Wenn ihr auf meiner Homepage geht seht ihr noch das Frameset-Layout.
Das Layout soll so bleiben, aber eben einfach mit CSS erstellt.Warum? Wenn Du ein typischeas Frameset-Layout haben willst, solltest Du dabei bleiben. Oder die Chancen von CSS für ein benutzerfreundlicheres Layout nutzen.
freundliche Grüße
Ingo-
Hi Ingo
was verstehst DU unter benutzerfreundliches Layout.
Ich verstehe darunter, dass der Benutzer immer weiss wo er gerade ist. Ausserdem sollte das Layout dynamisch sein. Die Scrollleisten sollten nur da auftauchen wo es umbedingt nötig ist, nämlich am Rechten Rand des Inhalt-Fensters. Die restlichen Boxen sollten immer am gleichen Ort bleiben und keinen unnötigen schnickschnack haben wie zum Beispiel Scrollbalken, Zurück Icons usw.
Auserdem sollten Frames vermieden werden, weil sie keine vernünftigen Bookmarks zulassen.Fazit ist also:
Ich will mein Layout beibehalten (also die Vorteile der Frams ausnutzen) es aber mit CSS (Vorteile CSS) programmieren.
Aus meiner Sicht haben Frames nämlich folgende Vorteile:
- Absolut dynamisch (Passt für jede Fenstergrösse)
- Browser Scrollbalken werden ausgeblendet
- Si nutzen das ganze Fenster
Ihre Nachteile:
- Bookmarks verweisen auf die falsche Seite
- Zu viele .html Seiten
- Das "Sie sind hier" lässt sich nur mit JS lösen.
Gruss Fabian
-
Hi,
was verstehst DU unter benutzerfreundliches Layout.
Nicht das, was Du darinter verstehst...
Ich verstehe darunter, dass der Benutzer immer weiss wo er gerade ist.
das weiß er, indem in der Navigation der aktuelle Menüpunkt nicht verlinkt und hervorgehoben ist. Bei vielen Ebenen kann eine breadcrumb-Navigation hilfreich sein.
Ausserdem sollte das Layout dynamisch sein.
da stimme ich Dir zu. Frames und frameähnliche Seiten sind dies nicht.
Die Scrollleisten sollten nur da auftauchen wo es umbedingt nötig ist, nämlich am Rechten Rand des Inhalt-Fensters.
Nö, da wo sie erwartet werden: am rechten Rand des Browserfensters.
Die restlichen Boxen sollten immer am gleichen Ort bleiben und keinen unnötigen schnickschnack haben wie zum Beispiel Scrollbalken, Zurück Icons usw.
Nö, warum willst Du den Anzeige- und Scrollbereich unnötig einschränken?
Fazit ist also:
Ich will mein Layout beibehalten (also die Vorteile der Frams ausnutzen) es aber mit CSS (Vorteile CSS) programmieren.
Wohl eher ein Frameset-Layout mit den Nachteilen beibehalten, in dem sich die Unterseiten bookmarken lassen.
Aus meiner Sicht haben Frames nämlich folgende Vorteile:
- Absolut dynamisch (Passt für jede Fenstergrösse)
Nö. Bei sinnvoll angegebenen Dimension "paßt" es zwar, aber in kleinen Fenstern bleibt oft für den Inhaltsbereich zu wenig Platz übrig, so daß Querscrollen erforderlich ist oder zumindest übermäßig viel gescrollt werden muß.
- Browser Scrollbalken werden ausgeblendet
Wenn dies so ist, dann werden in einem ungünstigen Fall Inhalte abgeschnitten.
- Si nutzen das ganze Fenster
Was oft gar nicht notwendig ist.
Was in meinen Augen noch benutzerfreundlich ist: http://de.selfhtml.org/css/layouts/anzeige/fixiert_ie.htm.
freundliche Grüße
Ingo-
Hi Ingo
Ich glaube, dass wir zwei uns nie einig werden können.
Ich finde mein Layout in Ordnung. Was ich vom gezeigten Beispiel nicht sagen kann. Meiner Ansicht nach sollte der Layout so aufgebaut sein wie ich es habe, immer sichtbare Frames (Könnten auch Boxen sein), welche die Position und die Grösse nicht ändern. Meiner Meinung nach sollte der User nicht scrollen müssen um die Fusszeile zu erreichen. Zweitens sollte im Titel angegeben werden wo er sich befindet, und nicht über eine Button. Die Gründe dafür dürften dir ja bekannt sein.
Bookmarks auf Unterseiten sind für mich deshalb wichtig, weil alle Seiten meiner Homepage einem anderen Thema gewidmet sind. Nicht jeder benutzer möchte deshalb meine Index-Seite bookmarken.
Ausserdem frage ich mich, wiso ich einen Bildschirm mit 1600x1200 Pixel kaufen soll, wenn alle Seiten nur 750 Pixel breit sind.
Workarounds über JS mit Bildschirmgrössenauswertung finde ich zum K.... und unnötig.
Falls du aber doch Interesse haben solltest mir bei meiner Homepage zu Helfen, so dass Sie besser wird und meinen Layout-Vorstellungen entspicht, bin ich dir für deine HIlfe sehr Dankbar.
Gruss Fabian
-
Hi,
Ich glaube, dass wir zwei uns nie einig werden können.
Das mag sein.
Meiner Ansicht nach sollte der Layout so aufgebaut sein wie ich es habe, immer sichtbare Frames (Könnten auch Boxen sein), welche die Position und die Grösse nicht ändern.
die dann ständig Platz einnehmen - d.h. man hat den Titel gelesen und will sich dem Inhalt zuwenden und muß unnötig viel scrollen? Dann dürften die meisten professionellen Seiten im Netz nicht Deinen Wünschen entsprechen.
Meiner Meinung nach sollte der User nicht scrollen müssen um die Fusszeile zu erreichen.
Die Frage ist doch: was ist in der Fußzeile so wichtig, daß sie ständig im Zugriff sein muß? Wenn hier tatsächlich wichtige Infos wären, sollte ein prominenterer Platz sinnvoller sein. Und wenn hier Navigationspunkte sind, wären diese im Menü wohl auch gut aufgehoben.
Zweitens sollte im Titel angegeben werden wo er sich befindet, und nicht über eine Button. Die Gründe dafür dürften dir ja bekannt sein.
Nö. Du verwechselst hier eine Überschrift mit der Navigation. Natürlich sollte die Überschrift zu erkennen geben, worum es sich bei der Seite handelt, aber genauso sollte in der Navigation der aktuelle Menüpunkt gekennzeichnet sein. Und wenn Du mit Titel <title> meinst: auch hier läßt sich wunderbar eine kurze Seitenbeschreinung unterbringen, die auch nicht wegscrollt.
Ausserdem frage ich mich, wiso ich einen Bildschirm mit 1600x1200 Pixel kaufen soll, wenn alle Seiten nur 750 Pixel breit sind.
Wer hat denn gesagt, daß das so sein soll? Ich mag auch lieber Seiten, die flexibel sind, wobei natürlich zu beachten ist, daß sehr breite Textzeilen die Lesbarkeit erschweren.
Falls du aber doch Interesse haben solltest mir bei meiner Homepage zu Helfen, so dass Sie besser wird und meinen Layout-Vorstellungen entspicht, bin ich dir für deine HIlfe sehr Dankbar.
Dein Versuch http://mypage.bluewin.ch/faga/ hat z.B. den Nachteil, daß in 800er Fenstern ein Teil der Navigation fehlt. Würdest Du Frames verwenden, könnte hier wenigstens ein Scrollbalken die fehlenden Punkte verfügbar machen. Wenn Dir Dein Frame-Layout so wichtig ist und Du lediglich das Bookmarken von Unterseiten ermöglichen willst, könntest Du auch für jede Seite ein eigenes Frameset erstellen.
freundliche Grüße
Ingo-
Hi, Ingo
Dein Versuch http://mypage.bluewin.ch/faga/ hat z.B. den Nachteil, daß in 800er Fenstern ein Teil der Navigation fehlt. Würdest Du Frames verwenden, könnte hier wenigstens ein Scrollbalken die fehlenden Punkte verfügbar machen. Wenn Dir Dein Frame-Layout so wichtig ist und Du lediglich das Bookmarken von Unterseiten ermöglichen willst, könntest Du auch für jede Seite ein eigenes Frameset erstellen.
Entschuldige, aber das verstehe ich jetzt nicht. Der Navigationsbereich ist bei mir 125px breit und die Wegweiser haben eine breite von 100px. Deshalb sollten die Wegweiser immer sichtbar sein.
Mit den Frames hast du natürlich recht. Ich möchte aber auch möglichst wenig *.html dokumente verwenden.
Ausserdem wird meine Seite nicht auf ewig so bleiben. Zur Zeit versuche ich aber eine Homepage zu gestallten, wie ich einen GUI für eine Maschinensteuerung aufbauen würde.
Demzufolge ist dies das erwünschte Layout. Gefällt nicht jedem ist für mich aber eine Übung.
Ausserdem verirren sich sehr wenig Leute auf meine Homepage. Sie ist ja eher für meine persönliche Verwendung gedacht. Nebenbei will ich dadurch erlernen wie man eine Homepage schreibt.
Vielleicht ändern sich meine Ansichten später.Um aber zum Thema zurückzukehren. Ich habe mein CSS-File nochmals angepasst. Was mich aber noch stört, ist das meine Fusszeile noch zu hoch oben ist. Muss ich noch anpassen. Dauert aber eine Weile, weil ich mich wieder durch die SelfHTML kämfpen muss.
Falls jemand einen Guten Tip hat, würde ich mich darüber freuen.
Mit freundlichen Grüße
Fabian
-
Hi,
Entschuldige, aber das verstehe ich jetzt nicht. Der Navigationsbereich ist bei mir 125px breit und die Wegweiser haben eine breite von 100px. Deshalb sollten die Wegweiser immer sichtbar sein.
En 800er Fenster ist auch nur 600px hoch. Davon geht noch ein erheblicher Anteil für Benutzerleisten ab. Im Firefopx sind die Abstände zwischen den Menüpunkten sehr groß, so daß dann unten welche im Nirwana verschwinden.
Um aber zum Thema zurückzukehren. Ich habe mein CSS-File nochmals angepasst. Was mich aber noch stört, ist das meine Fusszeile noch zu hoch oben ist.
Logisch bei margin:0.
Falls jemand einen Guten Tip hat, würde ich mich darüber freuen.
wie wäre es mit einer Schrift- und Hintergrundfarbe und mit einer lesbareren Schriftart?
freundliche Grüße
Ingo
-
-
-
-
Hallo.
- Das "Sie sind hier" lässt sich nur mit JS lösen.
Nein, weshalb?
MfG, at
-
-
Hallo Fabian,
ich würde es z.B. erst mal so versuchen:
<div id="Fenster">
<div id="Navigation"> </div>
<div id="Seite">
<div id="Titelleiste"> </div>
<div id="Inhalt"> </div>
</div>
</div>
<div id="Fusszeile"> </div>Dann kannst du verschiedene Varianten im CSS testen,
z.B.:
#Fenster {overflow:auto;height:80%}
#Fusszeile {top:80%}oder schauen ob es dir gelingt #Fenster mit 100% Höhe und etwas wie
margin-top:-100px; anzulegen, #Seite dann vielleicht padding-top:100px
und #Fusszeile bottom:0px;height:100px;.
Vielleicht klappt das dann auch mit relativen Angaben wie z.B. 5em statt
der Pixel.
Zuletzt kannst du vielleicht je nach Layout, Rahmen usw. auch wieder
auf ein Div verzichten.Grüsse
Cyx23