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

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©

--
Freunde kommen und gehen. Feinde sammeln sich an.
  1. 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

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. 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©

      --
      Freunde kommen und gehen. Feinde sammeln sich an.
  2. 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

    1. 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©

      --
      Freunde kommen und gehen. Feinde sammeln sich an.
      1. 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

        1. 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

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!
          1. 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

            1. 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©

              --
              Freunde kommen und gehen. Feinde sammeln sich an.
              1. 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

                --
                - Wissen ist gut
                - Können ist besser
                - aber das Beste und Interessanteste ist der Weg dahin!
                1. 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.
                  
                  1. 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

                    --
                    - Wissen ist gut
                    - Können ist besser
                    - aber das Beste und Interessanteste ist der Weg dahin!
                    1. 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©

                      --
                      Freunde kommen und gehen. Feinde sammeln sich an.
                      1. 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

                        1. 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

                          1. 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

                            --
                            Warum nennt sich Andreas hier MudGuard?
                            Schreinerei Waechter
                            Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                          2. 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

        2. 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©

          --
          Freunde kommen und gehen. Feinde sammeln sich an.
  3. 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

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    1. 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©

      --
      Freunde kommen und gehen. Feinde sammeln sich an.
      1. Moin Detlef,

        Moin Detlev (mein Tutor),

        sorry, das passiert mir immer wieder!

        regds
        Mike©

        --
        Freunde kommen und gehen. Feinde sammeln sich an.
      2. 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

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        1. 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.
          
          1. 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

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
            1. 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©

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