Nadja: CSS-Layout, eine Frage

Hallo,

hab mir von SelfHTML die "Bausteine" für das Layout geklaut, was ihr hier sehen könnt (noch ohne eigene Inhalte).

Bitte nicht wegen der URL wundern - Ich war bei der Namensgebung des Servers nicht dabei *g*

Die Navigation links wird im Opera, im IE und im FF jeweils anders angezeigt.
Ich würde die aber gerne so wie im Opera dargestellt haben, also ohne Abstand zwischen den einzelnen Links und ohne Abstand zum Rand.
Wie mache ich das? Hab momentan leider die Übersicht über die CSS-Datei verloren und bräuchte dabei Hilfe...

Außerdem wird ein Navigationslink im IE nur aktiv, wenn ich direkt über den Text fahre. Ich würde aber gerne auch neben dem Text den Link anklicken können. Was muss ich da für den IE extra einstllen??

Liebe Grüße,
Nadja

--
system.exit(0);
  1. hi,

    Ich würde die aber gerne so wie im Opera dargestellt haben, also ohne Abstand zwischen den einzelnen Links und ohne Abstand zum Rand.

    dann solltest du auch noch margin für die li und ggf. für ul auf null setzen.

    Außerdem wird ein Navigationslink im IE nur aktiv, wenn ich direkt über den Text fahre. Ich würde aber gerne auch neben dem Text den Link anklicken können. Was muss ich da für den IE extra einstllen??

    der IE will für die links auch noch width:100% zusätzlich zum display:block haben.
    zusammen mit deinem padding:0.2em wird das aber dann natürlich beim IE 6 im standards mode zu einem kleinen problem führen, weil er dann das box model korrekt umsetzt.
    also entweder den IE 6 ebenfalls in den quirks mode versetzen - oder aber vielleicht padding in prozent angeben (z.b. 1%) und width dann entsprechend anpassen, 98%.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo,

      dann solltest du auch noch margin für die li und ggf. für ul auf null setzen.

      Danke, wie gesagt, ich hab gerade total die Übersicht verloren :(

      der IE will für die links auch noch width:100% zusätzlich zum display:block haben.
      zusammen mit deinem padding:0.2em wird das aber dann natürlich beim IE 6 im standards mode zu einem kleinen problem führen, weil er dann das box model korrekt umsetzt.
      also entweder den IE 6 ebenfalls in den quirks mode versetzen - oder aber vielleicht padding in prozent angeben (z.b. 1%) und width dann entsprechend anpassen, 98%.

      Danke für die Tipps :)

      Da die meisten von CSS-Layouts schwärmen, wollte ich es jetzt auch endlich mal ausprobieren, weil mir langsam die Argumente für Tabellen / iframes ausgehen ;)

      Liebe Grüße,
      Nadja

      --
      system.exit(0);
  2. Hi,

    hab mir von SelfHTML die "Bausteine" für das Layout geklaut, was ihr hier sehen könnt (noch ohne eigene Inhalte).

    Und warum hast Du Dich nicht an dem Beispiel orientiert und die Erläuterungen dazu gelesen?

    freundliche Grüße
    Ingo

    1. Hallo,

      Und warum hast Du Dich nicht an dem Beispiel orientiert und die Erläuterungen dazu gelesen?

      Wieso? Weiß nicht so recht, was du meinst...

      Liebe Grüße,
      Nadja

      --
      system.exit(0);
      1. Hi,

        Und warum hast Du Dich nicht an dem Beispiel orientiert und die Erläuterungen dazu gelesen?

        Wieso? Weiß nicht so recht, was du meinst...

        Weil in diesem Beispiel, das Du ja neben http://de.selfhtml.org/css/layouts/anzeige/kopfundfuss.htm als Vorlage verwendet hast, der Linkbereich auch im IE über die volle Breite der Listenelemente geht. Der zum anderen Beispiel relevante Unterschied ist, daß die Breite hier nicht für ul#navigation angegeben ist, sondern für das umschließende div#fixiert. Allerdings muß ich zugeben, daß mich das verwundert, denn eigentlich benötigt der IE eine Breitenangabe für das a-Element, um den Linkbereich auf das ganze Element auszudehnen.

        In beiden Selfhtml-Beispielen sind die Abstände in allen Browsern (außer dem IE 5.0) identisch, nämlich so, wie - im Gegensatz zu Deiner Seite - für:

          
          #Navigation li {  
            margin: 0; padding: 0.5em;  
          }  
        
        

        angegeben.

        freundliche Grüße
        Ingo

        1. Hallo,

          In beiden Selfhtml-Beispielen sind die Abstände in allen Browsern (außer dem IE 5.0) identisch, nämlich so, wie - im Gegensatz zu Deiner Seite - für:

          #Navigation li {
              margin: 0; padding: 0.5em;
            }

          
          > angegeben.  
            
          Dann guck ich mir das jetzt nochmal in aller Ruhe an.  
            
          Liebe Grüße,  
          Nadja
          
          -- 
          system.exit(0);
          
        2. Hallo,

          Ich könnte echt schreien. Ich verstehe einfach nicht, warum der IE 5.0 mir in der Navigation links einen Abstand macht!? *waaaaah*

          Liebe Grüße,
          Nadja

          --
          system.exit(0);
          1. Hallo,

            Ich könnte echt schreien. Ich verstehe einfach nicht, warum der IE 5.0 mir in der Navigation links einen Abstand macht!? *waaaaah*

            Erledigt :)

            Liebe Grüße,
            Nadja

            --
            system.exit(0);
  3. Hallo Nadja,

    Die Navigation links wird im Opera, im IE und im FF jeweils anders angezeigt.
    Ich würde die aber gerne so wie im Opera dargestellt haben, also ohne Abstand zwischen den einzelnen Links und ohne Abstand zum Rand.
    Wie mache ich das? Hab momentan leider die Übersicht über die CSS-Datei verloren und bräuchte dabei Hilfe...

    Abstände und Schriftgrössen, Zeilenabstände für die Navigationsliste
    kannst du ja erstmal gleich einstellen und schauen welcher Browser
    welche Angaben benötigt, für Opera und FF findet sich meist eine
    einheitliche Methode.

    Außerdem wird ein Navigationslink im IE nur aktiv, wenn ich direkt über den Text fahre. Ich würde aber gerne auch neben dem Text den Link anklicken können. Was muss ich da für den IE extra einstllen??

    Ähnliche wie hier zu CSS-Layout Listenmenu crossbrowser ausgeführt;
    z.B. im Head die IE-Angaben im conditional comment wie folgt
    ergänzen:

    #fixiert{float:left;}
    #fixiert li a{display:block;width:100%;}

    Sieht beim IE 6 schonmal brauchbar aus.

    Grüsse

    Cyx23

    1. Hallo,

      Sieht beim IE 6 schonmal brauchbar aus.

      Danke, danke :)

      Liebe Grüße,
      Nadja

      --
      system.exit(0);