• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Sidebar verschiebt sich !! HILFE !!

D

dondemmi

Neues Mitglied
Hallo,
ich bin gerade dabei meine neue Internetseite aufzubauen. Jetzte habe ich das Problem mit der Sidebar -.-' Diese verschiebt sich immer wenn ich auf eine andere Seite wechsel also von meiner Page .. ich habe mal einen Screen gemacht.






Ich würde mich sehr freuen wenn ihr mir helfen könntet.. ich verzweifel dran.
 
Rechts das Facebook und Twitter zeichen .. können die nicht in ihrem teil der Page bleiben halt fixiert das die nüsch weg gehen? auf bild 1 sind die ok so .. auf bild 2 gehts garnüsch.
 
mit ein bisschen code könnte man da vielleicht sogar was zu sagen...
naja ich versuch mal ohne.
max-width festlegen und die icons an den rechten rand floaten
 
HTML: 
 <div id="main">
      <div id="sidebar">
       <p> <a href="#"></a><span class="brown"><strong><a href="http://www.facebook.com/profile.php?id=1154973286"></a></strong></span><span class="brown"><strong><a href="http://www.facebook.com/profile.php?id=1154973286#!/profile.php?id=1154973286"><img src="images/facebook-logo.png" width="102" height="101" border="0" /></span></p>
        <p><span class="brown"><strong><a href="http://twitter.com/Helljumper08"></a></strong><span><span class="brown"><strong><a href="http://www.twitter.com/helljumper08"><img src="images/obar-twitter-logo_237_249.png" width="107" height="106" border="0" /></a></strong></span></p>
 
dondemmi][noparse][Code][/noparse][/quote] Der Code hilft nicht wirklich weiter. Poste nach Möglichkeit vollständige Minimalbeispiele (vollständiges HTML-Dokument inklusive DOCTYPE und CSS). [QUOTE=Space Vampire schrieb:
max-width festlegen und die icons an den rechten rand floaten
Zum Vergrößern anklicken....

Würde ich auch sagen.

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
<style type="text/css">

    body {
        padding: 0;
        margin: 0;
    }

    #main {
        margin: 0 auto;
        background: red;
        max-width: 50em;
    }

    #sidebar {
        float: right;
        width: 10em;
        background: blue;
    }

    #content {
        margin-right: 10em;
    }

    /**
     * new clearfix (Clearing ohne Markup)
     *
     * @see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
     */
    .clear:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
        }
    * html .clear             { zoom: 1; } /* IE6 */
    *:first-child+html .clear { zoom: 1; } /* IE7 */

</style>
    </head>

    <body>

        <div id="main" class="clear">

            <div id="sidebar">
                Hallo<br />
                Welt
            </div>

            <div id="content">
                Lorem ipsum
            </div>

        </div>


    </body>

</html>
 
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Created by: Reality Software | www.realitysoftware.ca
Released by: Flash Gallery | www.flash-gallery.org
Note: This is a free template released under the Creative Commons Attribution 3.0 license, 
which means you can use it in any way you want provided you keep links to authors intact.
Don't want our links in template? You can pay a link removal fee: www.realitysoftware.ca/templates/
You can also purchase a PSD-file for this template.
-->

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Official Demmi</title>
<link href="style.css" rel="stylesheet" type="text/css"/></head>
<body>
<div id="all">
 <div id="container">
    <!-- header -->
    <div id="logo"><span class="brown"><strong><img src="http://www.html.de/images/records2.png" alt="header" width="232" height="46" /></strong></span> <a href="#"></a></div>
    <div id="menu">
            <ul>
              <li><a href="#">Home</a></li>
              <li>|</li>
              <li><a href="bio.html">Bio</a> </li>
              <li>|</li>
              <li><a href="media.html">Media</a></li>
              <li>|</li>
              <li><a href="../gb.php">Gästebuch</a></li>
              <li>|</li>
              <li><a href="kontakt.html">Kontakt</a></li>
              <li>|</li>
              <li><a href="http://demmi-records.xobor.de/">Forum</a></li>
          </ul>
    </div>
    <!--end header -->
    <!-- main -->
    <div id="main">
      <div id="sidebar">
        <p><a href="#"></a><span class="brown"><strong><a href="http://www.facebook.com/profile.php?id=1154973286"></a></strong></span><span class="brown"><strong><a href="http://www.facebook.com/profile.php?id=1154973286#!/profile.php?id=1154973286"><img src="http://www.html.de/images/facebook-logo.png" width="102" height="101" border="0" /></a></strong></span></p>
        <p><span class="brown"><strong><a href="http://twitter.com/Helljumper08"></a></strong></span><span class="brown"><strong><a href="http://www.twitter.com/helljumper08"><img src="http://www.html.de/images/obar-twitter-logo_237_249.png" width="107" height="106" border="0" /></a></strong></span></p>
        <p>&nbsp;</p>
      </div>
          <div id="text" >
                <h1></h1>
                <p> <br />
               .</p>
                <p> </p>
                <p>&nbsp;</p>
                <ul>
                  <li></li>
                  <li></li>
                </ul>
                <h1></h1>
                <p> </p>
                <blockquote><br />
                <br />
                <br />
               </em></blockquote>
                <p> </p>
                <p>- </p>
          </div>
    </div>
    <!-- end main -->
    <!-- footer -->
    <div id="footer">
    <div id="left_footer">&copy; Copyright 2010 Demmi-records </div>
    <div id="right_footer">

