Bitte prüfen ob Umsetzung von Tabellenlayout zu CSS so ok ist

[Mike©]

Moin @ All,

es war ein harter Kampf, aber meiner Meinung nach habe ich es geschafft.

Ich habe die bestehende Page (links oben im Posting Header) umgesetzt nach Strict und das Tabellenlayout ersetzt durch CSS. Momentan nur die Indexpage, daher funktionieren die Links noch nicht.

Da ich alle Pages so anpassen möchte, aber keine Nachfolgefehler durch schleppen möchte, wollte ich Euch bitten das Ergebnis mal zu prüfen. Das HTML ist valide und das CSS bis auf overflow-y auch.

Die Browser IE, NS 7.0, FF und Opera zeigen das gewünschte Ergebnis.

Aus den oben genannten Gründen, bitte ich um Hinweise auf evtl. Fehler im Style-Sheet etc.

Entwicklungslink: http://ladenbuerger.dnip.net/no_tables/index.php

Danke & regds
Mike©

[MudGuard]

Hi,

es war ein harter Kampf, aber meiner Meinung nach habe ich es geschafft.

Sollen die Links treppenförmig in den weißen Bereich (oberhalb des nervigen Zappelbilds) reinragen?
Oder sollten die eher untereinander im linken Balken liegen?

cu,
Andreas

[Mike©]

Moin Andreas,

Sollen die Links treppenförmig in den weißen Bereich (oberhalb des nervigen Zappelbilds) reinragen?
Oder sollten die eher untereinander im linken Balken liegen?

Ähm, eigentlich untereinander :-( Ich dachte das Problem hätte ich behoben, damit habe ich nämlich den ganzen Tag gekämpft. *HEUL*

regds
Mike©

[Ingo Turski]

Hi,

Das HTML ist valide

aber ziemlicher Murks. Du weißt, wozu div und span eigentlich dienen sollten und welche Elemente es noch so gibt? Mit diesem Code hast Du herzlich wenig verbessert,

Aus den oben genannten Gründen, bitte ich um Hinweise auf evtl. Fehler im Style-Sheet etc.

wieso des CSS? Das kannst Du doch jederzeit korrigieren, ohne die HTML-Dateien anzufassen.
Aber da Du fragst:

• Schriftfamilien mit mehreren Worten gehören in Quotes
• pt ist erine für den Ausdruck geeignete Einheit
• ansdonsten mischt Du auch noch em und px bei den Schriftgrößen; sehr ungünstig.
• bei Verwendung von em solltest Du für body z.B. font-size:100.1% definieren.

freundliche Grüße
Ingo

[Mike©]

Moin Ingo,

aber ziemlicher Murks. Du weißt, wozu div und span eigentlich dienen sollten und welche Elemente es noch so gibt? Mit diesem Code hast Du herzlich wenig verbessert,

Das habe ich so bereits befürchtet. *FRUST*

• Schriftfamilien mit mehreren Worten gehören in Quotes

Das ist mir neu.

• ansdonsten mischt Du auch noch em und px bei den Schriftgrößen; sehr ungünstig.

Weil ich dem, von Andreas bereits erwähnten "Treppen Effekt" nicht anders entkommen bin. (Trugschluß: Es gibt ihn wohl immernoch)

*ICH BIN BEMÜHT*

regds
Mike©

[Ingo Turski]

Hi,

• ansdonsten mischt Du auch noch em und px bei den Schriftgrößen; sehr ungünstig.

Weil ich dem, von Andreas bereits erwähnten "Treppen Effekt" nicht anders entkommen bin. (Trugschluß: Es gibt ihn wohl immernoch)

Ich konnte einen solchen zwar nicht entdecken, aber wenn Du einheitlich em verwendest - ggfls. auch für die Breiten - dann könnte dies vielleicht auch dabei helfen.

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

Ich konnte einen solchen zwar nicht entdecken, aber wenn Du einheitlich em verwendest - ggfls. auch für die Breiten - dann könnte dies vielleicht auch dabei helfen.

Bei mir tritt er auf, wenn ich im IE die Schrift verkleinere.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Ich konnte einen solchen zwar nicht entdecken, aber wenn Du einheitlich em verwendest - ggfls. auch für die Breiten - dann könnte dies vielleicht auch dabei helfen.

Bei mir tritt er auf, wenn ich im IE die Schrift verkleinere.

was genau bei der Mischung der Einheiten zu erwarten war, da pt und px im IE nicht skaliert werden, em jedoch schon.

freundliche Grüße
Ingo

[Mike©]

Moin Ingo, Detlef

Bei mir tritt er auf, wenn ich im IE die Schrift verkleinere.
was genau bei der Mischung der Einheiten zu erwarten war, da pt und px im IE nicht skaliert werden, em jedoch schon.

ich habe jetzt, soweit wie möglich, die Einheiten durch em ersetzt. Der "Treppeneffekt" taucht nun, weder beim Verleinern noch beim Vergrößern der Schrift, bei mir nicht mehr auf.

regds
Mike©

[Detlef G.]

Hallo Mike

ich habe jetzt, soweit wie möglich, die Einheiten durch em ersetzt. Der "Treppeneffekt" taucht nun, weder beim Verleinern noch beim Vergrößern der Schrift, bei mir nicht mehr auf.

Hoffentlich s. https://forum.selfhtml.org/?t=113143&m=718068

Dafür hast du jetzt:

  
#InhaltCenter  
{  
  ...  
  margin-top:1.0em;  
  height:75%;  
  overflow:auto;  
}  

Das sorgt kleinerern Browserfenstern für doppelte Scrollbalken und bei
größeren Fenstern dazu, das ein Teil des Platzes unnötig verschenkt wird.

Auf Wiederlesen
Detlef

[Mike©]

Moin Detlef,

Dafür hast du jetzt:

#InhaltCenter
{
  ...
  margin-top:1.0em;
  height:75%;
  overflow:auto;
}

>   
> Das sorgt kleinerern Browserfenstern für doppelte Scrollbalken und bei  
> größeren Fenstern dazu, das ein Teil des Platzes unnötig verschenkt wird.  
  
\*GRMPF\* Man kann nicht alles haben. Ich wollte damit den I-Frame weghaben. Das kann man im Menüpunkt -Veranstaltungen- sehen. Da bastle ich gerade.  
  
regds  
Mike©

-- 
Freunde kommen und gehen. Feinde sammeln sich an.

[Detlef G.]

Hallo Mike,

du Schnellposter ;-).

*GRMPF* Man kann nicht alles haben. Ich wollte damit den I-Frame weghaben. Das kann man im Menüpunkt -Veranstaltungen- sehen. Da bastle ich gerade.

Warum?
Wäre es denn so schlimm, wenn die ganze Seite gescrollt würde.
Bei kleinen Browserfenstern muss sie onehin gescrollt werden, nur jetzt auch
noch doppelt.

Eine Seite mit feststehendem Kopf und Menü ist zwar auch möglich, erfordert
aber einen etwas anderen Ansatz und separate Lösungen für Browser und IE.
Das ist ohne Erfahrung nicht so einfach umzusetzen.

Auf Wiederlesen
Detlef

[Mike©]

Moin Detlef,

Eine Seite mit feststehendem Kopf und Menü ist zwar auch möglich, erfordert
aber einen etwas anderen Ansatz und separate Lösungen für Browser und IE.
Das ist ohne Erfahrung nicht so einfach umzusetzen.

Ja, ich habe die diversen Artikel zum Thema fixed gelesen. Ich wollte halt "das schöne Design" on Top halten, und nicht die ganze Page scrollen.

@ All,
Gibt es andere Meinungen?

regds
Mike©

[Ingo Turski]

Hi,

Ich wollte halt "das schöne Design" on Top halten, und nicht die ganze Page scrollen.

Dieser Ansatz ist aber meist benutzerunfreundlich. Je größer der feststehende Bereich und je kleiner das Fester, desto negativer wirkt sich das auf den nutzbaren Inhaltsbereich aus, d.h. es muß weitaus mehr gescrollt werden als nötig.

freundliche Grüße
Ingo

[Der Martin...]

Hallo Ingo,

Ich wollte halt "das schöne Design" on Top halten, und nicht die ganze Page scrollen.
Dieser Ansatz ist aber meist benutzerunfreundlich. [...] es muß weitaus mehr gescrollt werden als nötig.

Haaalt, nein! Das stimmt so nicht ganz.
Wenn der feststehende obere Rand nur Zierde ist, gebe ich dir vollkommen Recht. Wenn aber die Navigation beim Scrollen mit verschwindet (ganz gleich, ob sie am linken oder am oberen Rand ist), dann muss ich jede einzelne Seite auch wieder zurückscrollen, um an die Navi wieder dranzukommen.
Das ist für meinen Geschmack viel unangenehmer, als zu Lasten des Inhalts ein paar Prozent der Anzeigefläche fest für die Navigation zu reservieren.

So long,

Martin

[MudGuard]

Hi,

Wenn der feststehende obere Rand nur Zierde ist, gebe ich dir vollkommen Recht. Wenn aber die Navigation beim Scrollen mit verschwindet (ganz gleich, ob sie am linken oder am oberen Rand ist), dann muss ich jede einzelne Seite auch wieder zurückscrollen, um an die Navi wieder dranzukommen.

Einmal "Pos1" gedrückt und fertig. Egal wie weit man vorher scrollen mußte.

cu,
Andreas

[Ingo Turski]

Hi,

Wenn aber die Navigation beim Scrollen mit verschwindet (ganz gleich, ob sie am linken oder am oberen Rand ist), dann muss ich jede einzelne Seite auch wieder zurückscrollen, um an die Navi wieder dranzukommen.

Ich sagte: meist.
Wenn tatsächlich *nur* eine wenig Platz einnehmende Navigation oben fixiert wird, gebe ich Dir Recht. Aber oft ist ja noch ein dekorativer Header und/oder Logo darüber und dann überwiegt die Einschränkung des Anzeigebereichs wieder den Nutzen.
Diese Problematik stellt sich übrigens nicht bei einer seitlich fixierten Navigation...

freundliche Grüße
Ingo

[Mike©]

Moin Ingo,

Ich konnte einen solchen zwar nicht entdecken, aber wenn Du einheitlich em verwendest - ggfls. auch für die Breiten - dann könnte dies vielleicht auch dabei helfen.

Ich arbeite hart daran. Autodidaktisch ist halt nicht einfach. Du Robin Hood des em ;-)

regds
Mike©

[Detlef G.]

Hallo Mike,

mit Freude habe ich gesehen, dass du das Prinzip verstanden hast,
Hintergrundbilder zu verwenden, statt kleine Grafiken aneinanderzustückeln.
Wenn ich bedenke, dass dies praktisch dein erster Versuch ist, das Layout
statt mit Tabellen mit CSS umzusetzen, kann sich das Layout schon sehen
lassen.

Da ich alle Pages so anpassen möchte, aber keine Nachfolgefehler durch schleppen möchte, wollte ich Euch bitten das Ergebnis mal zu prüfen. Das HTML ist valide und das CSS bis auf overflow-y auch.

Würde overflow:auto nicht den selben Zweck erfüllen?

Die Browser IE, NS 7.0, FF und Opera zeigen das gewünschte Ergebnis.

Außer, wenn man die Schriftgröße ändert.

Aus den oben genannten Gründen, bitte ich um Hinweise auf evtl. Fehler im Style-Sheet etc.

Warum so viele Inlinestyles?
Dann könnte auch gleich Transitional mit HTML-Attributen verwendet werden.

Warum so viele KLassen?
Diese blähen den Quelltext unnötig auf.
Verwende Klassen nur dort, wo diese nötig sind. Meist sind
Nachfahrenselektoren die bessere Wahl.

Noch ein paar Anmerkungen:
Du hast die Seite zwar von den Tabellen befreit, sie hat aber noch keine
vernünftige logische Struktur (OK, bei der Startseite, die nur eine große
animierte Grafik enthält, ist da nicht übermäßig viel zu machen).

• Ich finde keine Überschriften.
• Die Navigationen sind eine direkte Aneinanderreihung von Links.
    (Listen wären wohl besser)

Du hast immer noch zu sehr daran gedacht, das Layout umzusetzen, statt
ertseinmal eine logische Seitenstruktur aufzubauen.
Schau dir die Seite einmal ohne Styles und Grafiken an.

Auf Wiederlesen
Detlef

[Mike©]

Moin Detlev (mein Tutor),

Wenn ich bedenke, dass dies praktisch dein erster Versuch ist, das Layout
statt mit Tabellen mit CSS umzusetzen, kann sich das Layout schon sehen
lassen.

Danke, das tut auch mal gut.

Da ich alle Pages so anpassen möchte, aber keine Nachfolgefehler durch schleppen möchte, wollte ich Euch bitten das Ergebnis mal zu prüfen. Das HTML ist valide und das CSS bis auf overflow-y auch.

Würde overflow:auto nicht den selben Zweck erfüllen?

Nein, der NS setzt dann an fast alle DIV einen Scrollbalken.

Die Browser IE, NS 7.0, FF und Opera zeigen das gewünschte Ergebnis.

Außer, wenn man die Schriftgröße ändert.

*EILE MIT WEILE*

Warum so viele Inlinestyles?

?Ich kann da keinen einzigen finden?

Warum so viele KLassen?
Diese blähen den Quelltext unnötig auf.
Verwende Klassen nur dort, wo diese nötig sind. Meist sind
Nachfahrenselektoren die bessere Wahl.

