N
Netzwerkidi
Hallo zusammen,
jetzt bin ich hier schon dankenswerterweise fündig geworden in Sachen DIV-Zentrierung, aber die Transparenz bekomme ich einfach nicht hin.
Das zentrierte Bild soll nicht transparent sein, aber immer hakt es in einer Version.
In irgendeiner älteren IE-Version, die mein PSPad nutzt, klappt das in einer Variante, aber dafür bei FF, IE6/7+ und Opera dann nicht oder umgekehrt.
Wer weiß wie es geht, also in allen Browsern die Fläche außerhalb des Bildes transparent?
Besten Dank und Grüße
jetzt bin ich hier schon dankenswerterweise fündig geworden in Sachen DIV-Zentrierung, aber die Transparenz bekomme ich einfach nicht hin.
Das zentrierte Bild soll nicht transparent sein, aber immer hakt es in einer Version.
In irgendeiner älteren IE-Version, die mein PSPad nutzt, klappt das in einer Variante, aber dafür bei FF, IE6/7+ und Opera dann nicht oder umgekehrt.
Wer weiß wie es geht, also in allen Browsern die Fläche außerhalb des Bildes transparent?
Besten Dank und Grüße
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=iso-8859-1" />
<title>http://www.pmob.co.uk/temp/vertical-align11.htm</title>
<style type="text/css">
* {margin:0;padding:0}
html,body{height:100%}
#wrapper{
height:100%;
width:100%;
display:table;
vertical-align:middle;
background-color:white;
/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";*/
filter:alpha(opacity=50);
/*-moz-opacity:0.50;*/
opacity:0.50;
}
#outer{
display:table-cell;
vertical-align:middle;
}
#inner{
position:relative;
left:50%;
float:left;
}
#image{
border:1px solid #000;
padding:20px 20px;
position:relative;
text-align:right;
left:-50%;
background-color:white;
}
#image img {
width:500px;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
#wrapper{ overflow:hidden;/* stop hoz scroll bar from appearing*/}
#inner {top:50%}
#image{top:-50%;}
</style>
<![endif]-->
</head>
<body style="background-image:url('http://style.tutorials.de/v10/headerlogo.png');">
<div id="wrapper">
<div id="outer">
<div id="inner">
<div id="image">
<a href="#"><img id="zoomImg" src="http://style.tutorials.de/v10/headerlogo.png" /></a>
</div>
</div>
</div>
</div>
</body>
</html>