<!-- Please do not change or delete these links. Read the license! Thanks. :-) -->
    </div>
  </div>
    <!-- end footer -->
 </div>
</div>
<div style="text-align: center; font-size: 0.75em;"></div>
</body>
</html>
Das ist meine index Datei.. ich habe die stellen wo ich was reingeschrieben habe gelöscht. Aber so sieht se halt aus..

Die CSS sieht so aus

HTML: 
 html {background:#53533a;}
body {margin:0; font-size:14px; line-height:20px; font-family:Arial, Helvetica, sans-serif; background:url(images/body_bckg.jpg) repeat-y center;}
.brown {color:#936307;}
a {color:#936307; text-decoration:none;}
a:hover {color:#666666;}
blockquote {color:#666666; border-left:2px solid #936307; padding-left:20px; margin:10px 0 10px 40px;}

#all {background:url(images/container_bckg.jpg) no-repeat top center;}
#container {width:1000px; margin:0 auto; background:url(images/container_bckg.jpg) no-repeat top center;}

#logo {height:50px; margin:0 60px; padding:80px 0 0 85px; background:url(images/logo.gif) no-repeat 32px 70px;}
#logo a {text-decoration:none; font-size:20px; color:#000000; font-family:"Times New Roman", Times, serif; text-transform:capitalize;}
#menu {height:40px; margin:0 60px;}
#menu ul {margin:0; padding:0;}
#menu ul li {display:inline-block; float:left; list-style:none; text-align:center; color:#936307;}
#menu a {padding:0 20px; font-family:"Times New Roman", Times, serif; font-size:20px; text-transform:lowercase; text-decoration:none; color:#936307;}
#menu a:hover {color:#666666;}

#main {background:url(images/main_bottom.jpg) bottom center no-repeat; float:left; margin:0 60px; display:inline;}
#text {margin:0 270px 0 20px;}
#text ul {padding:0; margin:10px 0 10px 40px;}
#text li {list-style:none; padding-left:20px; background:url(images/li.gif) no-repeat 0 7px;}
#text p {margin:10px 0;}
#sidebar {float:right; width:180px; padding:0 40px 0 10px;}
h1, h2 {font-family:"Times New Roman", Times, serif; margin:20px 0 0 0; font-size:1.8em;}

#footer {height:130px; clear:both; background:url(images/footer_bckg.jpg) no-repeat center #53533B; font-family:"Times New Roman", Times, serif; color:#666666; font-size:10px; text-transform:uppercase; padding:0 60px;}
#left_footer {float:left; padding:30px 0 0 20px;}
#right_footer {float:right; padding:30px 20px 0 0;}

wie das "floaten" funktioniert weiß ich echt nicht auch wenn es vielleicht ein leichter schritt ist :S
 
Code: 
#main {background:url(images/main_bottom.jpg) bottom center no-repeat; float:left; margin:0 60px; display:inline;}

Nimm float: left; und display: inline; (beziehungsweise wozu das?) raus. Ein Float nimmt ohne feste Breitenangabe nur den minimal notwendigen Raum (in diesem Fall width) ein.

Möglicherweise würde es auch ausreichen, #main eine feste Breite zu geben, aber der Float ist dort meines Erachtens nicht notwendig.
 
(: Sehr vielen Dank !!.. Hab float left; und dislay: inline; rausgelöscht und jetzt hat es funktioniert.. Ich danke allen die versucht haben mir zu helfen. (: Jetzt hab ich wieder was dazu gelernt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben