Beiträge von herb3472

Hallo,

ich bin dabei, mit CSS eine Seite zu entwerfen, bei der in einem horizontal zentrierten Container vier Fotos mit zugehörigen Text untereinander angeordnet sind. Für jedes Foto mit dem zugehörigen Textblock habe ich eigenen Container vorgesehen, wobei der Textblock bündig mit der Oberkante des jeweiligen Fotos beginnt.

Das Design ist resizeable ausgelegt, die Größe der Bilder sowie die Breite und Höhe der Container variiert also mit der Bildschirm- bzw. Fensterbreite. Die Breite wird durch die Fensterbreite bestimmt, die Höhe durch dasjenige Inhalts-Element (Bild oder Text), welches den größeren Platz benötigt. Bei großer Bildschirmbreite reicht der Text nicht einmal bis zur Bildunterkante, bei kleineren Fensterbreiten umflutet der Text das Bild am unteren Rand.

Dabei darf sich aber der Inhalt eines Containers nicht mit dem Inhalt eines nachfolgenden Containers überschneiden, der Text darf nicht in den nachfolgenden Container "hineinwachsen", sondern muss immer mit ca. 1 Zeile Abstand darunter bleiben.

Wie ich glaube, habe ich die Aufgabenstellung ganz gut gelöst, allerdings tritt dabei ein Problem auf, an dem ich mir schon seit Stunden die Zähne ausbeiße (vermutlich ist es eine Kleinigkeit, über die ich immer wieder drüberschaue).

Die dunkelgrüne Footerleiste, die eigentlich am Seitenfuß außerhalb des "content"-Containers über die ganze Fensterbreite erscheinen sollte, wird horizontal geschrumpft und in den Container hineingezogen. Verursacht wird das durch das Clearing nach jedem Bild/Text-Container, das ich aber benötige, damit die einzelnen Bereiche nicht "ineinander wachsen".

Ich habe schon Alles Mögliche ausprobiert, komme aber einfach nicht drauf, wie ich dieses Problem lösen könnte. Zur besseren Übersicht habe ich die div-Container mit farbigen Rahmen versehen. Vielleicht könnte sich das mal jemand anschauen und mir einen Tip geben?

Die Seite zum anschauen: http://gasthof-thaller.com/neu/guten_schlaf.html

P.S:: die Seite ist "W3C-XHTML 1.0 Transitional" validiert

LG und besten Dank im Voraus

Herb

Danke für den Tip, habe alle Fehler behoben, die Validierung erfolgreich bis auf eine Warnmeldung die Doctype-Definition betreffend:

