Sidebar falsche position

Status
Nicht offen für weitere Antworten.

4udesigns

Erfahrenes Mitglied
Nabend,

Meine sidebar ist falsch positioniert.sie sollte dierekt unter dem Header sein, wie #Textfeld:
0MUkLpf.bmp

Mein code:
Code:
<html>
<head>
<title>Discreated - 
<?php
$site = "Impressum";
echo $site;
?>
</title>
<style type="text/css">
body {background-color: #dddddd;background-image:url();}

a{color:#000000; font-size: 15px; text-decoration: none;}

a:hover {color: #666666; font-size: 15px; text-decoration: none;}

a:link {color: #333333; font-size: 15px; text-decoration: none;}

a:active {color: #555555; font-size: 15px; text-decoration: none;}

a:visited {color: #444444; font-size: 15px; text-decoration: none;}

#Design {
width:800px;
margin-left:100px;
}

#Header_oben {
margin-top: 40px;
height: 200px;
width: 800px;
background-color: #ffffff;
background-image:url(http://83.246.96.56/090816/oW6bmao2.png);
color: #EBB000;
border: 0px solid #888888;
padding: 0px;
}

#nav_container {
margin-top: -60px;
width: 800px;
height: 52px;
background-color: #xxx;
color: #000000;
border: 0px solid #888888;
padding: 0px 0px 0px 0px;
background-image: url();
}

#Textfeld {
width: 610px;
background-color: #xxx;
color: #222222;
background-image: url(http://img134.imageshack.us/img134/4895/tfvm4.png);
border: 0px solid #888888;
margin-bottom: 0px;
padding: 10px 10px 0px 10px;
display: inline;
float: left;
}

#Textfeldup {
width: 620px;
height: 30px;
background-color: #xxx;
color: #222222;
background-image: url(http://img291.imageshack.us/img291/1643/tfokp9.png);
border: 0px solid #888888;
margin-bottom: 0px;
margin-top: 15px;
padding: 5px 0px 0px 10px;
display: inline;
float: left;
}

#Textfelddown {
width: 610px;
height: 30px;
background-color: #xxx;
color: #222222;
background-image: url(http://img364.imageshack.us/img364/8388/tfuge9.png);
border: 0px solid #888888;
margin-bottom: 15px;
padding: 0px 10px 0px 10px;
display: inline;
float: left;
}

#sidebar_container {
width: 145px;
background-color: #ffffff;
color: #222222;
border: 0px solid #888888;
margin-bottom: 0px;
padding: 0px 5px 0px 5px;
float:right;
background-image: url(http://img364.imageshack.us/img364/8566/sliv0.png);
}

#sidebarup {
width: 145px;
height: 8px;
background-color: #ffffff;
color: #222222;
border: 0px solid #888888;
margin-top: 0px;
padding: 0px 5px 0px 5px;
float:right;
background-image: url(http://img99.imageshack.us/img99/9661/slohe0.png);
}

#sidebardown {
width: 145px;
height: 8px;
background-color: #ffffff;
color: #222222;
border: 0px solid #888888;
margin-bottom: 15px;
padding: 0px 5px 0px 5px;
float:right;
background-image: url(http://img364.imageshack.us/img364/6916/sluhd9.png);
}

#Feld_unten {
width: 780px;
height: 25px;
background-color: #ffffff;
color: #222222;
clear: both;
border: 0px solid #888888;
padding: 5px 10px 0px 10px;
background-image: url(http://img217.imageshack.us/img217/7218/bottomtb2.png);
}
</style>
</head>
<body>

<div id="Design">
<div id="Header_oben"></div>
<style type="text/css" media="screen">
<!--

/* Allgemeine Einstellungen */
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

/* Dieser Teil ist dafür, die Menüpunkte ohne Listenpunkt darzustellen */
ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

/* Hier stellt Ihr ein, wie weit die Schrift vom Menürand entfernt ist. */
li a
{
padding-right: 20px;padding-top: 5px;padding-left: 10px;
}

/* Hier wird das ganze Menü positioniert */
div.menu
{
position: absolute;
z-index: 3;
top: 210px;
left: 55%;
margin-left:-405px;
width:905px;
}

/* Dieser Punkt bestimmt die Menübreite */
.menu li
{
width: 160px;
float: left;
}

/* Hier bestimmt Ihr das Aussehen der Menülinks */
.menu a
{
border: 0px solid #000000;
background-color: #xxx;
background-image: url(http://img217.imageshack.us/img217/8064/cmbuf2.png);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF;
}

/* Hier bestimmt Ihr das Aussehen der Hintergründe der Menülinks, wenn Ihr mit der Maus drüber fahrt */
.menu a:hover
{
background-color: #XXX;
background-image: url(http://img201.imageshack.us/img201/8972/cmbh2ui6.png);
}

/* Hier bestimmt Ihr die Größe der Menülinks (Für weitere Menüs, müssen die Punkte entsprechend erweitert werden) */
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 8px;
display: none;
width: 160px;
float: left;
}

/* Hier bestimmt Ihr die Farbe der Menülinks (Für weitere Menüs, müssen die Punkte entsprechend erweitert werden) */
#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<!-- Anfang des Scriptes -->

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>

<!-- Ende des Scriptes -->

<div class="menu">

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Community</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
<li><a href="forum.php">Forum</a></li>
<li><a href="login.php">Einloggen</a></li>
<li><a href="register.php">Registrieren</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">HomepageHilfe</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="gfx.php">Grafix</a></li>
<li><a href="designs.php">Layouts/Designs</a></li>
<li><a href="hp-tools">Tools</a></li>

</ul>
</li>


<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Tutorials</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
<li><a href="tutorials/photoshop.php">Photoshop</a></li>
<li><a href="tutorials/aftereffects.php">After Effects</a></li>
<li><a href="tutorials/cinema4d.php">Cinema4d</a></li>
<li><a href="tutorials/gimp.php">Gimp</a></li>

</ul>
</li>


<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Showroom</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">
<li><a href="showroom/toode.php">2d</a></li>
<li><a href="showroom/threede.php">3d</a></li>
<li><a href="showroom/vdo.php">Video</a></li>

</ul>
</li>

<!-- Hier können weitere Menüs eingefügt werden, einfach den oberen Teil kopieren und anpassen
'smenu1' muss dann entsprechend hochgezählt werden (4x)

<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">HomepageHilfe</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
<li><a href="http://Menupunkt1.1.htm">Menupunkt1.1</a></li>
<li><a href="http://Menupunkt1.2.htm">Menupunkt1.2</a></li>
<li><a href="http://Menupunktx.x.htm">Menupunkt1.2</a></li>

</ul>
</li>

-->

</div>
<div id="nav_container"></div>
<div id="Textfeldup"><table width="610" height="25" border="0" background="http://83.246.96.56/090816/FsX9F2S.png" align="">
    <tbody>
        <tr>
            <td align="right"><b><font face="arial" color="#ffffff">
<?php
echo $site;
?>
</font></b></td>
        </tr>
    </tbody>
</table></div>
<div id="Textfeld">Seiteninhaber<br>



<br>
<br>
<br>
Copyright
©2008
<br>
<br>
<br>

Haftungsausschluss<br><br>
1. Inhalt des Onlineangebotes<br>
Der Seiteninhaber übernimmt keinerlei Gewähr für die Aktualität, Korrektheit, Vollständigkeit oder Qualität der bereitgestellten Informationen. Haftungsansprüche gegen den Seiteninhaber, welche sich auf Schäden materieller oder ideeller Art beziehen, die durch die Nutzung oder Nichtnutzung der dargebotenen Informationen bzw. durch die Nutzung fehlerhafter und unvollständiger Informationen verursacht wurden, sind grundsätzlich ausgeschlossen, sofern seitens des Autors kein nachweislich vorsätzliches oder grob fahrlässiges Verschulden vorliegt. Alle Angebote sind freibleibend und unverbindlich. Der Seiteninhaber behält es sich ausdrücklich vor, Teile der Seiten oder das gesamte Angebot ohne gesonderte Ankündigung zu verändern, zu ergänzen, zu löschen oder die Veröffentlichung zeitweise oder endgültig einzustellen.
<br><br>
2. Verweise und Links<br>
Bei direkten oder indirekten Verweisen auf fremde Webseiten, die außerhalb des Verantwortungsbereiches des Seiteninhabers liegen, würde eine Haftungsverpflichtung ausschließlich in dem Fall in Kraft treten, in dem der Seiteninhaber von den Inhalten Kenntnis hat und es ihm technisch möglich und zumutbar wäre, die Nutzung im Falle rechtswidriger Inhalte zu verhindern. Der Seiteninhaber erklärt hiermit ausdrücklich, dass zum Zeitpunkt der Linksetzung keine illegalen Inhalte auf den zu verlinkenden Seiten erkennbar waren. Auf die aktuelle und zukünftige Gestaltung, die Inhalte oder die Urheberschaft der gelinkten/verknüpften Seiten hat der Seiteninhaber keinerlei Einfluss. Deshalb distanziert er sich hiermit ausdrücklich von allen Inhalten aller gelinkten/verknüpften Seiten, die nach der Linksetzung verändert wurden. Diese Feststellung gilt für alle innerhalb von www.discreated.de gesetzten Links und Verweise. Für illegale, fehlerhafte oder unvollständige Inhalte und insbesondere für Schäden, die aus der Nutzung oder Nichtnutzung solcherart dargebotener Informationen entstehen, haftet allein der Anbieter der Seite, auf die verwiesen wurde, nicht derjenige, der über Links auf die jeweilige Veröffentlichung lediglich verweist.
<br><br>
3. Urheber- und Kennzeichenrecht<br>
Der Seiteninhaber ist bestrebt, in allen Publikationen die Urheberrechte der verwendeten Grafiken und Texte zu beachten, von ihm selbst erstellte Grafiken und Texte zu nutzen oder auf lizenzfreie Grafiken und Texte zurückzugreifen. Alle innerhalb des Internetangebotes genannten und ggf. durch Dritte geschützten Marken- und Warenzeichen unterliegen uneingeschränkt den Bestimmungen des jeweils gültigen Kennzeichenrechts und den Besitzrechten der jeweiligen eingetragenen Eigentümer. Allein aufgrund der bloßen Nennung ist nicht der Schluss zu ziehen, dass Markenzeichen nicht durch Rechte Dritter geschützt sind! Das Copyright für veröffentlichte, vom Seiteninhaber selbst erstellte Objekte bleibt allein beim Seiteninhaber der Seiten. Eine Vervielfältigung oder Verwendung solcher Inhalte in anderen elektronischen oder gedruckten Publikationen ist ohne ausdrückliche Zustimmung des Seiteninhabers nicht gestattet.
<br><br>
4. Datenschutz<br>
Sofern innerhalb des Internetangebotes die Möglichkeit zur Eingabe persönlicher oder geschäftlicher Daten (Emailadressen, Namen, Anschriften) besteht, so erfolgt die Preisgabe dieser Daten seitens des Nutzers auf ausdrücklich freiwilliger Basis. Die Inanspruchnahme und Bezahlung aller angebotenen Dienste ist – soweit technisch möglich und zumutbar – auch ohne Angabe solcher Daten bzw. unter Angabe anonymisierter Daten oder eines Pseudonyms gestattet. Die Nutzung der im Rahmen des Impressums oder vergleichbarer Angaben veröffentlichten Kontaktdaten wie Postanschriften, Telefon- und Faxnummern sowie Emailadressen durch Dritte zur Übersendung von nicht ausdrücklich angeforderten Informationen ist nicht gestattet. Rechtliche Schritte gegen die Versender von sogenannten Spam-Mails bei Verstössen gegen dieses Verbot sind ausdrücklich vorbehalten.
<br><br>
5. Rechtswirksamkeit dieses Haftungsausschlusses<br>
Dieser Haftungsausschluss ist als Teil des Internetangebotes zu betrachten, von dem aus auf diese Seite verwiesen wurde. Sofern Teile oder einzelne Formulierungen dieses Textes der geltenden Rechtslage nicht, nicht mehr oder nicht vollständig entsprechen sollten, bleiben die übrigen Teile des Dokumentes in ihrem Inhalt und ihrer Gültigkeit davon unberührt. </div>
<div id="sidebarup"></div>
<div id="sidebar_container">Its too late to apologize, i said its to lait to abologize, tooooo late!</div>
<div id="sidebardown"></div>
<div id="Textfelddown"></div>
<div id="Feld_unten"><table border="0" align="center">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td align="center"><a href="aboutme.php" target="_self">&Uuml;ber Mich</a> | <a href="impress.php" target="_self">Impressum</a> | <a href="contact.php" target="_self">Kontakt</a> | <a href="partners.php">Partner</a></td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table></div>
</div><!-- // ENDE #Design -->

</body>
</html>
Kann mir jemand helfen?
 
Zuletzt bearbeitet:
Hi,

in deinem letzten Thread Feldunten immer unter Textfeld sitzt die Sidebar nach meinen Korrekturen auf der richtigen Höhe.

Also einfach die drei vorgenommenen "Untergliederungen" der Sidebar in ein übergeordnetes DIV einbetten, das die CSS-Formatierung der Sidebar aus deinem letzten Layout besitzt. Die drei Kinderelemente benötigen dann nicht mehr die float:right-Deklaration.

Optimalerweise führst du diese Arbeitsschritte auch für #Textfeld durch, das sich jetzt im neuen Layout-Konzept ebenfalls in drei Bereiche aufteilt.

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück