[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:
(4914 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:
(4909 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:
(4898 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:
(4896 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:
(4883 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: 9387

13. Okt 2006, 16:40
Beitrag # 6 von 11
Beitrag ID: #256427
Bewertung:
(4882 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

Gruß
Dirk

[levy-media.de MCP]
http://www.levy-media.de


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:
(4875 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:
(4811 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:
(4806 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:
(4795 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:
(4784 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

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
05.02.2021 - 05.11.2021

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Freitag, 05. Feb. 2021, 13.00 Uhr - Freitag, 05. Nov. 2021, 17.00 Uhr

Lehrgang

Bilden Sie sich zum zertifizierten Publishing-Multimedia-Profi aus. Neben Fotografie und Video befassen Sie sich mit der Medienproduktion, digitalen Publikationen und dem Webdesign für Desktop- und mobile Endgeräte.

Preis: CHF 10'500.-
Dauer: 30 Tage (ca. 210 Lektionen) – Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PM

Veranstaltungen
05.03.2021 - 30.04.2021

Digicomp Academy AG, Zürich oder virtuell
Freitag, 05. März 2021, 13.00 Uhr - Freitag, 30. Apr. 2021, 17.00 Uhr

Lehrgang

Im berufsbegleitenden Web Publisher Lehrgang vertiefen Sie Ihr Wissen rund um das Thema Screendesign und die Umsetzung von Websites. Wir befähigen Sie dazu selbständig und professionell Ihren Webauftritt zu planen und in die Realität umzusetzen.

Preis: CHF 3'250.–
Dauer: 8.5 Tage - Unterricht findet jeweils am Freitag von 13 - 19 Uhr und Samstag von 09 - 17 Uhr statt.

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/9PWEB