Jazz: Webseite wird nicht komplett angezeigt

Hallo Leute.

Erstmal vielen Dank für die ganzen Hilfen und lehrreiche Tipps hier von Euch.
Echt klasse!

Ich bin noch ziemlich neu im erstellen von Webseiten.

Ich erstelle eine Website ohne große Hilfen, sprich ich schreibe im HTML-Code mit openwebsuite.

Wenn ich auf die Browservorschau gehe, zeigt der Browser nicht die komplette Webseite an. Ich müsste eigentlich runterscrollen können, habe aber keine Scrollbalken.

Und wenn ich die Darstellungsgröße der Vorschau auf 50% setze sehe ich natürlich auch das was auf 100% unten und rechts abgeschnitten wird.

Jetzt weiss ich nicht wo ich ansetzen muss damit ich barrierefrei auf Normalgröße die komplette Weite der Frontseite anwählen bzw. anscrollen kann.

Vielen Dank und liebe Grüße,

Jazz

  1. Hallo!

    Jetzt weiss ich nicht wo ich ansetzen muss(..)

    Tja, ohne Beispielcode oder einen Link zum Beispiel wird dir mit der Problembeschreibung niemand helfen können.

    Du beschreibst hier wage ein Problem mit fehlenden Scrollbalken.
    Woher soll irgend jemand ohne deinen Code zu kennen wissen was er anrichtet?

    Grüße, Matze

    1. Ja, du hast recht!

      Das habe ich bisher geschrieben:

      <html>
      <head>

      <style type="text/css">

      Grund {

      background-image:url(4elemente.jpg);
      background-repeat:no-repeat;
      }
      </style>

      <title></title>
      </head>

      <body style="background-image:url(4elemente.jpg); background-repeat:no-repeat">

      <br><br><br>
      <Table Border=0>
      <td width=200 height=5></td>
      <td width=60 height=5 font face="Segoe Print" font size="1">Anfahrt</td>
      <td width=20 height=5></td>
      <td width=60 height=5 font face="Segoe Print" font size="1">Impressum</td>
      <td width=20 height=5></td>
      <td width=60 height=5 font face="Segoe Print" font size="1">Newsletter</td>

      </table>

      <p></p>
      <p></p>
      <br><br><br><br><br>

      <Table Border=0>
      <td width=100 height=35><a href="Wind.htm"><img src="Firma.png" border="0"></a></td>
      </table>

      <Table Border=0>
      <td width=100 height=35><img src=Dienste.png></td>
      </table>

      <Table Border=0>
      <td width=100 height=35><img src=Feuer.png></td>
      </table>

      <Table Border=0>
      <td width=120 height=40><img src=Wasser.png></td>
      </table>

      <Table Border=0>
      <td width=100 height=35><a href="Sonne.htm"><img src=Solar.png border="0"></td></a>
      </table>

      <Table Border=0>
      <td width=120 height=40><img src=Kontakt.png></td>
      </table>

      </body>
      </html>

      1. Mahlzeit Jazz,

        Das habe ich bisher geschrieben:

        Da fehlt allerdings noch Einiges ... was mich vor allem wundert: Du bedankst Dich für "die ganzen Hilfen und lehrreiche Tipps", setzt aber anscheinend nur sehr wenig davon um:

        <html>
        <head>

        Wo ist die Angabe des http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Dokumenttyps?

        Grund {

        background-image:url(4elemente.jpg);
        background-repeat:no-repeat;
        }

        <http://de.selfhtml.org/css/formate/zentrale.htm#individualformate@title=Was genau soll diese Anweisung bewirken?>

        <body style="background-image:url(4elemente.jpg); background-repeat:no-repeat">

        Du hast doch bereits gleichlautende Angaben zum Aussehen im o.g. <style>-Abschnitt gemacht - wieso wiederholst Du das hier?

        <br><br><br>

        Zeilenumbrüche sind Zeilenumbrüche, kein Mittel zum Layouten.

        <Table Border=0>

        Tabellen sollten tabellarische Daten enthalten - fürs Layouten sind sie nicht gedacht.

        <td width=200 height=5></td>

        Angaben zum Aussehen von Elementen haben im HTML-Code nichts verloren. Du solltest dies in entsprechende CSS-Anweisungen auslagern.

        <td width=60 height=5 font face="Segoe Print" font size="1">Anfahrt</td>

        Bist Du sicher, dass *ALLE* Deine Besucher diese Schriftart zur Verfügung haben? Wenn nicht, solltest Du alternative <http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=generische Schriften> angeben.

        <p></p>
        <p></p>
        <br><br><br><br><br>

        Leere Absätze und sinnfreie Zeilenumbrüche ... s.o.

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        1. Hi Ekki.

          Danke für deine Antwort.

          Die hilfreichen Tipps erkennt man vielleicht nicht gleich :-) aber es gab sie.
          Und für viele Tipps bin ich bestimmt einfach nur noch zu blöd sie konkret umzusetzen.

          Die Angabe zum Dokumententyp, hab ich der Übersicht wegen gerade mal rausgenommen.

          Mit CSS bin ich blutiger Anfänger, jetzt,und als ich sie geschrieben hatte, ich weiss es ist um einiges besser damit zu arbeiten. Ich wollte ich sie ja als hintergrund, hat aber nicht geklappt. sie hat sich immer oben angesiedelt, nicht im hintergrund, und das was darüber sein sollte ist nach unten gerückt.

          Dann habe ich die Lösung unten mit body style gefunden. falls ich die css oben doch noch brauchen sollte habe ich sie erstmal stehen gelassen.

          ICh weiss das man mit css gut auf zeilenumbrüche verzichten kann, da es neuland ist und ich mir damit helfen konnte hab ichs halt getan.
          Genauso konnte ich mir mit tabellen sehr gut helfen.

          Das die Schriftart nicht funzt hab ich auch gemerkt, ich wollte mir eine geeignete suchen, derzeit hatte ich aber noch ganz andere probleme zu lösen.

          Ist wahrscheinlich grausam für einen Profi, kann ich mir denken.

          Wahrscheinlich weiss man auch nicht wie man mir da helfen soll, oder das Problem fixieren soll, nicht wahr?

          Vielen vielen Dank Ekki, für Tipps und herbe Kritik :-)

          MFG, Jazz

          1. Mahlzeit Jazz,

            Die Angabe zum Dokumententyp, hab ich der Übersicht wegen gerade mal rausgenommen.

            Hier beim Posting im Forum? Oder auch in Deiner Seite?

            Wenn Ersteres: keine gute Idee - da *genau so etwas* Deine Leser nicht wissen, wenn Du es ihnen nicht sagst. Wenn Du Code zeigst, zeige *genau den* Code, der Probleme macht. Keiner kann erraten, was Du vielleicht "der Übersichtlichkeit wegen" weglässt.

            Wenn Letzteres: keine gute Idee - Du zwingst die Browser damit in den "Rate-Modus".

            Ich wollte ich sie ja als hintergrund, hat aber nicht geklappt.

            Wer ist "sie"? Die Grafik? Wie genau hast Du es denn probiert? "Klappt nicht" klappt nämlich nicht ... :-)

            sie hat sich immer oben angesiedelt, nicht im hintergrund, und das was darüber sein sollte ist nach unten gerückt.

            Ah, doch noch so etwas wie eine Problembeschreibung. Offenbar hattest Du die Grafik vorher überhaupt nicht als Hintergrundbild, sondern als <img>-Element referenziert?

            Auf jeden Fall ist eine Angabe wie

            # Grund {

            schonmal ziemlicher Humbug. Auch das Wiederholen des exakt gleichen Codes nochmal inline im <body>-Element ist nicht wirklich sinnvoll.

            Wie wär's mit so etwas:

            body {  
            background-image:url(4elemente.jpg);  
            background-repeat:no-repeat;  
            }
            

            ICh weiss das man mit css gut auf zeilenumbrüche verzichten kann, da es neuland ist und ich mir damit helfen konnte hab ichs halt getan.
            Genauso konnte ich mir mit tabellen sehr gut helfen.

            Das klingt wie "Ja, ich weiß, dass ich die Ladung auf meinem LKW hätte sichern sollen - aber ich kenne mich mit Spanngurten noch nicht so aus, und da die Stahlträger ja ganz gut lagen, habe ich erstmal nur die Plane drübergemacht." ...

            Tu Dir selbst einen Gefallen: gewöhn' Dir derartige Schlamperei gar nicht erst an. <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=Lern es von Anfang an richtig.> Das erspart Dir (und auch den Besuchern Deiner Seiten) viel Ärger.

            Wahrscheinlich weiss man auch nicht wie man mir da helfen soll, oder das Problem fixieren soll, nicht wahr?

            Nicht, solange keine exakte Problembeschreibung mit nachvollziehbaren Beispielen existiert ...

            MfG,
            EKKi

            --
            sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
            1. Danke Ekki.

              Hab gerade endlich geschnallt wie ich die table-positionierten buttons durch div-container zu ersetzen :-)

              Kann ich das den Besuchern der Website antun?

              LG,

              jazz

              1. Mahlzeit Jazz,

                Hab gerade endlich geschnallt wie ich die table-positionierten buttons durch div-container zu ersetzen :-)

                Solange es keine <div>s in <div>s in <div>s sind ... :-)

                Kann ich das den Besuchern der Website antun?

                Das solltest Du diejenigen unter Deinen Besuchern fragen, die z.B. aufgrund irgendwelcher Behinderungen nicht in der Lage sind, die Seite(n) so zu sehen, wie sie gedacht sind - ich denke da z.B. an Farbsehschwache, Blinde, Suchmaschinen usw. ... ist Dein Code an sich so semantisch, dass z.B. ein Screenreader den Inhalt in der richtigen Reihenfolge und mit nachvollziehbarem Zusammenhang vorlesen kann? Kann eine Suchmaschine die richtigen Zusammenhänge zwischen Überschriften, Texten, Links und Bildern herstellen?

                MfG,
                EKKi

                --
                sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                1. Hi.

                  Nein. keine verschachtelten container :-)

                  über die Sache mit dem Screenreading und der Suchmaschine... da weiss ich leider noch nicht worauf ich achten muss...

                  aber ich bin sehr glücklich dass du mich derart angetrieben hast.
                  übrigens hab ich "by the way" auch herausgefunden wie ich mein problem der ersten minute lösen konnte. du erinnerst dich. das scrollen nach unten, und das nicht komplett zusehende hintergrundbild.

                  wird wohl auch besser zu lösen sein, aber als ich ein image weiter unten ansiedelte konnte ich logischerweise auch dorthin scrollen und somit endlich mein komplettes hintergrundbild sehen ;-)

                  LG,

                  jasper

                  1. Mahlzeit Jazz,

                    über die Sache mit dem Screenreading und der Suchmaschine... da weiss ich leider noch nicht worauf ich achten muss...

                    Z.B. darauf, dass eine Überschrift *immer* in <h1> stehen sollte. Z.B. dass eine Liste eine <ul> (oder auch <ol>) sein sollte. Z.B. dass Bezeichnungen von Formularelementen sinnvollerweise in entsprechende <label>s eingeschlossen sein sollten. Kurzum: dass der Code semantisch sinnvoll aufgebaut und logisch strukturiert ist.

                    Kleiner Exkurs dazu:

                    http://www.woodshed.de/publikationen/dialog-robot.html (alt, aber gut - und immer noch aktuell)

                    wird wohl auch besser zu lösen sein, aber als ich ein image weiter unten ansiedelte konnte ich logischerweise auch dorthin scrollen und somit endlich mein komplettes hintergrundbild sehen ;-)

                    Tut mir leid - aber da konnte ich jetzt nicht folgen. Ich dachte, Du willst ein Hintergrundbild darstellen? Dann solltest Du auch genau das tun ... und nicht mit irgendwelchen Krücken versuchen, einen ähnlichen Effekt zu erzielen, als wenn Du es gleich richtig machst. :-)

                    Manchmal sagt (relevanter!) Code eben mehr als 1000 Worte.

                    MfG,
                    EKKi

                    --
                    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                    1. Tut mir leid - aber da konnte ich jetzt nicht folgen.

                      Sein Hintergrundbild war groesser als die Seite und wohl auch groesser als sein Viewport. ;)

                      --
                      "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                            - T. Pratchett
                      1. Mahlzeit Steel,

                        Tut mir leid - aber da konnte ich jetzt nicht folgen.

                        Sein Hintergrundbild war groesser als die Seite und wohl auch groesser als sein Viewport. ;)

                        Es ist doch immer wieder erstaunlich, wie hilfreich eine sinnvolle Problembeschreibung ist ... ;-)

                        MfG,
                        EKKi

                        --
                        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                        1. Danke für den Link!
                          Danke Steel, das wars ;-)

                          Problem beschreiben muss ich wohl auch noch lernen...

                          LG

                          1. Danke für den Link!
                            Danke Steel, das wars ;-)

                            Hintergruende gehen normalerweise nicht ueber ihr Element hinaus. Du kannst also nicht irgendwohinscrollen, weil dort einfach nichts ist. Wenn Du Das Element durch hinzufuegen anderer Elemente vergroesserst, gibts auch was zu scrollen. Das hast Du jetzt aber wohl auf deine eigene Art gelernt. :) Mir war Dein Problem bis zu dem Post auch nicht wirklich klar.

                            Problem beschreiben muss ich wohl auch noch lernen...

                            Das ist das Problem mit den Problemen.

                            --
                            "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                                  - T. Pratchett
                            1. Danke für den Link!
                              Danke Steel, das wars ;-)

                              Hintergruende gehen normalerweise nicht ueber ihr Element hinaus. Du kannst also nicht irgendwohinscrollen, weil dort einfach nichts ist. Wenn Du Das Element durch hinzufuegen anderer Elemente vergroesserst, gibts auch was zu scrollen. Das hast Du jetzt aber wohl auf deine eigene Art gelernt. :) Mir war Dein Problem bis zu dem Post auch nicht wirklich klar.

                              Problem beschreiben muss ich wohl auch noch lernen...

                              Das ist das Problem mit den Problemen.

                              Du kannst auch im CSS schreiben:

                              body  {  
                                height: 500px;  
                                overflow: visible;  
                              }
                              

                              dann wird die Seite auch ohne das zusätzliche Bild vergrößert. Statt der 500px dafür die Größe des Hintergrundbildes nehmen.

                              psy

                              1. Wow! Danke psy...

                                ;-)

                              2. Hi!

                                Du kannst auch im CSS schreiben:

                                body  {

                                height: 500px;
                                  overflow: visible;
                                }

                                
                                >   
                                  
                                Vielen Dank dass Du diese hilfreiche Kleinigkeit noch erwaehnt hast. Damit is der Thread eigentlich komplett. Peinlich, dass sonst niemand (z.B. ich) daran gedacht hat, zu erwaehnen wie man eine Seite kuenstlich vergroessern kann. (Das mag daran liegen dass so eine 'sinnlose' Aktion hier nicht immer auf Verstaendnis trifft. Schliesslich ist ein Hintergrundbild ja kein Content...)  
                                
                                -- 
                                "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."  
                                      - T. Pratchett