Browserunabhängige Logos...

Dieses Thema im Forum "Web Page Design" wurde erstellt von zephyr, 17.12.2006.

  1. zephyr

    zephyr Thread Starter MacUser Mitglied

    Beiträge:
    94
    Zustimmungen:
    1
    MacUser seit:
    22.03.2005
    hallo,
    ich bin dabei, mir mit der menalto gallery v2.1.2 eine Website zum veröffentlichen meiner bilder zu basteln. das hat auch soweit ganz gut funktioniert. erste ergebnisse kann man sich unter:

    http://www.kra-net.de

    ansehen. probleme habe ich moch mit dem logo oben links. bei dem logo handelt es sich um eine .png-file die ich mit photoshop elements 3 erstellt habe. es ist eigentlich nur ein schriftzug auf transparentem hintergrund. das funktioniert auch auf allen browsern ausser dem ms internet explorer. dort ist das logo in einem häßlichen hellgrau unterlegt.

    kann mir jemand erklären, wie ich ein logo erstelle, das im ms internet explorer genauso dargestellt wird wie in firefox oder safari?

    vielen dank für die hilfe.
     
  2. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    Transparente .png, die direkt im HTML eingebunden sind (nicht über CSS
    und background) können mit einem PNG-Fix auch für den IE transparent
    dargestellt werden.

    zB kannst du dieses Script verwenden:
    Code:
    /*
     
    Correctly handle PNG transparency in Win IE 5.5 & 6.
    http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
    
    Use in <HEAD> with DEFER keyword wrapped in conditional comments:
    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    
    */
    
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
    {
       var arVersion = navigator.appVersion.split("MSIE")
       var version = parseFloat(arVersion[1])
       if ((version >= 5.5) && (document.body.filters)) 
       {
          for(var i=0; i<document.images.length; i++)
          {
             var img = document.images[i];
             var imgName = img.src.toUpperCase();
    
             if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
             {
                var imgID = (img.id) ? "id='" + img.id + "' " : ""
                var imgClass = (img.className) ? "class='" + img.className + "' " : ""
                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
                var imgStyle = "display:inline-block;" + img.style.cssText 
                if (img.align == "left") imgStyle = "float:left;" + imgStyle
                if (img.align == "right") imgStyle = "float:right;" + imgStyle
                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
                var strNewHTML = "<span " + imgID + imgClass + imgTitle
                + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
                + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
                + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
                img.outerHTML = strNewHTML
                i = i-1
             }
          }
       }    
    }
    window.attachEvent("onload", correctPNG);
    kopier dir das in eine eigene Datei namens pngfix.js zum Beispiel und binde die in
    die Dateien in den <head>-Bereich ein, die ein transparentes .png beinhalten.:
    Code:
    <script type="text/javascript" src="pngfix.js"></script>
    Wenn ich keine Fehler reingebaut hab müsste es so gehn…


    lea
     
  3. Darii

    Darii MacUser Mitglied

    Beiträge:
    2.066
    Zustimmungen:
    110
    MacUser seit:
    24.02.2004
    Kein png verwenden, das kann der IE nicht. Selbst wenn man dem den Alpha-Kanal reingeprügelt kriegt, stellt er immer noch die Farben falsch dar(zumindest der 6er unter Wind)..
     
  4. zephyr

    zephyr Thread Starter MacUser Mitglied

    Beiträge:
    94
    Zustimmungen:
    1
    MacUser seit:
    22.03.2005
    erst mal danke für die schnellen tips.

    an den script von lea traue ich mich nicht so recht ran, da hab ich zuwenig ahnung von.

    im original ist das logo eine .gif-file. als gif sieht mein eigenes logo aber eher bescheiden aus. ist .jpg eine alternative oder habe ich damit die gleichen probleme? oder anders gefragt: welches grafik-format ist zu empfehlen?
     
  5. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    gif und jpg bereiten beide keine Probleme.
    jpg hat halt keine Transparenzen.
    gif hat welche, dafür nur 256 Farben.

    Im Web hast du eigentlich nur die zwei und dann noch .png als
    Formate zur Verfügung. png mag der IE nicht, alles andere geht.


    lea
     
  6. Darii

    Darii MacUser Mitglied

    Beiträge:
    2.066
    Zustimmungen:
    110
    MacUser seit:
    24.02.2004
    jpg würde auch gehen, bei so filigranen Sachen wie Logos aber unbedingt eine Qualität >= 95 verwenden.
    Da es eine private Homepage ist, kannst du es aber auch beim png lassen. Der IE7 kommt damit klar und wird inzwischen auf über die automatischen Updates verteilt.
     
  7. zephyr

    zephyr Thread Starter MacUser Mitglied

    Beiträge:
    94
    Zustimmungen:
    1
    MacUser seit:
    22.03.2005
    ok, habe mich doch für die script-variante entschieden, und es funktioniert auf anhieb.

    vielen dank lea!
     
  8. miss.moxy

    miss.moxy MacUser Mitglied

    Beiträge:
    6.558
    Zustimmungen:
    624
    MacUser seit:
    15.05.2004
    Bitte – ist nicht so schwer, wie es anfangs aussieht, gelle ;)
     
Die Seite wird geladen...
Ähnliche Themen - Browserunabhängige Logos
  1. Oslo
    Antworten:
    7
    Aufrufe:
    1.306

Diese Seite empfehlen