Zur Navigation

Frames durch Tabellen ersetzen [2]

11 Jörg Kruse

Ja, die Tabelle ist auch nur 90% hoch, den Wert musst du noch auf 100% erhöhen:

<table height="100%" cellpadding="0" cellspacing="0" border="0"><tbody>

Ich find das übrigens super, daß du immer so rasch antwortest. So macht Neues dazulernen richtig Spaß, wenn man im Zweifelsfall auch immer nette Helfer zur Hand hat :)))) Großes Lob und Danke!

Danke für die Blumen :)

PS: Die Dreamweaver-Frage trenne ich mal in einen eigenen Thread ab ;)

14.11.2006 09:06 | geändert: 14.11.2006 09:10

12 lava

Heute bin ich nicht sehr viel weiter gekommen. Beim Versuch, gewünschte Änderungen vorzunehmen, kam ich ganz durcheinander und dann ging gar nichts mehr und dann half nur noch die zum Glück gesicherte Datei (uff)....


Auf http://sm.ismine.de/play2 steht die aktuellste Version. Eigentlich will ich aber, daß die Navi-Leiste nicht mitscrollt, sondern nur die rechte <td>

Mein Versuch, einfach in der rechten <td> das overflow:auto und in der linken overflow:hidden jeweils innerhalbs eines div-Bereichs einzufügen scheiterte .... warum ??? Die Navi-Leiste paßt doch in die Bildschirmgröße rein und könnte theoretisch stehenbleiben, das <div> ist doch nur innerhalb der <td> definiert....

16.11.2006 00:47 | geändert: 16.11.2006 01:18

13 Jörg Kruse

Hallo lava,

der scrollende Bereich funktioniert auch nur im IE einigermaßen. Firefox und Opera schneiden zudem die Navigation ab, wohl aufgrund des unnötigen overflow:hidden

In dem mehrfach verschachtelten Tabellen-Code ist es leider etwas schwer durchzusteigen. Die Überprüfung mit dem Validator zeigt, dass einige Elemente nicht korrekt geschlossen sind - das solltest du auf jeden Fall korrigieren, da es sonst zwangsläufig zu Anzeigefehlern kommt

Was die divs mit der Eigenschaft overflow anbelangt, benötigst du eigentlich nur ein einziges. Mehrere ineinander verschachtelte divs mit der Eigenschaft overflow:auto führen zu nicht vorhersehbaren Ergebnissen (Opera zeigt dann z.B. gar nichts mehr an). Wenn du möchtest, dass der Text und die Bilder gemeinsam (aber unter Ausschluss der Navigation) scrollen, musst du diese in einer gemeinsamen Tabellenzelle unterbringen, in die du ein div mit der Eigenschaft overflow:auto platzierst. Alle andere Bereiche brauchst du nicht mehr krnnzeichnen mit einer overflow Eigenschaft, bei overflow:hidden führt dies im ungünstigen Fall nur dazu, dass etwas ungewollt abgeschnitten wird

Für den zu scrollenden Bereich benötigst dann auch noch eine Höhen- und Breitenangabe, damit die Browser wissen, ab wann der overflow beginnt. Bei festen px Angaben sollte es keine weiteren Probleme geben. Wenn du mit Prozentwerten arbeitest, müssen auch für das Elternelement (in diesem Fall die Tabellenzelle) Höhen- und Breitenangaben festgelegt werden - entweder fixe oder wiederum prozentual aufs eigene Elternelement (in diesem Fall die tr) bezogene. Die Browser müssen ja wissen, worauf sie die Prozentwerte beziehen sollen.

16.11.2006 09:44 | geändert: 16.11.2006 09:47

14 lava

