/BROWSER - Neues Design bitte mal auf PC testen

[Elya]

Hallo liebe Forumsgemeinde,

könntet Ihr bitte mal einen Blick auf http://www.visuelya.net/  werfen - ich habe über die Weihnachtstage ein wenig gefummelt und es wird so langsam eine Seite ;-)

Bin mit Mac und den üblichen Browsern unterwegs, wobei der IE5 mir noch ziemliches Kopfzerbrechen beim floaten bereitet. Ich habe noch keine Hacks eingebaut und fürchte unter den IEs auf dem PC sieht das Layout ähnlich zerbröselt aus.

Außerdem würde mich Eure Meinung zu den Schriftproportionen interessieren, ich habe überwiegend em benutzt und standardmäßig zwischen Safari und Mozillas erhebliche Unterschiede in der Schriftgröße. Grundsätzlich ist das zwar kein Problem, zur Zeit sieht's allerdings im Safari (für mich) am schönsten aus, und das ist nicht gerade die Mehrheit... ;-) Ich weiß daß es unterschiedliche Browsereinstellungen gibt, aber ist es zu naiv zu erwarten, daß die Standardeinstellung wenigstens in etwa das gleiche Ergebnis bringt?

Inhaltlich und im Code-Feinschliff ist noch einiges an Erweiterungen und Verschiebungen geplant, seid da nicht zu streng mit mir.

Alles was euch sonst noch auffällt, evtl. auch den einen oder anderen Screenshot oder Tipp, nehme ich dankend entgegen.

Gruss aus Koeln-Ehrenfeld,

Elya

[at]

Hallo.

Inhaltlich und im Code-Feinschliff ist noch einiges an Erweiterungen und Verschiebungen geplant, seid da nicht zu streng mit mir.

Ich bin schon jetzt begeistert. Bei diesen Seiten kann ich sogar den immensen Kontrast verschmerzen, aber die die Hervorhebung in der Subnavigation sollte noch etwas mehr Kontrast erhalten und die W3C-Sticker wirken arg deplaziert.
MfG, at

[Elya]

Hallo at,

Inhaltlich und im Code-Feinschliff ist noch einiges an Erweiterungen und Verschiebungen geplant, seid da nicht zu streng mit mir.

Ich bin schon jetzt begeistert. Bei diesen Seiten kann ich sogar den immensen Kontrast verschmerzen, aber die die Hervorhebung in der Subnavigation sollte noch etwas mehr Kontrast erhalten und die W3C-Sticker wirken arg deplaziert.

Danke :)
"immens" - heißt zuwenig oder zuviel Kontrast? Mac ist immer ein wenig heller in den Bildern, außerdem älteres LCD-Notebook, deshalb bin ich etwas irritiert. Kannst Du mich aufklären?

Naja, und mit den Stickern das überleg ich nochmal...

Gruss aus Koeln-Ehrenfeld,

Elya

[at]

Hallo.

Danke :)

Ich habe zu danken. Ich freue mich immer, wenn ich viel zu sehen und wenig zu kritisieren bekomme.

"immens" - heißt zuwenig oder zuviel Kontrast? Mac ist immer ein wenig heller in den Bildern, außerdem älteres LCD-Notebook, deshalb bin ich etwas irritiert. Kannst Du mich aufklären?

Nun, kann ein Kontrast härter sein als schwarz auf weiß? ;-)

Naja, und mit den Stickern das überleg ich nochmal...

Umfärben wäre meines Erachtens das Mindeste, aber unterhalb einer "Zapfino" angeordnet, ist allein schon der "W3C"-Schriftzug eine Sünde ;-)
MfG, at

[Elya]

Hallo at,

Nun, kann ein Kontrast härter sein als schwarz auf weiß? ;-)

na dann ist es klar, schau ich mir noch mal auf einem richtigen Monitor an. Aber eben wie in meiner Wohnung: die Raufaser sind weiß, was an den Wänden hängt, gibt die Farbe ;-) Aber vielleicht ist auch ausnahmsweise ein leichtes Abtönen in Richtung Pergamentpapierchamois angesagt...

