octane: Positionierung bzw. andocken einer div box

Beitrag lesen

SELF-Forum

Positionierung bzw. andocken einer div box

octane
– Informationen zu den Bewertungsregeln

Hallo, habe schon die Suchfunktion benutzt aber das was ich brauche habe ich leider nicht gefunden.

es geht um eine divbox(inden einer Banner kommen soll). Sie soll an meiner content box andocken.
Doch ich habe Probleme mit der Umsetzung.

Hier mal die CSS:

html {  
	 width:100%;  
}  
  
body {  
	background-color:#8db5cb;  
	text-align:center;  
	font-family:Arial, Helvetica, sans-serif;  
	font-size:11px;  
	color:#757575;  
	background-image:url('img/bg_body.jpg');  
	background-repeat:repeat-x;  
}  
  
#wrapper {  
	width:900px;  
	margin:0 auto;  
	text-align:left;  
	  
}  
  
#header {  
	float:left;  
	width:900px;  
	height:162px;  
	background-color:#ffffff;  
}  
  
#logobox {  
	display:inline;  
	float:left;  
	width:220px;  
	height:150px;  
	margin:6px;  
	background-image:url('img/bg_logobox.jpg');  
	background-repeat:no-repeat;  
	text-align:right;  
}  
  
#logobox h1 {  
	padding:0px;  
	margin:0px;  
	margin-top:50px;  
	margin-right:20px;  
	font-size:26px;  
	color:#c1d000;  
}  
  
#logobox h2 {  
	padding:0px;  
	margin:0px;  
	margin-top:-4px;  
	margin-right:20px;  
	font-size:14px;  
	color:#8d8d8d;  
}  
  
#bannerbox {  
	border-style:solid;  
	/*right:20px; */  
	/*position:absolute;*/  
	background-color:#C00;  
	/*left:959px;*/  
	top:207px;  
	width:100px;  
	height:400px;  
	float:right;  
	left: 950px;  
	right:20px;  
}  
  
#headimg {  
	display:inline;  
	float:left;  
	width:662px;  
	height:150px;  
	margin:6px;  
	margin-left:0px;  
	background-image:url('img/header_image.jpg');  
	background-repeat:no-repeat;  
}  
  
#topnavi {  
	display:inline;  
	float:left;  
	width:900px;  
	height:34px;  
	background-image:url('img/bg_topnavi.jpg');  
	background-repeat:no-repeat;  
}  
  
#topnavi ul {  
	display:inline;  
	list-style-type:none;  
	padding:0px;  
	margin:6px;  
	margin-top:0px;  
}  
  
#topnavi ul li {  
	float:left;  
	height:28px;  
	background-image:url('img/button_topnavi_norm.jpg');  
	background-repeat:no-repeat;  
	line-height:28px;  
}  
  
#topnavi ul li.selected {  
	float:left;  
	height:28px;  
	background-image:url('img/button_topnavi_selected.jpg');  
	background-repeat:no-repeat;  
	line-height:28px;  
}  
  
#topnavi ul li a {  
	line-height:28px;  
	color:#8d8d8d;  
	font-size:12px;  
	font-weight:bold;  
	font-family:Verdana, sans-serif;  
	text-decoration:none;  
	padding-left:28px;  
	padding-right:26px;  
}  
  
#topnavi ul li a:hover {  
	line-height:28px;  
	color:#8d8d8d;  
	font-size:12px;  
	font-weight:bold;  
	font-family:Verdana, sans-serif;  
	text-decoration:underline;  
	padding-left:28px;  
	padding-right:26px;  
}  
  
#topnavi ul li.selected a {  
	line-height:28px;  
	color:#757575;  
	font-size:12px;  
	font-weight:bold;  
	font-family:Verdana, sans-serif;  
	text-decoration:none;  
	padding-left:28px;  
	padding-right:26px;  
}  
  
#topnavi ul li.selected a:hover {  
	line-height:28px;  
	color:#757575;  
	font-size:12px;  
	font-weight:bold;  
	font-family:Verdana, sans-serif;  
	text-decoration:underline;  
	padding-left:28px;  
	padding-right:26px;  
}  
  
