XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Verschwundene Bilder im Opera (http://xhtmlforum.de/showthread.php?t=38755)

JappMe 15.02.2006 18:09

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>


JappMe 16.02.2006 09:50

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;
}

HTML


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>

Wobei ich noch nicht weiss wieso das nun funktioniert (ich habs ehrlich gesagt durch ausprobieren hinbekommen).

VG JappMe


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:29 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023