KEIN Aprilscherz! Problem mit Pagedarstellung. HTML? CSS?

Ich nutze Firefox!

ah…sry,das sollte eigt. net hier hin^^

bei meinem FF gehts einwandfrei?

Nun denn, auf nem IE6 gehts auch ohne verschieben. Dafür rutscht die Newsbox links nach unten. Wie man´s auch dreht, wird irgendwie nix. Dann suche ich mal weiter…

Danke trotzdem für die Mühe.

ich hätte noch ne idee,aber das wäre sehr umständlich…

Und die Wäre…? In Stichpunkten…?

Sodele, ich habe herausgefunden, dass wenn der Text länger ist als eine Bildschirmseite, sich die Seite nach links verschiebt. Ich habe dazu mal die ursprünglich selbe Seite gekürzt und unter nem anderen Namen eingefügt.

Vielleicht kann mir jetzt jemand helfen. Eventuell muss ich irgendwo nen Befehl eingeben, dass sich bei längere Texteingabe die Seite nicht verschiebt???

Das Verschieben tritt wohl nur beim Firefox auf.

Hier mal die Links:

absofort.rockt.es/Links/UnserVerein/fsj.html

und zum Vergleich

absofort.rockt.es/Links/UnserVerein/fsj2.html

Besten Dank.

Ich habe mir die beiden Seiten mit zwei Geckos (Darunter auch
ein firefox), mit Opera und mit Konqueror angesehen, bei keinem
konnte ich da eine Verschiebung erkennen.
Erkennbar und verständlich sind hingegen andere
Hintergrundfarben und Schriftgrößen, erstere, weil die offenbar
nicht im Autorenstil angegeben ist und letztere, weil Angaben
in px oder generell kleiner als 1em gegebenfalls durch die
minimale Schriftgröße überschrieben werden.

Der Text ist bei übrigens auch in der zweiten Variante bei meiner
Schriftgröße länger als der typische Anzeigebereich, da muß ich
mir schon Mühe geben (Fenster vertikal ganz aufziehen), damit
das bei den meisten in den Anzeigebereich paßt.

Zudem enthält die Seite immer noch grobe Strukturfehler, dafür
ist das Erscheinungsbild eigentlich recht einheitlich…

Vielen Dank für deinen Kommentar.

Leider habe ich noch ein paar Vokabularprobleme.

Was sind den “Geckos”?
In der Tierwelt sagt es mir was, aber hier…?

Was ist der Autorenstil?
Meinst du damit, dass ich CSS abschalten muss und dann nur noch die nackte Seite hab? (Hab das mal irgendwo gelesen.)

Das der Text der zweiten Seite auch größer ist, liegt an meiner momentanen Auflösung habe ich festgestellt (1600x1200). Mit ner kleineren Auflösung ist er auch weit drüber. Sorry, mein Fehler.

Welche Strukturfehler hast du denn noch entdeckt? Ich habe die Seiten durch drei Validatoren laufen lassen und jeder zeigt mir was anderes an (Wenn du die dort angegebenen Fehler als Strukturfehler siehst). Oder verstehst du etwas anderes unter Strukturfehler als ich?

Für die Antwort gibts schon mal ein Danke!

So, hab den Fehler gefunden!

Ich weiß nicht, ob es jemandem aufgefallen ist, aber der Fehler lag ganz einfach an der Scrollbar rechts am Rand. Wenn ein Text mit Überlänge kommt wird sie erst eingeblendet und verschiebt so den Inhalt, bzw. die Seite.
Dass ich da nicht früher drauf gekommen bin… :hammer:

Gecko ist Programmpaket, welches bei einigen browsern
drinsteckt, die dann im wesentlichen obendrauf eine graphische
Oberfläche setzen oder das eben mit anderen Paketen zu
einem kompletten browser ergänzen.
Firefox, Iceweasel und Epiphany sind etwa Geckos, die eine
sehr spartanische Ausstattung haben, mit welcher nicht die
komplette Funktionalität und auch nicht diverse andere
Programmpakete von Mozilla verfügbar sind.
Iceape und Seamonkey sind hingegen komplett ausgestattet
und habe konfigurierbare oder komplette Funktionalität, sind in
dem Sinne also komplette browser wie die alte Mozilla-Suite.
internet-Seiten sehen was das CSS anbelangt bei der gleichen
Gecko-Version immer gleich aus, typisch fehlen bei den
Sparversionen dann eher selten verwendete Funktionalitäten,
die man teils extra mit Erweiterungen nachinstallieren muß
(etwa die komplette Interpretation des link-Elementes).

Bei CSS unterscheidet man verschiedene Stilvorlagen.
Zuerst kommt die des browsers, die entscheidet darüber, was
man bei einer reinen (X)HTML-Seite sieht. Dann kommt der
normale Nutzerstil, welchen der Nutzer des browsers in einer
eigenen Datei festlegen kann, welche dann die Stilvorlage des
browsers überschreibt.
Der Autorenstil kann nun vom Autor einer (X)HTML-Seite
angegeben werden, diese überschreibt den normalen Nutzerstil
(und damit natürlich auch den browser-Stil).
Der Nutzer wiederum kann in seiner Stilvorlage mittels der
!important-Regel oder einer äquivalenten Einstellung am browser
wiederum die Stilvorlage des Autors überschreiben, etwa wenn
die Schriftgröße für ihn zu klein ist.
Insgesamt gibt es dann auch noch Verfeinerungen, da der
Autor auch Präsentationsattribute angeben kann und mehrere
Stilvorlagen. Gibt jedenfalls klar definierte Regeln, in welcher
Reihenfolge all diese Vorlage durchgegangen werden. Sie
kommen immer alle bei der Anzeige einer Seite zur Anwendung.

Strukturfehler - ich habe mir das auch nur mit dem W3C-Validator
angesehen, der sagt, daß mehrere Elemente entweder nur
geschlossen, aber nicht geöffnet werden oder umgedreht
geöffnet, aber nicht geschlossen, das kann entweder auf
kompletten Unfug hinweisen oder darauf, daß Elemente
versehentlich falsch verschachtelt wurden.

Zusätzlich hat der Validator auch noch solche eine ulkige
Verschachtelung gefunden:
<a …>


Da ist es jetzt spannend, was die Fehlerbehandlung des
browsers draus macht, könnte etwa das a vor dem div
schließen und das als blödsinnig ignorieren, könnte
auch, was wohl noch schlimmer wäre, das a erst beim
schließen, was ziemlichen undefinierten Blödsinn ergäbe,
wenn das div noch ein a enthielte. Jedenfalls sind Blockelemente
innerhalb von inzeiligen Elementen wie a nicht erlaubt.

Danke für den Nachhilfeunterricht. :slight_smile:

Jetzt verstehe ich u.a. dein Kommentare auch besser.

Zu den Strukturfehlern:

-> weist auf kompletten Unfug hin :smiley: Ich habe alle Elemente nochmal von Hand überprüft.
Gibt es dazu vielleicht auch ne leichtere Lösung im DW3?

Zu deinem letzten Absatz:

Ich wollte, dass wenn auf das Logo der Seite links oben geklickt wird, man immer wieder zur Startseite zurückkehrt. Da das Logo aber als Hintergrund eines

-Tags in der CSS-Datei definiert ist, habe ich kurzerhand den
-Tag verlinkt. Wenn man nun auf das Logo klickt kommt man wieder zur Startseite zurück. Bei mir funktioniert es.
Gibt es da vielleicht eine andere Lösung?

Noch eine Frage bezüglich der Scrollbalken:
Mit “overflow:hidden” kann ich sie ausschalten. Dann kann ich aber den Rest der Seite nicht mehr sehen. Gibt es ne Möglichkeit die Scrollbalken einfach unsichtbar zu machen oder auszublenden, sodass ich mit der BildUP/Down-Taste oder dem Scrollrad an der Maus die Seite hoch und runter scrollen kann?

Besten Dank!

Strukturfehler aufräumen/beseitigen.
Ich meine für firefox und Konsorten (Geckos ;o) ist inzwischen
auch tidy als Erweiterung verfügbar, der räumt zumindest
die Ausgabe auf und macht einen Vorschlag, wie er die Fehler
richten/interpretieren täte.
Bei statischen Seiten kann man den korrigierten Quelltext
verwenden, bei PHP-Seiten kann man anhand der Korrekturen
lernen, was man falsch gemacht hat.

DW3? ist das Dreamweaver, kenne ich nur dem Namen nach.
Zahlt man da nicht Geld dafür? Dann sollte der eigentlich
Fehler selber finden und Vorschläge machen oder von vorne
herein verhindern, daß man Elemente falsch verschachtelt.
Wenn nicht, hat man das Geld sicher nicht umsonst, aber dann
doch wohl vergeblich ausgegeben ;o)

Inzeilige Elemente: Statt div kannst du in a span verwenden,
wenn dir nichts besseres einfällt, Elemente ohne angezeigten
Inhalt sind innerhalb von a sowieso schlecht, weil dann der
Verweis ohne die Dekoration mit CSS wohl kaum zu nutzen
ist, es gibt da aber Tricks, wie man Inhalt gegen Dekoration
per CSS austauschen kann.

Rollbalken - da gibt es keine detaillierten Angaben zu, je nach
verwendeter Umgebung kann da die Umsetzung auch recht
unterschiedlich sein. An sich muß ein browser auch bei
overflow: auto oder scroll keine Rollbalken anbieten und könnte
das auch mit anderen Mitteln umsetzen, was teilweise auch
bei Mobiltelephonen passieren mag, besonders, wenn die Maus
sowieso durch irgendeinen anderen Mechanismus ersetzt ist.
Nun könnte man in CSS3 gucken, ob da für die Zukunft mehr
geplant ist, wenn man das wirklich wissen will. Ist aber eben
so oder so problematisch, weil man ja nicht weiß, ob die Maus
(besser: das Zeigergerät) ein Rollrad hat, ob es Tasten hat oder
wie es technisch genau umgesetzt ist. Beim notebook hat man
ja oft ein touchpad, welches bereits eine andere Funktionalität
hat als eine klassische 3-Taten-Maus oder eine mit Tasten und
Rollrad oder was immer man sich da noch denken kann. Einige
haben ja auch einen Rollkuller oder man bewegt die Hand mehr
oder weniger frei in der Luft und benutzt seine eigenen Finger
als Zeiger. Wäre ein bißchen viel verlangt, das CSS auf all diese
Möglichkeiten im Detail anzupassen oder auch nur was
Bestimmtes davon beim Nutzer vorauszusetzen ;o)

Ja, der Dreamweaver kostet Geld (gibts als Studentenversion relativ günstig) und zeigt einem auch die Fehler an. Denn ansonsten funktioniert die Seite ja fast perfekt. :laughing:

Wie der Validator auf seine Ergebnisse kommt kann ich nicht immer ganz nachvollziehen.

Bei den einzeiligen Elementen war das für mich die einfachste Methode. Selbst wenn bei jemandem die Funktion nicht läuft, hat er ja noch genug andere Links um auf die Hauptseite zu gelangen. War halt als Zugabe gedacht.

Bei den Rollbalken muss ich mal schau ob ich da ne Lösung finde. Das man es nicht jedem recht machen kann ist auch klar. Habe es auch mal damit in der CSS-Datei versucht:
scrollbar {visibility: collapse;}
Hat aber auch nicht geklappt.
Ich werde erst mal den Rest der Seite fertig gestallten und mich dem Thema dann nochmal zuwenden.

Danke für deine Informationen und deine Hilfe!

noch zum Thema block elemente in Verweisen…

auch wenn es nach W3C Standard nicht erlaubt ist, finde ich es logisch betrachtet nicht unbedingt sinnlos.
Bin nämlich beim lesen von Hoffmans Posts darauf gekommen dass ich ebendiesen Fehler auch auf glurpsch.de/de/blog/ verbaut habe, wo eben der gesamte Vorschaucontainer verlinkt ist. (Streng genommen müsste ich also meinen Html 4.1 Valide Button auf der Seite entfernen)

aber ansonsten funktioniert diese Darstellungsmethode auch relativ zuverlässig, hatte bisher nur (in Opera glaub ich) mal das interessante Phänomen, dass bei Wiederholtem Aktualisieren zufällig der Text im unterem Container unterstrichen war (also mit einer etwa 50% Warscheinlichkeit und immer nur im unterem) - hab mir das nie erklären können :astonished:

Ansonsten könnte man den Validator auch austricksen indem man ein span tag verwendet welches man per CSS als block Element definiert…aber das ist ja nicht Sinn der Sache oder?

Wie der Validator auf seine Ergebnisse ist recht einfach
nachzuvollziehen, der kennt die DTD (Dokumenttypdeklaration)
und danach guckt er sich an, ob ein Dokument im Sinne der
Spezifikation (der DTD) einen Sinn ergibt oder nicht. Da browser
keine DTD verwenden, kennt der Validator sich meist viel
besser aus als jeder browser und hat keine Lücken im der
Implementierung.
Wenn der dreamweaver solche Fehler wie div in a nicht
bemängelt, die ja nun wirklich sehr einfach zu erkennen sind,
dann taugt das Programm nichts für Leute, die solche Fehler
nicht selber erkennen (mag auch sein, daß es nichts für Leute
taugt, die sie selber erkennen, aber das ist ein anderes Problem).
Ist ja keine große Hilfe, wenn es nicht mal die Sprache versteht,
die es nutzen soll, um Dokumente zu erstellen ;o) Besonders
schlimm ist das natürlich für Leute, die sich auf so ein Programm
verlassen, für die ist es dann garantiert ungeeignet.

Bei den Fehlerangaben des Validators kann es leicht zu
Folgefehlern kommen, weil er nach einem Strukturfehler ja
irgendwas raten muß, um überhaupt weiter Fehlerangaben
machen zu können. Bestenfalls muß man nur den ersten
Strukturfehler beseitigen, dann kann es sein, daß sich für den
Validator viele Probleme von allein lösen, die sich aus diesem
ersten Fehler ergeben haben.
Und wo der Validator einen Fehler sieht, hat jeder browser
jedesmal ein Problem, wo er sich genau wie der Validator
entscheiden muß, wie es weitergehen kann, dabei treffen browser
eben leicht verschiedene Entscheidungen, was eben auch zu
fatalen Folgefehlern führen kann und damit zu
Anzeigeunterschieden und ganz unterschiedlichen
Interpretationen desselben Dokumentes. browser und Validator
sind ja in dem Sinne nicht schlau oder auch nur hellseherisch,
um zu raten, was der Autor wirklich gemeint haben könnte, nach
einem Fehler ist daher alles Weitere wie bei der Seefahrt und
vor Gericht - Glücksache ;o) Wenn man das vermeiden will oder
nicht prinzipiell in seinem Leben immer Glück hat, beseitigt man
daher die Fehler, um solche Überraschungen zu vermeiden,
bleiben dann noch genug übrig, die durch tatsächliche Fehler im
browser bewirkt werden, nicht durch Fehler im Dokument.

Und wie gesagt, für deine Anwendung ist das leicht zu umgehen,
ein span verwenden und dem per CSS display:block verpassen,
dann erscheint das genau wie ein div-Element, ist an der Stelle
aber korrekt, weil CSS nur entscheidet, wie oder wo etwas wie
erscheint, nicht was es ist, was mit (X)HTML festgelegt wird.
glurpsch - das ist kein Trick, sondern korrektes (X)HTML und
CSS, da ist nichts merkwürdig dran. Ob es inhaltlich sinnvoll ist,
ist eine andere Frage, dazu muß man das Dokument sehen.
Jedenfalls ist es inhaltlich nahezu nie sinnvoll oder erlaubt,
Blockelemente innerhalb von inzeiligen Elementen zu haben.
Ausnahme ist da das object-Element, aus bestimmten Gründen
erlaubt das sowas, ist dort dann aber auch besser, man macht
ein passendes Blockelement um das object herum, damit die
Struktur einen Sinn ergibt.

  • ‘inzeilig’ nicht ‘einzeilig’ - also innerhalb der Zeile, nicht nur eine
    Zeile. Das ist im Gegensatz zum Blockelement wie etwa einem
    Absatz.

  • scrollbar {visibility: collapse;}
    Wo hast du das her? Es gibt kein Element scrollbar in (X)HTML,
    daher kann das auch auf nichts wirken.

Also die Vorgehensweise des Validators verstehe ich jetzt.

Mit dem -Tag ist das doch etwas umständlicher, da ich jede Seite einzeln Ändern muss, oder?

Das Scrollbarelement habe ich im I-Net gefunden. Habe mich halt mal durchgegooglet.
Suche dann mal weiter…

Nochmal dankeschön.

Also, habe nun einfach rechts und unten eine Scrollbar eingefügt, sodass sich die Seite nicht mehr verschiebt.

Für Interessierte hier das CSS-Element:
body {overflow: scroll;}

Ist auch mit overflow-x bzw.-y für nur eine Seite möglich.
Anstelle von scroll kann man auch noch auto; hidden; inherit; und visible; eingeben.

Allen Helfern ein großes Dankeschön! :hail:

overflow-x bzw.-y ist zumindest in CSS2 oder CSS2.1 nicht
möglich, bei einem Modul von CSS3 steht es drin, das ist
aber meine ich noch nicht in einem Stadium, wo browser das
implementieren sollten, allenfalls testweise mit einer
browser-spezifischen Vorsilbe ;o)

Mit
overflow: scroll
Bekommst du ja immer einen Rollbalken, egal ob er gebraucht
wird oder nicht, meist will man ihn ja gar nicht, wenn man ihn
nicht braucht (overflow: auto), weswegen das meist nicht so
beliebt ist ;o)

Ja, das mit-x / -y hab ich auch irgendwo gelesen. Jetzt funktioniert soweit alles. Danke.

Aber da habe ich noch ne andere Frage:
Ich habe unter absofort.rockt.es/Links/Bilder/s … t2006.html eine kleine Galerie eingefügt und möchte jetzt, dass wenn man ein Bild anklickt, es unter oder über der Galerie in einem Feld etwas vergrößert dargestellt wird. Hat da jemand eine Idee, wie das funktionieren könnte, ohne das ich beispielsweise Frames einfüge?!

Und dann wollte ich eventuell noch bei dem Menü den Link hervorheben, auf dessen Seite man aktuell ist. Sei es dass er farbig ist, unterstrichen oder einfach ein kleiner Pfeil davor ist. Z.B. gehe ich auf “Unser Verein” und dann auf “Vorstand”, dann soll im ersten Menü “Unser Verein” hervorgehoben sein. Ist das einfach zu lösen? Wenn ja, wie mache ich es am einfachsten? Ich nutze Bibliotheken, die ich für die einzelnen Links erstellt habe und die das Menu bei bedarf auf allen Seiten mit einem “Klick” verändern.

Für Lösungsvorschläge bin ich dankbar.

Merci.

'türlich, bspw. mittels JavaScript:

[code]

… onClick=“document.getElementById(‘anzeigebereich’).innerHTML=’<img src=‘grossesBild.jpg’ />’;” …[/code]
Ist natürlich sehr unflexibel und dummerweise für Leute mit deaktiviertem Javascript-Support nicht nutzbar.

a:active?
Geht natürlich, wie immer, nur, wenn die Links die Seite beim Anklicken nicht neu laden.