Framing auf Index-Seite

Du kannst auf das Bild und die Bildunterschrift einen Link auf die Index.html
machen.

wenn man dann nur den inhaltsframe sieht klickt man auf das Bild und man ist auf der seite mit den Frames.

währe zwar keine beseitigung dieses Problems aber eine Möglichkeit bei den 2 Fällen weiterzukommen.

Moin!

Vermutlich hatten die beiden betroffenen PCs eine schlechte Internetanbindung und nach dem direkten Laden der Seiten waren diese ja im Cache, dann ist logisch daß es anschließend ging.

Am Quelltext kann es nicht liegen, allerdings hätte ich da einiges etwas anders gemacht - ist aber für die Seiten nicht maßgeblich.

Gruß aus der Marsch!

Ronald

Moin!

Das Problem bei Framesets ist, daß durch einen Reload meistens nur die Frameset-Seite (index.htm) neu geladen wird,, die (3) im Frameset dargestellten HTML-Seiten jedoch nicht unbedingt. Dafür müßte man in jedes Frame einzeln hineinklicken und mit dem Kontexmenü der Maus einen reload erzwingen.

Zitat von tebox

Und wenn du Zeit und Lust hast, würde ich mich über konstruktive Kritik freuen

Nun, Lust habeich zu so etwas eigentlich immer, aber an der zeit hapert es - schließlich habe ich ja auch noch einen Job.

Die wichtigsten Fehler mal schnell zusammengefaßt, sie können auch maßgeblich für die fehlende Anzeige sein:

1. index.htm

- es fehlen Angaben zum Dokumententyp
- im Frameset haben Taget-Tags nichts zu suchen
- im Frameset gibt es keinen Body-Bereich

Ich habe mir die ersten 4 Seiten deiner HP auf meinenn PC gezogen und schau an, auch da wollte das Frameset nicht die verlinkten Seiten "Banner" und "Navigation" laden, also gleicher Fehler wie von dir beschrieben. Nach einem Refresh ging es dann. Ich hab die Datei dann mal überarbeitet und der Fehler war sofort weg (auch nach löschen des Cache).

2. banner.htm
Zu umständlich aufgebaut, unnötiger weißer Rand oben, überflüssige Div- und Tabellen-Tags. Weniger ist da mehr, auch wenn es so funktioniert.

3. navigation.htm
Auch hier fehlen die Angaben zum Dokumententyp, die Seite ist für meinen Geschmack schlecht gemacht. Der Hintergrund ist ja ganz nett, aber die Navigations-Button sehen 'billig' aus. Auch würde es harmonischer aussehen, wenn die Abstände zwischen den Button kleiiner wären. Ich würde hier eine Tabelle als Träger für die Navigation einsetzen anstatt der Li-Tags und auch auf die Div-Tags kann man völlig verzichten.
Für die Button würde ich eine Grafik einsetzen.

3. home.htm
... hab ich mir noch nicht näher angeschaut

Ich bin jetzt gerade etwas im Zeitdruck, aber wenn du willst schau ich heute abend weiter, bzw. mach dir mal ein Beispiel wie ich es lösen würde. Bis dahin ...

Gruß aus der Marsch!

Ronald

Melde dich doch mal an, dann können wir Quelltexte per PN austauschen.

Ich schau jetzt mal weiter

G.a.d.M.

Ronald

ok, habe mich registriert

Schön, ich schreib dir grade was

So, nun noch einmal:

Zitat von tebox

Wäre ich schon früher auf das Forum gestoßen, hätte ich mir meine bisherigen Probleme wahrscheinlich schneller gelöst.

Späte Einsicht muß ja nicht zu spät sein

Zitat von tebox

Ronald: Dankeschön, dass Du Dich so schnell und umfassend um meine Problemchen gekümmerst hast. Und ich hoffe natürlich auf weitere Tipps und Hinweise.

Klar, gerne doch - aber vorsicht, ich sage auch was mir nicht gefällt!

Zitat von tebox

zum Framing:
Wenn bei einem Reload nur die Frame-Seite neu geladen wird, ist in meinen Augen ein Mangel des Browsers. Wozu gibt es denn die Reload-Funktion...
Aber man muss sich halt an die Schwächen der verschiedenen Browser anpassen. Hoffentlich ist das Problem nach einer Überarbeitung weg. So ganz verstehe ich aber immer noch nicht, wie das auftauchen konnte.

Nun, eigentlich ist ja nur eine Seite dargestellt -> die index.html. Die wiederum "includiert" drei weitere HTML-Seiten ind die Framesets. Normalerweise sollte bei einem Refresh schon alles neu geladen werden, aber der Auftrag geht eben nur an eine Seite, der index.html....