Gruss aus Koeln-Ehrenfeld,

Elya

[Marc Eickelbaum]

Hallo liebe Forumsgemeinde,

Hallo zurück

könntet Ihr bitte mal einen Blick auf http://www.visuelya.net/  werfen - ich habe über die Weihnachtstage ein wenig gefummelt und es wird so langsam eine Seite ;-)

Hast Du Weihnachten nix besseres zu tun als vor der Kiste zu hängen? ;-)

Also, ich kann nur sagen: Hut ab. Ich kann keinen Unterschied in der Darstellung unter IE6.0 und Konquerer 3.1.4 (KDE 3.1.4) feststellen. Wenn ich doch auch schon soweit wäre :-(

Bis dahin, Marc.

[rainer groth]

Hallo Elya,

Alles was euch sonst noch auffällt, evtl. auch den einen oder anderen Screenshot oder Tipp, nehme ich dankend entgegen.

schau hier:http://www.rgroth.de/views/ Benutzername: "self" Kennwort: "view".

gruesse
rainer groth

[Elya]

Hallo rainer,

schau hier:http://www.rgroth.de/views/ Benutzername: "self" Kennwort: "view".

Mensch, das ist ja ein Service! Lieben Dank, das hilft mir erstmal sehr weiter.

Gruss aus Koeln-Ehrenfeld,

Elya

[Elya]

Hallo rainer,

schau hier:http://www.rgroth.de/views/ Benutzername: "self" Kennwort: "view".

so ganz versteh ich diese Variante (Abstand bzw. Höhe des Headers) von IE 6.0.26 nicht:

<img src="http://www.visuelya.net/selfpics/ie.jpg" border="0" alt="">

Das Boxmodell-Problem kann es doch eigentlich nicht sein, oder? Die anderen haben bei IE 6 kein Problem. Und doctype switch sollte hier auch keine Rolle mehr spielen...? Was kann es denn sonst noch sein? Hast Du eine Idee?

Gruss aus Koeln-Ehrenfeld,

Elya

[wahsaga]

hi Elya,

so ganz versteh ich diese Variante (Abstand bzw. Höhe des Headers) von IE 6.0.26 nicht

sehr schöne seite, kompliment.

das hat mich gleich gereizt mal zu schauen, ob ich dem IE-problem nicht auf den grund gehen kann.

nach ein bisschen rumspielen (ich benutze gerne knallige background-colors für verschiedene bereiche zum "debuggen" ;-) ) scheint mir dann das problem in folgendem zu liegen: dem IE ist deine subnavi einfach zu breit, deshalb kommt sie trotz float:left unterhalb der navi zu stehen.

also habe ich die breite von #subnavi mal von 398px auf 358px geändert (wert willkürlich gewählt).
sah schon besser aus, allerdings war der IE immer noch anderer meinung, was das margin-left von 125px anging; verschob die links weiter nach rechts als opera & firebird. also habe ich margin-left mal durch padding-left:125px ersetzt, mit folgendem ergebnis:

http://www.isis.de/~wahsaga/pics/elya/

(screenshots aus firebird 0.7, IE 6.0 und opera 7.23, alle unter Win XP.
qualität nicht so dolle, ziemlich hohe jpeg-kompression, aber für den effekt reicht's wohl aus.)

na, sieht doch schon ganz annehmbar aus so, oder?

kannst ja noch ein wenig experimentieren & testen, ob meine willkürliche veringerung der breite noch in irgendeinem deiner testbrowser probleme macht.

hier nochmal meine veränderungen an deinem stylesheet, width und margin-left auskommentiert und durch eine geringere breite bzw. padding-left ersetzt:

#subnavi {float:left;
        text-align:left;
        /*width:398px;*/
        width:358px;
        height:20px;
        margin-top:200px;
        padding:0px;
        border:0px solid yellow;
        /*margin-left:125px;*/
        padding-left:125px;
        }

