zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Anfänger: Positionierung.

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.05.2012, 12:56
xam xam ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2012
Beiträge: 2
xam befindet sich auf einem aufstrebenden Ast
Beitrag Anfänger: Positionierung.

Hallo leute ich habe erst vor kurzem an gefangen meine Websiten ohne Table nur mit CSS zu Formatiren. Ich habe das Problem, das sich mein div Objekt in Version 1 nicht nach dem Eltern objekt richtet und in Version 2 das der Footer nicht unten mittig angezeit wird. hab schon viel rumprobiert, aber ich glaub ich was grundlegendes nicht ganz Verstanden.

HTML der Version 1
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Preise -  Fitnesswelt Burgwedel</title>

<!--Lieghtbox-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!-- end-->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
	<div id="non_footer">
		<div id="header" >
			  <div id="logo">
			  
			<h1>
					<a  href = "index.html">
			<img src="images/logo.png" />        
			<span style="color:red; font-size:xxx-large ">Fitnesswelt</span>
			<span style="color:#33CCFF; font-size:40px">Burgwedel</span>
			        </a>
			        </h1>
				</div>
			</div>
			<div id="menu">
				<ul>
					<li class="current_page_item"><a href="index.html">Home</a></li>
					<li><a href="angebote.html">Angebote</a></li>
				  <li><a href="preise.html">Preise</a></li>
					<li><a href="anfahrt.html">Anfahrt</a></li>
			        <li><a href="kontakt.html">Kontakt</a></li>
				</ul>
			</div>
			<!-- end #header -->
			<center>
			<div id="banner"><img src="images/banner.jpg" width="100%" height="100%" alt="" /></div>
			</center>
			
			<div id="main">
				
			    <div id="main-top" >
					
					<div id ="Raumplan" >
						<div id = "Raumplan_top_left">
							<a href="images/image-1.jpg" rel="lightbox" title="my caption">
							<img src="images/Raumplan_top_left.gif" />
							</a>
						</div>
						
						<div id = "Raumplan_top_right">
							<a href="images/image-1.jpg" rel="lightbox" title="my caption">
								<img src="images/Raumplan_top_right.gif" />
							</a>
						</div>
						
						
						<div id = "Raumplan_bottom_left">
							<a href="images/image-1.jpg" rel="lightbox" title="my caption">
								<img src="images/Raumplan_bottom_left.gif" />
							</a>
						</div>
						
						<div id = "Raumplan_bottom_right">
							<a href="images/image-1.jpg" rel="lightbox" title="my caption">
								<img src="images/Raumplan_bottom_right.gif" />
							</a>
						</div>			
					</div>		       
			</div>
		</div>
	</div>
</div>
<div id="footer">
 <center><a href="impressum.html">Impressum | </a><a href="kontakt.html">Kontakt</a></center>
	<p>Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.electrictowelrail.org.uk">Electric Towel Rails</a>.</p>

<!-- end #footer -->
</body>
</html>
style.css der Version 1
Code:
body {
	margin: 0;
	padding: 0;
	background: #000;
	font-family: Trebuchet MS,Helvetica,sans-serif;
	font-size: 12px;
	color: #333333;
	}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	
}

h1 {
	color:fd090e
	font-weight:300;
	font-style: normal;
	font-weight:bolder;
	
}

h2 {
	margin: 0px;
	padding: 0;
	letter-spacing: -2px;
	font-size: 2.8em;
	font-style: italic;
	background: #000;;
	color:#FFF;
	
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 200%;
}

p, ol {
}

ul, ol {
}

a {
	color: #CA0B03;
}

a:hover {
}

#wrapper {
	background: fff;
}

.container {
	width: 1000px;
	margin: 0px auto;
}


#header {
	width: 800px;
	height: 100px;
	margin: 0 auto;
	padding: 0px;
	background-color:#000;
}



#logo {
	margin: 0;
	padding: 0;
}

#logo h1, #logo p {
}

#logo h1 {
	padding: 19px 0px 0px 0px;
	letter-spacing: -2px;
	text-align: center;
	text-transform: uppercase;
	font-size: 4em;
}

#logo h1 a {
	color: #990000;
	font-family: "Arial Black", Gadget, sans-serif;
}

#logo p {
	margin: 0;
	padding: 0px 0 0 0px;
	letter-spacing: -1px;
	font: normal 18px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #8E8E8E;
}

#logo p a {
	color: #8E8E8E;
}

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #000000;
}

#banner {
	width: 753px;
	height: 250px;
	margin: 0px auto;
}

#menu {
	width: 800px;
	height: 50px;
	margin: 0 auto;
	padding: 0px;
	background: #222;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
	padding: 15px 30px 0px 30px;
}

#menu a {
	display: block;
	height: 20px;
	margin: 0px;
	padding: 0px;
	letter-spacing: -1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}

#menu .current_page_item a {
}

#main {
	overflow: hidden;
	width: 780px;
	margin: 0px auto;
	padding: 10px 10px 20px 10px;
	background: #000

}

#main-top {
	margin: 10px 10px 20px 10px;
	padding:0;
	font-size:14px;
	color:#CCC


}

#Raumplan{
	width: 782px;
	height:534px;
	
	margin: 0px auto 40px auto;
	
}
#Raumplan_top_left{
width:  406px;
height: 336px;
position: absolute;
top: 0;
left: 0;
}


#Raumplan_top_right{
width: 374px;
height:262px;
position: absolute;
top: 0;
left: 406px;
}	

#Raumplan_bottom_left{
width: 406px;
height: 198px;
position: absolute;
top:336px;
left:0px;
}	

#Raumplan_bottom_right{
width: 374px;
height:262px;
position: absolute;
top:262px;
left: 406px;
}	


#main-bottom{
	width: 780px;
	margin: 0px auto;
}

#content {
	float: right;
	width: 530px;
}

#sidebar {
	float: left;
	width: 270px;
}




#footer {
	overflow: hidden;
	width: 800px;
	height: 50px;
	background: #222;
	margin: 0px auto 40px auto;
	}

#footer p {
	margin: 0px;
	padding: 15px 0px 0px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	color: #aaa;
}

#footer a {
	color: #aaa;
	text-decoration: none;
}
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 90; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 20%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index:100; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
 #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

<!-- end -->
HTML der version 2
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Preise -  Fitnesswelt Burgwedel</title>

<!--Lieghtbox-->
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!-- end-->
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
	<div id="non_footer">
		<div id="header" >
			  <div id="logo">
			  
			<h1>
					<a  href = "index.html">
			<img src="images/logo.png" />        
			<span style="color:red; font-size:xxx-large ">Fitnesswelt</span>
			<span style="color:#33CCFF; font-size:40px">Burgwedel</span>
			        </a>
			        </h1>
				</div>
			</div>
			<div id="menu">
				<ul>
					<li class="current_page_item"><a href="index.html">Home</a></li>
					<li><a href="angebote.html">Angebote</a></li>
				  <li><a href="preise.html">Preise</a></li>
					<li><a href="anfahrt.html">Anfahrt</a></li>
			        <li><a href="kontakt.html">Kontakt</a></li>
				</ul>
			</div>
			<!-- end #header -->
			<center>
			<div id="banner"><img src="images/banner.jpg" width="100%" height="100%" alt="" /></div>
			</center>
			
			<div id="main">
				
			    <div id="main-top" >
					
					<div id ="Raumplan" >
						<div id = "Raumplan_top_left">
							<a href="images/image-1.jpg" rel="lightbox" title="my caption">
							<img src="images/Raumplan_top_left.gif" />
							</a>
						</div>
						
						<div id = "Raumplan_top_right">
							<a href="images/image-1.jpg" rel="lightbox" title="my caption">
								<img src="images/Raumplan_top_right.gif" />
							</a>
						</div>
						
						
						<div id = "Raumplan_bottom_left">
							<a href="images/image-1.jpg" rel="lightbox" title="my caption">
								<img src="images/Raumplan_bottom_left.gif" />
							</a>
						</div>
						
						<div id = "Raumplan_bottom_right">
							<a href="images/image-1.jpg" rel="lightbox" title="my caption">
								<img src="images/Raumplan_bottom_right.gif" />
							</a>
						</div>			
					</div>		       
			</div>
		</div>
	</div>
</div>
<div id="footer">
 <center><a href="impressum.html">Impressum | </a><a href="kontakt.html">Kontakt</a></center>
	<p>Copyright (c) 2011 Sitename.com. All rights reserved. Design by <a href="http://www.electrictowelrail.org.uk">Electric Towel Rails</a>.</p>

<!-- end #footer -->
</body>
</html>
Style.css der Version 2
Code:
body {
	margin: 0;
	padding: 0;
	background: #000;
	font-family: Trebuchet MS,Helvetica,sans-serif;
	font-size: 12px;
	color: #333333;
	}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	
}

h1 {
	color:fd090e
	font-weight:300;
	font-style: normal;
	font-weight:bolder;
	
}

h2 {
	margin: 0px;
	padding: 0;
	letter-spacing: -2px;
	font-size: 2.8em;
	font-style: italic;
	background: #000;;
	color:#FFF;
	
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 200%;
}

p, ol {
}

ul, ol {
}

a {
	color: #CA0B03;
}

a:hover {
}

#wrapper {
	background: fff;
}

.container {
	width: 1000px;
	margin: 0px auto;
}


#header {
	width: 800px;
	height: 100px;
	margin: 0 auto;
	padding: 0px;
	background-color:#000;
}



#logo {
	margin: 0;
	padding: 0;
}

#logo h1, #logo p {
}

#logo h1 {
	padding: 19px 0px 0px 0px;
	letter-spacing: -2px;
	text-align: center;
	text-transform: uppercase;
	font-size: 4em;
}

#logo h1 a {
	color: #990000;
	font-family: "Arial Black", Gadget, sans-serif;
}

#logo p {
	margin: 0;
	padding: 0px 0 0 0px;
	letter-spacing: -1px;
	font: normal 18px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #8E8E8E;
}

#logo p a {
	color: #8E8E8E;
}

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #000000;
}

#banner {
	width: 753px;
	height: 250px;
	margin: 0px auto;
}

#menu {
	width: 800px;
	height: 50px;
	margin: 0 auto;
	padding: 0px;
	background: #222;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
	padding: 15px 30px 0px 30px;
}

#menu a {
	display: block;
	height: 20px;
	margin: 0px;
	padding: 0px;
	letter-spacing: -1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}

#menu .current_page_item a {
}

#main {
	overflow: hidden;
	width: 780px;
	margin: 0px auto;
	padding: 10px 10px 20px 10px;
	background: #000

}

#main-top {
	margin: 10px 10px 20px 10px;
	padding:0;
	font-size:14px;
	color:#CCC


}

#Raumplan{
	width: 782px;
	height:534px;	
	position: absolute;
	margin: 0px auto 40px auto;
	
}
#Raumplan_top_left{
width:  406px;
height: 336px;
position: absolute;
top: 0;
left: 0;
}


#Raumplan_top_right{
width: 374px;
height:262px;
position: absolute;
top: 0;
left: 406px;
}	

#Raumplan_bottom_left{
width: 406px;
height: 198px;
position: absolute;
top:336px;
left:0px;
}	

#Raumplan_bottom_right{
width: 374px;
height:262px;
position: absolute;
top:262px;
left: 406px;
}	


#main-bottom{
	width: 780px;
	margin: 0px auto;
}

#content {
	float: right;
	width: 530px;
}

#sidebar {
	float: left;
	width: 270px;
}




#footer {
	overflow: hidden;
	width: 800px;
	height: 50px;
	background: #222;
	margin: 0px auto 40px auto;
	}

#footer p {
	margin: 0px;
	padding: 15px 0px 0px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	color: #aaa;
}

#footer a {
	color: #aaa;
	text-decoration: none;
}
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 90; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 20%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index:100; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
 #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

<!-- end -->
Hab auch och mal das Ganze als archiv mit Bildern und js-funktionen hoch geladen.
Vielen dank wenn sich jemand damit befassen würde. Liebe Grüße Xam
Angehängte Dateien
Dateityp: zip Version 1 und 2.zip (633,2 KB, 1x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.05.2012, 13:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Moin,

hier mal Feedback zur Version 2:

Dass der Footer soweit oben sitzt, liegt daran, dass du die ganzen Raumpläne absolut positioniert hast. Wenn du Elemente absolut positionierst, werden sie aus dem Elementenfluss herausgenommen, sie existieren quasi gar nicht und dadurch wird der Footer nach oben geschoben. Ist das soweit verständlich?

Es macht auch keinen Sinn die Pläne absolut zu positionieren. Nimm das bitte raus und lass sie stattdessen floaten.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.05.2012, 14:23
xam xam ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2012
Beiträge: 2
xam befindet sich auf einem aufstrebenden Ast
Standard

Danke hat schon viel gebracht, hab jetzt aber n anderes Problem. das objekt "bottom_right" lässt sich nicht ausrichten. egal was für werte ich einsetzte die postion bleibt gleicht.

So sieht der aktuelle code des style.css aus.
Code:
body {
	margin: 0;
	padding: 0;
	background: #000;
	font-family: Trebuchet MS,Helvetica,sans-serif;
	font-size: 12px;
	color: #333333;
	}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	
}

