[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:
(5588 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:
(5583 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:
(5572 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:
(5570 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:
(5557 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: 9464

13. Okt 2006, 16:40
Beitrag # 6 von 11
Beitrag ID: #256427
Bewertung:
(5556 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:
(5549 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:
(5485 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:
(5480 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:
(5469 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:
(5458 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
14.05.2024

Online
Dienstag, 14. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Prozessoptimierung ist ein Teamsport! Keine Software und keine Maschine allein kann Ihnen helfen, die Effizienzpotenziale Ihres Betriebes maximal auszuschöpfen. Von der Auftragsannahme über die Vorstufe und den Druck bis hin zur Weiterverarbeitung – alles muss optimal ineinandergreifen. Apropos Weiterverarbeitung – in vielen Druckbetrieben fristet sie in Sachen Prozessoptimierung immer noch ein Schattendasein. Dabei liegen hier mittlerweile die größten Einsparpotenziale! In einem Webinar von Horizon und Impressed erfahren Sie, wie Sie diese Einsparungen realisieren können. Horizon, bekannt für innovative Lösungen in der Druckweiterverarbeitung, bietet mit iCE LiNK eine Workflowlösung für die Weiterverarbeitung. iCE LiNK überwacht, visualisiert und analysiert Produktionsabläufe und unterstützt bei der Wartung – damit immer alles reibungslos läuft. Den gleichen Anspruch hat der von Impressed entwickelte Impressed Workflow Server – er ist die smarte PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt. Im Webinar zeigen Ihnen die Experten von Horizon und Impressed, wie beide Lösungen im Team die Effizienz und Produktivität Ihres Betriebes steigern können. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Ja

Organisator: Impressed / Horizon

https://www.impressed.de/schulung.php?c=sDetail&sid=327

Einsparpotenziale in der Weiterverarbeitung
Veranstaltungen
16.05.2024

Online
Donnerstag, 16. Mai 2024, 10.00 - 10.30 Uhr

Webinar

Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Günther Business Solutions und Impressed treten in einem Webinar den Gegenbeweis an. Experten beider Unternehmen zeigen, wie Großformatdrucker vom Einsatz zweier bewährter Lösungen profitieren können: • von advanter print+sign von Günther Business Solutions, dem ERP-System für den Großformatdruck, dass alle Phasen der Wertschöpfung im Large Format Printing abdeckt • von Impressed Workflow Server, der smarten PDF-Workflow-Lösung für Druckereien, die Datenmanagement, Preflight und Produktionssteuerung übernimmt Über die Kombination beider Lösungen können Großformatdrucker ihre Prozesse mit modernen Workflows Schritt für Schritt automatisieren – und so zügig deutliche Zeit- und Kosteneinsparungen realisieren. Das Webinar sollten Sie sich nicht entgehen lassen – damit Sie keine Effizienzpotenziale mehr liegen lassen. Melden Sie sich am besten gleich an, wir freuen uns auf Sie! PS: Melden Sie sich in jedem Fall an – sollten Sie zum Termin verhindert sein, erhalten Sie die Aufzeichnung.

kostenlos

Nein

Organisator: Impressed / Günther Business Solutions

https://www.impressed.de/schulung.php?c=sDetail&sid=326

Und es geht doch: Automatisierung im Großformatdruck!