CSS Eure Meinung gefragt: fixed Statusleiste; allgemeine Regeln für Webdesign

[te one]

Hallo,

möchte gerade ein neues Aussehen für meine Seite erstellen. Auf jeder Seite soll grundsätzlich das Menü sein, sowie eine kleine Statusleiste.
Diese Statusleiste ist mir besonders wichtig und es wäre schön, wenn man sie immer im Blick hat.

Nun meine Frage:
Spricht etwas gegen eine einzeilige Leiste am oberen Rand (fixed, die also auch beim runterscrollen oben sichtbar bleibt)?
Oder sollte ich das irgendwie anders lösen (Vorschläge?)?

Wäre halt gut die Werte immer im Blick zu haben, da sie für den Benutzer recht wichtig sind (so ne Art Währung, die er dann ausgeben kann)

Hat jemand vielleicht auch noch einen guten Link zu gutem Webdesign, also wie man mit einem Layout möglichst viele User bedienen kann?
Es fällt mir immer wieder auf, dass viele Seiten (zB auch Computerbase hier) nur ein bisschen mehr als die Hälfte des tatsälichen Platzes nutzen. Der Rest ist nur Hintergrund. Ist das wirklich sinnvoll? Der einzige Grund der mir hierfür einfallen würde ist, dass das Layout für eine bestimmte Breite gedacht ist (wegen Grafiken usw.). Und so müssen User mit hoher Auflösung nicht nach links und rechts scrollen.

 

[mercsen]

SInnvoll ist es allemal.
Erstmal sollte sich die breite der größe des Monitors / der Auflösung anpassen.
Dann darf es aber auch nicht zu breit werden.
Ich sitz hier z.b. vor einem 25" Monitor in Full HD auflösung, da würde das gesmate forum was reinpassen, aber das Lesen wäre Katastrophal anstrengend.

Wenn die Statusleiste nichtzu breit ist würde ich das sogar begrüßen.

 

[te one]

Die Statusleiste soll immer oben am Seitenanfang bzw. am Anfang des halt aktuell gezeigten Teils der Seite hängen. Meinst du mit Breite der Statusleiste in dem Fall die Höhe? Die hätte ich nämlich auf ca. 20px geplant.
Oder meinst du tatsächlich die Breite, die nicht über den ganzen Screen gehen soll?

Ist halt auch die Frage mit welchen Browsern das fixed geht...
Ich hätte es gerne so kompatibel, dass ein Standard Windows XP ohne SP das auch schon darstellen kann.
Welchen IE hat das überhaupt? Ich installiere es immer fertig schon mit SP2 (kA ob da auch ein neuer IE dabei ist)

Kennt vielleicht jemand eine Seite wo es solche Tipps zum Desgin gibt (gestern zwar schon einiges gefunden, aber das war alles nicht so richtig passend).

Ergänzung (20. August 2011)

Also hab mich schlau gemacht. Der IE6 war bei XP Standard. Wenn man mit dem das alles machen könnte, wäre es super.

 

[Belee]

Fixed ist für den IE6 ein Fremdwort. Wie auch vieles andere auch, es wird schwer, ich zweifel zwar nicht an deinen Fähigkeiten doch du wirst dein Vorhaben sobald IE6 ins Spiel kommt in die Tonne werfen

 

[te one]

Naja ich bin auch gerne zu einer anderen Lösung bereit, aber man sollte es halt immer soweit wie möglich direkt im Blickfeld haben. Und da ist fixed einfach mal das beste...

Hiermit funktioniert fixed im IE 5 und 6 wenn ich das richtig überflogen habe:
http://www.doxdesk.com/software/js/fixed.html

Wer den IE6 dann einsetzt und JavaScript aus hat, dem kann ich dann um Himmels willen nicht helfen außer ihm nen Hinweis anzuzeigen, dass er es aktivieren soll.

 

[Belee]

Wer den IE6 dann einsetzt und JavaScript aus hat, dem kann ich dann um Himmels willen nicht helfen außer ihm nen Hinweis anzuzeigen, dass er es aktivieren soll.

Nein falsch "soll" willst du ihm bestimmt nicht anzeigen sondern "kann".

Fixed wird aber nicht dein einziges Problem sein, IE6 hat nämlich auch noch ein kaputtes Box-Model, und noch vieles mehr
Ich glaube hier kann dir @snoot helfen, er kennt sich aus mit ,,schickt den IE6 in den Quirks und eure Seite sieht gut aus,,

 

[te one]

Ne der bekommt schon soll angezeigt.
Bin doch nur an der Sicherheit des Nutzers interessiert, damit der mal ein Update macht