h1 {
	color:fd090e
	font-weight:300;
	font-style: normal;
	font-weight:bolder;
	
}

h2 {
	margin: 0px;
	padding: 0;
	letter-spacing: -2px;
	font-size: 2.8em;
	font-style: italic;
	background: #000;;
	color:#FFF;
	
}

h3 {
	font-size: 1.6em;
}

p, ul, ol {
	margin-top: 0;
	line-height: 200%;
}

p, ol {
}

ul, ol {
}

a {
	color: #CA0B03;
}

a:hover {
}

#wrapper {
	background: fff;
}

.container {
	width: 1000px;
	margin: 0px auto;
}


#header {
	width: 800px;
	height: 100px;
	margin: 0 auto;
	padding: 0px;
	background-color:#000;
}



#logo {
	margin: 0;
	padding: 0;
}

#logo h1, #logo p {
}

#logo h1 {
	padding: 19px 0px 0px 0px;
	letter-spacing: -2px;
	text-align: center;
	text-transform: uppercase;
	font-size: 4em;
}

#logo h1 a {
	color: #990000;
	font-family: "Arial Black", Gadget, sans-serif;
}

#logo p {
	margin: 0;
	padding: 0px 0 0 0px;
	letter-spacing: -1px;
	font: normal 18px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #8E8E8E;
}

#logo p a {
	color: #8E8E8E;
}

#logo a {
	border: none;
	background: none;
	text-decoration: none;
	color: #000000;
}

#banner {
	width: 753px;
	height: 250px;
	margin: 0px auto;
}

#menu {
	width: 800px;
	height: 50px;
	margin: 0 auto;
	padding: 0px;
	background: #222;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
	padding: 15px 30px 0px 30px;
}

#menu a {
	display: block;
	height: 20px;
	margin: 0px;
	padding: 0px;
	letter-spacing: -1px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	border: none;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}

#menu .current_page_item a {
}

#main {
	overflow: hidden;
	width: 780px;
	margin: 0px auto;
	padding: 10px 10px 20px 10px;
	background: #000

}

#main-top {
	margin: 10px 10px 20px 10px;
	padding:0;
	font-size:14px;
	color:#CCC


}

#Raumplan{
	width: 782px;
	height:534px;	
	margin: 0px auto;
	
}
#Raumplan_top_left{
width:  406px;
height: 336px;
float:left;
top: 0;
left: 0;
}


#Raumplan_top_right{
width: 374px;
height:262px;
float:left;
top: 0;
left: 406px;
}	

#Raumplan_bottom_left{
width:406px;
height:336px;
float:left;
top:336px;
left:0px;
}	

#Raumplan_bottom_right{
width:374px;
height:262px;
float:left;
top: 374px;
left: 406px;
}


#main-bottom{
	width: 780px;
	margin: 0px auto;
}

#content {
	float: right;
	width: 530px;
}

#sidebar {
	float: left;
	width: 270px;
}




#footer {
	overflow: hidden;
	width: 800px;
	height: 50px;
	background: #222;
	margin: 0px auto 40px auto;
	}

#footer p {
	margin: 0px;
	padding: 15px 0px 0px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	color: #aaa;
}

#footer a {
	color: #aaa;
	text-decoration: none;
}
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 90; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 20%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index:100; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
 #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

<!-- end -->
und so die seite Preise - Fitnesswelt Burgwedel
Mit Zitat antworten
  #4 (permalink)  
Alt 19.05.2012, 15:18
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 487
dazzle89 wird schon bald berühmt werden
Standard

Die Eigenschaften top, right, usw. wirken nur, wenn das Element eine Positionierung wie z.B. absolute oder relative erhalten hat. Da es aber nicht mehr absolut positioniert ist, bringen dir diese Eigenschaften nichts.

Du wirst stattdessen mit margin arbeiten müssen, also margin-right, margin-top, usw.
Mit Zitat antworten
Antwort

Stichwörter
elterobjekt, footer, positionieren

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
Falsche Positionierung im IE(8) japanworm CSS 42 20.07.2011 16:56
Positionierung z-index und IE Blub CSS 4 09.12.2007 16:51
Absoluter Anfänger - Frage zum Div und Positionierung eenux (X)HTML 7 22.01.2007 21:00
Anfänger erbittet ein paar Tips. Dr.Crow (X)HTML 5 20.06.2006 12:47
absoluter anfaenger verzweifelt an positionierung Jansen CSS 3 02.11.2005 17:13


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:43 Uhr.