Meinung zu Website / CSS-Probleme mit IE5.x

[Andreas Dölling]

Hallo,

ich habe im Schnelldurchlauf eine kleine Website für eine befreundete Band gebaut [http://www.sinew.de/].
Das Design wurde von der Band geliefert, und leider konnte ich den Jungs bestimmte - aus meiner Sicht - problematische Punkte nicht ausreden, wie z.B. den extrem kleinen Content-Bereich.
Naja - das ist wohl Geschmackssache. Zumindest werde ich die Band noch davon überzeugen, wenigstens eine weitgehend designlose Druckversion einzubauen.

Mich interessiert eher Eure Meinung zum XHTML- und CSS-Ansatz. Ich wollte die Site auf jeden Fall ohne Tabellenlayout umsetzen, was auch einigermaßen gelungen ist. Die Seiten sehen auch ohne aktivierte Styles vernünftig aus (läßt sich gut mit der "Web Developer"-Extension des Firefox testen).

Womit ich Probleme habe - ich bin, obwohl ich mich schon einige Zeit mit dem Thema "tabellenloses Design" befasse, noch kein CSS-Experte -  das ist die Hauptnavigation, die aus Bildlinks innerhalb einer per CSS formatierten UL-Liste besteht.
Im Firefox/Mozilla sieht das Menü so aus, wie es sein soll.
Im IE rutscht es ein, zwei Pixel nach unten. In Opera einen Pixel zu weit nach oben. Konqueror, Safari - keine Ahnung.
Ich weiß, daß ich da mit "CSS-Hacks" arbeiten kann, einen habe ich auch schon eingesetzt - aber ich würde es besser finden, ohne solche Hacks auszukommen.

Daher wäre es super, wenn Ihr mir vielleicht auf die Sprünge helfen könntet, wo der Haken bei dem von mir fabrizierten Menü ist. Vielleicht ist es nur ein Detail. Vielleicht ist der gesamte Ansatz Quatsch.

Hier die Style-Angaben zum Menü:
ul#menu {
list-style-type:none; margin:18px 0px 0px 70px; padding:0px 0px 0px 0px;
}
/* Hack für IE */
* html ul#menu {
  list-style-type:none; margin:20px 0px 0px 70px; padding:0px 0px 0px 0px;
}
/* Ende Hack für IE */
ul#menu li {
display:inline;
}
ul#menu li a {
border:0; margin:0px; margin-left:40px !important; padding:0px;
}
ul#menu li a img, ul#menu li img {
border:0; margin:0px; padding:0px;
}

Und sonst: selbst wenn Euch das XHTML-/CSS-Gedöns nicht interssiert - die Band macht verdammt gute Musik. Es lohnt sich also auch schon deshalb, dort vorbeizuschauen!
;)

Thanx und ciao,
Andreas

[Ingo Turski]

Hi,

http://www.sinew.de/.

Danke..;-)

Das Design wurde von der Band geliefert, und leider konnte ich den Jungs bestimmte - aus meiner Sicht - problematische Punkte nicht ausreden, wie z.B. den extrem kleinen Content-Bereich.

Noch viel problematischer ist, daß in kleineren Fenstern Inhalte unerreichbar verschwinden - naja, fast unerreichbar, über Scrollrad geht's noch.
Unbequem ist auf jeden Fall, daß in Mozillas das Scrollrad für den Inhaltsbereich nicht nutzbar ist.
Wie wäre es mit einem Kompromiß: keine absolute Positionierung, das Hintergrundbild nach unten durch ein passende Hintergrundfarbe ergänzt und die Inhaltsbox nicht mit fester Höhe.

Wieso nutzt Du für die Hover-Effekte übrigens nicht CSS?

freundliche Grüße
Ingo

[Andreas Dölling]

Hallo Ingo,

danke für Dein Feedback!

Noch viel problematischer ist, daß in kleineren Fenstern Inhalte unerreichbar verschwinden - naja, fast unerreichbar, über Scrollrad geht's noch.
Unbequem ist auf jeden Fall, daß in Mozillas das Scrollrad für den Inhaltsbereich nicht nutzbar ist.

