Du bist nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: WebStyleBoard. Falls dies dein erster Besuch auf dieser Seite ist, lies bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

1

Freitag, 13. Juni 2003, 11:05

Die WSB-Beitragsreihe

Hallo liebe Community,

heute bekommt Ihr von mir das erste Mal Hausaufgaben! :D :P

Wieso das?
Ich fände es schon, wenn wir (dh das WSB bzw FW) einzelne Beiträge zu diversen Themen anbieten könnten, etwa vergleichbar mit den Beiträgen von Memowe (Klick) und mir (Klick).

Welchen Sinn hat das?
Nun, für den neugierigen Leser ist das in erster Linie ein erstklassiger Service; er bekommt zu einem Thema alles aus einer Hand, ohne groß suchen zu müssen! - Und für das WSB/FW respektive für uns alle stellt dies ein nicht zu verachtender Mehrwert dar!

Was bekomme ich dafür?
Ruhm, Ehre und einen schönen Platz für Deinen Beitrag auf dem WSB/FW!

Ok, welche Themen gibt es?
Was die Themen angeht, so hat jeder freie Wahl. - Einen Beitrag zu verfassen macht sowieso nur Sinn, wenn sich der Autor mit dem jeweiligen Thema ein wenig auskennt und Lust hat, sich damit zu beschäftigen. - Themen können zB sein:

Zitat

Passwortschutz mit .htaccess
Formularverarbeitung mittels PHP
Login erzeugen
Suchmaschinen
Favicons
Stylen von Listen (mittels CSS)
Meta-Tags (welche gibt es, welche sind nützlich?)
Was hat es mit robot.txt auf sich
Include-Möglichkeiten
Möglichkeiten von PopUp's

und, und, und!


Ich (und alle anderen sicherlich auch) würde mich freuen, wenn der ein oder andere mitmacht! :))

Weitere Ideen, Vorschläge, Anreize etc sind natürlich gerne gesehen!

Besten Dank für die Aufmerksamkeit,
Investorman


/EDIT/: Begrifflichkeiten geändert! :-)

Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von »Investorman« (13. Juni 2003, 11:32)


2

Freitag, 13. Juni 2003, 11:16

Formularversand mittels CSS
Kann es sein das du PHP meinst? ;)

Gaheris

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Gaheris« (13. Juni 2003, 11:17)


3

Freitag, 13. Juni 2003, 11:18

RE: Die WSB-Beitragsreihe

Dazu habe ich gleich mal ein paar Ergänzungen. ;)

Zitat

Original von Investorman
Themen können zB sein:

Passwortschutz mit .htaccess

Mit der .htaccess-Datei kann man die Serverkonfiguration in weit vielfältigerer Weise beeinflussen, als bloß mit einem Verzeichnisschutz. Das Problem dabei ist, dass es schon ausgezeichnetes Material dazu gibt.

Zitat

Formularversand mittels CSS

CSS kann keine Formulare versenden. Du meinst Formulare stylen mit CSS?

Zitat

Original von Gaheris
Formularversand mittels CSS
Kann es sein das du PHP meinst? ;)

PHP kann auch keine Formulare versenden. Browser versenden Formulare.

Zitat

Verwendung von Listen (CSS)

Du meinst die Möglichkeiten, wie man Listen stylen kann? Listen zu verwenden ist überaus simpel, wenn man erstmal die [OU]L- und LI-Elemente verstanden hat. Für viele Anwendungen sei auch noch die Definitionsliste erwähnt (DL, DT, DD).

Zitat

Include-Möglichkeiten

Hierbei möchte ich das Thema gerne ausweiten auf Navigationskonzepte, denn in den allermeisten Fällen haben Includes nur den Sinn, die Navigation einfach zu handlen. Zudem hat dann das Thema keine technische Motivation, sondern eine, die aus der Praxis erwächst. Hierbei könnte man gut auf serverseitige sowie autorenseitige Includes eingehen und ich finde es auch wichtig, zu erwähnen, dass man auch Seiten ohne Includes schreiben kann. Meine zum Bleistift. Vielleicht mache ich da mal was.

Mirko :)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »memowe« (13. Juni 2003, 11:20)


4

Freitag, 13. Juni 2003, 11:30

RE: Die WSB-Beitragsreihe

Zitat

Original von memowe

Zitat

Original von Investorman
Passwortschutz mit .htaccess

Das Problem dabei ist, dass es schon ausgezeichnetes Material dazu gibt.
Mag sein, aber oftmal sist es so, dass es einige gute Seiten zum Thema gibt, aber keine der angebotenen Seiten eine umfangreiche Lektüre bietet. Hierbei könnte man doch eine Art Zusammenfassung bieten ...

Zitat

Original von Gaheris

Zitat

Original von Investorman
Formularversand mittels CSS

Kann es sein das du PHP meinst? ;)
[/quote]Genau. :D

Zitat

Original von memowe
PHP kann auch keine Formulare versenden. Browser versenden Formulare.
Dann eben: "Verarbeitung von Formulareingaben mittels PHP"

Zitat

Original von memowe

Zitat

Original von Investorman
Verwendung von Listen (CSS)

Du meinst die Möglichkeiten, wie man Listen stylen kann? Listen zu verwenden ist überaus simpel, wenn ...
Aufgabe des Autors könnte hier sein, das Wörtchen wenn zu interpretieren, dh die Stylmöglichkeiten aufzuzeigen.

Zitat

Original von memowe

Zitat

Original von Investorman
Include-Möglichkeiten

Hierbei möchte ich das Thema gerne ausweiten auf Navigationskonzepte ... Vielleicht mache ich da mal was.
Gerne doch!

5

Freitag, 13. Juni 2003, 21:33

wenn ich darf und es noch keinen gibt, würd ich was mit login machen (so richtig mit session, ggf. cookie-login usw. ? )
normaler beitrag?
dateianhang?
valides deutsch? *g*
Signatur von »mrhappiness« Ich denke, also bin ich. Einige sind trotzdem...

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »mrhappiness« (13. Juni 2003, 21:34)


6

Freitag, 13. Juni 2003, 21:54

Zitat

Original von mr_happiness
wenn ich darf und es noch keinen gibt, würd ich was mit login machen.
Warum solltest Du nicht 'dürfen'? Ich würde mich freuen, wenn Du dieses Thema übernimmst!!

Zitat

Original von mr_happiness
normaler beitrag?
dateianhang?
valides deutsch? *g*
Was verstehst Du unter einem 'normalen Beitrag'? Als Vergleich kannst Du die oben verlinkten Beiträge von Memowe und meiner Wenigkeit heranziehen. - Die Sprache sollte für einen Durchschnittswebmaster verständlich sein. Du machst das schon. :)

PS: Wie sieht's denn mit den anderen aus? Vor allem die Crew und die Top-Poster! Aber auch alle anderen?!

7

Freitag, 13. Juni 2003, 23:00

Zitat

PS: Wie sieht's denn mit den anderen aus? Vor allem die Crew und die Top-Poster! Aber auch alle anderen?!


Ich hab es schon eben im Chat angemerkt: Ab August werde ich Tagebuch über die Themen "Java/Projektmanagement lernen" führen. Ausnahme ist wenn der Unterricht in den Fächern nicht sonderlich viel hergibt was ich jedoch nicht hoffe.

Ob ich bis August ein Thema einschiebe weiß ich nicht. Mir fällt jedenfalls spontan kein Thema ein ;)

Tobias
Signatur von »t-ob-i« {SIGNATUR}

8

Samstag, 14. Juni 2003, 01:44

Hallo zusammen! :)

Die erste für mich relativ spontane Reaktion haben wir schon:
mr_happiness: Login (Grundlage einer Benutzerwaltung) mit PHP und mySQL (http://www.webstyleboard.de/wsb/thread.php?threadid=3081)

Ich denke, dass die Richtung ganz gut ist und möchte alle, die sich motiviert genug fühlen, nochmal ausdrücklich dazu ermutigen, in dieser Richtung etwas beizusteuern. Davon lebt das WSB und das macht es auch im Gegensatz zu anderen GABELN so attraktiv.

Mirko :)

PS: zu zwei Themen möchte ich mal gleich meinerweniger Engagement ankündigen. Es ist dies "Listen in Markup und Style" und die kleine Übersicht über Navigations- und daraus resultierende Include-Konzepte. Wenn sich jemand außer mir doch noch damit befassen will, soll er sich bitte bei mir melden. Ansonsten werde ich in Kürze dazu was beisteuern.

9

Samstag, 14. Juni 2003, 08:57

@mem: Bedenkst du bei deiner Listen-Exkursion auch

Quellcode

1
2
li ul {display:none;}
 li:hover ul {display:block}
(Aufklappmenüs halt *g*) oder soll/kann ich dazu was beisteuern? ;) ich hab da nämlich gerade eines für ein Webprojekt gebastelt, inklusive der WürgArounds für Netscape/IE WHERE version<5 und IE WHERE version<7 AND version>=5. Da könnte ich dann gleich den Bleistift-Quälcode entnehmen ;)
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

10

Samstag, 14. Juni 2003, 09:58

Formularverarbeitung mittels PHP

Ich würde dann "Formularverarbeitung mittels PHP" übernehmen.
Signatur von »Darii« Against TCPA - TCPA heißt Freiheit verlieren
D.A.R.I.I.: Digital Artificial Replicant Intended for Infiltration

11

Samstag, 14. Juni 2003, 10:12

RE: Formularverarbeitung mittels PHP

Ich übernehme mal die Moderation für die WSB-Beitragsreihe. :)

Zitat

Original von Alex
... oder soll/kann ich dazu was beisteuern? ;) ich hab da nämlich gerade eines für ein Webprojekt gebastelt ...
Na das hört sich ja schon mal gut an. Ich denke, dass Ihr beiden Euch da irgendwie einigen könnt. Ein Co-Autorenschaft ist doch auch schön! :)

Zitat

Original von Darii
Ich würde dann "Formularverarbeitung mittels PHP" übernehmen.
Sehr gerne. Freut mich, dass sich nun zwei (bzw drei) weitere Beitragsschreiber gefunden haben. :))

PS: Lasst Euch aber nicht hetzen; nehmt soviel Zeit, wie Ihr benötigt, um die Sache in Ruhe zu erstellen.

12

Samstag, 14. Juni 2003, 10:37

Zitat

Original von Alex
@mem: Bedenkst du bei deiner Listen-Exkursion auch [...] (Aufklappmenüs halt *g*) oder soll/kann ich dazu was beisteuern? ;)

Ich würde sogar sagen: tus! :D Schreib doch einfach mal ein komplexes Anwendungsbleistift beisammen und kommentiere es gut. Dann will ich wohl im Vorfeld noch einige Grundsätzlichkeiten zu Listen beschreiben.

Mirko :)

13

Samstag, 14. Juni 2003, 13:00

geht das da unten oder sind da zu wenige Kommentare und Erläuterungen?

::Anhang "A": css_aufklappmenü_tut.txt::

Styling von Listen mittels CSS -> Aufklappmenüs

Sinnvolle Vorkenntnisse:
HTML, besonders "Einbindung von CSS in HTML".

ToC:
[LIST="1"]
[*]Warum CSS?
[*]Die Menü-Typen
[*]Die Realisierung
a) Einrichtung des Menüs
b) Einbau des Klapp-Effektes für CSS-fähige Browser
o-> Aufklappen rechts daneben
o-> Aufklappen darunter
o-> Aufklappen unter vollständiger Ausnutzung einer zweiten Spalte
c) Einbau des JScript-Klapp-Effektes für Microsoft Internet Explorer
d) Nicht-Funktion des Klapp-Effektes in Opera 6 und ihre Umgehung
e) Einbau einer CSS-Sperre für NN/IE 4 und früher
f) Umgehung eventueller Margin-/Padding-Problemen im IE
[*]Abschlussbewertung der Unternehmung
[/LIST]

1) Warum CSS?
Diese Unternehmung ist mit CSS realisierbar, da man alle Elemente fast schon so positionieren kann, wie man will, das Verbergen von Elementen ist ebenfalls kein Problem.
Der wichtigste Grund dafür, dass man CSS auch verwenden sollte, ist, dass nur dann alle Menüpunkte direkt im MarkUp stehen und damit für Suchmaschinen und Textbrowserbenutzer auffindbar sind.
Trotzdem wird man wegen der fehlerhaften/fehlenden Implementierung einiger Elemente im Internet Explorer auf JavaScript zurückgreifen müssen.
2) Die Menü-Typen
Neben dem Standard-Aufklapp-Menü, bei dem die Unterelemente rechts neben dem Elternelement aufklappen, können die Unterelemente in erkennbarer Listenform direkt unter dem Elternelement aufklappen und den Rest der Liste nach unten verschieben, oder alle Unterlisten klappen in einer zweiten Spalte auf gleicher Höhe auf. Letztere Möglichkeit impliziert, dass nur zwei Ebenen (Hauptpunkte, Unterpunkte) existieren.
Mit ein bisschen Geschick kann man auch mehrere Typen mischen.
3) Die Realisierung
3a. Einrichtung des Menüs
Zuerst muss mit HTML das Grundgerüst des Menüs in die Seite getippt werden. Ich habe mich für das Menü (m)einer Schul-Homepage entschieden:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<ul id="navi">
 <li>Schüler
  <ul id="schuelerul">
   <li><a href="/hvb/schueler/klassen/">Klassen</a></li>
   <li><a href="/hvb/schueler/sv.htm">SV</a></li>
   <li><a href="/hvb/images/schueler/">Bilder</a></li>
   <li><a href="/hvb/forum/">Schwarzes Brett</a></li>
   <li><a href="/hvb/schueler/ehemalige.htm">Ehemalige</a></li>
   <li><a href="/hvb/projekte/sanidienst.htm">Sanitätsdienst</a></li>
  </ul>
 </li>
 <li>Lehrer
  <ul id="lehrerul">
   <li><a href="/hvb/lehrer/">Lehrer A-Z</a></li>
   <li><a href="/hvb/images/lehrer/">Bildergalerie</a></li>
   <li><a href="/hvb/lehrer/faecher/">Fachschaften</a></li>
   <li><a href="/hvb/lehrer/lehrerfs.htm">Lehrer für Schüler</a></li>
   <li><a href="/hvb/lehrer/gewerksch.htm">Berufsverbände</a></li>
   <li><a href="/hvb/lehrer/lehrerdm.htm">Lehrer des Monats</a></li>
  </ul>
 </li>
 <li>Schule
  <ul id="schuleul">
   <li><a href="/hvb/schule/">allgemeine Infos</a></li>
   <li><a href="/hvb/schule/geschichte.htm">Geschichte</a></li>
   <li><a href="/hvb/schule/raeume/">Raumplan</a></li>
   <li><a href="/hvb/schule/curricula/">Curricula</a></li>
   <li><a href="/hvb/schule/verwaltung/">Organisation & Verwaltung</a></li>
   <li><a href="/hvb/schule/stundenplan/">Stundenpläne</a></li>
   <li><a href="/hvb/schule/sprechtag.htm">Elternsprechtag</a></li>
  </ul>
 </li>
 <li>Projekte
  <ul id="projekteul">
   <li><a href="/hvb/projekte/">Unterrichts- Projekte</a></li>
   <li><a href="/hvb/termine/">Veranstaltungen & Termine</a></li>
   <li><a href="/hvb/projekte/foerderverein/">Förderverein</a></li>
   <li><a href="/hvb/projekte/austausch/">Schüler- Austausch</a></li>
   <li><a href="/hvb/projekte/kooperation.htm">Kooperation</a></li>
   <li><a href="/hvb/projekte/projektwoche/">Projektwoche</a></li>
   <li><a href="/hvb/projekte/ags/">AGs</a></li>
   <li><a href="/hvb/projekte/sanidienst.htm">Sanitätsdienst</a></li>
  </ul>
 </li>
</ul>

Es spräche nichts dagegen, weitere Unterpunkte, Unterlisten und Verzweigungen anzubringen, sofern man die Listentypen 1 oder 2 verwendet, aber da diese Liste für den Einsatz mit Typ 3 gedacht war, konnte nur ein zweistufiges Menü in Frage kommen.

3b) Einbau des Klapp-Effektes für CSS-fähige Browser
Anmerkung: Es empfiehlt sich, die Navigation stets in einen DIV-Container zu packen (besonders bei Typ 3)
Aufklappen darunter
Dies ist sehr einfach zu realisieren,...

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
ul#navi
{
 list-style-type:none;
 padding:0px;
}
li ul{
 display:none; /* Unterlisten werden nicht angezeigt */
}
li:hover>ul
{
 display:block; /* Ein überfahrenes Element soll angezeigt werden */
}

...hat aber Nachteile: Es entsteht eine gewisse "Glibberigkeit" ;) dadurch, dass die mit der Maus zu überfahrenden Elemente verschoben werden, wenn man ein anderes ausklappendes Element verlässt.

Aufklappen rechts daneben
Dies ist eine Erweiterung der vorherigen Umsetzung, die den Nachteil entfernt. Das entstehende Menü ähnelt dem Windows-Startmenü.

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
ul#navi
{
 position:absolute;
}
ul
{
 list-style-type:none; /* Keine Listenpunkte anzeigen */
 margin:0px;
 padding:0px;
 width:8em; /*Die Breite der Liste. Welcher Wert hier hingehört, muss anhand der Länge des Textes entschieden werden */
 border:1px solid black;
}
li
{
 position:relative; /* Die Position wird relativ zum Elternelement ("ul") bestimmt. */
}
li ul{
 display:none;
 //position:absolute; /*Absolut positionieren*/
 left:100%; top:-1px; /* Die Position liegt genau links neben dem Elternelement*/
 /* "top:-1px;" behebt einen Fehler, der durch den Rahmen entsteht. Der Wert muss zur Rahmendicke von "li" und "ul" addiert Null ergeben. */
}
li:hover>ul
{
 display:block; /* Ein überfahrenes Element soll angezeigt werden*/
}


Aufklappen in zweiter Spalte
Dies ist eine schwierige Form des Aufklappmenüs. Lassen sie folgenden CSS-Code wirken:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
ul#navi {
 position:absolute;
 top:0px;
 left:0px;
 height:90%; /* Höhe der Navigation */
 width:20%; /* Breite der ersten Spalte */
 margin:0px;
 padding:0px;
 list-style-type:none; /* Keine Items anzeigen */
}
ul#navi li {
 position:relative;
 height:25%; /* Höhe eines Listenpunktes der Hauptliste (=100/Anzahl Punkte) */
 width:100%;
 margin:0px;
 padding:0px;
}
ul#navi li ul {
 display:none; /* Verbergen */
 position:absolute;
 left:100%;
 width:100%;
 height:404%; 
 /* Höhe der Unterlisten in Prozent der Höhe eines Listenpunktes der Hauptliste (100 mal Anzahl der Hauptlistenpunkte) */
 /* Zur Fehlerkorrektur in IE und Opera 4% mehr angegeben. */
 list-style-type:none; /* Keine Items anzeigen */
 margin:0px;
 padding:0px;
}

ul#navi li ul li {
 width:100%;
 height:10%; /* Höhe eines Listenpunktes der Unterliste ("20%" bedeutet bspw.: 5 Listenpunkte werden angezeigt)*/
 vertical-align:middle;
}
ul#navi li ul li a {
 display:block;
}
ul#navi li:hover ul { display:block; } /* Aufklapp-Effekt */