Ja, ich habe auch so langsam das Prinzip der Vererbung verstanden, und ich bleibe dran ;-)

Noch ein paar Anmerkungen:
Du hast die Seite zwar von den Tabellen befreit, sie hat aber noch keine
vernünftige logische Struktur (OK, bei der Startseite, die nur eine große
animierte Grafik enthält, ist da nicht übermäßig viel zu machen).

• Ich finde keine Überschriften.
• Die Navigationen sind eine direkte Aneinanderreihung von Links.
    (Listen wären wohl besser)

Meinst Du die Navi oben?

Du hast immer noch zu sehr daran gedacht, das Layout umzusetzen, statt
ertseinmal eine logische Seitenstruktur aufzubauen.
Schau dir die Seite einmal ohne Styles und Grafiken an.

Du machst mich fertig. Danke ich lerne (hoffentlich)

regds
Mike©

[Mike©]

Moin Detlef,

Moin Detlev (mein Tutor),

sorry, das passiert mir immer wieder!

regds
Mike©

[Detlef G.]

Hallo Mike

Würde overflow:auto nicht den selben Zweck erfüllen?

Nein, der NS setzt dann an fast alle DIV einen Scrollbalken.

Welcher NS?

Warum so viele Inlinestyles?

?Ich kann da keinen einzigen finden?

OK, es sind nich _viele_, diese sind mir aber förmlich ins Auge gesprungen.

  
 <div style="padding-top:9px; margin-left:15%;">  
  
<div id="linksmenu" style="float:left; margin-top:20px">  

Du machst mich fertig.

Das ist nicht meine Absicht.

Danke ich lerne (hoffentlich)

Ich auch (s. Signatur)

Auf Wiederlesen
Detlef

[Mike©]

Moin Detlef,

Nein, der NS setzt dann an fast alle DIV einen Scrollbalken.

Welcher NS?

NS 7.0

OK, es sind nich _viele_, diese sind mir aber förmlich ins Auge gesprungen.

<div id="linksmenu" style="float:left; margin-top:20px">

  
Achso. In #linksmenu a ist auch float definiert. Wenn ich das nicht expilziet im DIV Tag angebe, dann setzt er das rechte DIV "Inhalt" unter das Ende des linken Menü.  
  
regds  
Mike©

-- 
Freunde kommen und gehen. Feinde sammeln sich an.

[Detlef G.]

Hallo Mike

Nein, der NS setzt dann an fast alle DIV einen Scrollbalken.

Welcher NS?

NS 7.0

Das kann ich im Moment nicht nachprüfen (mein 7er NN will zur Zeit nicht),
im 6er tritt es jedenfalls nicht auf, und in neueren Geckos auch nicht.

Achso. In #linksmenu a ist auch float definiert. Wenn ich das nicht expilziet im DIV Tag angebe, dann setzt er das rechte DIV "Inhalt" unter das Ende des linken Menü.

#linksmenu a gilt ja auch _nicht_ für #linksmenu selbst sondern für a innerhalb
von #linksmenu!

Übrigens, genau dieses float:left für #linksmenu a sorgt dafür, dass die Links
eigentlich nur zufällig untereinander stehen, und ansonsten eine Treppe
bilden.

Du hast zwischen den Links ein <br>, das sorgt dafür, dass sie untereinander
stehen. Wenn du den Links dann display:block gibst, bildet
dieses eine Leerzeile zwischen den Links. Diese Leerzeile hast du dann mit
float:left zwar wegbekommen, was aber nur funktioniert, wenn alle Maße
perfekt zusammenpassen. Wenn nicht, werden die Links nebeneinander
gefloatet, wobei diese durch das <br> dazwischen jeweils um eine Zeile nach
unten verschoben sind.
Nimm die <br>s und floats heraus, dann dürfte es dieses Problem nich mehr
geben. Allerdings sollten die Links dann wirklich in einer Liste stecken.

Es gäbe auch zwei Notlösungen, wobei es allerdings besser wäre, wirklich
eine Liste für die Links zu verwenden:
1. für #linksmenu eine Breite angeben, oder
2. die floats für #linksmenu a entfernen und
   #linksmenu br {display:none;} notieren.

Wäre aber alles nur eine (eigentlich sinnlose) Notlösung, die bei
vernünftiger Struktur im HTML nicht nötig wäre.

Auf Wiederlesen
Detlef

[Mike©]

Moin Detlef,

Du hast zwischen den Links ein <br>, das sorgt dafür, dass sie untereinander

Ich hatte das heute, fast genau wie Du es beschrieben hast, bereits korrigiert. Es sollte jetzt wesentlich besser sein.

Danke & regds
Mike©