No, it doesnīt work. It is still on the left side.
maybe my site works now-> http://beta.mareknierychlo.de
edit:...and it still doesnīt work. the navigation arrows arenīt at 50% of the height of the image. So Iīve got 2 errors.
1. The navigation and the image are on the left side, but they have to be centered.
2. the navigation arrows arenīt 50% of the image. They are higher and I donīt know why.
edit2:
Iīve got two screenshots. my cssedit shows me that the div#image covers the image but it is on the left side(screenshot on flickr (http://static.flickr.com/103/298653217_822304203b_o.png)) and the div#menu_browse is too high. (screenshot 2 (http://static.flickr.com/115/298655136_9d2206fe51.jpg)).
edit3: my site got technical difficulties (ddos) so, I will show you the code here.
<body>
<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<!-- Bar across the top -->
<div class="topbar">
<span class="style1">
<IMAGE_PREVIOUS_LINK> ??
<a href="index.php" title="cssbody=[tooltipbdyfoto] cssheader=[tooltiphdrfoto] header=[Aktuelles Bild] body=[Nach dem Klick gelangst Du zum aktuellen Bild]">Aktuell</a> ??
<IMAGE_NEXT_LINK> ??
<a href="index.php?x=browse" title="cssbody=[tooltipbdyfoto] cssheader=[tooltiphdrfoto] header=[Archiv] body=[Alle Bilder des Fotoblogs auf einer Seite!]" >Thumbs</a> ??
<a href="index.php?x=about" title="cssbody=[tooltipbdyfoto] cssheader=[tooltiphdrfoto] header=[About page] body=[ein paar Worte über mich]" >About + Links</a> ??
<a href="index.php?x=jbgmap" title="cssbody=[tooltipbdyfoto] cssheader=[tooltiphdrfoto] header=[Aufnahmeort] body=[Nach dem Klick erscheinen die Aufnahmeorte auf einer googlemaps-Karte]" onmouseout="return nd();">Map</a> ??
<a href="index.php?popup=comment&showimage=<IMAGE_ID>" title="cssbody=[tooltipbdyfoto] cssheader=[tooltiphdrfoto] header=[Kommentare und Infos] body=[wie der Titel schon sagt, Kommentare und EXIF-Daten zu dem Bild]" onclick="window.open(this.href, 'Comments','height=550, width=500, top=10, left=10, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no'); return false;" ><IMAGE_COMMENTS_NUMBER> Comments & Info</a> ??
<a href="index.php?x=rss" title="cssbody=[tooltipbdyfoto] cssheader=[tooltiphdrfoto] header=[RSS-Feed] body=[klick für ein Abo]" >RSS</a> ??
<a href="#" onclick="setActiveStyleSheet('white');return false;"><img class="i1" border="1" src="templates/jasonspix/style_White.jpg" width="9" height="9" style="padding:0;" align="middle" alt="whiteswitch"/></a>
<a href="#" onclick="setActiveStyleSheet('lightgrey');return false;"><img class="i1" border="1" src="templates/jasonspix/style_Grey.jpg" width="9" height="9" style="padding:0;" align="middle" alt="lightgreyswitch"/></a>
<a href="#" onclick="setActiveStyleSheet('darkgrey');return false;"><img class="i1" border="1" src="templates/jasonspix/style_DGrey.jpg" width="9" height="9" style="padding:0;" align="middle" alt="darkgreyswitch"/></a>
<a href="#" onclick="setActiveStyleSheet('black');return false;"><img class="i1" border="1" src="templates/jasonspix/style_Black.jpg" width="9" height="9" style="padding:0;" align="middle" alt="blackswitch"/></a>
</span>
</div>
<!-- Bar above Image -->
<div align="center">
<div style="width: <IMAGE_WIDTH>px;">
<div id="aboveImage">
<div class="ititle">
<strong>
<IMAGE_TITLE> ??
</strong>
</div>
<div class="nav">
<a href="index.php?popup=comment&showimage=<IMAGE_ID>" title="cssbody=[tooltipbdyfoto] cssheader=[tooltiphdrfoto] header=[Kommentare und Infos] body=[wie der Titel schon sagt, Kommentare und EXIF-Daten zu dem Bild]" onclick="window.open(this.href, 'Comments','height=550, width=500, top=10, left=10, toolbar=no, menubar=no, location=no, resizable=no, scrollbars=yes, status=no'); return false;" ><IMAGE_COMMENTS_NUMBER> Comments & Info</a> ??
</div>
</div>
</div>
</div>
<!-- Blog Image -->
<div id="content">
<div id="image" style="width: <IMAGE_WIDTH>px;">
<img src="./images/<IMAGE_NAME>" id="imgmaine" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" alt="foto fehlt" />
<div id="menu_browse" style="height: <IMAGE_HEIGHT>px; width: <IMAGE_WIDTH>px;">
<a href="#" id="menu_browse_prev" onclick="document.location = 'index.php?showimage=<IMAGE_PREVIOUS_ID>';"></a>
<a href="#" id="menu_browse_next" onclick="document.location = 'index.php?showimage=<IMAGE_NEXT_ID>';"></a>
</div>
</div>
</div>
<!-- Bar below Image -->
<div style="width: <IMAGE_WIDTH>px;">
<div id="belowImage">
<div class= "blogLink">
<p><JBG_PICTOMAP></p>
Đ All images Marek Nierychlo
</div>
</div>
</div>
</body>
</html>
and css
body {
background-color: #333333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#AboveImage {
text-align:left;
padding: 0px;
margin-top: 2em;
}
.ititle {
float:left;
position:relative;
text-align:right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
}
.ititle a:visited {
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.ititle a:hover {
color: #666666;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.nav{
text-align:right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
}
.nav a:visited {
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.nav a:hover {
color: #666666;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#belowImage {
padding: 0px;
margin-bottom: 0px;
}
.blogLink {
float:right;
position:relative;
text-align:right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
}
.blogLink a:visited {
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.blogLink a:hover {
color: #666666;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.commentLink {
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.commentLink a:visited {
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.commentLink a:hover {
color: #666666;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:link {
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:visited {
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a:hover {
color: #999999;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.thumbnails {
padding:2px;
background:#000000;
border:1px solid #A1A2AA;
margin:5px;
}
#thumbmain a:hover img{
border:1px solid #ffffff;
}
.image {
text-align:center;
margin-top:0em;
padding:5px;
background:#000000;
border:none;
}
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-decoration: none;
}
.topbar a:link, a:visited, a:active {
color: #000000;
text-decoration: none;
}
.topbar a:hover {
color: #999999;
text-decoration: none;
}
.topbar {
text-align: center;
background:#CCCCCC;
margin-bottom: 10px;
height: 20px;
border:1px solid #ffffff;
}
#blogimage {
margin-top: 0em;
text-align:center;
color: #ffffff;
}
#commentBlock {
text-align:left; width: 450px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff;
}
#commentBlock a {
color: #666666;
}
#commentBlock a:visited {
color: #666666;
}
#commentBlock a:hover {
color: #000000;
}
#commentMain {
width:100%;
}
#commentMain ul {
padding:0px; margin:0px; display:block; list-style:none; width:100%;
}
#commentMain li {
padding-bottom:10px; padding-top:10px; padding-left:5px; padding-right:0px; margin:0px; border-top:0px;
border-left:0px; border-right:0px; border-bottom:1px solid #ffffff;
}
#commentMain li:hover {
background:#000066;
}
#commentMain li a {
color: #666666;
}
<!--js tooltip -->
shortening css,itīs too long
<!--image navigation -->
.stretcher {
background: none !important;
background: #fff;
}
#content {
margin:0;
background: bottom center no-repeat;
padding: 0 0 20px 0;
}
#image {
padding: 0px;
}
#imgmaine {
background: #efefef url('loading.gif') 50% 50% no-repeat;
}
#menu_browse{
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
#menu_browse a{ outline: none;}
#menu_browse_prev, #menu_browse_next{
width: 49%;
height: 99%;
background: transparent url(blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#menu_browse_prev {
left: 0;
float: left;
}
#menu_browse_next {
right: 0;
float: right;
}
#menu_browse_prev:hover, #menu_browse_prev:visited:hover {
background: url('prev.gif') no-repeat left 45%;
cursor: pointer;
}
#menu_browse_next:hover, #menu_browse_next:visited:hover {
background: url('next.gif') no-repeat right 45%;
cursor: pointer;
}
again the question: Whatīs wrong?
marek