#bodybox {  
	float:left;  
	width:900px;  
	background-image:url('img/bg_bodybox.jpg');  
}  
  
#subnavi {  
	display:inline;  
	float:left;  
	width:220px;  
	margin-left:6px;  
	margin-top:10px;  
	padding-bottom:10px;  
}  
  
#subnavi a{  
margin-bottom:10px;  
}  
  
#subnavi ul {  
	list-style-type:none;  
	padding:0px;  
	margin:0px;  
}  
  
#subnavi ul li {  
	height:24px;  
	/*background-image:url('img/button_subnavi.jpg');*/  
	background-repeat:no-repeat;  
	line-height:24px;  
	margin-left:22px;  
	width:181px;  
	margin-bottom:10px;  
}  
  
#subnavi ul li a {  
	font-family:Verdana, sans-serif;  
	font-size:11px;  
	color:#8d8d8d;  
	text-decoration:none;  
	padding-left:10px;  
	margin-bottom:10px;  
}  
  
#subnavi ul li a:hover {  
	font-family:Verdana, sans-serif;  
	font-size:11px;  
	color:#8d8d8d;  
	text-decoration:underline;  
	padding-left:10px;  
}  
  
#subnavi ul li a.selected {  
	font-family:Verdana, sans-serif;  
	font-size:11px;  
	color:#c1d000;  
	text-decoration:none;  
	padding-left:10px;  
}  
  
#subnavi ul li a.selected:hover {  
	font-family:Verdana, sans-serif;  
	font-size:11px;  
	color:#c1d000;  
	  
	padding-left:10px;  
}  
  
#content {  
	display:inline;  
	float:left;  
	width:608px;  
	margin-right:36px;  
	margin-left:30px;  
	margin-top:20px;  
	padding-bottom:10px;  
}  
  
#content h1 {  
	font-family:Arial, Helvetica, sans-serif;  
	font-size:24px;  
	font-weight:bold;  
	margin:0px;  
	padding:0px;  
	color:#c1d000;  
}  
  
#content p {  
	line-height:16px;  
}  
  
#footer {  
	display:inline;  
	float:left;  
	width:900px;  
	height:41px;  
	background-image:url('img/bg_footer.jpg');  
	background-repeat:no-repeat;  
	text-align:center;  
}  
  
#footer p {  
	margin:6px;  
	padding:0px;  
	line-height:28px;  
	font-size:10px;  
	font-family:Arial, Helvetica, sans-serif;  
	color:#aaaaaa;  
}  
  
#footer a {  
	font-size:10px;  
	color:#aaaaaa;  
	text-decoration:none;  
}  
  
#footer a:hover {  
	font-size:10px;  
	color:#aaaaaa;  
	text-decoration:underline;  
}  
  
div.imgbox {  
	float:right;  
	width:160px;  
	height:250px;  
	text-align:center;  
	margin-left:1px;  
	margin-bottom:10px;  
}  
  
div.imgbox img {  
	border:1px solid #bbbbbb;  
}  
  
div.imgbox p {  
	text-align:left;  
	margin:0px;  
	padding:0px;  
	font-size:10px;  
	color:#aaaaaa;  
}  
  
div.spacing1 {  
	margin-left:18px;  
	margin-right:18px;  
}

und hier die HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<title>Strand-paradies.de  Hier finden sie Ihre Reise !</title>  
<META name="DESCRIPTION" content="Strand-Paradies ist das internetportal für Reisensuchende. Hier findet man jede Reise, spezielisiert auf Strand-Reisen weltweit. Mietwagen, Hotels oder Last Minute, zu Finden ist hier alles und das super günstig. Mit hunderten von Reiseveranstaltern finden Sie jede Reise.">  
  
<META name="KEYWORDS" content="Reisen, Strand, billig, Meer, günstig, Hotel, Urlaub, Flüge, Flug, Pauschalreisen, All Inclusiv, Mallorca, Traumreise, buchen, Schnäppchen, Reiseveranstalter, Online-buchen, lastminute, last, minute, Sonne, Beach, Ozean, balearen, Ibiza, Kanaren, Menorca, preis, Günstiger, billiger">  
  
<META name="REVISIT-AFTER" content="30 days">  
  
<META http-equiv="CONTENT-LANGUAGE" content="de">  
  
<META name="ROBOTS" content="all">  
  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  
<style type="text/css" media="all">  
	@import "global.css";  
</style>  
  
</head>  
  
<body>  
<div id="wrapper">  
	<div id="header">  
		<div id="logobox">  
			<h1>Strand-Paradies</h1>  
			<h2>.de</h2>  
		</div>  
		<div id="headimg">&nbsp;</div>  
	</div>  
	<div id="topnavi">  
		<div class="spacing1">  
			<ul>  
				  
			</ul>  
		</div>  
	</div>  
	<div id="bodybox">  
		<div id="subnavi">  
			<ul>  
				<li><a href="/Impressum.html"><img src="img2/impressum.gif"  width="121" height="33" border="0" alt="Back"></a></li>  
  
                <li><a href="/Service.php"><img src="img2/kontakt.gif" width="121" height="33" border="0" alt="Kontakt"></a></li>  
				  
		  </ul>  
		</div>  
		<div id="content">  
			<h1>In Bearbeitung</h1>  
			<div class="imgbox">  
				<img src="1240496645_error.png" alt="me" width="161" height="158">  
				<br>  
				<p></p>  
		  </div>  
  
			<p>Unsere Webpr&auml;senz ist in Bearbeitung und demn&auml;chst erreichbar !!</p>  
			<p>  
            <div id="counter">  
  
            <a href="http://www.travialinks.de/link/A-21846-0/A/travel-it_kurzfristreisen"><img src="http://www.multi-media-marketing.de/bannermuster/img/neutral05.gif" border="0"></a>  
            <p>  
            <a href="http://www.travialinks.de/link/A-21846-0/A/travel-it_lastminute"><img src="http://www.multi-media-marketing.de/bannermuster/img/lm05_ani.gif" border="0"></a>  
  
           <!-- Counter by GOWEB -->  
<center><a href="http://www.webcounter.goweb.de/" target="_blank"><img src="http://webcounter.goweb.de/2933.GIF" hspace="1" vspace="1" border="0" alt="Kostenlose Counter by GOWEB"/></a>  
<!-- Counter Einbaucode Ende -->  
<script language="JavaScript" type="text/javascript">  
<!--  
document.write("<img src='http://webcounter.goweb.de/2933WINSIZE"+screen.width+"x"+screen.height+"' border=0>");  
// -->  
</script>  
</div>  
</div>  
	<div id="footer">  
  
		<p>Copyright 2009 strand-paradies.com. All Rights Reserved.  
		<a href="/Impressum.php">| Impressum</p>  
        <!--BEGINN Pagerank-Ranking.de CODE--><p align="center"><a href="http://www.mlm.de/pagerank-ranking" target="_blank" title="Mehr Pagerank, Homepage bekannt machen und mehr Besucher!"><img src="http://www.mlm.de/pagerank-ranking/gpr.php?ani=0" border="0" width="68" height="15" alt="Mehr Pagerank, Homepage bekannt machen und mehr Besucher!"></a></p><!--ENDE Pagerank-Ranking.de CODE-->  
	</div>  
  
  
</div>  
 <div id="bannerbox">  
  
    	<p> bla bla bla bla bla </p>  
  
     </div>  
</body>  
</html>

Für eine bessere Erklärung habe ich einen Screenshot gemacht:

DerKasten mit dem roten Hintergrund muss eigentlich an die Stelle der grünen markierung, also an der rechten seite andocken

ich habe in anderen foren auch eher weniger antworten bekommen, ich hoffe ihr könnt mir da helfen.

mfg octane

Beitrag melden
–
Informationen zu den Bewertungsregeln