hoffe, das hilft dir weiter :-)

gruss,
wahsaga

[Elya]

Hallo wahsaga,

Ihr seid ja alle so lieb zu mir... ;-)

so ganz versteh ich diese Variante (Abstand bzw. Höhe des Headers) von IE 6.0.26 nicht

das hat mich gleich gereizt mal zu schauen, ob ich dem IE-problem nicht auf den grund gehen kann.

nach ein bisschen rumspielen (ich benutze gerne knallige background-colors für verschiedene bereiche zum "debuggen" ;-) ) scheint mir dann das problem in folgendem zu liegen: dem IE ist deine subnavi einfach zu breit, deshalb kommt sie trotz float:left unterhalb der navi zu stehen.

#subnavi {float:left;
        text-align:left;
        /*width:398px;*/
        width:358px;
        height:20px;
        margin-top:200px;
        padding:0px;
        border:0px solid yellow;
        /*margin-left:125px;*/
        padding-left:125px;
        }

Ich hab die Breite auf 370 px setzen müssen, sonst fliegt mir die "nachbarschaft" im safari um die Ohren. Vielleicht kann im IE nochmal jemand schauen?

Ansonsten alles prima, jetzt muß ich "nur" noch die ie5 und nn4 Hacks basteln ;-)

hoffe, das hilft dir weiter :-)

und wie - Danke!

Gruss aus Koeln-Ehrenfeld,

Elya

[wahsaga]

hi,

Ich hab die Breite auf 370 px setzen müssen, sonst fliegt mir die "nachbarschaft" im safari um die Ohren.

wie gesagt, 358px war willkürlich gewählt :-)

Vielleicht kann im IE nochmal jemand schauen?

ja, sieht damit in meinem IE 6 immer noch "genauso" aus wie in opera & firebird.

gruss,
wahsaga

[Ingo Turski]

Hi,

Ich hab die Breite auf 370 px setzen müssen, sonst fliegt mir die "nachbarschaft" im safari um die Ohren. Vielleicht kann im IE nochmal jemand schauen?

ist ok, aber leider nur solange man die schrift nicht größer stellt.
Könnte hier nicht weniger mehr sein? Sprich eine Weitenangabe einfach weglassen?

freundliche Grüße
Ingo

[Detlef G.]

Hallo Ingo

... Sprich eine Weitenangabe einfach weglassen?

Nein.
Float darf afaik nur mit Breitenangabe verwendet werden.

MFG
Detlef

[Elya]

Hallo Ingo,

Ich hab die Breite auf 370 px setzen müssen, sonst fliegt mir die "nachbarschaft" im safari um die Ohren. Vielleicht kann im IE nochmal jemand schauen?

ist ok, aber leider nur solange man die schrift nicht größer stellt.

Da ich mich nun doch auf eine feste Breite insgesamt festgelegt habe, wird ein Umbrechen bei größererer Schrift nicht völlig zu verhindern sein, ebenso wie die Grenzüberschreitung der Hauptnavi nach rechts. Ich denke aber nochmal über flexiblere Varianten nach bzw. wie ich das anders machen kann. Es wächst ja noch... ,-)

Gruss aus Koeln-Ehrenfeld,

Elya

[Ingo Turski]

Hi Elya,

Da ich mich nun doch auf eine feste Breite insgesamt festgelegt habe, wird ein Umbrechen bei größererer Schrift nicht völlig zu verhindern sein, ebenso wie die Grenzüberschreitung der Hauptnavi nach rechts.

doch, normalerweise schon.
Du verwendest recht viele ineinander verschachtelte Boxen und gibst allen eine Weite. Dies sollte sich reduzieren lassen.
@Detlef: ich meinte hier nicht die Weiten der floatenden Boxen.

<div id="inhaltsbox"> ... <div id="seiteninhalt"> <div id="content">
#inhaltsbox { width:678px; ...
#seiteninhalt { ... width:678px; ...
könnte wohl entfallen, oder?

