CSS und die Möglichkeiten Einstellungen

[Gast_CaVo_*]

Da wir hier in letzter Zeit vermehrt Diskussionen um Seitengestaltung hatten (Pro/Contra Frames, Tabellen oder Div's, etc) mal ein kleiner Link zum Thema CSS:

http://www.csszengarden.com

Das ist schon immer wieder erstaunlich, welche Möglichkeiten einem diese Form der Seitengestaltung bietet.


Gruß
Carsten

[bipae]

Ich pack mal meine Frage hier dazu, denn ich habe, glaube ich, ein CSS-Problem, und CaVos Link ist ja so was von Englisch ... (Habe ich auch mal gelernt, aber da hatten die Vokabeln irgendwie eine andere Bedeutung als im Internet) :wink:
Hätte wohl mal einer der Adepten die Güte, sich mein Zwischenergebnis im Netscape anzuschauen und mir zu verraten, warum die "Tabelle" bei "Dampf ablassen" einen Hupfer macht? ich habe jetzt nachträglich im Stilzettel schon soviel hin und her geändert, klappt gar nichts und weiß nicht mehr, wie es denn mal war. Egal.
http://www.bipae.de/navidiv.html und http://www.bipae.de/homepage-dateien/style/div.css
Soweit mein Versuch, auf Tabellen zu verzichten! Glaube, Tom lernt schneller!
Danke auch!
bipae

[Netizen]

Hätte wohl mal einer der Adepten die Güte, sich mein Zwischenergebnis im Netscape anzuschauen [...]

Wenn Du noch verrätst, welchen Netscape Du konkret meinst ... es gibt mehrere von der Spezies, jeder mit eigenem (Un)Willen und Verhalten.

Du solltest allerdings dringend das

QUELLTEXT

font-weight: bolder;

bei A:HOVER aus Deinem Stylesheet entfernen. Eine Änderung der Schriftgröße bzw. des Stils beim hovern bringt unnötige Unruhe auf die Seite und verursacht im schlimmsten Fall ein hin- und herzappeln der nachtfolgenden Elemente. Vielleicht ist es ja das, was Du mit "Hupfer" meintest.

Noch was ... Deine Navigation läßt sich verbessern.

QUELLTEXT

<div ID="l2"><a HREF="aktuelles.html">Allerlei</a><br> <br>

<a href="archiv.html">Archiv</a><br><br>

<a href="brauchbares.html">Brauchbar</a><br><br><br>...

ist semantischer Unsinn. Wannimmer mehrere <br> nacheinander auftauchen, ist irgendwas schiefgelaufen bzw. das Ganze besser lösbar.

Deine Navigation ist eine Liste, also kannst Du sie auch als Liste bauen, z.B.

QUELLTEXT

<ul id="nav">

<li><a href="aktuelles.html">Allerlei</a></li>

<li><a href="archiv.html">Archiv</a></li>

<li><a href="brauchbares.html">Brauchbar</a></li>

...

</ul>

Das kannst Du nun im Stylesheet formatieren:

QUELLTEXT

#nav {...} // Die Liste selbst

#nav li {...} // Die einzelnen Menüpunkte

Allerdings wird es schwierig, die Texte daneben passend zu den Menüpunkten anzuordnen. Die sollten dann entweder mit in der Liste stehen oder Du nimmst doch wieder eine Tabelle (würde ich in diesem Fall wahrscheinlich machen, da es geradezu danach schreit).

Merke: Tabellen sind nicht per se böse, auch Layouttabellen haben ihre Berechtigung, solange man es damit nicht übertreibt. Entscheidend ist lediglich, das für die jeweilige Problemstellung am besten geeignete Werkzeug zu verwenden.

Frohes Basteln und Guten Rutsch

n!

[bipae]

Na, da danke ich Dir aber schön!

1. Ich benutze den Netscape 7.1, der in Klammern Mozilla 5 heißt.

2. Die Schriftgrößenveränderung beim Hovern werde ich zurücknehmen, da hast Du ja so was von Recht!
Den Hupfer meinte ich aber noch anders; anstatt nebeneinander folgen die mittlere und rechte Spalte beim "Dampf ablassen" ein paar Zentimeter weiter unten. Ist jetzt für diese Seite nicht mehr unbedingt wichtig, kann ja aber woanders noch mal passieren. Da hätte ich bitte gern noch einen Hinweis!

3. Die <br> hätte ich mir auch gern geschenkt, ich habe aber im selfhtml nichts so zu den Zeilenabständen gefunden, wie ich mir das vorstelle. Da muß man wohl jeder Zeile einen <p> Absatz mit margin zuordnen, richtig?

4. Listen muß ich noch lernen, die waren mir damals in html zu umständlich.

5. Ich habe die Originalseite als Tabelle; und wollte mal das mit den DIVs lernen. Da bin ich ja echt erleichtert, daß ich die Seite erstmal so lassen kann. Trotzdem war das mal eine gute Übung für mich.

Auch einen guten Rutsch!
bipae

[Netizen]

Den Hupfer meinte ich aber noch anders; anstatt nebeneinander folgen die mittlere und rechte Spalte beim "Dampf ablassen" ein paar Zentimeter weiter unten. Ist jetzt für diese Seite nicht mehr unbedingt wichtig, kann ja aber woanders noch mal passieren. Da hätte ich bitte gern noch einen Hinweis!

Ach das. Das dürfte mit dem Standard-Verhalten eines div-Elements sowie unpassenden Angaben im Stylesheet zusammenhängen.

Zum einen ist ein div-Element ein sogenanntes Block-level Element, diese werden vom Browser generell untereinander angeordnet, solange man nicht mit CSS dazwischenfunkt. Am einfachsten sieht man das, wenn man den divs mal vorübergehend einen farbigen Rahmen verpaßt (border: 1px solid red)

Dazu kommen in Deinem Stylesheet mehrfache position: absolute - die solltest Du wieder entfernen.

Absolute Positionierung ist ein großes Kapitel für sich und sollte nur verwendet werden, wenn man die dahinterstehenden Konzepte sowie CSS im Allgemeinen - insbesondere die verschiedenen Arten von Elementen und deren Standard-Verhalten - verstanden hat. Darüberhinaus ist absolute Positionierung oftmals gar nicht notwendig, vieles läßt sich auch einfacher lösen: In Deinem Beispiel entweder mit einer Tabelle oder 3 divs, wobei das linke und das mittlere per CSS ein float: left sowie eine Breitenangabe (z.B. 33%, Breitenangabe ist bei floats vorgeschrieben!) bekommen.

Details dazu (und zu praktisch allem anderen) findest Du in der offiziellen Spezifikation:

CSS2 Specification
http://www.w3.org/TR/CSS2/

Alternativ auch in der deutschen Übersetzung, wobei allerdings nach Möglichkeit das Original vozuziehen ist:

Cascading Style Sheets, Level 2 Deutsche Übersetzung
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/

3. Die <br> hätte ich mir auch gern geschenkt, ich habe aber im selfhtml nichts so zu den Zeilenabständen gefunden, wie ich mir das vorstelle. Da muß man wohl jeder Zeile einen <p> Absatz mit margin zuordnen, richtig?

Wäre eine Möglichkeit, wenn auch wahrscheinlich nicht die beste. Kommt halt immer drauf an, was man erreichen möchte. Es gibt (fast) immer mehrere Möglichkeiten.

4. Listen muß ich noch lernen, die waren mir damals in html zu umständlich.

Sind aber sehr nützlich und lassen sich obendrein sehr vielfältig einsetzen. Darüberhinaus muß - dank CSS - eine Liste auch nicht immer wie eine Liste aussehen. Es ist z.B. problemlos möglich, die einzelnen Listenpunkte nebeneinander statt untereinander anzuordnen. Unabhängig von der Darstellung ist eine Liste aber oftmals besseres HTML und semantisch sinnvoller als irgendwelche Konstrukte mit unzähligen <br>s.

Sichtbar wird das dann, wenn man CSS abschaltet oder einen Browser bzw. User Agent verwendet, der mit CSS überhaupt nichts anfangen kann. Dann zeigt sich, ob der HTML-Code sinnvoll aufgebaut ist.

5. Ich habe die Originalseite als Tabelle; und wollte mal das mit den DIVs lernen. Da bin ich ja echt erleichtert, daß ich die Seite erstmal so lassen kann.

Auch hier: Kommt drauf an.

Beide Techniken - Tabellen und divs - haben ihre Vor- und Nachteile.

Gruß
n!

[bipae]

Danke!
Vor knapp 2 Stunden habe ich den Trick mit dem zweifachen float:left zufällig herausbekommen - natürlich, als ich etwas ganz anderes wollte. Drei Spalten hatte ich mit float:left, gar nichts und float:right probiert, was nicht klappte.
Position absolute habe ich mir mindestens 10 mal durchgelesen und geglaubt, ich hätte es! Na, dann eben nicht.
Und viel zu oft klappt was nicht wegen dusseliger Tipfehler oder Auslassungen. Das nervt mich am meisten, also, ich mich selbst. :roll:
noch mal Danke für das liebe "an die Hand nehmen!"
Jetzt ist Feierabend, ich muß am Wochenende arbeiten und darf nicht html spielen. (Eine Tüte Mitleid, bitte.)
bipae

[Google Bot]