nicht angemeldet
Positionierung bzw. andocken einer div box
suitHallo, 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"> </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äsenz ist in Bearbeitung und demnä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
-
Hi octane,
was Du suchst, ist ein mit CSS erreichtes 2-Spalten Layout. Dass Du zu diesem Thema bis dato nichts gefunden hast, kann ich nicht glauben. Schau, ich zeige es Dir.
_Noch_ mehr Ergebnisse bekommst Du bei der Suche auf Englisch.
Um die gefundenen Seiten besser zu verstehen, solltest Du Dich mit der CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=float beschäftigen.
Zu der Eigenschaft gibt es auch ein sehr bekanntes Tutorial.
Für eine bessere Erklärung habe ich einen Screenshot gemacht
Das ist sehr löblich, für eine bessere Übersicht solltest Du bei zukünftigen Fragen allerdings einfach nur den Link zu einer Seite posten. Jene, die sich mit Deiner Frage auseinandersetzen, suchen sich dann schon die relevanten Teile des Quelltextes. Hier eine komlette CSS-Datei plus die html-Ressource 1:1 reinzukopieren, verschwendet nicht nur Speicherplatz, sondern ist auch unübersichtlich bis zum Gehtnichtmehr.
ich habe in anderen foren auch eher weniger antworten bekommen, ich hoffe ihr könnt mir da helfen.
Das habe ich hiermit hoffentlich getan.
Mit lieben Grüßen aus Wien
Michi
--
Self-Code: ie:{ fl:| br:> va:} ls:# fo:| rl:° n4:# ss:| de:> js:{ ch:? mo:) zu:}
Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
It is nice to be important - but it is more important to be nice.
-
es geht um eine divbox(inden einer Banner kommen soll). Sie soll an meiner content box andocken.
Doch ich habe Probleme mit der Umsetzung.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.
Wenn die Höhe masgeblich ist, musst du JS bemühen, um die Höhe der Referenzbox auszumessen. Die Box kannst du als Child der referenzbox absolut positionieren.
Eine andere möglichkeit wäre, den beiden Boxen (in diesem Fall zwei Syblings), die Eigenschaft table-cell zuzuweisen. Dadurch werden Sie wie Tabellenzellen nebeneinander ausgerichtet. Dann geht der Zusammenhang zum Header allerdings verloren.
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische -
so wie ich das verstanden habe, kann man zwar mit float meine div box (Bannerbox) innerhalb der wrapper box navigieren, also links oder rechts usw. . Bei mir muss die box aber außerhalb vom wrapper.
hoffe dass ich das mal richtig verstanden habe. weil wenn ich float benutze, bekomm ich meine div nich außen angedockt^^
mfg octane
-
so wie ich das verstanden habe, kann man zwar mit float meine div box (Bannerbox) innerhalb der wrapper box navigieren, also links oder rechts usw. . Bei mir muss die box aber außerhalb vom wrapper.
Das <body />-Element ist ja auch noch da.
hoffe dass ich das mal richtig verstanden habe. weil wenn ich float benutze, bekomm ich meine div nich außen angedockt^^
Du Kannst das Ding auch innerhalb reinpacken und per position: absolute negativ rauspositionieren.
-
Du Kannst das Ding auch innerhalb reinpacken und per position: absolute negativ rauspositionieren.
Habe das nun gemacht uns trotz position: absolute negative ist die bannerbox innerhalb der content box.
aber der tip hat mich auf jeden fall mal ein bisschen weitergebracht
danke
hier mal die seite :
-
Habe das nun gemacht uns trotz position: absolute negative ist die bannerbox innerhalb der content box.
ich meinte "per 'position: absolute;' negativ rauspositionieren".
-
-
-