Frage stellen
Ich möchte ein fixes Menü oben und ein Nebenmenü seitlich und einen Balken unten. Der Content in der Mitte soll man scrollen können.
Soweit sogut. Das mit dem Menü oben und Balken unten hab ich geschafft.
mit:
- Code: Alles auswählen
position: fixed;
Mein Problem liegt bei der Position des Content und dem Nebenmenü links das jetzt unten erscheint!
Kann das auch mit
- Code: Alles auswählen
position: fixed;
funktionieren?
Vielleicht kann mir jemand helfen, ich zeige mich erkenntlich!!!
homepage zu erreichen unter:
http://geraldneubauer.com/recordronik
css:
- Code: Alles auswählen
/*
Design by Gerald Neubauer
*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0px;
background: #F3F3F3 url(images/img01.jpg) repeat-x top left;
}
body, th, td, input, textarea {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
form {
}
fieldset {
}
input, textarea {
font-weight: bold;
}
input.text {
padding: 2px 5px;
background: #F8FAEB;
border-top: 1px solid #4D5719;
border-left: 1px solid #4D5719;
border-right: 1px solid #626456;
border-bottom: 1px solid #626456;
}
input.button {
background: #84657b;
border-top: 1px solid #84657b;
border-left: 1px solid #84657b;
border-right: 1px solid #84657b;
border-bottom: 1px solid #84657b;
color: #FFFFFF;
}
h1, h2, h3 {
margin-top: 1.5em;
color: #626456;
}
h1 {
letter-spacing: -.06em;
font-size: 3em;
}
h2 {
letter-spacing: -.05em;
text-transform: uppercase;
font-size: 1.1em;
font-weight: bold;
color: #8D8E85;
}
h3 {
font-size: 1.3em;
font-weight: bold;
font-style: normal;}
p, ul, ol {
margin-top: 1.5em;
line-height: 1.8em;
font-size: 1.1em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
text-decoration: none;
color: #29496B;
}
a:hover {
border: none;
}
h1 a, h2 a, h3 a {
border: none;
text-decoration: none;
color: #29496B;
}
h1 a:hover, h2 a:hover, h3 a:hover {
background: none;
color: #84657b;
}
hr {
display: none;
}
/* Wrapper */
#wrapper {
}
/* Header */
#header {
width: 800px;
height: 20px;
margin: 0 auto;
}
#menu {
position:fixed;
top:210px;
float: left;
width: 800px;
height: 60px;
background: url(images/img04.jpg) no-repeat left top;
font-family: Arial, Helvetica, sans-serif;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
background: url(images/img05.gif) no-repeat right top;
height: 60px;
padding: 0 15px 0 15px;
}
#menu a {
display: block;
float: left;
height: 25px;
margin-right: 1px;
padding: 22px 20px 0 20px;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
color: #2C2E22;
}
#menu .current_page_item a {
color: #2C2E22;
}
#search {
float: right;
width: 260px;
padding-top: 7px;
}
#search fieldset {
border: none;
}
#search #s {
width: 160px;
}
#search #x {
width: 80px;
}
/* Logo */
#logo {
position:fixed;
float: left;
width: 785px;
margin: 0 auto;
padding-left: 15px;
background: #FFFFFF url(images/img03.jpg) no-repeat top left;
height: 200px;
border-top: 1px solid #D5D5D5;
border-left: 1px solid #D5D5D5;
border-right: 1px solid #D5D5D5;
}
#logo h1, #logo h2 {
float: left;
margin: 0;
padding: 0;
}
#logo h1 {
padding: 150px 5px 0 20px;
color: #2C2E22;
}
#logo h2 {
padding: 170px 0px 0px 119px;
font-style: italic;
}
#logo p {
clear: left;
margin: 0;
padding: 0 0 0 20px;
line-height: normal;
font-size: 1.2em;
font-weight: bold;
color: #C2C5B1;
}
#logo a {
color: #FFFFFF;
}
/* Page */
#page {
width: 800px;
margin: 0 auto;
padding: 0px 0px 0 0px;
background: #FFFFFF;
border: 1px solid #D5D5D5;
border-top: none;
}
/* Content */
.thumbnail
{
float: left;
padding: 2px;
}
#content {
}
.post {
}
.post .title {
margin: 0;
font-weight: normal;
}
.post h1.title {
padding: 15px 0 0 15px;
height: 30px;
font-size: 2.4em;
}
.post .entry {
padding: 200px 10px 30px 15px;
}
.post .meta {
margin: 0;
padding: 5px 0px 0px 15px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CFCFCF;
}
.post .meta a {
color: #CFCFCF;
}
.post .links {
margin: 0;
}
.post .tags {
margin: 0;
text-transform: uppercase;
font-size: .8em;
font-weight: bold;
}
.post .links a, .post .tags a {
border: none;
}
/* Recent Posts */
#recent-posts {
}
#recent-posts h2 {
margin: 0;
padding: 15px 0 0 15px;
height: 30px;
}
#recent-posts h3 {
margin: 0;
font-size: 13px;
padding: 15px 0 0 15px;
}
#recent-posts p {
margin: 0 0 10px 0;
padding: 15px 0 0 15px;
line-height: 22px;
font-size: 13px;
}
/* Sidebars */
.sidebar {
float: right;
background-color: #ffffff;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin-bottom: 2em;
}
.sidebar li ul {
}
.sidebar li li {
margin: 0;
}
.sidebar li h2 {
margin: 0 0 1em 0;
}
#sidebar1 {
}
#sidebar2 {
width: 219px;
padding: 30px 0px 0px 0px;
}
#sidebar2 li h2 {
margin: 0 0 1em 0;
padding: 15px 0 5px 15px;
height: 20px;
background: url(images/img07.gif) no-repeat left 70%;
border-bottom: 1px dotted #84657b;
color: #29496B;
}
#sidebar2 li ul {
line-height: normal;
padding-left: 15px;
}
#sidebar2 li li {
padding: 5px;
font-size: 0.8em;
background: url(images/img06.gif) no-repeat left 45%;
}
#sidebar2 li a {
border: none;
padding-left: 5px;
}
#sidebar2 li a:hover {
border: none;
}
/* Calendar */
#calendar {
margin: 0 auto;
}
#calendar caption {
font-weight: bold;
}
#calendar table {
width: 220px;
text-align: center;
border-collapse: collapse;
}
#calendar thead th {
background: #CCCCCC;
color: #FFFFFF;
}
#calendar tbody td {
background: #EEEEEE;
}
#calendar #today {
background: #B8D03B;
font-weight: bold;
color: #FFFFFF;
}
#calendar a {
font-weight: bold;
}
#calendar #prev {
text-align: left;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
position: fixed;
width: 800px;
bottom:-3%;
margin: 0;
padding: 0;
height: 140px;
background: url(images/img02.jpg) repeat-x bottom left;
}
#footer p {
padding-top: 30px;
text-align: center;
font-size: 9px;
}