Verschwundene Bilder im Opera
Ich habe folgendes Problem, mit dem ich mich nun viele Stunden beschäftigt habe ohne auf eine Lösung zu kommen.
Ich möchte im oberen rechten Bereich 2 Bilder mit einem bestimmten Abstand haben. Diese sollen relativ zum Headerbereich sein, dabei sichtbar über den oberen horizontalen Navigationsbereich und den Contenbereich gehen.
Funktioniert auch im FF und IE, nur leider im Opera8 verschwinden die Bilder hinter den beiden zuletzt genannten Bereichen.
Hier mal ein Link: http://www.jappme.net/nlp-evolution/index.html
Hier CSS:
Code:
/* Body Standardeinstellungen */
body
{
margin: 6px;
background-color: #F8F4F5;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 85%;
text-align: center;
}
/* Liste Standardeinstellungen */
#sidebar ul
{
list-style-type:none;
margin: 0;
padding: 0;
}
#sidebar li
{
margin: 0 0 1em 0;
}
/* Struktur und Aufteilung */
#wrap
{
width: 780px;
margin: 0 auto;
text-align: left;
}
#header
{
float: left;
width: 778px;
height: 78px;
text-align: right;
background-image:url(images/header.jpg);
background-repeat: no-repeat;
border: 1px solid #173848;
}
#navigation
{
float: left;
width: 778px;
height: 29px;
background-image:url(images/top_footer.jpg);
border-bottom: 1px solid #173848;
border-left: 1px solid #173848;
border-right: 1px solid #173848;
}
#sidebar
{
float: left;
width: 128px;
height: 445px;
background-color: #C7D0C9;
border-left: 1px solid #173848;
border-right: 1px solid #173848;
font-size: 75%;
}
#content
{
float: left;
width: 589px;
height: 385px;
background-color: #F8F4F5;
border-right: 1px solid #173848;
padding:30px;
overflow: auto;
}
#footer
{
clear: both;
width: 778px;
height: 28px;
background-image:url(images/top_footer.jpg);
border: 1px solid #173848;
}
#image1
{
position: relative;
width: 78px;
height: 58px;
left: 540px;
top: 60px;
background-color: #639EA9;
background-image: url(images/indeximage1affe.jpg);
border: 1px solid #003333;
float:left;
}
#image2
{
position: relative;
width: 85px;
height: 58px;
left: 600px;
top: 60px;
background-color: #639EA9;
background-image: url(images/indeximage1mann.jpg);
border: 1px solid #003333;
float: left;
}
/* Navigation links 1 Ebene */
#sidebar a
{
color:#173848;
text-decoration:none;
}
#sidebar a.link
{
display:block;
width:110px;
padding:4px;
position:relative; left: 20px; top: 30px;
background-color:#EAEBE2;
border:1px solid #173848;
text-align:center;
z-index:0;
}
#sidebar a.link:hover
{
color:#F8F4F5;
background-color:#607E75;
position:relative; left: 9px; top: 30px;
}
/* Navigation links 2 Ebene */
#sidebar a.link2
{
display:block;
width:90px;
padding:3px;
position:relative; left: 20px; top: 30px;
background-color:#BBC8BA;
border:1px solid #173848;
text-align:center;
}
#sidebar a.link2:hover
{
color:#F8F4F5;
background-color:#1D404D;
position:relative; left: 31px; top: 30px;
}
Hier HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>NLP-Evolution</title>
<link rel="stylesheet" type="text/css" href="layoutnlp.css">
</head>
<body>
<div id="wrap">
<div id="header">
<div id="image1"></div>
<div id="image2"></div>
</div>
<div id="navigation">
</div>
<div id="sidebar">
<ul>
[*]Philosophie
[*]Seminare
[*]Termine
[*]Über NLP-Evolution
[*]Weitere Infos
[*]Anmeldung
[/list] <h3></h3>
</div>
<div id="content">
<h1></h1>
Test
</div>
<div id="footer">
</div>
</div>
</body>
</html>
|