Owei das wird ja lustig...

?muss man das mit @snoot und dem Quirks-Modus verstehen?

 

[killray]

Würde heute dem IE 6 keinerlei Beachtung mehr schenken, bau auch keine extra Stlyesheets mehr dafür ein, dann lieber gar keins und dafür den Hinweis, man möge sich doch bitte einen aktuellen Browser besorgen.

Selbst Google hat den Support gedropped http://www.golem.de/1001/72765.html.

 

[te one]

Naja wenn sogar Google den Oldies den Kampf angsagt...

Mal sehen, vielleicht mach ich eine Version für Handynutzer und so, die dann auch solche alten Browser verpasst bekommen.

Bleibt aber noch die allgemeine Frage zu Tipps für Webdesign-layouts.
Hab bis jetzt nur Seiten mit Tipps wie zB kleine Bilder und so gefunden, weil ja noch nicht alle ISDN haben^^ Aber bitte... Das ist wohl auch schon etwas veraltet.

 

[mercsen]

gutes designe ist wenn man alles schnell sieht, es intuitiv ist und nicht in den augen weh tut.
sprich, überlege dir welche funktionen / links werden deine user oft benutzen und platziere diese möglichst leicht ereichbar. Mach kein großes Farben wirr war (3 Farben reichen, 4 sind fast schon zu viel).
Sorge dafür das auch in kleinen auflösungen (wobei ich 800x600 als absolutes minimum ehmen würde) alles zu erkennen ist und sorge für barriere freiheit.
Ich persönliche finde offene designes gut, also ohne harte linien die den inhalt begrenzen.

 

[h3rbert]

Wäre es nicht möglich sowas mit 2 absolut positionierten Divs zu machen, wobei die erste die Statusleiste ist und die zweite einen overflow mit Scroll hat?

Kanns grade nicht ausprobieren, aber das wär eine Überlegung sowas rein mit CSS zu lösen

Update:
Habe es soeben ausprobiert. Es geht auch nur mit CSS mit dem Weg den ich nannte.

Hinweis: IE6 fährt damit wohl nicht so gut. Da müsste man entweder nochmal dran schrauben oder einfach gleich mit JS arbeiten.

HTML

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<title>Test</title>
	</head>
	<body>
		<div id="container">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>

<p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>

<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>

<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>

<p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.</p>

<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac</p>
		</div>
		<div id="status-bar">
			<div id="status-bar-inline">
				<p>Link 1 | Link 2 | Link 1</p>
			</div>
		</div>
	</body>
</html>

CSS

* { margin:0; padding:0; border-spacing:0; }

body
{
	text-align:center;
}

#container, #status-bar { position:absolute; }
#container 
{
	width:100%;
	height:100%;
	background:#000;
	color: #fff;
	overflow:auto;
	z-index:1;
}

#status-bar
{
	width:100%;
	color:#FFF;
	z-index:2;
}

#status-bar-inline
{
	width:500px;
	margin:0 auto;
	height:30px;
	background:#c0c0c0;
	font-weight:bold;
}

p
{
	margin: 0 auto;
	width:600px;
	text-align:left;
	margin-bottom:30px;
}

Etwas Tricky aber ich denke erfüllt seinen Zweck ganz gut

 

[ice-breaker]

Hat jemand vielleicht auch noch einen guten Link zu gutem Webdesign, also wie man mit einem Layout möglichst viele User bedienen kann?

Mal sehen, vielleicht mach ich eine Version für Handynutzer und so, die dann auch solche alten Browser verpasst bekommen.

Adaptive & Responsive Design with CSS3 Media Queries
How To Use CSS3 Media Queries To Create A Mobile Version Of Your Website/
Mediaqueries Showcase

Die Idee ist einfach, dass du dein normales Stylesheet für Browser sagen wir mit der Auflösung 1024x768 baust und mit Media-Queries noch Selektoren schreiben kannst, die von der Browsergröße abhängig sind, so kannst du den Inhalt z.B. an 4 Browsergrößen anpassen (Widescreen, 1024x768, Netbook/Ipad, mobile Version).
Das schöne daran ist, dass alte Browser die Media-Queries nicht verstehen diesen Teil einfach ignorieren, du kannst also "neue" Browser damit voll unterstützten und hast automatisch einen Fallback für alte Browser
Es gibt sogar mittlerweile JavaScript-Implementationen, die Mediaqueries in alten Browsern nachrüsten.

Bis auf den IE sind Media Queries optimal unterstützt, und du sparst dir eine komplette extra Seite für mobile Geräte zu bauen, du musst ja nur ein paar CSS-Selektoren ändern