#content { ... width:400px; float:left; ...
wenn Du hier auf float verzichtest und stattdessen die sidebar floaten läßt, kannst Du auf die Weite verzichten und hast nebenbei genug Spielraum für die Kompensattion der interschiedlichen Boxmodelle.

freundliche Grüße
Ingo

[Roland]

Hallo Elya,

als nur sporadischer Besucher des Forums und ziemlicher HMTL-etc.-Amateur maße ich mir bei solchen Fragen normalerweise nicht an, meinen Senf dazu zu geben, aber hier war mein erster (und bleibender) Eindruck: einfach wunderschön!

Eine winzige Kleinigkeit fand ich persönlich etwas irritierend: Wenn zwischen zwei Seiten gewechselt wird, von denen eine so lang ist, daß ein Scrollbar erscheint, die andere aber nicht, ändert sich die horizontale Positionierung, d.h. der Inhalt springt etwas zur Seite. Wie man das ändert (wenn's denn geht) fragst Du besser die Fachleute hier:-)

Ansonsten wie gesagt, schlicht beeindruckend! Netscape 4.79 zerhaut die Seite, aber wer nutzt den schon. Unter Netscape 7.1, Opera 7.21 und IE 6.0 praktisch identische Darstellung.

Gruß
Roland

[at]

Hallo.

Eine winzige Kleinigkeit fand ich persönlich etwas irritierend: Wenn zwischen zwei Seiten gewechselt wird, von denen eine so lang ist, daß ein Scrollbar erscheint, die andere aber nicht, ändert sich die horizontale Positionierung, d.h. der Inhalt springt etwas zur Seite. Wie man das ändert (wenn's denn geht) fragst Du besser die Fachleute hier:-)

Der Effekt lässt sich sehr einfach erklären: Da die Bildlaufleiste nur auf einer Seite erscheint, das Dokument aber innerhalb des zur Verfügung stehenden Platzes weiterhin zentriert wird, rückt der Inhalt ein wenig zur Seite. Vermeiden lässt sich dies meines Wissens nur, indem die Bildlaufleisten permanent und gegebenenfalls deaktiviert anzeigen lässt oder direkt im Inhalt Scrollen lässt, was aber wieder zu anderen Schwierigkeiten führt.
MfG, at

[Elya]

Hallo at + Roland,

erstmal danke für's Lob.

Eine winzige Kleinigkeit fand ich persönlich etwas irritierend: Wenn zwischen zwei Seiten gewechselt wird, von denen eine so lang ist, daß ein Scrollbar erscheint, die andere aber nicht, ändert sich die horizontale Positionierung, d.h. der Inhalt springt etwas zur Seite.

Der Effekt lässt sich sehr einfach erklären: Da die Bildlaufleiste nur auf einer Seite erscheint, das Dokument aber innerhalb des zur Verfügung stehenden Platzes weiterhin zentriert wird, rückt der Inhalt ein wenig zur Seite.

genau, ich habe bisher auch noch keine befriedigende Lösung dafür gefunden, aber da ich tendentiell bei den meisten Seiten noch Inhalt reinpacken werde, wird sich das Problem minimieren, da fast überall ein Scrollbalken sein wird. Aber wenn jemand eine Idee hat, die nicht von hinten durch die JS-Brust ins Iframe-Auge geht - bitte um Anregungen!

Gruss aus Koeln-Ehrenfeld,

Elya

[KD-one]

Hallo Elya,

Runde Sache diese Seite. :)
Man siht ihr durchgängig an, daß sie mit viel Liebe zum Detail gestaltet wurde.
Der Link "eingang" führt auf unterschiedliche Seiten(index.html,/pgs/eingang.html), wobei letztere Seite einen 404 ergibt.
Selbst wenn die Seite vorhanden wäre, empfinde ich unterschiedliche Ziele bei ein und demselben Link als verwirrend.
Die "Bapperl" solltest du wirklich zumindest farblich überarbeiten, die passen so überhaupt nicht auf die Seite. ;-)
Auf den längeren Seiten wie z.B. Wohnzimmer, würde ich rechts unten noch einen Top-Link einfügen.
Überlegenswert fände ich auch noch, deine externen Links als solche zu kennzeichnen, da aus dem Linktext oft nicht hervorgeht, daß der Link einem auf andere Seiten entführt.
Ja, und das war's auch schon, wie gesagt, eine selten runde Sache. :)