Hallo, was ist ein Validator? Wo gibt es sowas??? Gibt es das als Freeware? Kannst du damit verschiedene Browser testen, oder hast du wirklich so viele Browser auf deinem System? Stimmt, daß es unter Linux auf einem localen xampp-Server mit dem Browser Konqueror nicht klappte mit dem Scrollen, das war mir leider gestern auch schon aufgefallen. Um dieses Problem hab ich mich heute jetzt noch nicht gekümmert...was kann man da denn machen? Ist also die Methode "Frames durch Tabellen mit PHP-Includes ersetzen" doch nicht so optimal? Denn mit Frames wär diese Scrolling-Sache ja ganz einfach so zu realisieren gewesen, wie ich es wollte. Zumindest für den Internet-Explorer hab ich es jetzt auch. Bin den Code von gestern nochmal systematisch durchgegangen. Du hattest recht, da waren blöde Schusselfehler drin. Vor allen Dingen hab ich aber in einer der verschachtelten Innentabellen ein height=100% vergessen gehabt und deswegen ging es nicht so, wie ich wollte. Ich war ja auch ziemlich müde gestern abend gewesen zum Schluß und entnervt, weil ich ziemlich viel Zeit damit vergeudet hatte, eine Änderung (ohne vorheriges Sichern) wieder rückgängig zu machen. Egal, jetzt labere ich zuviel. Jedenfalls steht jetzt auf http://sm.ismine.de/STATUS die Version so, wie ich sie gestern schon haben wollte. Vielleicht kannst du mit deinem Validator nochmal prüfen, ob ich jetzt sauber genug gearbeitet habe.....
Wie kann ich browserunabhängiger programmieren?
Danke und liebe Grüße!

16.11.2006 18:26 | geändert: 16.11.2006 21:38

15 Jörg Kruse

Hallo lava,

die aktuelle Version scheint hinsichtlich des Scrollbereiches in allen wichtigne Browsern zu funktioniern - Glückwunsch :)

was ist ein Validator? Wo gibt es sowas? Gibt es das als Freeware?

In diesem Thread hatte ich einige Validatoren aufgeführt, die man online verwenden kann.

Kannst du damit verschiedene Browser testen, oder hast du wirklich so viele Browser auf deinem System?

Man kann mit den Validatoren die eigenen Fehler ausfindig machen, aber nicht die Fehler der Browser - für letztere muss man dann doch nochmal testen. Ich habe zum Testen auch eine ganze Batterie von Browsern ;) In diesem Thread hatte ich mal Testmöglichkeiten aufgeführt:

Test-Browser für Windows

Wie kann ich browserunabhängiger programmieren?

Indem du dich stärker an den HTML- und CSS-Standards ausrichtest - letztendlich richten sich ja auch die Browser danach aus - wenn auch mit mehr oder weniger großen Abstrichen. Überprüfen kannst du deine Seiten hierzu mit den oben erwähnten Validatoren

Vielleicht interessant in diesem Zusammenhang noch folgender Text, den ich mal zur Fehleranalyse von HTML-Seiten geschrieben hatte - dort habe ich auch beschrieben, wie man aus meiner Sicht am besten beim Erstellen von HTML-Seiten vorgeht:

http://notizen.joergkrusesweb.de/n-2005-11/fehler-analyse.html

16.11.2006 21:56 | geändert: 16.11.2006 22:01

16 lava

So, meine aktuelle Version steht unter http://sm.ismine.de/STATUS

Ich verstehe selbst noch nicht ganz, wieso der Navi-Balken mal schmaler, mal breiter angezeigt wird.

Auf der Home-Seite gefällt mir der ausgefranste Rand neben dem Foto des Anwalts noch nicht. Das Foto ist einfach mit align=right eingefügt, diesmal hab ich nicht nochmal extra eine Tabelle eingebaut. Vor allem aber deswegen nicht, weil der Text ja länger ist als das Bild und ich dann nicht wüßte, wieviel Textabsätze ich in dieselbe Tabellenzeile setzen müßte wie das Bild. Gibt es da einen Trick, damit das ordentlich aussieht?

