Sidebar verschiebt sich !! HILFE !!

html.de-Forum HTML, XHTML & CSS
1

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.

http://img837.imageshack.us/img837/4324/bsp1f.th.jpg

http://img844.imageshack.us/img844/9830/bsp2.th.jpg

Ich würde mich sehr freuen wenn ihr mir helfen könntet… ich verzweifel dran.

2

was ist dein problem?
ich seh keine verschiebung.

3

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.

4

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

5

[HTML]




[/HTML]

6

Der Code hilft nicht wirklich weiter. Poste nach Möglichkeit vollständige Minimalbeispiele (vollständiges HTML-Dokument inklusive DOCTYPE und CSS).

[QUOTE=Space Vampire, post: 255994"]
max-width festlegen und die icons an den rechten rand floaten
[/QUOTE]

Würde ich auch sagen.

[html]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New</title>
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 */ 
</head>

<body>

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

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

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

    </div>


</body>
[/html]
7

[HTML]

Official Demmi
header

 


.

 




-

© Copyright 2010 Demmi-records 
</div>
[/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;}[/HTML]

wie das „floaten“ funktioniert weiß ich echt nicht auch wenn es vielleicht ein leichter schritt ist :S

8

.icons {
float: right;
}

Den Icons gibts die class=„icons“

Sie werden dadurch bis zum Rechten Rand geschoben.

9 
#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.

10

Das display:inline; wirkt hier gegen den double-float-margin-bug (IE5 -IE6).

11

(: 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.