Gruß

Kurt

[KD-one]

Hallo Elya,

Vor lauter Begeisterung hätte ich ja nun glatt auf den Grund deiner Anfrage vergessen.
Sieht auf Mozilla 1.5, Firebird 0.7, Opera 7.2 und Ie 6.0 beinahe identisch aus.
Und noch ein kleiner Nachtrag: Am unteren Seitenrand würde ich die Seite nicht aprupt beim Querstrich enden lassen, sondern eher denselben Abstand wie oben einfügen. ;)

Gruß

Kurt

[Chräcker Heller]

Hallo,

ich gebe zwar zu, das ich noch nicht ganz verstanden habe, worum es nun "genau" geht, aber das macht nichts. Die Seite ist zum neidisch werden schön. Punkt.

Chräcker

PS. eine klitzekleinewinzigemini-Sache: ich würde unter dem unteren Rahmenrand per "was-weiß-ich" noch etwas Platz schaffen, damit der untere Rahmenrand beim beendeten erscrollen der längeren Bildschirmseiten nicht direkt an meiner Browserstatusleiste klebt sondern etwas weiß zwischen sich und selbiger Leiste hat....

[Chräcker Heller]

PS. grad erst den Bapperl-Gruß entdeckt ;-) Danke für selbigen, und an so einer versteckten dezenten Stelle auf einer solch schönen Seite, da darfste auch stolz bapperln ;-)

Chräcker

[at]

Hallo.

PS. grad erst den Bapperl-Gruß entdeckt ;-) Danke für selbigen, und an so einer versteckten dezenten Stelle auf einer solch schönen Seite, da darfste auch stolz bapperln ;-)

Da du es gerade erwähnst: In der Subnavigation von "nachbarschaft" bricht "kollegen und freunde" sehr unglücklich um, nämlich nach dem "und". Außerdem funktioniert mindestens ein Link nicht, was sicher an dem "hhttp" liegt.
MfG, at

[Elya]

Hallo at,

Da du es gerade erwähnst: In der Subnavigation von "nachbarschaft" bricht "kollegen und freunde" sehr unglücklich um, nämlich nach dem "und". Außerdem funktioniert mindestens ein Link nicht, was sicher an dem "hhttp" liegt.

kannst Du jetzt noch einmal schauen? Hab mit wahsagas Hilfe noch etwas gedreht und außerdem die Schrift eine Winzigkeit verkleinert. Jetzt sollte es nicht mehr umbrechen.

Gruss aus Koeln-Ehrenfeld,

Elya

[at]

Hallo.

kannst Du jetzt noch einmal schauen? Hab mit wahsagas Hilfe noch etwas gedreht und außerdem die Schrift eine Winzigkeit verkleinert. Jetzt sollte es nicht mehr umbrechen.

Bei mir bricht sie noch immer um. Nimm doch einfach " ".
MfG, at

[Elya]

Hallo Chräcker,

ich gebe zwar zu, das ich noch nicht ganz verstanden habe, worum es nun "genau" geht, aber das macht nichts. Die Seite ist zum neidisch werden schön. Punkt.

jetzt übertreib aber mal nicht ;-) Das mit dem "genau" hoffe ich inhaltlich noch etwas runder zu gestalten, aber ein Bauchladen wird es sicher bleiben...

PS. eine klitzekleinewinzigemini-Sache: ich würde unter dem unteren Rahmenrand per "was-weiß-ich" noch etwas Platz schaffen, damit der untere Rahmenrand beim beendeten erscrollen der längeren Bildschirmseiten nicht direkt an meiner Browserstatusleiste klebt sondern etwas weiß zwischen sich und selbiger Leiste hat....