Sehe ich auch so (wollte aber auf Frames verzichten, daher ein DIV mit overflow:auto für den Inhalt).
Das Problem ist, daß die Band schon Plakate, CD-Cover etc. hatte und sich ziemlich in die Bildwelt verliebt hatte. Bislang konnte ich sie noch nicht von einem freieren Layout überzeugen. Ich werde es aber weiter versuchen.

Wie wäre es mit einem Kompromiß: keine absolute Positionierung, das Hintergrundbild nach unten durch ein passende Hintergrundfarbe ergänzt und die Inhaltsbox nicht mit fester Höhe.

Gute Idee. Werde ich den Jungs mal vorschlagen.

Wieso nutzt Du für die Hover-Effekte übrigens nicht CSS?

Ich muß zugeben, daß ich das versucht habe und daran gescheitert bin. In Javascript war das für mich eine Sache von ein paar Minuten. Mit CSS hätte ich wohl noch ein bißchen recherchieren müssen.

Ciao,
Andreas

[Ingo Turski]

Hi,

Ich muß zugeben, daß ich das versucht habe und daran gescheitert bin. In Javascript war das für mich eine Sache von ein paar Minuten. Mit CSS hätte ich wohl noch ein bißchen recherchieren müssen.

Über CSS kannst Du derzeit bei :hover nur Hintergrundbilder austauschen. Wobei es vielleicht auch einen Versuch wert wäre zu testen, ob bei dieser Schrift ein Austausch der Hintergrundfarbe noch gut genug aussehen könnte.

freundliche Grüße
Ingo

[MudGuard]

Hi,

Über CSS kannst Du derzeit bei :hover nur Hintergrundbilder austauschen.

Nö:

  
a:link #normal { display:inline; }  
a:link #drueber { display:none; }  
a:hover #normal { display:none; }  
a:hover #drueber { display:inline; }  

  
<a href="wasauchimmer"><img id="normal" src="wasauchimmer" alt="wasauchimmer"><img id="drueber" src="wasauchimmer" alt="wasauchimmer"></a>  

cu,
Andreas

[Andreas Dölling]

Hallo,

[code lang=html]
<a href="wasauchimmer"><img id="normal" src="wasauchimmer" alt="wasauchimmer"><img id="drueber" src="wasauchimmer" alt="wasauchimmer"></a>

oh mein Gott - soooo einfach (wenn's man's so vor sich sieht...)!!!
Wenn Du wüßtest, wie mein CSS-Ansatz aufgebaut war, dann würdest Du Dich in die Ecke schmeißen vor Lachen...
Danke für den Denkanstoß (braucht man manchmal eben doch).
;)

Ciao,
Andreas

[Ingo Turski]

Hi,

<a href="wasauchimmer"><img id="normal" src="wasauchimmer" alt="wasauchimmer"><img id="drueber" src="wasauchimmer" alt="wasauchimmer"></a>

ja gut, sowas hatte ich aus meinen Gedanken völlig ausgeblendet..;-)  
Eines der Alt-Attribute sollte man aber wenigstens leer lassen.  
  
freundliche Grüße  
Ingo

-- 
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Tanzschritte gesucht?](http://www.1ngo.de/tanz/);-)

[MudGuard]

Hi,

<a href="wasauchimmer"><img id="normal" src="wasauchimmer" alt="wasauchimmer"><img id="drueber" src="wasauchimmer" alt="wasauchimmer"></a>

> ja gut, sowas hatte ich aus meinen Gedanken völlig ausgeblendet..;-)  
  
Solange es nur so ist:  
~~~css
  
#diesergedanke { visibility:hidden; }  

und nicht so:

  
gedanken { visibility:hidden; }  

Eines der Alt-Attribute sollte man aber wenigstens leer lassen.

"wasauchimmer" schließt natürlich auch den Leerstring ein ;-)

cu,
Andreas

[Chräcker Heller]

Hallo,

am Rande:

nachdem Ihr Euch dazu durchgerungen habt, nicht die Texte, sondern gleich die Songs(schnipsel) ins Netz zu stellen, solltet Ihr noch die title-Texte der Links ändern ;-)

Chräcker