Zitat von tebox

zur index.htm:
Als ich Angaben zum Dokumententyp in der Index-Datei ergänzt habe, hat die vertikale Ausrichtung des Bildes und der Bildunterschrift nicht mehr gestimmt. Vermutlich sollte man das eher mit CSS machen.

Stylesheets sind immer die bessere Alternative. Du hast alle angezeigten Elemente in div-Tags gelegt. Div-Tags sind im Grunde aber Textelemente und reagieren damit natürlich dann auch anders auf den Dokumententyp als Grafiken.

Zitat von tebox

Außerdem habe ich den Gedanken der Validität schnell wieder verworfen, als ich mir das hier durchgelesen habe:
http://de.selfhtml.org/html/frames/eigenschaften.htm#rahmen
Wenn w3c die Attribute "Framespacing" und "Frameborder" ausgerechnet für den Doctype "Frameset" nicht akzeptiert, dann schüttel ich als Laie nur den Kopf und kümmer mich dann nicht weiter drum.

Ein weiser Entschluß, ich hab das ebenso auch schon lange getan. Wichtig ist, daß die Browser verstehen, was ich von ihnen will und nicht irgendwelche Prgrammierer von Validatoren.

Zitat von tebox

Die Target und die Body-Tags werde ich bei nächster Gelgenheit entfernen.

Das ist schon mal wichtig.

Zitat von tebox

zur banner.htm
Ich habe es mal ohne weißen Rand oben gemacht, da sah es etwas hingequetscht aus. Ich könnts aber noch mal probieren.

Mir gefällt es ohne zusätzlichen Rand besser.

Zitat von tebox

Dass man die Hintergrundfarbe auch ohne Tabelle hinbekommt, habe ich ja in der Naviagtion schon gezeigt, warum ich das nicht auch beim Banner gemacht habe, bleibt ein Rätsel.

Es ist ja noch nicht fertig, nachbessern ist erlaubt

Zitat von tebox

zur navigation.htm
ich war so stolz auf meine Navigation. Auch wenn es professionellere Buttons gibt, ist das schöne an diesen, dass sie komplett mit CSS gemacht wurden auskommen. Ein runder Rand wäre schöner, aber ohne zusätzliche Grafiken geht das so weit ich weiß nicht. Ich bin mir da nicht sicher, ob ich die Buttons dann komplett mit Grafiken ersetzen soll. Ein Genie in solchen Design-Sachen bin ich ja auch nicht.

Man muß auch kein Genie sein, sondern nur hin und wieder die richtige Idee haben. Meine Lösung: 2 Button:einen normal als Hintergrund für die Schrift und einen für einen Hovereffekt. Das ganze wird dann mit CSS realisiert.

Zitat von tebox

Den Abstand zwischen den Buttons kann ich kleiner machen, aber dann hört die Navigationsleiste auf den meisten Rechnern in der oberen Hälfte schon auf. Ich weiß, dass man sich an so etwas nicht nicht ausrichten sollte, ein bischen berücksichtigen tue ich das trotzdem.

Eine Navigation soll zweckmäßig und dabei gleichzeitig harmonisch sein, sich in das Bild der HP unauffällig einfügen ohgne Einschränkung der Funktionen und Erkennbarkeit, wo sich die Navigation befindet. Wird sie unnötig 'aufgebläht', dann stört sie das Bild der HP.

Zitat von tebox

Was für einen Vorteil hat es, in dem Fall die Liste durch eine Tabelle zu ersetzen?

Listenzeichen sind eigentlich nicht als Navigationsträger gedacht (Tabellen auch nicht). Aber Listenzeichen sind textzeichen, d.h. sie reagieren wieder auf Angaben zum Zeichensatz und Dokumententyp. Eine Tabelle tut das zwar auch, aber weniger aufdringlich. Ansonsten ist es eigentlich egal. bzw. geschmackssache, mir schmecken Tabellen eben besser, da man den Rahmen einschalten kann, wenn man einen Fehler sucht.

Zitat von tebox

zur home.htm
da habe ich noch am meisten gepfuscht. die vertikale Ausrichtung des Bildes und der Bildunterschrift dürfte viele Webdesignern misfallen. Da habe ich auf die Schnelle keine Möglichkeit gefunden, das mit CSS zu machen.

Das ist mir jetzt gar nicht aufgefallen, für mich sieht die Seite ziemlich normal aus.

Zitat von tebox

Grüßle aus dem Schwabenland
tebox

Grruß zurück kommt gleich

