[GastForen Archiv Adobe GoLive 1. Div-Container soll fixiert werden, 2. soll scrollbar sein

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Archiv - Archivierte Foren
Themen
Beiträge
Moderatoren
Letzter Beitrag

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

Jürgen
Beiträge gesamt: 252

13. Okt 2006, 08:19
Beitrag # 1 von 11
Bewertung:
(5587 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo GoLiver,

ich möchte auf meiner Seite einen Div-Container mit einem Tabellenkopf installieren, der fest am oberen Seitenrand stehen bleibt, während die Tabelle(Container 2) durunter hinweg scrollt.

Mit der Einstellung "position: fixed" habe ich es versucht, aber es funktioniert nicht. Die ganze Seite scrollt.

Hat jemand eine Anleitung oder eine Beispielseite, wo das so gelöst wurde, damit ich einmal "abgucken" kann, wie man das lösen kann?

Vielen Dank im voraus

Jürgen
X

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

SabineP
Beiträge gesamt: 7586

13. Okt 2006, 09:02
Beitrag # 2 von 11
Beitrag ID: #256306
Bewertung:
(5582 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Jürgen,

hier ein Beispiel dazu:
http://www.imaputz.com/.../bigFourVersion.html

Gruß Sabine


als Antwort auf: [#256293]

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

Jürgen
Beiträge gesamt: 252

13. Okt 2006, 11:00
Beitrag # 3 von 11
Beitrag ID: #256346
Bewertung:
(5571 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine.

Danke für deinen tollen Tipp. Habe ich gleich ausprobiert. Das ergebnis siehst du unter:

http://www.elis-webdesign.de/test2.html

Der IE zeigt das alles auch ganz toll an, nur Mozilla und Firefox tun sich schwerer damit.

Bei beiden stimmt die zweite Kopfzeile nicht bündig mit den senkrechten Spalten und die Tabelle "verspringt" unten in den Spalten. D.h. wo senkrecht mehrere Zeilen verbunden sind funktioniert das nicht immer.

Vielleicht kannst Du mir auch hier noch helfen.

Vielen Dank im voraus.

Jürgen


als Antwort auf: [#256306]

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

SabineP
Beiträge gesamt: 7586

13. Okt 2006, 11:37
Beitrag # 4 von 11
Beitrag ID: #256352
Bewertung:
(5569 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Jürgen,

>> nur Mozilla und Firefox tun sich schwerer damit.

Das ist kein Wunder bei 307 Fehlern im HTML-Code:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.elis-webdesign.de%2Ftest2.html

Gruß Sabine


als Antwort auf: [#256346]

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

Jürgen
Beiträge gesamt: 252

13. Okt 2006, 16:09
Beitrag # 5 von 11
Beitrag ID: #256424
Bewertung:
(5556 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine.

Danke für den Tipp mit dem Validator.

Ehrlich gesagt, die meisten Fehlermeldungen verstehe ich nicht. Warum darf ich solche Dinge wie "marginwidth", "marginheight", "size", "face" "nowrap" , "font" usw. nicht verwenden. Sind das denn nicht ganz normale tags?

Ich habe mittlerweile alle Schriften auf CSS umgestellt und damit die meisten Fehler beseitigt. Es sind nun noch 22 Stück. Meistend die oben beschriebenen.

Vielleicht weißt Du ja Antwort auf die o.g. Frage.

Ebenso bin ich immer noch nicht damit klar, weshalb Firefox und Mozilla die zweite Kopfzeile falsch anzeigen und diese iom IE prima läuft.

Vielleicht weißt Du auch hier Rat.

Vielen Dank


als Antwort auf: [#256352]

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

Dirk Levy
  
Beiträge gesamt: 9462

13. Okt 2006, 16:40
Beitrag # 6 von 11
Beitrag ID: #256427
Bewertung:
(5555 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hi,

weil Du das z.B. über den Bodytag via CSS
lösen kannst:

<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

so als Beispiel:

body { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; margin: 0; padding: 0; }

Dann steht immer noch das da drinnen:

<font size="4" face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">

Mach dafür doch auch einen Tag, z.B. H2 mit den Werten.

Am Ende der Seite ist noch ein überflüssiges: <p></p>

Evtl. bringt das noch ein wenig


als Antwort auf: [#256424]

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

SabineP
Beiträge gesamt: 7586

13. Okt 2006, 17:14
Beitrag # 7 von 11
Beitrag ID: #256438
Bewertung:
(5548 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Jürgen,

>> Warum darf ich solche Dinge wie "marginwidth", "marginheight", "size", "face" "nowrap" , "font" usw.
>> nicht verwenden. Sind das denn nicht ganz normale tags?

Der Dokumenttyp ist XHTML Strict, da sind solche Tags nicht erlaubt.
Ändere den Dokumenttyp auf XHTML Transitional und dann schau Dir die Seite in einem deutschsprachigen Validator an:

http://www.validome.org/

Da finden sich dann fehlende <th>-Tags.
Dadurch kann eine Tabelle schlimm zerschossen werden.

Entferne mal noch die Angabe für die Tabellenbreite und die Angabe für die Zeilenhöhe
<tr height="31">

Gruß Sabine


als Antwort auf: [#256424]
(Dieser Beitrag wurde von SabineP am 13. Okt 2006, 17:15 geändert)

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

Jürgen
Beiträge gesamt: 252

16. Okt 2006, 09:29
Beitrag # 8 von 11
Beitrag ID: #256641
Bewertung:
(5484 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine, hallo Dirk,

Danke für Eure Tipps und Hilfen. Ich habe nun alle Änderungen vorgenommen und der deutsche Validator zeigt nun keine Fehler mehr an.

Trotzdem zeigen Firebird und Mozilla die zweite Kopfzeile nicht bündig zur Tabelle an.
Habt Ihr noch einen Tipp, wo der Fehler liegen kann?

http://www.elis-webdesign.de/test2.html

Vielen Dank im voraus

Jürgen


als Antwort auf: [#256438]

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

SabineP
Beiträge gesamt: 7586

16. Okt 2006, 11:41
Beitrag # 9 von 11
Beitrag ID: #256680
Bewertung:
(5479 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Jürgen,

das Problem ist, daß Dein HTML-Code nicht mehr zu den CSS-Angaben paßt.

Folgendes kannst Du tun:

1. alle Breitenangaben width="" aus dem HTML-Code der Tabelle entfernen

2. Den Abschnitt <thead> anpassen:

Der Orginalcode sah so aus:

<thead class="fixedHeader">
<tr>
<th><a href="#">Header 1</a></th>
<th><a href="#">Header 2</a></th>
<th><a href="#">Header 3</a></th>
</tr>
</thead>

Dein Code sieht so aus:

<thead class="fixedHeader">
<tr>
<th colspan="6" nowrap="nowrap" width="690" height="31">
<div align="center">
<h2>Veranstaltungen im 2. Halbjahr 2006 nach Orten sortiert</h2>
</div>
</th>

</tr>

<tr>
<td valign="top" bgcolor="#ffffcc" width="40"></td>
<td bgcolor="#ffffcc" width="40"><span class="fett">PLZ</span></td>
<td bgcolor="#ffffcc" width="83"><span class="fett">Vortragsort:</span></td>
<td bgcolor="#ffffcc" width="78"><span class="fett">Termin:</span></td>
<td bgcolor="#ffffcc" width="262"><span class="fett">Thema:</span></td>
<td bgcolor="#ffffcc" width="178"><span class="fett">Anmeldung</span></td>

</tr>
</thead>

Der Code müßte so geändert werden:

<thead class="fixedHeader">
<tr>
<th colspan="6" nowrap="nowrap">
<div align="center">
<h2>Veranstaltungen im 2. Halbjahr 2006 nach Orten sortiert</h2>
</div>
</th>
</tr>

<tr>
<th valign="top">&nbsp;</th>
<th><span class="fett">PLZ</span></th>
<th><span class="fett">Vortragsort:</span></th>
<th><span class="fett">Termin:</span></th>
<th><span class="fett">Thema:</span></th>
<th><span class="fett">Anmeldung</span></th>
</tr>
</thead>

Nun sieht die Tabelle ordentlich aus.

Als nächstes brauchst Du noch eine neue Klasse für die gelbe Hintergrundfarbe.
Das schreibe ich Dir dann, wenn Du mit diesem Arbeitsschritt fertig bist.

Gruß Sabine


als Antwort auf: [#256641]
(Dieser Beitrag wurde von SabineP am 16. Okt 2006, 11:41 geändert)

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

Jürgen
Beiträge gesamt: 252

16. Okt 2006, 17:00
Beitrag # 10 von 11
Beitrag ID: #256795
Bewertung:
(5468 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Sabine,

Danke für diwe Tipps, es sieht schon recht gut aus. Nur, die Spaltenbreiten der zweiten Kpfzeile und der Tabell "passen" noch nicht übereinander.

Kann man da noch was einstellen?

Auch danke ich bereits jetzt für Deinen Tipp für die neue Klasse mit gelbem Hintergrund.

Jürgen


als Antwort auf: [#256680]

1. Div-Container soll fixiert werden, 2. soll scrollbar sein

SabineP
Beiträge gesamt: 7586

16. Okt 2006, 19:37
Beitrag # 11 von 11
Beitrag ID: #256822
Bewertung:
(5457 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo Jürgen,

da stimmt mit der Breite etwas nicht, insbesondere in diesem Abschnitt:

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body thead.fixedHeader th { width: 690px }
html>body thead.fixedHeader th + th { width: 500px }
html>body thead.fixedHeader th + th + th { width: 500px }

/* define width of TD elements: 1st, 2nd, and 3rd respectively. */
/* All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */
html>body tbody.scrollContent td { width: 600px }
html>body tbody.scrollContent td + td { width: 600px }
html>body tbody.scrollContent td + td + td { width: 600px }

Ich bin mir nicht sicher, ob das in Verbindung mit dem colspan=6 in der ersten Zeile der Tabellenüberschrift überhaupt richtig wie gewünscht funktioniert.

Gruß Sabine


als Antwort auf: [#256795]
X