zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Verschwundene Bilder im Opera

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.02.2006, 18:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2006
Beiträge: 12
JappMe befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.02.2006, 09:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2006
Beiträge: 12
JappMe befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bildergalerie / Bilder werden nicht zentriert im IE, Opera und Konqueror Boris CSS 22 14.09.2006 11:16
Opera verschiebt meine Bilder und den Text rico7692 CSS 3 19.06.2006 17:49
Bilder und Text anordnen - Probleme mit Opera soulson7 CSS 1 11.07.2005 20:49
Opera lädt Bilder im CSS ständig neu Floele CSS 10 23.06.2005 16:16
Bilder im Mozilla und Opera Jazzman1984 CSS 4 18.05.2005 23:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:34 Uhr.