4udesigns: Sidebar falsche position

SELF-Forum

Sidebar falsche position

4udesigns
– Informationen zu den Bewertungsregeln

Nabend,

Meine sidebar ist falsch positioniert.sie sollte dierekt unter dem Header sein, wie #Textfeld: bs
Mein code:~~~css <html>
<head>
<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>
<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">Lorem ipsum</div>
<div id="sidebarup"></div>
<div id="sidebar_container">korem ipsum</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="http://discreated.de/aboutme.php" target="_self">&Uuml;ber Mich</a> | <a href="http://discreated.de/impress.php" target="_self">Impressum</a> | <a href="http://discreated.de/contact.php" target="_self">Kontakt</a> | <a href="http://discreated.de/partners.php">Partner</a></td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table></div>
</div><!-- // ENDE #Design -->

</body>
</html>

Kann mir jemand helfen?
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Sidebar falsche position

    vaudi
    – Informationen zu den Bewertungsregeln

    Hallöchen,

    Nabend,

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

      

> <body>  
> <div id="Design">  
>   <div id="Header_oben"></div>  
>   <div id="nav_container"></div>  

     <div id="mitte">  
       <div id="mitte_links>  

>       <div id="Textfeldup"></div>  
>       <div id="Textfeld"></div>  
>       <div id="Textfelddown"></div>  

       </div>  
       <div id="mitte_rechts>  

>       <div id="sidebarup"></div>  
>       <div id="sidebar_container"></div>  
>       <div id="sidebardown"></div>  

       </div>  
     </div>  

>   <div id="Feld_unten"></div>  
> </div><!-- // ENDE #Design -->  
> </body>  
> </html>  
>

    Kann mir jemand helfen?

    Deine div's richten sich mit dem floaten danach, in welcher Reihenfolge sie im Quelltext stehen. Du musst die div's im mittleren Bereich mit weiteren div's gruppieren, siehe eingefügte Zeilen in deinen gekürzten Quelltext.

    Das hatten wir schon mal. Immerhin hast du ja schon einiges verbessert, nur halt das mit dem Gruppieren fehlt noch.

    Wenn du's nicht glaubst: kopier mal etwas mehr Text in "sidebar_container", so dass der sich länger ausdehnt wie "Textfeld" per css-Definition hoch ist...

    MfG
    vaudi

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Sidebar falsche position

      4udesigns
      – Informationen zu den Bewertungsregeln

      Danke für die Antwort.
      So sieht jetzt mein Quelltext aus, aber jetzt ist alles durcheinander..

      <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="http://discreated.de/forum.php">Forum</a></li>  
<li><a href="http://discreated.de/login.php">Einloggen</a></li>  
<li><a href="http://discreated.de/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="http://discreated.de/gfx.php">Grafix</a></li>  
<li><a href="http://discreated.de/designs.php">Layouts/Designs</a></li>  
<li><a href="http://discreated.de/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="http://discreated.de/tutorials/photoshop.php">Photoshop</a></li>  
<li><a href="http://discreated.de/tutorials/aftereffects.php">After Effects</a></li>  
<li><a href="http://discreated.de/tutorials/cinema4d.php">Cinema4d</a></li>  
<li><a href="http://discreated.de/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="http://discreated.de/showroom/toode.php">2d</a></li>  
<li><a href="http://discreated.de/showroom/threede.php">3d</a></li>  
<li><a href="http://discreated.de/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="mitte">  
<div id="mitte_links>  
<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</div>  
<div id="Textfelddown"></div>  
</div>  
<div id="mitte rechts">  
<div id="sidebarup"></div>  
<div id="sidebar_container">its too late lorem ipsum dolor ametits too late lorem ipsum dolor am</div>  
<div id="sidebardown"></div>  
</div>  
</div>  
<div id="Feld_unten"><table border="0" align="center">  
    <tbody>  
        <tr>  
            <td>&nbsp;</td>  
            <td align="center"><a href="http://discreated.de/aboutme.php" target="_self">&Uuml;ber Mich</a> | <a href="http://discreated.de/impress.php" target="_self">Impressum</a> | <a href="http://discreated.de/contact.php" target="_self">Kontakt</a> | <a href="http://discreated.de/partners.php">Partner</a></td>  
            <td>&nbsp;</td>  
        </tr>  
    </tbody>  
</table></div>  
</div><!-- // ENDE #Design -->  
  
</body>  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Sidebar falsche position

        vaudi
        – Informationen zu den Bewertungsregeln

        Hallöchen,

        1. Du hat offensichtlich lediglich die Zeilen, die ich geschrieben hab, kopiert. Sonst wäre dir aufgefallen, dass bei einer id-Bezeichnung ein " fehlt. Über den Sinn der Gruppierung scheinst du dir keine Gedanken gemacht zu haben.

        2. Sollte das nur das Grundprinzip darstellen. Dass die zusätzlichen div's nicht funktionieren, liegt an der fehlenden css-Formatierung. Das die notwendig ist, hatte ich als vorhandenes Wissen vorausgesetzt, sorry.

        Der Sinn dieses Forums ist nicht, fertige Lösungen zu posten, die der Fragende einfach blos zu übernehmen braucht, sondern Hinweise zu geben wo der Fehler ist.

        Was die Angaben zu margin, padding, border, width, height, float usw. zu bedeuten haben und wie sie sich auswirken, lernst du letztlich nur dann wirklich, indem du damit rumexperimentierst und beobachtest, welche Angabe was bewirkt.

        Achte bitte auch auf konsequente Angaben. Wenn du z.B. bei Textfeldup für Rand oben (margin-top) einen Wert von 15px angibst, aber beim optisch danebenliegenden sidebarup für Rand oben 0px, dann ist es logisch, dass die beiden nicht auf einer Höhe dargestellt werden.

        MfG
        vaudi

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln