HTML/CSS - Bittere Enttäuschung

[Jochen_Schmidtke_58352a]

Hi Ihr Cracks.
Ich bin bitter enttäuscht.
Endlich ist es mir gelungen, eine einigermaßen ansprechende Homepage zu gestalten:
http://homepages.uni-paderborn.de/pilger

Da trifft mich der Hammer!!
Als Anfänger habe ich die Formatierungsangaben immer auf der jeweiligen Seite angegeben. Das nervt bei 30 Seiten auf Dauer.
Dann habe ich es mit CSS gewagt. Nach einigen Problemen klappte es auch (zuhause an meinem Stand-Alone-Rechner).
Jetzt habe ich die Seiten auf meine Homepage an der Uni übertragen und siehe da: Die Formatierungen von der css-Datei wurden ignoriert.
Ich mußte auf allen 30!! Seiten die Formatierungsangeben wiederholen.
Bittere Enttäuschung! Was habe ich nur falsch gemacht??

Frohes Fest von dem Stümper
Jochen

P.S. Meine Seite ist im Aussehen recht bieder. Macht nix! Der Inhalt ist es ja auch.
Aber die Überschriften hätte ich denn doch gerne etwas aufgepäppt.
Wer gibt mir Hilfestellung?

[pumpkin_1768a9]

Moin

http://homepages.uni-paderborn.de/pilger

etwas kurz geraten:

Forbidden
You don't have permission to access /pilger on this server.

Apache/1.3.26 Server at homepages.uni-paderborn.de Port 80

Jetzt habe ich die Seiten auf meine Homepage an der Uni
übertragen und siehe da: Die Formatierungen von der css-Datei
wurden ignoriert.

Nicht jeder Browser kann css. Ausserdem muss der Link zur css Datei stimmen (und nicht auf c:\irgendwas zeigen).

cu

[Jochen_Schmidtke_58352a]

Jezt habe ich mein Quota an unserem Uni-Server überschritten und ich weiß nicht, wie ich das Problem lösen soll. Dazu hat der Poolraum an der Uni bis zum Neuen Jahr geschlossen. Dann sind die Systembetreuer auch wieder da.
So’n Pech aber auch!!
Ganz großer Mist hoch 3

Der tief enttäuschte Jochen.

[pumpkin_1768a9]

Moin

und ich weiß nicht, wie ich das Problem lösen soll.

http://www.tripod.com

Oder wenn die Seite klein ist per mail an mich.

cu

[wodi_707569]

Hi,

Ich bin bitter enttäuscht.

Tja, das ist so in diesem Metier: es klappt nicht auf Anhieb.
Nur solltest du das nicht, wie im Betreff geschehen, auf HTML bzw. CSS schieben, sondern dich an die eigene Nase fassen.

Zum Problem: ich vermute ganz stark, dass der Verweis zur externen CSS-Datei ins Leere geht.
So wie du das im HTML-Quelltext ausgezeichnet hast, müsste die Datei „formate.css“ auf derselben Verzeichnisebene wie die index.html liegen. Tut sie das nicht, musst du den kompletten Pfad angeben, aber mit / statt mit .
Schau dir also deine Verzeichnisstrukutr darauf hin nochmal an.

Viele Grüße
WoDi

[wodi_707569]

Hi,

[…]

Nicht jeder Browser kann css.

Welcher ausser Lynx und NS4 nicht?

Viele Grüße
WoDi

[gipsy_f800d0]

Auch hi,

Welcher ausser Lynx und NS4 nicht?

Der IE - der tut nämlich immer nur so als wenn er es könnte

VG

gipsy

[sam_fc2254]

hi jochen

du hast als link zur css-datei angegeben:
.

das bedeutet, die ‚formate.css‘ müsste hier liegen:
http://homepages.uni-paderborn.de/pilger/formate.css

tut sie aber nicht. lösung: entweder du passt den oberen pfad an, oder du wirfst die ‚formate.css‘ ins verzeichnis ‚pilger/‘

gruss
sam

[Jochen_Schmidtke_58352a]

