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