Fabian: Menü-Leisten wie auf Linux.com

Hi!

Mir gefallen die gelbe, orange und grüne Menüleiste auf www.Linux.com ziemlich gut- aber leider kann ich sie nicht in meine Testseite implementieren, weil ich den für den "Fadeout"-Effekt verantwortlichen CSS-Identifier nicht finden kann... .
Wenn ich aber nur einen Code wie z.B.
[html]
<div class="block" id="whatislinux">
[/html]
verwende, dann bekomme ich zwar die Farbe, aber eben nicht den "Fadeout"-Effekt... .
Findet jemand die entsprechende Stelle im CSS-File?

MfG
Fabian

  1. verwende, dann bekomme ich zwar die Farbe, aber eben nicht den "Fadeout"-Effekt... .

    was genau meinst du mit "Fadeout"-Effekt? wenn du den farbverlauf im hintergrund meinst, der befindet sich in der style.css auf zeile 310

    #whatislinux, #feeds, #networkworld, #ad_pos_special {
    background:transparent url(http://c.fsdn.com/lc/themes/linux/images/midnight_bg.gif) no-repeat scroll left bottom;
    padding-bottom:1em;

    1. was genau meinst du mit "Fadeout"-Effekt? wenn du den farbverlauf im hintergrund meinst, der befindet sich in der style.css auf zeile 310

      Hi!
      Nein, ich meine den Farbverlauf in der Titelleiste- also da, wo "What is Linux", "Feeds" und "Special Offers" steht. Den Dateinamen für die dort verwendeten Grafiken kann ich einfach nirgends finden- und ich kann den Effekt auch nicht nachbilden. Daher brauche ich Hilfe.

      1. Hi there,

        Nein, ich meine den Farbverlauf in der Titelleiste- also da, wo "What is Linux", "Feeds" und "Special Offers" steht. Den Dateinamen für die dort verwendeten Grafiken kann ich einfach nirgends finden- und ich kann den Effekt auch nicht nachbilden. Daher brauche ich Hilfe.

        was genau verstehst Du an der Zeile:

        background: url("http://c.fsdn.com/lc/themes/linux/images/midnight_bg.gif") no-repeat bottom left;

        ,die in dem Stylesheet:

        http://www.linux.com/themes/linux/style/style.css

        steht, nicht?

      2. Oder andersrum:

        Warum findest Du diese Graphik nicht:

        http://c.fsdn.com/lc/themes/linux/images/midnight_bg.gif

        1. Oder andersrum:

          Warum findest Du diese Graphik nicht:

          http://c.fsdn.com/lc/themes/linux/images/midnight_bg.gif

          Wie kann denn ein schwarzes Bild plötzlich gelbe, orange und grüne Gradient-Effekte hervorzaubern? Und weshalb sieht der Code
          [code lang=html]
          <html>
          <head>
          <link rel="stylesheet" type="text/css" href="template/style.css" media="screen" />
          </head>
          <body>

          <div class="block" id="whatislinux">

          <h4>What is Linux?</h4>
          <p class="linux1"><a href="/whatislinux/119700"><img src="http://c.fsdn.com/lc/themes/linux/images/tango-icon-theme/22x22/status/dialog-information.png" alt=""  style="margin-top: 4px;" />Learn about Linux</a></p>
          <p><a href="/download_linux/"><img src="http://c.fsdn.com/lc/themes/linux/images/tango-icon-theme/22x22/actions/go-down.png" alt="" />Download Linux</a></p>
          <p><a href="http://www.linux.com/forums/"><img src="http://c.fsdn.com/lc/themes/linux/images/tango-icon-theme/22x22/apps/help-browser.png" alt="" style="margin-top: -4px;" />Get Linux help</a></p>
          </div>

          <div class="block" id="feeds">
          <h4>Feeds</h4>
          <ul style="margin: 1em">
          <li><a href="/feature?theme=rss">Features</a></li>
          <li><a href="/feed?theme=rss">NewsVac</a></li>

          <li><a href="/xarbb?theme=rss">Forums</a></li>
          <li><a href="/feature/c4201?theme=rss">News</a></li>
          <li><a href="http://linuxcom.blip.tv/rss">Video</a></li>
          <li><a href="/?module=comments&amp;func=rss&amp;theme=rss">Comments</a></li>
          </ul></div>

          </body>
          </html>
          [/code lang=html]
          dann nicht so aus wie auf Linux.com? Also weshalb fehlt dann hier der Gradient-Effekt? Als CSS-File wird dabei eine Kopie von http://www.linux.com/themes/linux/style/style.css verwendet.

          1. Hi there,

            dann nicht so aus wie auf Linux.com? Also weshalb fehlt dann hier der Gradient-Effekt? Als CSS-File wird dabei eine Kopie von http://www.linux.com/themes/linux/style/style.css verwendet.

            dann musst Du diese Grafik nehmen: ;)

            http://c.fsdn.com/lc/images/tab_section.png

  2. Hi there,

    Mir gefallen die gelbe, orange und grüne Menüleiste auf www.Linux.com ziemlich gut- aber leider kann ich sie nicht in meine Testseite implementieren, weil ich den für den "Fadeout"-Effekt verantwortlichen CSS-Identifier nicht finden kann... .

    Den "Effekt" gibts leider nicht, das ist ein schlichtes Hintergrundbild. Keine Ahnung, ob zukünftige CSS-Spezifikationen so etwas vorsehen, aktuelle tun das jedenfalls mit Sicherheit nicht...

    1. Den "Effekt" gibts leider nicht, das ist ein schlichtes Hintergrundbild. Keine Ahnung, ob zukünftige CSS-Spezifikationen so etwas vorsehen, aktuelle tun das jedenfalls mit Sicherheit nicht...

      zumindest klingt es sinvoll. Angeblich ist webkit bereits dazu in der laage:
      http://www.css3.info/webkit-provides-implementation-of-css-based-gradients/

      1. Hi there,

        zumindest klingt es sinvoll. Angeblich ist webkit bereits dazu in der laage:
        http://www.css3.info/webkit-provides-implementation-of-css-based-gradients/

        Aha, offenbar in den CSS3-Specs vorgesehen. Keine Ahnung, was webkit ist, aber solange 99% aller Browser das noch nicht darstellen können, würd' ich es auch nicht verwenden. Aber damit kommen wir dann bald wieder zum leidigen Henne-Ei-Problem...;)

        1. Keine Ahnung, was webkit ist

          webkit ist die layout-engine von safari, die hat apple "geklaut", hieß früher mal khtml

          die engine ist ins übrigens betriebsystem integriert (mac os x ab version 10.3) - wenn microdollar einen browser ins betriebssystem integriert hagelts übrigens klagen, apple darf das aber ;)

          1. Hi there,

            die engine ist ins übrigens betriebsystem integriert (mac os x ab version 10.3) - wenn microdollar einen browser ins betriebssystem integriert hagelts übrigens klagen, apple darf das aber ;)

            Aha. Ich hab den Safaribrowser einmal zu Testzwecken auf einem WindowsXP-Rechner installiert, das hat mir das halbe System mit irgendeinem Dreck vollgemüllt, den ich absolut nicht wollte. Ich wollt nur die Rendering-Engine vom Browser testen und hatte plötzlich diesen Quicktime-Schei** am Rechner, irgendein Bonjour-Dienst hat sich ohne zu fragen als Autostarter eingeklinkt und das ganze Graffl wollte ständig nach Hause telefonieren und nach Updates suchen.

            Obwohl es mich  interessieren sollte, nach der Geschichte ist es mir wurscht, ob der Safaribrowser CSS3 beherrscht oder den ACID3-Test richtig darstellt, ich schau mir das Teil höchstens dann noch an, wenn ich einen Rechner hab', auf dem ich es unter strengster Quarantäne halten kann...;)

            1. Ich wollt nur die Rendering-Engine vom Browser testen und hatte plötzlich diesen Quicktime-Schei** am Rechner, irgendein Bonjour-Dienst hat sich ohne zu fragen als Autostarter eingeklinkt und das ganze Graffl wollte ständig nach Hause telefonieren und nach Updates suchen.

              Obwohl es mich  interessieren sollte, nach der Geschichte ist es mir wurscht, ob der Safaribrowser CSS3 beherrscht oder den ACID3-Test richtig darstellt, ich schau mir das Teil höchstens dann noch an, wenn ich einen Rechner hab', auf dem ich es unter strengster Quarantäne halten kann...;)

              sehe ich genauso - ich muss das ding halt zwangsläufig installiert habem zum testen

              man muss auf der apple-website nur das "ich will diesen verdammten müll nicht"-link zum downloaden klicken, der is etaws versteckt ;)

              ist wie beim adobereader - der will dir auch gleich alles mögliche mitinstallieren, wenn du den falschen link geklickt hast ;)

              1. Hi there,

                man muss auf der apple-website nur das "ich will diesen verdammten müll nicht"-link zum downloaden klicken, der is etaws versteckt ;)

                Das geht? Muss ich mir einmal anschauen. (Wenn's nicht klappt schick ich Dir meinen Rechtsanwalt auf den Hals;))

                1. Das geht? Muss ich mir einmal anschauen. (Wenn's nicht klappt schick ich Dir meinen Rechtsanwalt auf den Hals;))

                  http://www.apple.com/safari/download/
                  Download Safari 3.1.1 now.

                  • Safari for Windows XP or Vista
                  • Safari+QuickTime for Windows XP or Vista

                  mittlerweile ist die +quicktime-variante nicht mehr per default ausgewählt, der andere

                  ohne itunes oder quicktime sollte der bonjour-käse auch nicht nötig sein

                  1. Hi there,

                    http://www.apple.com/safari/download/

                    alles klar, danke...

        2. Aha, offenbar in den CSS3-Specs vorgesehen. Keine Ahnung, was webkit ist, aber solange 99% aller Browser das noch nicht darstellen können, würd' ich es auch nicht verwenden. Aber damit kommen wir dann bald wieder zum leidigen Henne-Ei-Problem...;)

          Webkit ist eine browserengine die von apple entwikelt wurde. sie wurde für den browser safari verwendet (http://www.apple.com/de/safari/)

          Es ist auf jeden fall davon abzuraten diese eigenschaft zu benutzten da sie tatsächlich 99% der browser NICHT können

          1. Webkit ist eine browserengine die von apple entwikelt wurde. sie wurde für den browser safari verwendet (http://www.apple.com/de/safari/)

            sagt apple ;)

            siehe hier:
            https://forum.selfhtml.org/?t=171455&m=1122368

          2. Es ist auf jeden fall davon abzuraten diese eigenschaft zu benutzten da sie tatsächlich 99% der browser NICHT können

            Ja und? Was passiert in den 99% der Browser, dass man das nicht benutzen sollte? Bei Eigenschaften, die nur schmückendes Beiwerk sind, bin ich ganz pragmatisch.

            Struppi.