Du hast recht, jetzt ist es stimmig.

Gruss aus Koeln-Ehrenfeld,

Elya

[Chräcker Heller]

Hallo,

jetzt übertreib aber mal nicht ;-)

hab ich nicht. Meine Frau meinte abends: "bist Du immer noch bei dieser Seite?"

Und den Bauchladen habe ich mittlerweile auch kapiert ;-) Das ist somit die erste "dies-ist-meine-Hamster"-Seite (bitte nicht böse sein ob dieser eher dispektierlichen Formulierung) die mir nicht nur inhaltlich gefällt, sondern (auch mir diesbezüglichen Ewignörgler) zeigt, das man sowas sogar wirklich "machen" kann ;-)

Chräcker

[Elya]

Hallo an alle,

zunächst noch einmal herzlichen Dank für die ausführlichen Hilfen und Kommentare am Wochenende. Ab heute sitze ich auch wieder an Windows-Rechnern und IE und kann selbst die Ergebnisse beobachten.

Erstaunlicherweise siehts bei Win/IE 5.5 gar nicht so schlimm aus, die üblichen padding-Dinge, aber eins irritiert mich: Die (längeren) Seiten werden nicht gescrollt! Ich vermute, das ist irgendwie mit den float-Eigenschaften verbunden, aber wie und warum?

Hat dazu noch jemand eine Idee?

Gruss aus Koeln-Ehrenfeld,

Elya

[wahsaga]

hi,

Erstaunlicherweise siehts bei Win/IE 5.5 gar nicht so schlimm aus, die üblichen padding-Dinge, aber eins irritiert mich: Die (längeren) Seiten werden nicht gescrollt! Ich vermute, das ist irgendwie mit den float-Eigenschaften verbunden, aber wie und warum?

ich sitze auch gerade vor einem IE 5, 5.0 um genau zu sein, kann das problem also nachvollziehen.

allerdings löst sich das problem auch ganz schnell wieder in luft auf, wenn ich overflow:visible; aus deinem CSS für den body rausnehme.
wenn du dir http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#overflow ansiehst, steht da die bemerkung:
"Der Internet Explorer unterstützt die Angabe overflow:visible nicht."
da selfhtml nicht mehr allzu aktuell ist, dürfte das auf den 5er-IE bezogen sein, und genau das hier vorliegende problem betreffen.

frage:
_brauchst_ du overflow:visible für den body hier in irgendeinem browser für die korrekte darstellung?
wenn nicht, lass es einfach ganz weg - wie gesagt, dann "funzt" es im 5er-IE.
wenn du es doch für andere browser brauchst, dann verstecke es vor dem IE 5 - entweder über einen geeigneten CSS-hack, oder in dem du es für den IE 5 nach dem einbinden deiner CSS-datei explizit überschreibst, kleiner style-bereich innerhalb von conditional comments wäre eine möglichkeit dazu.

gruss,
wahsaga

[Elya]

Hallo wahsaga,

Erstaunlicherweise siehts bei Win/IE 5.5 gar nicht so schlimm aus, die üblichen padding-Dinge, aber eins irritiert mich: Die (längeren) Seiten werden nicht gescrollt! Ich vermute, das ist irgendwie mit den float-Eigenschaften verbunden, aber wie und warum?

allerdings löst sich das problem auch ganz schnell wieder in luft auf, wenn ich overflow:visible; aus deinem CSS für den body rausnehme.

ups, ich war mir dessen gar nicht mehr bewußt, ist wohl noch ein Überbleibsel aus dem Versuch, dieses leichte Verrutschen zwischen nicht-Scroll-Seiten und Scrollseiten zu verhindern. Klappt aber nicht und ist deshalb völlig überflüssig. Hätte ich auch selber finden können. Danke!

Gruss aus Koeln-Ehrenfeld,

Elya