WebStyleBoard

[q=malligan]Danke für Deine Demoseite, LapisInfernalis [/q]
Gern geschehen... Dafür bin ich ja hier...

[q=malligan]Bei Eurer anderen Diskussion lass ich Euch gerne alleine, denn ich bin ja jetzt schon überfordert [/q]
Sorry für die Abschweife. Die WebDesignerei bietet wunderbar viele Punkte, die Anregungen für die eine oder andere Diskussion bieten. Natürlich ist das auch gut so, allerdings sollte dabei der eigentliche Thread nicht aus den Augen verloren, oder gar zugepostet werden...

[q=malligan]Man kann nicht genug lernen und dies dann auch üben, und wenn ich die gleiche Seite doppelt mache :-) nur eben mal mit einer anderen Menüleiste[/q]
Das ist die richtige Einstellung! Nur nicht entmutigen lassen...

Hi,
da wir weiterdiskutieren dürfen... ;-)

Zitat von »LapisInfernalis«

Verpasse ich aber dem Seiteninhalt einen so breiten Rand, damit die seitliche Navigation nicht umflossen werden muss, so verliere ich doch weitaus mehr Platz für den Inhalt, als im vorhergehenden Fall, oder nicht?

Und was ist mit der Skalierbarkeit? Will man diese Gewährleisten, so schrumpft der Platz für den Seiteninhalt noch weiter.

Umflossene Navigationen sind ja recht selten zu sehen; weitaus häufiger wird für die Navigation (und evtl. weitere Elemente) eine "Spalte" reserviert. Wenn dem so ist - was durchaus auch der Übersichtlichkeit dienen kann - dann spricht mMn auch nichts gegen eine Fixierung.

Daß hierbei der Platz für den Inhalt verloren geht, ist klar. Aber eine Beschränkung der Textbreite dient ja auch der Lesbarkeit. In Punkto Skalierbarkeit würde eine Breite in EM optimal für eine sinnvolle Zeichenanzahl/Zeile sorgen. Natürlich kann das - besonders i.V. mit einer Navigations"spalte" - in zu kleinen Fenstern wiederum problematisch werden.
Eine Beschränkung in px andererseits hat andererseits wieder Probleme bei der Skalierung.
Eine Lösung, die beidem gerecht wird, sehe ich nicht. Man muß im Einzelfall schon abwägen, was man nutzt.

Nur finde ich - besonders in Anbetracht der doch am häufigsten genutzten Fensterbreiten von 1024px und größer - gar keine Beschränkung des Inhaltsbereiches und damit extrem breite Zeilen unpassend. Ein solches Fenster würde ich wohl, um besser lesen zu können, zusammenschieben. Hierbei würde ein fixierter Bereich in der Horizontalen natürlich dann stören, d.h. den scrollbaren Bereich einschränken.
Bei einer (fixierten) seitlichen Navigation ist dies nicht der Fall. Im Gegenteil: sie übernimmt für mich die Redizierung der Textbreite.

Gruß
Ingo

[q=malligan]Aaaaaaaaalso, ich hab diese Demo mal studiert fröhlich es ist mir schon einiges klarer geworden jetzt. Aber ich hab halt doch noch ein paar Fragen offen.[/q]
Gar kein Problem... Immer her damit...

[q=malligan]Wenn ich jetzt Navigationsbuttons, oder ein Bild als Banner einfügen will, mach ich das im screen.css, screen_ie.css oder im index.htm?[/q]
Immer in die HTML-Datei. In die CSS-Datei schreibst Du nur Informationen über das Layout, bzw. das Erscheinungsbild des Bildes. Also ob z.B. ein Rahmen drum herum soll, oder so...

In die CSS-Datei trägst Du das Bild, bzw. den Bildnamen nur dann ein, wenn Du das Bild als Hintgerundbild benutzen willst.

[q=malligan]Und warum hat es im screen_ie.css bei dem Banner und der Navigation kein Werte?[/q]
Keine Werte stimmt nicht ganz... Dort ist ja noch die Positions-Angabe...

Warum sonst keine Werte drin stehen hat folgenden Grund: Wenn Du einen Blick auf den Quellcode wirfst siehst Du, dass zunächst das Stylesheet "screen.css" geladen wird. Dies ist aber nicht browserspezifisch. Diese Datei liest jeder Browser, also auch der IE.

Anschließend lädt nur der IE die zweite CSS-Datei "screen_ie.css". Weil im ersten Stylesheet aber schon die ganzen Informationen zum Banner drin stehen, hat der IE diese im Speicher. Es werden nur diese Angaben überschrieben, die in beiden Stylesheets drin stehen.

Genutzt wird dann immer nur die zu letzt geladene Angabe.

Ein kleines Beispiel:

In einem ersten Stylesheet setzt Du die Schriftfarbe auf grün und die Schriftstärke auf fett. Dadruch wird in allen Browsern die Schrift grün und fett dargestellt.

Lässt Du nun den IE ein zweites Stylesheet - wie auf der Demoseite - laden, in welchem Du die Schriftstärke auf normal setzt, so werden bei allen Browsern die Schrift grün und fett und beim Internet Explorer nur grün angezeigt.

Ich hoffe, ich konnte dies ein wenig klar darstellen.

[q=malligan]Ach ja, was auch noch ist, wenn ich die Seite mit dem IE angucke, dann funktioniert überhaubt nichts. Da hab ich ober den Bannerbereich, dann kommt anschliessend der Navigationsbereich gefolgt vom Inhalt. Und wenn ich Scrolle, dann scrollt alles mit großes Grinsen Das hab ich zuhause im Firefox nicht.[/q]
Danke für den Hinweis! Ich habe das Problem gefunden. Ich hatte vergessen, den letzten Kommentar vor dem Conditional Comment (also dem Kommentar, wo die Bedingung für das Laden des zweiten Stylesheets drin steht) mit "-->" zu schließen.

Jetzt sollte es aber funktionieren...

[q=malligan]Übrigens, Deine Erklärungen sind echt geil und verständlich geschrieben, da komm sogar ich nach! [/q]
Na das freut mich aber... :approve:

Hallo Malligan!

Du kannst ganz einfach mehr als ein Bild in Deinem Posting unterbringen:

1. Du lädst es auf einen Server und postest hier den Link zum Server
oder besser:
2. Du benutzt den WSB.imageupload-Service

Zu Deinen Problemen:

1. Bildabstand

Dieses Problem kannst Du auf verschiedene Weisen lösen. Einige Zeitgenossen positionieren einfach ein transparentes GIF zwischen die Bilder, und verpassen diesem Bild einfach die Breite, die dem gewünschten Abstand entspricht.

Diese Methode ist hier aber nur der Vollständigkeit halber aufgeführt. Ich würde sie Dir nicht empfehlen, da Du

a) Dir damit unnötig viel Arbeit machst, und

b) Elemente zweckentfremdet verwendest


Einfacher und besser geht dies mit CSS. Du kannst in das normale Stylesheet einfach folgende Angabe schreiben:

Dies verpasst allen Bildern (img) innerhalb des "navigation"-Elements einen Abstand von 10 Pixeln rechts und 10 Pixeln links. Macht summa sumarum 20 Pixel Abstand.


2. Der "abgeschnittene" Scrollbalken

Dieses Phänomen ist leider der Nachteil bei dem ganzen Workaround. Der Scrollbalken, den Du siehst, ist ja nicht der Scrollbalken der Seite, sondern der Scrollbalken des Bereichs für den Inhalt. Da die Naviagtion aber darüber liegt, um den unteren Teil des Inhalts zu überdecken, wird auch der Teil des Scrollbalkens verdeckt.

Leider habe ich noch keine andere Möglichkeit gefunden, dies zu umgehen.

Hi malligan...

Du packst den CSS Code einfach irgendwo an eine freie Stelle. Vorzugsweise unter #navigation.

Was den a.irgendwas kram angeht: Das ist für die Formatierung von Hyperlinks:

link = alle Hyperlinks
visited = besuchte Links
hover = wenn die Maus über den Link fährt
active = wenn man den Link anklickt

Was hat es mit dem CSS-Code auf sich, den Du gepostet hast? Und wieso 80 Pixel Höhe rot hervorgehoben? Hat das einen Grund?

Die Höhenangabe ändert nur die Höhe für den Bereich, in welchem sich der Banner befindet. Nicht aber der Banner selbst. Bei diesem musst Du die Höhe beim Einbinden ins HTML festlegen...

Wenn der Banner 80 Pixel hoch ist, und der Bereich des Banners auch 80 Pixel hoch sein soll, dann ist der von Dir gepostete CSS-Code schon in Ordnung.

Ich dachte nur, dass Du versuchst, mit der CSS-Angabe die Höhe des Bildes zu verändern. Einbinden tust Du den Banner dann wie jedes normale Bild auch...

Doch was ich nicht ganz verstehe ist, dass der Banner-Bereich (grau) nicht auf die geänderte Höhe reagiert hat. Habe ich das so richtig verstanden?

Also eigentlich sollte das kein Problem sein. Ändere neben der Höhe auch mal die Farbe, bzw. gib für die Höhe einen stark übetriebenen Wert an.

Auf diese Weise kannst Du testen, ob die Seite überhaupt auf das Stylesheet reagiert. So kannst Du mögliche Fehlerquellen eingrenzen...