/* Höhenunterschied der Unterlisten in Prozent der Höhe eines Listenpunkts der Hauptliste (100 mal Anzahl der Hauptlistenpunkte) */
/* Zur besseren Anzeige im IE sind überall 2% mehr als nötig */
ul#schuelerul { top:-2%;   }
ul#lehrerul   { top:-102%; }
ul#schuleul   { top:-202%; }
ul#projekteul { top:-302%; }

Dieser Typ Aufklappmenü ist vielleicht etwas ungewöhnlich, aber mit der richtigen Colorierung sieht er muMn am besten aus.
(Screenshot der Schulhomepage wird nach der Fertigstellung hinzugefügt)

3c) Einbau des JScript-Klapp-Effektes für Microsoft Internet Explorer
Für den Klappeffekt im Internet Explorer, der kein li:hover unterstützt (Bill, wir lieben dich), benötigt man etwas JScript:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function einblenden(id)
{
 if(navigator.appName=="Microsoft Internet Explorer")
 {
  document.getElementById(id+'ul').style.display='block';
 }
}
function ausblenden(id)
{
 if(navigator.appName=="Microsoft Internet Explorer")
 {
  document.getElementById(id+'ul').style.display='none';
 }
}

Nun muss bei jedem Listenpunkt der Hauptliste etwas hinzugefügt werden:

Quellcode

1
 <li>Lehrer

wird zu

Quellcode

1
 <li onMouseOver="einblenden('lehrer')" onMouseOut="ausblenden('lehrer')">


3d) Nicht-Funktion des Klapp-Effektes in Opera 6 und ihre Umgehung
Der Klapp-Effekt funktioniert im Opera 6 nicht, weil li:hover nicht erkannt wird, die JS-Elemente [HTMLElement].style aber auch nicht funktionieren.
Zum Glück bietet der Opera 6 einen sogenannten "Benutzermodus". Weisen sie also Seitenbesucher mit Opera darauf hin, in den Benutzermodus zu schalten.
Dies kann im Seiteninhalt geschehen, aber auch per javascript:

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
if(navigator.userAgent.substr(0,5)=="Opera")
{
 isopera=true;
}
else
{
 if(navigator.userAgent.lastIndexOf("O")!=false)
 {
  for(var i=navigator.userAgent.indexOf("O")-1;i<=navigator.userAgent.lastIndexOf("O")+1;i++)
  {
   if((navigator.userAgent.substr(i,5)=="Opera") && (eval(navigator.userAgent.substr(i+6,1))<7))
   {
    isopera=true;
   }
  }
 }
}
if(isopera)
{
 if(document.referrer.substr(0,18)!=document.URL.substr(0,18)) 
 {
  alert("An alle Benutzer von Opera 6.04 und frueher:\n\nIhr Browser kann unsere Site nicht vollstaendig anzeigen.\nBitte "+
  "wechseln sie daher in den 'Benutzermodus'.\nIm Opera 6: Klicken sie auf das ziemlich links direkt ueber dem Seitenrand "+
  "befindliche Symbol, welches einen Kopf darstellt.\nFuer weitere Informationen konsultieren sie bitte die Impressum-Seite.");
 }
}

Damit wird erst geprüft, ob der Browser sich als Opera anmeldet, dann wird geprüft, ob der Verweis von einer anderen Site kommt, wenn ja, wird eine Meldung ausgegeben.

3e) Einbau einer CSS-Sperre für NN/IE 4 und früher
Packe alle CSS-Deklarationen in eine externe Datei und dann in die HTML-Dateien:

Quellcode

1
2
3
<style type="text/css">
@import url("externe_datei.css");
</style>

Das sperrt alte Browser aus, die den @import-Befehl nicht kennen. Die Benutzer sehen dann eine Navigations-Liste, die ihnen vollen Zugriff alle Unterseiten ermöglicht.

