|
|||
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; } 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> |
Sponsored Links |
|
|||
Problem gelöst:
CSS Code:
#wrap { position: relative; /*hier eingefügt*/ width: 780px; margin: 0 auto; text-align: left; } Code:
#image1 { position: absolute; /*relative in absolute geändert*/ width: 78px; height: 58px; left: 540px; top: 60px; background-color: #639EA9; border: 1px solid #003333; background-image: url(images/indeximage1affe.jpg); float: left; } Code:
<div id="wrap"> <div id="header"> . . . . <div id="image1"></div> /*die beiden Divs aus dem Headebereich genommen und nach unten gesetzt*/ <div id="image2"></div> </div> VG JappMe |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Video von youtube responsive in Webseite einbauen | R14 | (X)HTML | 1 | 28.01.2019 22:39 |
Hintergrund wird nicht angezeigt | maxx | CSS | 6 | 14.10.2012 19:27 |
Hilfe!!! mein Homepagelayout funktioniert nicht! | maxx | CSS | 5 | 14.10.2012 08:21 |
Opera verschiebt meine Bilder und den Text | rico7692 | CSS | 3 | 19.06.2006 17:49 |
Opera lädt Bilder im CSS ständig neu | Floele | CSS | 10 | 23.06.2005 16:16 |