Und wie kann ich bei den Fotos die Farbe des Randes festlegen? Auf Home wurde die automatisch schwarz und bordercolor wurde nicht akzeptiert als Schlüsselwort? Auch in der Lebenslauftabelle hab ich "gepfuscht" und ein paar Breaks <br> gesetzt an sinnvollen Stellen, damit es im aktuellen Browser hübsch aussieht (aber vielleicht wäre das nicht in jedem Browser nötig; gäbe es einen "wenn-du-abbrechen-mußt-dann-bitte-hier"-Tag statt "brich-auf-jeden-Fall-ab" ?) und auch beim "Beruflichen Werdegang" hab ich in der Nebenzeile ein <br> reingesetzt, damit der nebenstehende Text erst auf derselben Höhe wie der "Werdegang" anfängt (was ja nur nötig ist, wenn Berufl.Werdegang umgebrochen wurde, also bräuchte ich auch da eine ausgefeiltere Lösung....oder regelt ihr Profi-Webdesigner sowas wirklich alles mit CSS ????)

Hast du überhaupt noch irgendwelche nützlichen Tips für das Layout der Seite? Bin inzwischen so weit, auch offen für Kritik zu sein :)

LG, Lava

20.11.2006 19:11 | geändert: 20.11.2006 19:24

17 Jörg Kruse

Hallo lava,

Ich verstehe selbst noch nicht ganz, wieso der Navi-Balken mal schmaler, mal breiter angezeigt wird.

Ja, Firefox zeigt auf der Startseite auch den merkwürdigen Effekt, dass die Navigation nachträglich verkleinert wird, wenn der Hauptteil eingeblendet wird. Woran dies liegt, kann ich auf Anhieb nicht erkennen, möglicherweise aber an dem kaputten Quelltext.

Mitten im Quelltext finden sich z.B. Bruchstücke einer weiteren Datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Über den Anwalt </title>
</head>

<body>
</body>
</html>

Die sollten nur einmal im Quelltext vorkommen. Ich vermute mal, dass Opera deswegen den Hauptteil nicht anzeigt, und Firefox bisweilen erst nach einem Reload

Auf der Home-Seite gefällt mir der ausgefranste Rand neben dem Foto des Anwalts noch nicht. Das Foto ist einfach mit align=right eingefügt, diesmal hab ich nicht nochmal extra eine Tabelle eingebaut. Vor allem aber deswegen nicht, weil der Text ja länger ist als das Bild und ich dann nicht wüßte, wieviel Textabsätze ich in dieselbe Tabellenzeile setzen müßte wie das Bild. Gibt es da einen Trick, damit das ordentlich aussieht?

So ganz habe ich noch nicht verstanden, was du mit ordentlich meinst - soll sich die Position des Bildes ändern, und wenn ja wohin?

Und wie kann ich bei den Fotos die Farbe des Randes festlegen? Auf Home wurde die automatisch schwarz und bordercolor wurde nicht akzeptiert als Schlüsselwort?

Das kannst du am besten mit CSS:

<img src="../marco1/images/sitzb.jpg"  width="200px" align="right" style="border:5px solid #f00" alt=""  />

Auch in der Lebenslauftabelle hab ich "gepfuscht" und ein paar Breaks <br> gesetzt an sinnvollen Stellen, damit es im aktuellen Browser hübsch aussieht (aber vielleicht wäre das nicht in jedem Browser nötig; gäbe es einen "wenn-du-abbrechen-mußt-dann-bitte-hier"-Tag statt "brich-auf-jeden-Fall-ab" ?)

Es gibt erlaubte Umbrüche in HTML, siehe dieses Kapitel auf SelfHTML:

http://de.selfhtml.org/html/text/zeilenumbruch.htm#erlauben

Leider reagieren die Browser hier sehr uneinheitlich, so dass im Fall des Falles wirklich nur ein zwangweises <br /> hilft

und auch beim "Beruflichen Werdegang" hab ich in der Nebenzeile ein <br> reingesetzt, damit der nebenstehende Text erst auf derselben Höhe wie der "Werdegang" anfängt (was ja nur nötig ist, wenn Berufl.Werdegang umgebrochen wurde, also bräuchte ich auch da eine ausgefeiltere Lösung....oder regelt ihr Profi-Webdesigner sowas wirklich alles mit CSS ????)