Ich habe deine HP mal nach meinem Geschmack umgebaut und viel überflüssiges entfernt. Das Resultat sieht dann so aus, gefällt mir noch nicht so ganz, da die Navigation etwas breiter sein könnte. Aber mir fehlt der Rest von der Grafik (also in der Breite nach rechts), falls du das noch irgendwo hast, her damit.

So sieht mein Entwurf jetzt aus, jetzt darfst du kritisieren -> http://web306.server3.webplus24.de/testseiten/uni-hohenheim

Nun aber ....

Gruß aus der Marsch!

Ronald

Edit: ich hab mal eine Version mit abgerundeten Button gemacht -> http://web306.server3.webplus24.de/testseiten/uni-hohenheim2

R.

Diese Antwort geht in erster Linie an Ronald.

So: ich habe einiges gebastelt heute, auch wenn es nach nicht viel aussieht.
die überarbeitete seite kann man anschauen unter:
http://www.mikro.uni-hohenheim.de/test/index.htm
Die Navigation ist von den Konstruktion gleich geblieben, unterscheidet sich aber von der alten doch erheblich, wie man erkennen kann, wenn man sie direkt mit der bisherigen (die noch unter der alten url zu finden ist) vergleicht.

Das Ursprungsbild kann ich dir morgen schicken.

Oh mann, da habe ich dir aber auch ganz schön arbeit aufgehalst. Nochmals vielen dank, dass du dir die mühe machst.

Nun aber zur Webseite
Allgemein:
- Den Doctype habe ergänzt.
- die Robot-Angabe habe ich hinzugeügt, wobei ich nicht weiß, ob sie so wichtig ist. Ist wohl eher ein service an die Suchmaschinen.

Index:
- Den Rand oben habe ich entfernt.
- in meinem Framing habe ich etwas ungewöhnliches gemacht. ich habe die navigationsleiste um 20 pixel breiter gemacht als notwendig und das aus folgendem grund: sollte jemand eine sehr niedrige auflösung haben, dann kann es sein, dass die navigationsleiste nicht auf den bildschirm passt, dann erscheint eine senkrechte scroll-leiste. die passt bei firefox und explorer, bei win98 und winxp in die 20 pixel und dadurch wird eine zusätzliche waagrechte scrolleiste verhindert. außerdem besteht dadurch immer ein angemessener abstand von navigation zu inhalt.
das entspricht wahrscheinlich auch nicht der reinen lehre, aber ich finde die idee trotzdem gar nicht so schlecht.

Banner:
- da habe im wesentlichen deine Überarbeitung übernommen. Den Hintergrund habe ich aber wie die Navigation mit CSS und dem id-attribut gemacht. Ziemlich kompliziert zu erklären, aber ich habe es lieber, wenn nur ein Balken die Hintergrundfarbe hat und nicht der gesamte Frame (z.B. für den Scrollbalken in der Navigation). Dafür habe ich das div-tag genommen (im body gings nicht), so ist das aber auch auf selfhtml angegeben.

Navigation:
- die buttons wirken bislang etwas groß, schwer, klobig und aufgesetzt, deshalb habe ich folgendes gemacht:
a) Hintergrundfarbe von Weiß auf hellblau (e4e4ff)
b) Rahmendicke von "middle" auf "2px" verringert
c) Abstand zwischen den Kästen von 15 auf 10px verringert
d) Schriftgröße von 9px auf 8px verringert
e) Opazität auf 85% eingestellt (filter:alpha(opacity=85); -moz-opacity:0.85; opacity: 0.85;).

- Ich habe festgestellt, dass runde buttons zwar normalerweise feiner aussehen, aber auf meiner seite passen sie nicht, weil die seite insgesamt sehr eckig und kantig ist. Mir gefällt der 3d-effekt auch besser als ein farb-effekt. die farbpalette des rahmens ist auf die offizielle uni-farbe (333399) abgestimmt und grün passt da nicht so.
soweit ich das verstanden habe, funktioniert "onfocus" zusammen mit javascripts. ich bin kein freund von javascripten in der navigation, denn es soll ja leute geben, die javascripte deaktiviert haben.

- vorerst habe ich die navigation als liste belassen, weil ich beim umbau in eine tabelle doch einiges sowohl in der navigation als auch der style.css ändern müsste. und wenn es letztlich eine geschmacksfrage ist, dann spar ich mir (vorerst) die mühe.

- die target-attribute habe ich aus der index-datei gelöscht und in die beiden frame-dateien gepackt. mein html-editor (HAPedit) hat bei dem endtag </base> gemeckert und ich glaube, der ist nicht notwendig.

- ich habe einiges versucht, um die div-elemente zu umgehen, aber solange ich rechts einen weißen 20px-rand und gleichzeitig nach unten die hintergrundfarbe haben will, wirds kompliziert. vor allem der IE macht probleme: entweder er stellt das hintergrundbild nicht dar oder er weigert sich, die buttons über das bild zu legen und verschiebt die sie nach rechts.

Home:
- Seltsam, die vertikale Ausrichtung des Bildes und des Untertitels wurden jetzt nicht mehr durch Eintragen des Doctypes verändert. Hmmm..vielleicht lag es damals doch an was anderem.
Ich fühle mich immmer noch ein bischen unwohl, dass ich eine Layout-Sache wie die vertikale Ausrichtung mit Tabellen mache, aber die Objekte verhalten sich dadurch genau wie ich es haben will, und das mit CSS zu machen ist mir grad zu umständlich, wenn es doch ganz bequem auch so get. Und wenn auch du sagst, dass es mit ner tabelle ok ist, dann belasse ich es dabei.

Moin!

So sieht es schon besser auss, alledings würde ich die Schrift auf den Button nicht rechts ausrichten, sondern links mit ebwas Abstand (text-ident) zum linken rand.
Ich empfinde diese nach rechts ausgerichtete Schrift als Störfaktor, wir sind in Deutschland gewohnt, daß Schrift linksbündig beginnt. Bei deinen Buttonbeschäftig sich mein Gehirn mehr mit der Frage, warum die Schcrift anders ausgerichtet ist, als mit dem Inhalt der HP - das passiert ganz automatisch und man kann es auch nicht beeinflussen.

Auch ist der Hovereffekt falsch, was du da zeigst würde eher "OnClick" entsprechen. Versuchmal folgendes: Den Rahmen bei Hover unverändert lassen, nur die Schrift und Hintergrundfarbe ändern. Oder aber einen anderen Style für den Rahmen benutzen, z.B. groove anstatt solid.

Auch würde ich die einzelnen Button noch dichter zusammenrücken.
Ich hab mal eine Version mit CSS-Button ohne Grafik gemacht, vielleicht kommt das deinen Wünschen ja schon etwas näher: http://web306.server3.webplus24.de/testseiten/uni-hohenheim3/

G.a.d.M.

Ronald

Servus

Blau statt schwarz für die Schrift zu verwenden ist eine ebenso einfache wie sinnvolle Idee. Werde ich übernehmen.

Die Rechtsbündigkeit hatte ich als kleine Design-Besonderheit gedacht. Vermutlich hast du recht, dass es eher störend ist. da frage ich aber noch mal, ob das andere auch so sehen.

die transparanten buttons sehen auf mittel- bis hochauflösenden monitoren fein aus. ich habe das aber jetzt auf älteren monitoren getestet und da sieht es absolut furchtbar aus. sehr schade.

was den hovereffekt angeht: dein vorschlag sieht gar nicht schlecht aus. aber auch da werde ich nochmal bei dritten nachfragen, was sie besser finden.

ich arbeite einfach schon zu lange an der seite, um wirklich beurteilen zu können, was gut aussieht und was eher störend ist. deshalb bin ich froh, dass du mich mich auf einige design-schwächen aufmerksam gemacht hast.

grüßle
tebox

mir sind noch ein paar dinge auf/eingefallen

- wenn bei einem reload an erster stelle die index.htm neu geladen wird, dann sollte mein problem gar nicht netstehen können:
das problem war ja, dass der browser wahrscheinlich versucht hat, auf die alten frame-inhalte zuzugreifen, wie sie in der index-datei standen. vielleicht ist es ja genau umgekehrt: der browser reloadet die frame-inhalte und nicht die frameseite selbst.

- wenn ich den text linksbündig mache und mit "text-ident" einrücke. dann machen die buttons beim ersten hovern allesamt ein kleinen sprung nach links (konnte dies aber nur im IE feststellen)
mit padding-left kann man dieses problem aber umgehen

Zitat von tebox

- wenn ich den text linksbündig mache und mit "text-ident" einrücke. dann machen die buttons beim ersten hovern allesamt ein kleinen sprung nach links (konnte dies aber nur im IE feststellen)

Wenn du die Version schon online hast, dann macht mein IE das nicht, bzw. ich sehe es nicht..
Lösch mal den Cache ?

G.a.d.M.

Ronald

Hallo Ronald,
ich habe deine Ideen für die Buttons mit CSS praktisch 1:1 übernommen. Vielen Dank nochmal, es sieht jetzt echt viel besser aus.

Na das freut einen doch

*lg*

Ronald