3f) Umgehung eventueller Margin-/Padding-Problemen im IE
Der Internet Explorer hat Probleme mit dem padding und margin von Listen. Hier ein JavaScript-WürgAround (funzt garantiert mit dem Menü "Anzeige in zweiter Spalte", mit den anderen konnte ich es nicht testen):
(Der Befehl document.write() bzw. document.writeln() gibt übrigens hier lediglich dem Browser etwas CSS zurück, das dieser dann interpretiert...)

Quellcode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function inc_css()
{
 if(navigator.appName=="Microsoft Internet Explorer")
 {
  document.writeln('<style>');
  if(navigator.appVersion.slice(22,23)=="5") // Ist es IE 5?
  {
   if(navigator.appVersion.slice(22,25)=="5.5") // Ist es IE 5.5?
   {
    document.writeln('ul#navi { padding:0px; margin:0px; }');
    document.writeln('ul#navi li { padding:0px; margin:0px; margin-left:-16px; margin-right:0px; }');
    document.writeln('ul#navi li ul { padding:0px; margin:0px; margin-left:0px; padding-top:20px;  width:120%;}');
    document.writeln('ul#navi li ul li { padding:0px; margin:-16px; }');
    document.writeln('ul#navi li ul li a { padding:0px; margin-right:16px; height:50px; }');
   }
   else
   {
    document.writeln('ul#navi { padding:0px; margin:0px; }');
    document.writeln('ul#navi li { padding:0px; margin:0px; margin-left:-20px; margin-bottom:-4px; padding-left:10px; }');
    document.writeln('ul#navi li ul li { padding:0px; margin:0px; margin-left:-20px; width:100%; }');
   }
  }
  else if(navigator.appVersion.slice(22,23)=="6") // Ist es IE 6?
  {
   document.write('body { scrollbar-base-color:#889; scrollbar-3dlight-color:#bbc; scrollbar-arrow-color:#fff; scrollbar-darkshadow-color:#000;');
   document.writeln('scrollbar-face-color:#889; scrollbar-highlight-color:#bbc; scrollbar-shadow-color:#000; scrollbar-track-color:#bbc; }');
  }
  document.writeln('</style>');
 }
}

Dieser Codeschnipsel wird eingebunden, indem im <head>-Bereich der WebSite folgendes untergebracht wird:

Quellcode

1
2
3
  <!--[if IE]>
   <script type="text/javascript">inc_css();</script>
  <![endif]-->

Was sie oben sehen, ist ein sogenannter "IE-Comment". Nur der IE führt den Inhalt dieses Kommentars aus.

4. Abschlussbewertung der Unternehmung
Wegen der Menge von JavaScript, die als WorkArounds benötigt wurden, kann man die Aufklappmenüs mit CSS als Wunschtraum bezeichnen... bei 90% aller Browser werden sie entweder als normale Liste angezeigt oder mit JavaScript aufgeklappt. Aber das wird sich ändern, und durch die Verbreitung dieser Methode hier wird der Druck auf die Browserhersteller wachsen, endlich CSS zu implementieren.

Sonstiges
Fast alle Beispielcodes wurden der Homepage http://www.hvb-koeln.de.vu entnommen, welche die Vorabversion der neuen Schulhomepage des Hildegard-von-Bingen Gymnasiums darstellt.
Diese Seite wurde nach bestem Wissen und Gewissen erstellt. Fehlerfreiheit kann daher nicht ausgeschlossen werden. ;) Sollte jemand trotzdem einen Fehler entdecken, bitte ich darum, diesen hier zu melden. Danke.

Fragen, Vorschläge oder Hinweise bitte per PN oder Formmailer an mich.

::Ende Anhang "A"::
Signatur von »Alex« Man muss nichts sehen, um zu sehen, dass man nichts sieht, aber man muss etwas sehen, um zu sehen, was man nicht sieht.

14

Samstag, 14. Juni 2003, 18:56

Guten Abend,

ich werde jetzt im laufe der nächsten Wochen ein paar Anwengunsbeispiele für die GD-Lib posten. Der erste ist zu finden unter

