CSS Verschiebt sich

xisax

Moin zusammen, hoffe ihr könnt mir da helfen

Ich bin gerade dabei, eine fertige CSS Webseite zu ändern. Nun hab ich aber ein kleines Problem Hoffe die Bilder sind nich allzugroß

[Blockierte Grafik: http://web17.011.netroom.de/bilder/normal.jpg]

Beim verkleinern den Browsers verschiebt sich der erste Container nach unten(Spiele, Ergebnisse und Tabelle) siehe Bild:
[Blockierte Grafik: http://web17.011.netroom.de/bilder/falsch.jpg]

Wie kann ich das ändern, das beide Container eine feste Position haben und sich nicht mehr verschieben? Der erste Container ist "Sidebar" und der zweite "ads"

Code

body {
    margin: 0;
    padding: 0;
    background: #eafded url(images/bg.jpg) repeat-x left top;
    text-align: justify;
    font: 13px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #000000;
}


form {
    margin: 0;
    padding: 0;
}


fieldset {
    margin: 0;
    padding: 0;
    border: none;
}


input, textarea {
    padding: 5px;
    border: 1px solid #626262;
    font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}


h1, h1 a, h2, h2 a, h3, h3 a {
    margin: 0;
    text-decoration: none;
    font-weight: normal;
    color: #027415;
}


h1 {
    letter-spacing: -3px;
    font-size: 2.6em;
}


h2 {
    letter-spacing: -2px;
    font-size: 2em;
}


h3 {
    margin-bottom: 2em;
    font-size: 1em;
    font-weight: bold;
}


p, ol, ul {
    margin: 0 0 2em 0;
    line-height: 200%;
}


blockquote {
    margin: 0 0 0 1.5em;
    padding-left: 1em;
    border-left: 5px solid #DDDDDD;
}


a {
    color: #000000;
    text-decoration: none;}


a:hover {
    text-decoration: none;
    color: #FF5134;
}


img {
    border: none;
}


img.left {
    float: left;
    margin: 8px 20px 0px 0px;
    border: 2px solid #434343; 
}




/* Header */


#wrapper {
}


#header {
    width: 990px;
    height: 110px;
    margin: 0 0;
}


#logo h1, #logo p {
    float: left;
}


#logo h1 {
    height: 88px;
    padding: 0 90px 0 0;
    font-size: 4em;
}


#logo p {
    margin: 0 0 0 -80px;
    padding: 55px 0 0 0;
    line-height: normal;
    letter-spacing: -1px;
    font-size: 1.2em;
    font-weight: bold;
}


#logo a {
    text-decoration: none;
    font-weight: bold;
}


#logo p a {
    color: #CF3822;
}


/* RSS */


#rss {
    padding: 30px 39px 20px 0;
    text-align: right;
}


#rss a {
    padding: 0 0 3px 24px;
    text-decoration: none;
    font-weight: bold;
    color: #FF5134;
}


#rss a:hover {
}


/* Menu */


#menu {
    width: 895px;
    height: 60px;
    margin: 0 auto;
}


#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


#menu li {
    display: inline;
    font-family: Tahoma, Arial, sans-serif;
}


#menu a {
    display: block;
    float: left;
    margin: 6px 4px 6px 2px;
    padding: 1px 10px;
    text-decoration: none;
    font-size: 1em;
    font-weight: normal;
    color: #FFFFFF;
}


#menu a:hover {
    background: #E8922B;
}


#menu .current_page_item {
}


#menu .current_page_item a {
    background: #E8922B;
    border-right: 2px solid #B24100;
    border-bottom: 1px solid #B24100;
}


/* Page */


#page {
    width: 80%;
    margin: 0 50px;
    padding: 30px 0;
}


/* Ads */


#ads {
    float: right;
    width: 160px;
    padding: 0 0 0 20px;
}


#ads img {
    border: 1px dashed #F5E0B7;
}
/* Content */


#content {
    float: left;
    width: 550px;

}


.post {
    margin-bottom: 50px;
    border-bottom: 1px #A90000 dashed;
}


.post .title {
    font-family: Georgia, "Times New Roman", Times, serif;
}


.post .title h2 {
    font-size: 2.2em;
    color: #027415;
}


.post .title p {
    margin: 0;
    line-height: normal;
    color: #BABABA;
}


.post .title p a {
    color: #880A0B;
}


.post .entry {
    padding-top: 30px;
}


.post .links {
    float: left;
    width: 510px;
    margin: 0;
    padding: 6px 0 0 0px;
}


.post .links a {
    padding: 5px 7px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 10px;
    color: #027415;
    background: #C65C18;
    border-top: 1px solid #D7D3CD;
    border-left: 1px solid #D7D3CD;
    border-right: 2px solid #362F23;    
    border-bottom: 1px solid #362F23;


}


.post .links a:hover {
    text-decoration: none;
}


.post .links .more {
    color: #FFFFFF;
}


.post .links .comments {
    color: #FFFFFF;
}


/* Sidebar */


#sidebar {
    float: right;
    width: 240px;
    background: #F8F4DC;
    border: 1px dashed #F5E0B7;
    margin-bottom: 25px;
}


#sidebar ul {
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
}


#sidebar li {
    margin-bottom: 20px;
}


#sidebar li ul {
    padding: 0px 20px 0px 20px;
    line-height: 200%;
}


#sidebar li li {
    margin: 0;
    padding-left: 15px;
    padding-bottom: 5px;
}


#sidebar h2 {
    width: 210px;
    height: 30px;
    padding: 5px 0 0 20px;
    letter-spacing: -1px;
    font-size: 1.6em;
    font-family: Georgia, "Times New Roman", Times, serif;
}


#sidebar a:hover {


}


/* Footer */


#footer {
    clear: both;
    width: 80%;
    margin: 0 10px;
    padding: 30px 0;
    background: url(images/img02.jpg) repeat-x left top;
    color: #B85212;
}


#footer p {
    margin: 0 0 5px 0;
    text-align: center;
    line-height: normal;
    font-size: .9em;
}


#footer a {
    background: #E8922B;
    padding: 1px 6px;
    border-right: 2px solid #B24100;
    border-bottom: 1px solid #B24100;
    text-decoration: none;
    color: #FFFFFF;
}

Alles anzeigen

Das ja wirklich groß geworden ..

Hoffe ihr könnt mir da helfen..

Mfg xisax

Bandit

Ein Link zu der Seite wäre nicht schlecht...

xisax

Hi..Sry Link hatte ich vergessen zu posten

http://sv.xisax.de

Ich möcht das der untere Bereich einfach fixiert ist und sich nix verschiebt, wenn man das Browserfenster minimiert.

sejuma

Das ist vom Prinzip her eine ganz normale Erscheinung, weil je nach Fenstergröße einfach der Platz nicht ausreicht, um alles unterzubringen.

Mit folgenden Änderungen sollte es klappen, wobei bei zu kleinem Fenster dann horizontal gescrollt werden muss:

Code

#wrapper {
width: 990px;
margin: 0 auto;
}


#page {
padding: 30px 0;
}

xisax

Moin,

Danke danke danke ...genau das hab ich gesucht, jetzt weiss ich wie ich es sogar mittig bekomme

CSS Verschiebt sich

Tags

Benutzer online in diesem Thema