PNG transparenz im Hintergrund! IE8 Problem

Chrizzel · #1 (**permalink**) 23.08.2010, 11:04

Hallo Leute,

ich weiß das dieses Thema hier schon oft durchgekaut worden ist nur habe ich einfach nicht die passende lösung gefunden drum habe ich mich registriert und hoffe das ihr mir als neuling im eurem forum weiterhelfen könnt!

Also es handelt sich wie der titel schon sagt um transparente backgrounds.

Am anfang habe ich das ganz kompliziert gemacht und es hatte auch nicht funktioniert nur jetz habe ich dann angefangen es über transparente PNG´s zu machen find ich ziemlich einfach nur gibt es da ein Problem der IE 8 wegen dem ich echt schon ne menge an meinem template ändern musste spackt rumm!

Der will mir ums verrecken nicht die transparente PNG anzeigen es kommt auch kein rotes x es kommt einfach nur nix..xD hier mal der css code welcher sich auf mein textfeld bezieht! das png soll im hintergrund liegen!

gesamter code folgt weiter unten

Code:

.xxx #textfeld {
	margin: 0 30em 0 0em;
	background-image:url(../Backgrounds/grafikfeld.png);
	left:200px;
	top:50px;
	-moz-border-radius:10px;
	-khtml-border-radius:30px;
	text-align: center;
}

die transparente png + html hab ich mit photoshop gemacht!
Im Firefox wird alloes richtig angezeigt!

emti · #2 (**permalink**) 23.08.2010, 11:09

Hast Du das Bild denn in PS auch richtig abgespeichert?
Ausserdem ein Link wo man sich das alles mal ansehen kann wäre schon hilfreich. Codeschnippsel bringen da nicht viel.

http://xhtmlforum.de/40079-f-r-frage...twortende.html

Chrizzel · #3 (**permalink**) 23.08.2010, 11:13

Ich hab es so abgespeichert

1. 10×10 Pixel großes Bild mit transparentem Hintergrund erstellen
2. Eine neu Ebene erstellen und mit der gewünschten Farbe füllen
3. Dieser Ebene die gewünschte Transparenz geben
4. Für Web speichern und PNG auswählen (png24)

sry ein link kann ich noch nicht zur verfügung stellen da ich die page momentan noch offline am bearbeiten bin und erst wenn sie fertig ist soll sie die alte online ersetzen!

Aber ich schau mal ob ich sie nachher mal aufsetzten kann zum anschauen!

Hier der gesamte code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ITOC GmbH</title>
<link rel="shortcut icon" href="Texture/favicon.ico">

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

<style type="text/css">
img, div, a, input { behavior: url(iepngfix/iepngfix.htc) }
</style> 

</head>

<body class="itoc">
<div id="container">


<div id="header">
<img src="Header/logo.jpg" width="447" height="117" />
</div>



<div id="button">
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a class="MenuBarItemSubmenu" href="#">B&uuml;rodienstleistungen</a>
      <ul>
        <li><a href="#">Finanzbuchhaltung</a></li>
        <li><a href="#">Anlagenbuchhaltung</a></li>
        <li><a href="#">Cashmanagement</a></li>
        <li><a href="#">Sekretariat</a></li>
        <li><a href="#">Sachbearbeitung</a></li>
        <li><a href="#">Mahnwesen</a></li>
        <li><a href="#">Lohn- &amp;Gehaltsabrechnung</a></li>
        <li><a href="#">Botendienste/Lieferservice</a></li>
        <li><a href="#">Controlling</a></li>
        <li><a href="#">Personal</a></li>
        <li><a href="#">Marketing</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Element 2</a>
      <ul>
        <li><a href="#">Unbenanntes Element</a></li>
      </ul>
    </li>
    <li><a class="MenuBarItemSubmenu" href="#">Element 3</a>
      <ul>
        <li><a href="#">Element 3.1</a>          </li>
        <li><a href="#">Element 3.2</a></li>
        <li><a href="#">Element 3.3</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Links &amp; Downloads</a>
      <ul>
        <li><a href="#">TeamViewer</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Wir &uuml;ber uns</a>
      <ul>
        <li><a href="#">Unbenanntes Element</a></li>
      </ul>
    </li>
    <li><a href="#" class="MenuBarItemSubmenu">Impressum</a>
      <ul>
        <li><a href="#">Unbenanntes Element</a></li>
        <li><a href="#">Unbenanntes Element</a></li>
      </ul>
    </li>
  </ul>
</div>

<div id="platzhalter">
<br />
</div>

<div id="alternativerberreich">
	<div id="grafikfläche">
      <p><img src="Bilder/animated-gifs-01.gif" width="120" height="160" />
      </p>
      <p>so weil ich alles geschafft habe gleich mal fertig machen : D </p>
	</div>
    
	<div id="textfeld">
	  	<br />
	  	<strong>Finanzbuchhaltung</strong> für Einnahme/Überschussrechner und  Bilanzierer
      <ul type="disc">
          <li>sortieren, kontieren und buchen       der laufenden Geschäftsvorfälle</li>
          <li>Führung und Abschluss des       Kassenbuches </li>
          <li>Umsatzsteuervoranmeldung </li>
          <li>Erstellen einer monatlichen       betriebswirtschaftlichen Auswertung (BWA) </li>
          <li>Vorbereitung des Jahresabschlusses </li>
          <li>Erstellen der offene Posten Liste</li>
        </ul>
        <p>Das ist nur ein erster test wie das alles hier aussehen kann mit text aber is schon iwie cool </p>
        <h1>=D</h1>
        <h1><img src="Bilder/animated-gifs-03.gif" width="500" height="313" /><br />
          <br />
          <br />
        </h1>
      </p>
</div>
    
    

</div>

<div id="footer">
<img src="Texture/strich.jpg" height="3" width="1152"/>
    <br />
    <!---Text unter dem Footer hier drunter--->
    Der Inhalt der Website der ITOC IT- & Office Consulting GmbH ist urheberrechtlich geschützt.
	Die ITOC IT- & Office Consulting GmbH räumt Dritten jedoch das Recht ein, bereitgestellte Texte ganz oder teilweise zu speichern
    bzw. zu vervielfältigen, sofern diese Inhalte für die eigenen bzw. unmittelbaren beruflichen Zwecke benötigt werden.
	Die Speicherung sowie die Vervielfältigung von Grafiken und Bildmaterial aus unserer Website ist untersagt.
</div>

</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

hier die gesamte style.css

Code:

/* Version 1.0 des ITOC stylesheets */

/* written by Norman Abrahamson starting @ 20.08.2010*/

/******************************************************

	für die ITOC GmbH, im berreich meiner Ausbildung
	
******************************************************/

body {
	background-color: #FFF;
	background-image:url(../Backgrounds/background.jpg);
	background-repeat:no-repeat;
}

.itoc #container {
	width:1152px;
	height: auto;
	margin-left:30px;
	
}

.itoc #header {
	background: #ffffff;
	width:1152px;
	height:auto;
} 
.itoc #button {
	width:1152px;
	height:35px;
	
}

#alternativerberreich {
	height: auto;
	width: 1152px;
}

.itoc #textfeld {
	margin: 0 30em 0 0em;
	background-image:url(../Backgrounds/grafikfeld.png);
	left:200px;
	top:50px;
	-moz-border-radius:10px;
	-khtml-border-radius:30px;
	text-align: center;
}

.itoc #grafikfläche {
	background-image:url(../Backgrounds/textfeld.png);
	float: right;
	padding: 15px 0;
	width: 26em;
	left:200px;
	top:50px;
	-moz-border-radius:10px;
	-khtml-border-radius:30px;
	text-align: center;
}

.itoc #footer {
	margin-top:15px;
	width:1152px;
	height:auto;
	font-size: 9px;
}

rund1
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#efefef;
}
rund2
{
border:3px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
rund3
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
}

emti · #4 (**permalink**) 23.08.2010, 11:50

Zitat:

Zitat von Chrizzel

4. Für Web speichern und PNG auswählen (png24)

Vielleicht mache ich ja was falsch, aber in Fireworks kann ich in png24 nicht die Transparenz abspeichern (lasse mich gerne eines besseren belehren).
Ich speichere es in png8 mit Alphatransparenz ab.

Chrizzel · #5 (**permalink**) 23.08.2010, 11:57

sry ich arbeite nich so oft mit fireworks ich hab auch grad nur die englishe version wollte das jetz mal so probieren wie du das machst nur weiß ich leider nicht wie bekomme ich das bild tranparet und wie speichere ich es fürs web?

Also wenn ich das im photoshop mit png8 abspeichere dann will er mit gar keine transparenz anzeigen! =(

emti · #6 (**permalink**) 23.08.2010, 12:08

Du kannst das ruhig weiter mit PS machen, denn in png8 mit alphatransparenz kann man das dort ja auch speichern. Ich habe leider kein PS mehr.

"Für´s Web speichern" gibt es bei FW nicht. FW speichert automatisch keine Metadaten mit und, oh wunder

, die Bilder sind in FW gespeichert nur halb so groß wie in PS bei gleicher Qualitätsstufe (z.b. jpg 80%).

Ich habe die deutsche CS5 Version und dort geht das über "Bildvorschau" und dann exportieren. In der CS4 war das aber etwas anders. Schau mal im "Datei" Menü, dort sollte es ein Punkt "Exportieren" geben.

fricca · #7 (**permalink**) 23.08.2010, 12:11

Zitat:

Zitat von emti

Vielleicht mache ich ja was falsch, aber in Fireworks kann ich in png24 nicht die Transparenz abspeichern (lasse mich gerne eines besseren belehren).

In Fireworks heißt das dann PNG32.
Photoshop nennt es PNG24, speichert aber mit 32bit.

Ich bezweifle, dass díe Bilder das Problem sind.
Chrizzel, poste einen Link. Alles andere ist zwecklos.

Zitat:

Zitat von emti

[Photoshop]denn in png8 mit alphatransparenz kann man das dort ja auch speichern.

Nö. (Ich weiß nicht, was die CS5 kann.)

Chrizzel · #8 (**permalink**) 23.08.2010, 12:56

okay ich wusste nicht wie ich euch einen link schicken sollte aber ich habe es einfach ma gepackt und euch so geschickt! Hab grad nirgens webspace wo ich es draufpacken könnte und ich bin grad echt zu faul mich dafür iwo anzumelden!

hab den link dann erstmal wieder entfernt

fricca · #9 (**permalink**) 23.08.2010, 12:58

Na klar. Weil du zu faul bist, sollen wir Aufwand betreiben.
Sonst geht's dir noch gut, ja?

Was genau verstehst du an den Hinweisen für Fragende nicht?

Chrizzel · #10 (**permalink**) 23.08.2010, 13:02

Da ich natürlich den Usern möglichst nicht zuviel Mühen mache möchte,
habe ich mir nun einen neuen Webspace anbieter gesucht und die Website
Online zur verfügung gestellt!

Hier ist der Link zu meiner TEST Website

Die Test-Website

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Transparenz im IE8	Chuwi	CSS	11	26.11.2010 07:00
problem mit hintergrund repeat	4ndreas	CSS	1	30.01.2010 07:30
Hintergrund Problem	Pseudo	CSS	3	30.12.2005 12:49
Problem mit Hintergrund	fabiO	CSS	8	24.04.2005 20:15
Hintergrund Problem	Afrob81	CSS	0	23.12.2004 10:36