Transparenter Background für einen DIV-Container - wie?

yak · #1 (**permalink**) 11.10.2005, 10:34

Hallo meine Lieben

Ich bin neu hier und brauche dringend eure Hilfe.
Seht euch das Attachement an.

Die Seite ist auch unter http://yak.fh3.info/ zu erreichen (IE und Firefox verwenden!).

Es handelt sich hier um eine Art ImageMap mit CSS.
Im Firefox wird die Seite perfekt dargestellt, nicht so aber im IE.

<EDIT> --> Bessere Erklärung des Teilproblems
Für eine ImageMap habe ich mehrere DIVs übereinander gelegt. Leider weist der IE einem DIV-Container standardmässig eine Hintergrundfarbe zu und die darunterliegende Grafik ist nicht mehr sichtbar.

Mein Ziel ist es nun, den Background des DIV das die "ImageMap" enthält komplett transparent erscheinen zu lassen, so dass das BackgroundImage des Footers wieder sichtbar wird. Wie stelle ich das an?
Sollte ein DIV-Container nicht "von Natur aus" keinen vordefinierten Background haben? Hab ich mich irgendwo im Code geirrt?
</EDIT>

Ich möchte den Footer möglichst nicht in einzelne Bilder unterteilen. Bin dankbar für jeden Tipp.

Grüsse
yak

Code:

		<div id="pageSigns">
			<span>Edit</span>
			<span>Email</span>
			<span>Sitemap</span>
		</div>
	
	<div id="pageFooter">	
			created by ... blabla 
	</div>

Code:

#pageFooter {
	height:46px;
	text-align:center;
	background:#FFFFFF url(footer.gif) no-repeat;
	color: #1B3B54;
	font: 9px Helvetica, sans-serif;
	margin:0;
	padding-top:55px;
	padding-left:25px;
}

#pageSigns {
	position: relative;
	background-image:url(transparent.png);
	background-repeat:repeat;
	background-color: transparent;
	top: 5px;
}

#pageSigns a {
	width: 25px;
	height: 35px;
	float: right;
	margin-right: 12px;
   }

a#edit {left: 0px;}
a#email {left: 30px;}
a#sitemap {left: 60px;}

#pageSigns a span{ visibility: hidden; }

cgdesign · #2 (**permalink**) 11.10.2005, 11:34

Eine Art ImageMap? Warum machst du daraus nicht eine richtige ImageMap?

yak · #3 (**permalink**) 11.10.2005, 12:39

Ich finde CSS eleganter und ich habe das Bild lieber im Background.
Und das Problem mit der Transparenz hätte ich trotzdem mit einer richtigen ImageMap.

Das eigentliche Problem ist ja auch nicht die ImageMap, die funktioniert bereits. Bloss wird das Hintergrundbild des darunterliegenden DIVs nicht angezeigt, weil ich den DIV-Container im Vordergrund nicht transparent kriege.

Ein trasnparentes PNG als Hintergrund hat auch nicht funktioniert.
An der Opacity hab ich rumgeschraubt, hatte keine Auswirkungen

Idee?

cgdesign · #4 (**permalink**) 11.10.2005, 15:42

Du weißt aber schon, dass der IE keine transparenten PNGs anzeigen kann oder? Ausserdem ist deine DIV Suppe da so unübersichtlich dargestellt, dass ich dir doch lieber raten würde, auf eine ImageMap überzusteigen...

mazzo · #5 (**permalink**) 11.10.2005, 15:55

standardmäßig sind Hintergründe transparent. Notfalls die Eigenschaft

Code:

background-color:transparent;

definieren.

Hier noch ein vielleicht hilfreicher Link zu einer "CSS Image Map":
http://www.cssplay.co.uk/menu/imap.html

yak · #6 (**permalink**) 11.10.2005, 15:56

Mhh DIV-Suppe. Jeder hat mal klein angefangen und ausserdem bin ich noch am testen.*g*

Ist es im IE nicht möglich, DIVs ohne Background darzustellen?
Vielleicht hab ich mich ja bloss irgendwie vertippt.

yak · #7 (**permalink**) 11.10.2005, 16:04

@mazzo

Das hier ist nun online:

Code:

#pageSigns {
	position: relative;
	background-color: transparent;
	top: 0px;
}

#pageSigns a {
	width: 25px;
	height: 35px;
	float: right;
	margin-right: 12px;
	background-color: transparent;
   }

Zeigte leider keine Wirkung. Warum bleibt der Hintergrund bloss weiss?

Der Unterschied zu den andern ImageMaps ist, dass ich bei meinem Image Map kein neues Bild bei einem Hover anzeige.

Trotzdem danke für deinen Tipp.

mazzo · #8 (**permalink**) 11.10.2005, 16:06

vermutlich leigt hinter diesen DIVs ein weisser Hintergrund, z.B. im Body. Der scheint dann quasi durch.

yak · #9 (**permalink**) 11.10.2005, 21:49

Auch das war es nicht.

Meine mangelnde Geduld hat nun doch zu einem ImageMap als Lösung geführt.
Ich geh mich jetzt verstecken. *schäm*

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Anfängerfrage: Zentrierung in Galerie und Border-Problem	goldbeere	CSS	3	04.11.2013 19:07
Navigation positionieren	maybebabe	CSS	4	08.04.2013 22:17
Headerbild einsetzten	Demmin	CSS	1	08.03.2011 03:58
Problem mit CSS in Joomla 1.5	noobilicius	CSS	6	25.09.2008 20:24
Float - Probleme	wolf1985	CSS	5	19.08.2008 08:14