Jetzt ist der Poolraum an der Uni wieder offen und ich kann meine Seite wieder pflegen (mit der alten Version ohne externe CSS-Datei).
Mit der Formatierung über eine externe CSS-Datei werde ich wieder ganz von vorne anfangen.
Ich hatte die Verweise auf die externe CSS-Datei schon auf der richtigen Verzeichnisebene. Und die Verweise darauf in den Unterseiten waren auch korrekt.
Aber da ich ein so großer Stümper bin und in die externe CSS-Datei wohl Formatierungen reingetan habe, die da nicht hingehören, hat der Server wohl nicht mitgespielt.
Meine Homepage umfaßt rund 30 Seiten und auf jeder Seite viele Links.
Die wollte ich - um dem Nutzer die Navigation - und mit die Aktualisierung und Pflege der Seiten - zu erleichtern, mit einheitlichen Schaltflächen (Clickbuttons) versehen.
Die Definition dieser Clickbuttons hatte ich in der externen CSS-Datei vorgenommen. Und dabei habe ich wohl ob meiner Stümperhaftigkeit wohl Mist gebaut.
Wer sich meine Seite mal anschauen und mir Tips geben möchte:
http://www.jakobusfreunde-paderborn.de.vu

Ein gesegnetes Neues Jahr 2005 allen hier im Forum
Jochen Schmidtke

[Jochen_Schmidtke_58352a]

Hallo, Pumpkin.
Danke für Deine Antwort.

http://www.tripod.com

Ich komme da nicht weiter. Ist wohl eine professionelle Seite. Da muß man sich einloggen.

Oder wenn die Seite klein ist per mail an mich.

Hast Du Dir mal meine Seite angeschaut?
Wo finde ich wohl vorformatierte Schaltflächen?
Weist Du einen Link, auf dem man sich interessante Seiten anschauen kann?
Gruß Jochen

[pumpkin_1768a9]

Moin

Hast Du Dir mal meine Seite angeschaut?

Hatte gar nicht mitbekommen das die Seite wieder online ist…

Wo finde ich wohl vorformatierte Schaltflächen?

Kennst du selfHTML ?

Da sind z.B. solche Scherze drin :

a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }

(Ist kein design-technisches Wunder, aber als Beispiel ganz „schön“.

Weist Du einen Link, auf dem man sich interessante Seiten
anschauen kann?

Das was der mit CSS und javaskript veranstaltet ist das beste was ich je gesehen hab. Kann die skripts nur empfehlen:

http://www.walterzorn.de/index.htm

cu

[wodi_707569]

Hi,

Wo finde ich wohl vorformatierte Schaltflächen?

Schau dir mal diese Site an:

http://www.css4you.de

Dort siehst du, wie so etwas gemacht wird und du kannst dir die komplette Site auch zum Offlinelesen runterladen. Ist sehr empfehlenswert.

Viele Grüße
WoDi

[Jochen_Schmidtke_58352a]

Auch Moin

Hatte gar nicht mitbekommen das die Seite wieder online ist…

Das die offline war, lag an Service-Arbeiten am Server der Uni.

Wo finde ich wohl vorformatierte Schaltflächen?

Kennst du selfHTML ?

Ja, die Seite kenne ich und habe sie auf meinem Rechner. SEHR gut!!

Das was der mit CSS und javaskript veranstaltet ist das beste
was ich je gesehen hab. Kann die skripts nur empfehlen:

http://www.walterzorn.de/index.htm

Habe mir den Link sofort „gebookmarkt“ (Was für ein Wort!!)

Werde am Wochenende noch etwas basteln und dann mal sehen, ob es klappen wird.

btw: Kann man in der CSS-Datei auch die Links verschieden formatiern?
Etwa so wie bei den anderen Formaten?

Z.B:
a:link.oben {Formatierungsangaben}

Und dann auf der Seite so aufrufen:
Klappt sowas mit den verschiedenen Betriebssystemen und Browswern?

Ich habe nämlich auf meinen Seiten unheimlich viele Links und die wollte ich irgendwie unterschiedlich gestalten.

Gruß an alle, die mir helfen wollen.
Jochen

[pumpkin_1768a9]

Moin

btw: Kann man in der CSS-Datei auch die Links verschieden
formatiern?

Du kannst mit klassen arbeiten, also:

a.hinterlegt { background-color:#FFFF00 }

im CSS und

Die Klassendefinitionen und alle anderen Definitionen (a:active, a:hover) werden dann gleichzeitig angewendet (der zuletzt definierte überschreibt die anderen)

a:link.oben {Formatierungsangaben}

Das wird nix. Das musst du aufteilen in „a:link“ und „a.oben“

Und dann auf der Seite so aufrufen:

„class“ nicht „style“…

Klappt sowas mit den verschiedenen Betriebssystemen und
Browswern?

Ja und nein: es klappt ab IE4, opera 6, firefox 1, NS4. Wenn aber einer mit einem uralt-browser vorbeikommt ist Essig.

cu

[sam_fc2254]

tag

a:link.oben {Formatierungsangaben}

Das wird nix. Das musst du aufteilen in „a:link“ und „a.oben“

imho klappt

a.oben:link

(sofern es mit

aufgerufen wird).

gruss
sam

[Jochen_Schmidtke_58352a]

Moin, Kürbis ) und Sam.
Ich bin wieder ein Stück weitergekommen.
Meine Buttons stehen da wie die Zinnsoldaten: Prima!
Nur die Buttons innerhalb des Textes gefallen mir noch nicht.
Werde am Wochenende mit Euren Hinweisen mal probieren.
Eure Hinweise sind mir eine wertvolle Hilfe.
Ich habe mal meine CSS-Datei auf einer Testseite untergebracht. Die könnt Ihr sehen, wenn Ihr auf meiner Startseite
http://homepages.uni-paderborn.de/pilger
den untersten Link anklickt.
Schaut Euch mal die Seite an und macht mir Vorschläge.

Übrigens: Die Adresse meiner Homepage auf der Seite Uni Paderborn täuscht etwas. Ich bin nicht Student sondern ein 68-jähriger Rentner. Ich bin als Gaststudent eingeschrieben und besuche interessante Vorlesungen. Was werden mir da für „Fenster in die Welt des Wissens“ geöffnet!! Phantastisch! Vor allem weil ich nicht unter dem Zwang stehe, Rechenschaft über das abzulegen, was ich dort gelernt habe. Einfach nur „just for fun“.
Mit meinem Gasthörerausweis habe ich auch ein login zum Internet in den Internet-Poolräumen.
Schönes Wochenende.

[pumpkin_1768a9]

Moin

Vorne weg: ich bin beeindruckt. Ich kenne einige Rentner die sich mit Rechnern befassen, aber von denen könnte keiner valides HTML 4.0 schreiben.

Zum Thema, ich hab mir die Seite mal genauer angesehen:

Du verwendest Komentare in der CSS-Datei. Das ist an sich ok, nur leider kommt IE5 damit nicht wirklich klar. D.h. für die endgültige Version solltest du evtl. die Kommentare rauslassen. Oder zumindest auf Konstruktionen wie:

a {paramter; paramter; paramter;
/* komentar */
paramter; paramter; paramter }

in

/* komentar */
a {paramter; paramter; paramter;
paramter; paramter; paramter }

unwandeln. Mit der 2. Form kommen alle Browser klar.

Zu deinem „Nach-oben-Link“ Problem: in dem CSS auf der Seite ist definiert:

p {… margin-left: 80px; margin-right: 100px}

Das lässt den Text um 80 + 100 Pixel schmaller erscheinen. Bei den Nach-oben-Links fehlt die Angabe, deshalb laufen die über die ganze Breite. Man kann die Links in p-Tags einpacken, dann sind die Links auch schmaller:

linktext  

Was die Tochterformatierung angeht: ja sowas gibts durchaus, nennt sich class-formatierung. Man definiert:

a:active {color:#FFFFFF;…}
a.imText {color:#FF0000;…}

Ein Link ohne weitere Angaben wird nur nach den Regeln von a:active formatiert. Ein Link mit der Angabe

TEXT

wird zuerst nach den a:active-Regeln formatiert und danach nochmal mit den a.imText-Regeln. D.h. a.imText-Regeln überschreiben a:active-Regeln. Beispiel:

a.imText {display:inline}

hebt display:block aus a:active auf. So würden Links der Klasse imText nicht mehr als Block über die ganze Text-Breite gehen (wenn man class=„imText“ in die a-Tags einfügt).

Dann nochwas zu den Meta-Daten. Metadaten sind schön und gut, nur leider reagieren viele Suchmaschnine nicht darauf. Um die Chancen zu erhöhen sollte man die Metadaten alle 2x angeben: einmal so wie sie jetzt in dem Dokument drin sind und einmal nach dublin core:

http://de.selfhtml.org/html/kopfdaten/meta.htm#dubli…

Noch ein Wort zur Navigationsleiste links:

Der Teil
Home

legt zwar fest dass die tr nach oben zentiert wird, überlässt aber der td die freie Wahl. Dadurch steht bei mir (opera 7.54) die navi-Leiste in der Mitte der Seite und nicht nicht oben, unter dem Jakobus. Also das „vertical-align: top“ nochmal in td wiederholen.

Ausserdem ist die Breitenaufteilung innerhalb der Tabelle nicht eindeutig: es ist nirgens die Breite der linken Spalte und der rechten Spalte angegeben. Wenn das Bild ohne nicht wäre würde die Tabelle sich komplett anders verhalten. Also evtl. in der ersten tr in beide td-Tags Breitenangaben einbauen. Z.B. für das erste td-Tag: .

cu