Vielleicht wäre eine Definition List (dl) hier das geeignetere Element:

<dl>
<dt>1983 - 1996 :</dt>
<dd>Grundschule und Gymnasium ...</dd>
<dt>1996 – 1997 :</dt>
<dd>Wehrdienst als Stabsdienstsoldat ...</dd>
<!-- etc. -->
<dt>Beruflicher Werdegang:</dt>
<dd>zum 14.7.2006 Zulassung als Rechtsanwalt ...</dd>
<!-- etc. -->
</dl>

20.11.2006 21:54 | geändert: 20.11.2006 21:56

18 lava

Bruchstücke einer weiteren Datei? Hm, wenn ich früher mit einem normalen Editor Webseiten geschrieben habe, hatte jede html-Datei mit <html><head></head><body></body></html> und diesen Doctype-Kram und so hatte ich gar nicht. Den setzt Dreamweaver automatisch ein, muß ich also killen?

Und vermutlich dürfen auch die PHP-Seiten, welche included werden sollen, die o.g. Tags nicht haben, das hatte ich aus alter Gewohnheit für reine HTML-Seiten wohl nicht bedacht.

Habe es jetzt geändert (http://sm.ismine/STATUS). Die Breite der Navigationsliste ändert sich aber immer noch.


Was die Sache mit dem Foto auf der Startseite angeht: Bei mir im Browser hat das Foto etwa die Höhe der ersten beiden Absätze. Statt das dann mitten im 2. Absatz der Text anfängt, unter dem Foto weiterzufließen, hätte ich gern eine Tabelle, wo in der ersten Zeile Text der ersten 2 Absätze und Foto mittig dazu ausgerichtet nebeneinander stehen(wo also nicht der Text des 2. Absatzes unter dem Foto weiterfließt) und den 3. Absatz dann als 2. zellenverbindende Zeile unter allem. Aber ich weiß ja auch, daß bei anderer Bildschirmgröße vielleicht das Foto nicht so groß ist wie die ersten beiden Absätze, sondern vielleicht nur wie einer oder wie drei. Also, ich will halt, daß der Text erst anfängt über die ganze Breite zu gehen, wenn ein Absatz fertig ist. Denn so, wie das Foto jetzt "umflossen" wird, sieht das alles irgendwie "ausgefranst" aus, finde ich (vielleicht auch deshalb, weil es kein Blocksatz ist).

Noch eine blöde Frage: wenn ich eine Zeile einrücken will, kann ich das auch außer mit lauter &nbsp; auch mit einem "rücke um soviel Pixel ein"-Befehl machen? Wie heißt der?

Nochmal danke und liebe Grüße!

21.11.2006 18:56

19 Jörg Kruse

Ein Doctype sollte schon rein, aber nur einmal am Anfang der Seite.

Und vermutlich dürfen auch die PHP-Seiten, welche included werden sollen, die o.g. Tags nicht haben, das hatte ich aus alter Gewohnheit für reine HTML-Seiten wohl nicht bedacht.

Achso, du hast die Dateien so includet, wie Frames in Framesets eingebunden werden? Die Includes sind im Gegensatz zu den Frames keine eigenständige Dateien, beim Includieren werden nur die Elemente eingefügt, die noch benötigt werden

Was die Sache mit dem Foto auf der Startseite angeht: Bei mir im Browser hat das Foto etwa die Höhe der ersten beiden Absätze. Statt das dann mitten im 2. Absatz der Text anfängt, unter dem Foto weiterzufließen, hätte ich gern eine Tabelle, wo in der ersten Zeile Text der ersten 2 Absätze und Foto mittig dazu ausgerichtet nebeneinander stehen(wo also nicht der Text des 2. Absatzes unter dem Foto weiterfließt) und den 3. Absatz dann als 2. zellenverbindende Zeile unter allem. Aber ich weiß ja auch, daß bei anderer Bildschirmgröße vielleicht das Foto nicht so groß ist wie die ersten beiden Absätze, sondern vielleicht nur wie einer oder wie drei. Also, ich will halt, daß der Text erst anfängt über die ganze Breite zu gehen, wenn ein Absatz fertig ist. Denn so, wie das Foto jetzt "umflossen" wird, sieht das alles irgendwie "ausgefranst" aus, finde ich (vielleicht auch deshalb, weil es kein Blocksatz ist).

Du kannst die ersten beiden Absätze in einem gemeinsamen div unterbringen und dieses mit einem rechten Innenabstand (padding-right) auszeichnen in etwas mehr als der Breite des Bildes

<div style="padding-right:220px">Lieber Besucher, <br /><br />
ich  freue mich, dass Sie sich für meine Kanzlei interessieren. 

<!-- etc. -->

 und kann Ihnen daher eine bestmöglichste Mandatsbearbeitung bieten. <br /><br /></div>

Dann wird erst der dritte Absatz unter das Bild umfließen

Noch eine blöde Frage: wenn ich eine Zeile einrücken will, kann ich das auch außer mit lauter &nbsp; auch mit einem "rücke um soviel Pixel ein"-Befehl machen? Wie heißt der?

Mit margin-left oder mit padding-left, z.B.:

<p style="margin-left:20px">Blablas</p>

21.11.2006 19:44 | geändert: 21.11.2006 19:45

20 lava

Nun doch mal eine Frames-Frage. Der Anwalt wurde langsam ungeduldig (braucht plötzlich etwas auf die Schnelle, obwohl es immer hieß bisher, ich könne mir Zeit lassen) + das, was er haben will stattdessen, glaubte ich ganz leicht mit Frames realisieren zu können. Das steht jetzt unter http://sm.ismine.de/marcoFF
Aber ich weiß zwar, wie ich die Höhe von Frames absolut oder prozentual angebe und auch, daß ich * zum Selberwählen der Höhe setzen kann, aber wenn ich *,*,*,* angebe, kann ich dem System nicht vermitteln, daß ich gern die oberen beiden * minimal (so groß es für die Anzeige halt nötig ist) und das untere * auch haben will, aber im Main-Teil scrollen möchte (das kann ich vermitteln, mit scrolling=yes, und bei den anderen Frames halt scrolling=no) und der soviel Platz wie möglich haben soll (das kann ich nicht vermitteln, oder????? wie???) Also der Browser soll jetzt das Logo und die Navi und die Adreßzeile halt so darstellen, daß sie draufpassen, und für das Hauptteil halt soviel Platz nehmen wie übrig bleibt -das möchte ich gerne sagen.....

kann ich dann eigentlich als <noframes>-Variante noch mein PHP reinpacken, wenn das auch irgendwann noch fertig wird.....

Mal noch eine Frage (und ich hoffe, jetzt mach ich mich hier nicht lächerlich, wo ich doch dauernd so viele Technikfragen noch habe + wirklich weiß, daß ich kein Profi bin): Wenn das jetzt nicht für einen Bekannten wäre, sondern wenn ich als freiberufl. Webmaster für jemanden im Auftrag so eine Seite machen würde, wieviel würde ich dann verlangen können?
a) falls ich PHP könnte und die Seite inzwischen fertig + komplett so aussähe, wie ich sie ursprünglich anvisiert hatte + wenn der Quellcode jetzt durch und durch valide wäre und der Navi-Balken nicht mehr in der Breite variieren tät etc. b) wenn's wirklich nur so'n Frames-Konstrukt wär

(und c) was müßte ich außer den bisher angepeilten Zielen noch alles lernen/ mir anschaffen, damit ich die Chance hätte, wirklich eine "ordentliche" Webmistress zu werden??? das ich bis jetzt noch ziemlich unerfahren bin, streite ich ja gar nicht ab!)

22.11.2006 21:07 | geändert: 22.11.2006 21:12