Louis: kämpfe mit css (und ie): position, divs etc.

Hallo zusammen

Ich weiss, der Titel dieses Threads ist nicht gerade vielsagend, aber ich weiss nicht so recht, wie ich dieses Problem in Worte fassen soll.
Ich beschäftige mich noch nicht solange mit html/css, versinke (auch dank diesem Forum) aber immer mehr darin.
Ich wollte mal ein paar neue Sachen ausprobieren (mehr übungshalber...), u.a. position:fixed auch für IE... Nun so weit klappt es eigentlich auch. Es sieht inzwischen so aus:
http://cbyounes.ch/test1/.
Was denkt ihr? (Das ist noch kein Webauftritt, auch wenn der Text manchmal danach klingt, sondern einfach mal ein Versuch).
Was mich stört:

  • die Navigation verschwindet bei sehr schmalem Fenster.
  • im IE wird bei etwas schmalerem Fenster die Anordnung im weissen Inhaltsbereich seltsam (die grauen und der schwarze(ganz unten) Balken werden zu schmal, weil wegen dem Bild das div breiter wird)
  • und noch ein paar andere Sachen (gepixelte Label-Schrift z.B.)

Aber irgendwie kann ich mir nicht mehr weiterhelfen...
Habt ihr irgendwelche Ideen, wie ich diese Probleme lösen könnte?
Seht ihr noch andere Probleme?

Die Stylesheets sind: http://cbyounes.ch/test1/screen.css und
http://cbyounes.ch/test1/ie.css
(es stehen in diesen Stylesheets auch noch ein paar Kommentare und Fragen)

Bitte berücksichtigt, dass ich eben erst angefangen habe und das meiste noch nicht gemacht habe (Inhalt, Links, Druckstyle etc.)

Vielen Dank im Voraus

Louis

  1. Hi,

    Die Stylesheets sind: http://cbyounes.ch/test1/screen.css und

    Du verwendest zum Teil unsinnige Kombinationen von Eigenschaften, z.B.: float und position.
    http://www.w3.org/TR/REC-CSS2/visuren.html#q24

    .menu {
    position:fixed;
    right:58%; /*macht, dass das Menu links verschwindet,
     aber mit left:20%; (20% damit in 'normaler' Fenstergrösse richtig)
     ist die Navigation sehr weit rechts (über dem Inhalt)
     Ideal wäre wenn der Inhalt 'springen' würde, aber das geht
     denke ich nicht)*/

    hört sich an, als würdest Du float:right suchen statt position/right

    border-bottom bei inline-Elementen: ggf. die line-height erhöhen.

    height:8%; /*hier ist die Ursache der gepixelten Schrift.
       "darf man das?" */
    Ich sehe ehrlich gesagt keinen Zusammenhang zwischen der Höhe eines Elementes und pixeliger Schrift.

    Nochwas: Du verwendest viel position:fixed - daß dies im IE nicht funktioniert, ist Dir bekannt?

    cu,
    Andreas

    --
    MudGuard? Siehe http://www.Mud-Guard.de/
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo Andreas

      Vielen Dank für die Mühe

      Du verwendest zum Teil unsinnige Kombinationen von Eigenschaften, z.B.: float und position.

      position:relative hab ich mal ein richtig verwendetes float.
      Dann hab ich noch ein "historisches Relikt" in der class .p wo ein nicht verwendetes (und ignoriertes -inzwischen gelöschtes) float:left noch stand

      .menu {
      position:fixed;
      right:58%; /*macht, dass das Menu links verschwindet,
       aber mit left:20%; (20% damit in 'normaler' Fenstergrösse richtig)
       ist die Navigation sehr weit rechts (über dem Inhalt)
       Ideal wäre wenn der Inhalt 'springen' würde, aber das geht
       denke ich nicht)*/

      hört sich an, als würdest Du float:right suchen statt position/right

      hm, das versteh ich jetzt noch nicht ganz, werde aber etwas in diese Richtung auspobieren. Weisst Du wirklich wie das so gehen könnte?

      border-bottom bei inline-Elementen: ggf. die line-height erhöhen.

      Was hat die Zeilenhöhe mit dem unteren Rahmen zu tun? Ich habs soeben ausprobiert auch line-height:3em nützt nichts ich kann der Klasse .p weder einen unteren Rahmen, noch ein unteren margin verpassen.

      height:8%; /*hier ist die Ursache der gepixelten Schrift.
         "darf man das?" */
      Ich sehe ehrlich gesagt keinen Zusammenhang zwischen der Höhe eines Elementes und pixeliger Schrift.

      Eine Grafik mit einer Schrift ist ja normalerweise nicht zweifarbig, sondern rundet die schrägen und runden Buchstaben mit Zwischenfarben schön ab. Ich hab aber gewagt die Grösse in Prozente anzugeben. D.h. die Grafik ist ziemlich gross und wird dann zusammengestaucht auf die gewünschte Höhe, dabei gehen diese "Zwischentöne" halt verloren.
      Hat halt Vor und Nachteile. Aber hätte ja sein könne, dass das hier ein Aufschrei verursacht...

      Nochwas: Du verwendest viel position:fixed - daß dies im IE nicht funktioniert, ist Dir bekannt?

      Dann schau Dir mal die Seite im IE ab Version 5 an! Überraschung!!

      Gruss
      Louis

    2. Hallo nochmals

      Du verwendest zum Teil unsinnige Kombinationen von Eigenschaften, z.B.: float und position.

      .menu {
      position:fixed;
      right:58%; /*macht, dass das Menu links verschwindet,

      hört sich an, als würdest Du float:right suchen statt position/right

      Moment mal - das widerspricht sich doch. Ich möchte, dass das Menu fixiert bleibt, also position:fixed, dann nützt mir float ja nichts mehr...oder?

      Gruss
      Louis