Grüsse Euch.
Mein eÜberlegung steht wie folgt.
Wenn man auf unsere Gilden Homepage geht und dort in irgendeiner weise nach unten scrollt geht die ganze Seite mit. Nun steht bei mir die Überlegung das nur der mittlere Bereich wandert. So das quasi der Header und auch das Hintergrundbild stehen bleibt. So wäre es möglich der Seite einen anderen Hintergrund zu geben, der dann zudem auch noch stehen bleibt wärend man den mittleren contend scrollen kann.
www.klingenahoi.de.tl ist die seite
und hier unser Code:
body {
margin: 20px 0;
background: #405152 url(http://img.webme.com/pic/g/gildekreativ/content_bg_rpt.jpg);
text-align: justify;
font: normal small Georgia, "Times New Roman", Times, serif;
color: #A1A9AA;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
color: #ABECF5;
}
h3 {
font-size: 1.3em;
padding-top: .4em;
}
ul {
margin-left: 0;
padding-left: 0;
list-style-position: inside;
}
a {
color: #ABECF5;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
/* Menu */
#menu {
width: 610px;
height: 40px;
margin: 0 auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#nav_container {
width: 702px;
margin: auto;
}
li.nav_element{
display: block;
float: left;
width: 115px;
height: 20px;
padding: 10px 1px 0 1px;
background: url(http://img.webme.com/pic/k/klingenahoi/puffpuff.gif) no-repeat center top;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 0.7em;
font-weight: bold;}
li.nav_element:hover{
background-image: url(http://img.webme.com/pic/k/klingenahoi/botton1.gif);
color: #FFFFFF;
}
/* Header */
/* Header */
#header {
width: 1115px;
height: 162px;
margin: 0 auto;
background: url(http://img.webme.com/pic/k/klingenahoi/navigation_bg.png) repeat-x;
}
#header * {
text-transform: uppercase;
text-decoration: none;
}
#header h1 {
float: left;
font-size: 2em;
}
#header h2 {
float: right;
padding-top: .25em;
font-size: 1.6em;
}
/* Content */
#content {
width: 664px;
margin: 0 auto;
padding: 20px;
background: #405152 url(http://img.webme.com/pic/g/gildekreativ/content_bg_rpt.jpg);
border: 5px solid #2D3939;
border-top: none;
}
#colOne {
float: left;
width: 450px;
}
#colTwo {
float: right;
width: 180px;
}
/* Footer */
#footer {
text-align: center;
font-size: smaller;
}
Zugegeben er ist recht einfach gestrickt.
Sollte es eine Möglichkeit geben würden wir uns freuen wenn uns einer helfen kann. Ggf wäre es auch nett wenn einer unseren Code diesbezüglich umstricken könnte, ohne das das eigendliche Design leiden müsste ^^
Gruss euer Klingensturm