http://www.webstyleboard.de/wsb/thread.p…eadid=3084&sid=

(Könnte bitte ein Mod den Rechtschreibfehler im Titel korrigieren? Bei mir scheint es nicht zu funktionieren)

Tobias
Signatur von »t-ob-i« {SIGNATUR}

15

Samstag, 14. Juni 2003, 20:33

@ Alex: Besten Dank auch Dir! Bitte poste Deinen Beitrag - wie in meiner Nachricht an Dich geschrieben - in einem neuen Thread. Denn ein schöner Beitrag verdient auch einen eigenen Thread samt aussagekräftigem Titel! :))

Zitat

Original von t-ob-i
ich werde [...] ein paar Anwengunsbeispiele für die GD-Lib posten. Der erste ist zu finden unter http://www.webstyleboard.de/wsb/thread.p…eadid=3084&sid=
Natürlich gilt auch Dir ein herzliches Dankeschön!! :)

Zitat

Original von t-ob-i
(Könnte bitte ein Mod den Rechtschreibfehler im Titel korrigieren? Bei mir scheint es nicht zu funktionieren)
Das können nur die beiden Admins und/oder der für das jeweilige Board zuständige Mod. - Wird aber einer von ihnen machen ...

@ TNS & Chris: Sollen wir nicht für die Beitragsreihe eine Extra-Seite eröffnen? So schön mit einem kleinen, zum Thema passenden Logo?! Lasst Euch mal was einfallen, denn je ansprechender die Seite wird, desto mehr Beiträge wird es geben. (Hilfe, das Mitmachfieber bricht aus!! :D)

16

Samstag, 14. Juni 2003, 20:53

Zitat

Sollen wir nicht für die Beitragsreihe eine Extra-Seite eröffnen? So schön mit einem kleinen, zum Thema passenden Logo?!


Das hab ich mir auch schon gedacht. Vielleicht mit eigener Domain etc.

Tobias
Signatur von »t-ob-i« {SIGNATUR}

17

Samstag, 14. Juni 2003, 22:17

Zitat

Original von t-ob-i

Zitat

Sollen wir nicht für die Beitragsreihe eine Extra-Seite eröffnen? So schön mit einem kleinen, zum Thema passenden Logo?!

Das hab ich mir auch schon gedacht. Vielleicht mit eigener Domain etc.

Passt das denn nicht am besten auf die Seite ForWebmaster.de?

18

Samstag, 14. Juni 2003, 22:53

Zitat

Original von Alex
geht das da unten

Finde ich gut. Danke für Dein Engagement. Was mich dabei ein bisschen erschreckt, sind die vielen Würgarounds und Scripts, die man zum "korrekten Funktionieren" der Navigation in dann nachher doch nicht allen Browsern benötigt. Aber wenigstens ist sie auch ohne den ganzen Script-Klimbim accessible. Schade einklich. Wenn Browser CSS besser unterstützten, wäre eine solche Liste sehr viel einfacher.

Das ist jetzt natürlich ein ziemlich ausgewachsenes Bleistift, die grundlegenden Erklärungen dazu werden geringer ausfallen. Aber ich schreibe einfach mal was. Wenn Du erlaubst, hänge ich dann Deinen Anhang dahinter als tolles praktisches Bleistift.

[q=Investi]@ Alex: [...] Bitte poste Deinen Beitrag[/q]
Der wird vorher noch ergänzt.

Mirko :)

20

Sonntag, 15. Juni 2003, 09:43

Zitat

Original von DukeXP
Passt das denn nicht am besten auf die Seite ForWebmaster.de?

korrekte mente ....

btw: ich würde aus Gründen der Übersicht und dem verhindern wollen, dass die Beiträge in den Foren "untergehen", dafür in der Development-Rubrik ein Forum einrichten.
Signatur von »TheNobody Style«

Zurzeit ist neben dir 1 Benutzer in diesem Thema unterwegs:

1 Besucher