der Validator gibt die Warhnmeldung "Override in effect!" aus und ersetzt meine Doctype-Definition durch exakt die gleiche Definition! (habe den vom Validator eingesetzten String 1:1 kopiert und statt meines Strings eingesetzt - ohne Erfolg, es kommt die gleiche Warnmeldung! Was ist da los, was ist dafür die Ursache?

Bei der CSS-Validierung gibt es noch einige zweifelhafte Einträge, die werde ich mir demnächst zu Gemüte führen.

Jedenfalls herzlichen Dank für den wertvollen Tip und Dein Engagement!

Nicht gelöst ist allerdings nach wie vor die Frage, ob ein Fachmann in meinem Fall und mit meinem grafischen Design eher die bestehende horizontale Menüleiste mit Javascript touchscreentauglich machen würde, oder ob ein responsives Design mit einem extra Menü für Handheld Devices vorzuziehen ist (beides hat ja Vor- und Nachteile).

LG Herb

Danke für den Tip, werde ich ehestmöglich machen!

Hallo,

da das Konzept unserer derzeitigen Homepage schon 11 Jahre alt und nicht mehr zeitgemäß ist (die habe ich damals noch mit Frames und Tabellen gemacht),
bin ich derzeit dabei, unsere neue HP im Schweiße meines Angesichts und unter Zuhilfenahme etlicher Tutorials per Editor in HTML und CSS3 zu schreiben (für die Diashow auf der Titelseite ist auch ein wenig JS mit JQuery dabei).

Ich bin schon von Haus aus kein Profi und habe seit 11 Jahren nichts mehr auf diesem Gebiet gemacht, daher ist das sehr mühselig und - da ich aus Design-, Kosten- und Wartungsgründen keine fertigen Templates, keine Design- und keine CMS-Tools verwende - auch mit enormem Zeitaufwand verbunden.

Da die HP auf möglichst vielen Endgeräten akzeptabel rüberkommen soll, habe ich sie von Haus aus resizeable für unterschiedliche Bildschirmauflösungen und -ausrichtungen ausgelegt. FÜr den Desktop- und Notebook-Bereich konnte ich bisher ganz brauchbare Design-Lösungen erarbeiten, und die Tests verliefen zumindest mit den mir zur Verfügung stehenden Geräten und Browsern zufriedenstellend. Getestet habe ich mit ie9 und den jeweils aktuellen Letztversionen von Firefox, Opera, Gogle Chrome und Safari unter WinXP und Win7 mit Desktops und Notebook und mit verschiedenen, verschieden großen Bildschirmen. Bedauerlicherweise habe ich aber in meinem Umfeld keine älteren Browserversionen zum Testen zur Verfügung, diesbezüglich bewege ich mich also im "Blindflug" (es wäre nett, wenn ich Rückmeldungen bekäme, wie die Seite auf diesen oder jenen Browsern aussieht - vor Allem ältere ie- und Firefox-Versionen sowie Linux- und Mac OS X-Systeme würden mich brennend interessieren).

Weniger zufriedenstellend verliefen erwartungsgemäß die Tests mit Smartphones - die aber meines Erachtens mittlerweile nicht mehr zu vernachlässigen sind.
Derzeit kämpfe ich mit drei Problemstellungen, die bei mir ausschließlich bei mobilen Browsern auftreten und für die ich trotz Googeln noch keinen brauchbbaren Lösungsansatz gefunden habe:

1. Mit dem Browser "Opera mini" (Sony Xperia go unter Android 2.3.7) funktioniert die Größenanpassung und Positionierung des Seitenkopfs und der Drop-Down-Menüleiste überhaupt nicht. Die HP ist für den "Opera mini" in ihrem derzeitigen Erscheinungsbild absolut unbrauchbar. Für dieses Problem habe ich bisher noch keinen Lösungsansatz gefunden.

2. Mit den Browsern "Opera Mobil" (Sony Xperia go unter Android 2.3.7) und "Safari" (Apple iPod) wird die ganze - eigentlich zentrierte - Seite nach links verschoben, der rechte Rand ist viel zu breit. Wie ich durch Versuch und Irrtum herausgefunden habe, ist die Ursache der div-Container #menu_centering_2, der zusammen mit dem div-Container #centering_1 der Zentrierung der Menüleiste dient. Auch dafür habe ich noch keinen brauchbaren Lösungsansatz gefunden.

3.Obwohl für die Drop-Down-Menüs lediglich html und css zum Einsatz kommen, funktioniert die Bedienung beim iPod (mit Safari) erstaunlicherweise einwandfrei. Beim Xperia mit Android funktioniert lediglich der "Opera Mobile"-Browser einwandfrei. Hier gibt es allerdings das oben beschriebene Problem, dass die Seite "aus der Mitte gerutscht ist". Beim "Dolphin"-Browser lassen sich die Menü-Heads zwar ansprechen, aber danach tut sich nichts, es werden keine Drop-Down-Listen ausgeklappt. Und beim "Firefox"-Browser werden die Listen zwar ausgeklappt, reagieren aber nicht.

Ich weiß jetzt im Augenblick nicht so recht weiter und hätte gerne einen Rat, welche(n) Weg(e) ich zur Lösung der Probleme einschlagen soll:

Soll ich darauf hoffen, dass die Browser-Hersteller demnächst das hover-Problem aufgreifen und das hovern auch auf Touchscreens zum Standard erheben? Mir ist in dieser Richtung kein Hinweis bekannt, aber vielleicht hab' ich da ja was verschlafen....?

Soll ich das Design responsive machen, das Drop-Down-Menü bei Handhelds ausblenden und ein eigenes Menü für Touchscreen-Mobilgeräte schreiben (dann würde sich auch das Problem der oben beschriebenen Seitenverschiebung automatisch von selbst lösen, da die horizontale Menüleiste ja dann bei Handheld-Devices nicht sichtbar wäre), oder soll ich das Drop-Down-Menü durch ein Javascript ergänzen - und wenn ja, durch welches - möglichst einfaches und durchschaubares (JQuery ist installiert). In diesem Fall müsste ich mich allerdings auch um eine Änderung der Menüzentrierung kümmern, dafür habe ich aber bisher beim Googeln keine Lösungsansätze gefunden, weil offensichtlich so gut wie Alle "mit dem gleichen Wasser kochen".

Mir würde aus rein visuellen, gestalterischen Gründen die zweite Variante (ein einziges Drop-Down-Menü mit Javascript) besser gefallen, da ich persönlich die Bedienerführung vieler mobiler Homepages als zwar vielleicht ganz praktisch, aber als absolut hässlich empfinde. Ich befürchte aber, dass ich mir mit diesem Lösungsansatz unter Umständen eine Menge leerer Kilometer einhandle und ich letztendlich doch auf ein spezielles Menü für mobile Endgeräte zurückgreifen müsste. Vielleicht liest diese Zeilen ja ein Webdesigner, der Erfahrung mit derlei Aufgabenstellungen hat und mir einen Tip geben kann...?

Hier die Links zur "alten" und zur "neuen" Homepage (bei der neuen HP sind manche Seiten noch nicht vorhanden, deren Aufruf liefert daher einen 404-Error). Zwecks leichterer Analyse habe ich bei der neuen Homepage-Startseite index.html die Stylesheet-Definitionen des Drop-Down-Menüs aus der Datei css-Datei noch einmal in den Seitenkopf kopiert).

Hier die alte HP: http://gasthof-thaller.com/index.html
Und hier die neue: http://gasthof-thaller.com/neu/index.html

Die Bezeichnung der Style-Definitionen ist teilweise noch etwas chaotisch und ein "Denglishes Durcheinander", da muss ich erst ein Konzept reinbringen. Und das Formular zur Zimmeranfrage ist ein wenig danebengegangen, das weiß ich (ich muss das neu machen).

Vielleicht ist ja hier im Forum jemand, der Erfahrung mit der Lösung solcher Aufgabenstellungen hat. Auf jeden Fall herzlichen Dank im Voraus für Eure Hilfsbereitschaft

Herb