Mit stolzgeschwellter Brust habe ich heute für ein ggf. zum Einsatz kommendes Projekt das Landzilla-Theme umgestrickt. Das ganze Teil ist noch völlig nackig, also bitte nicht wundern:
http://pro-goch-blog.de/
Jetzt sind da genügend Beiträge geschrieben, um das Layout, wenn man runterscrollt, fein in die Hose laufen zu lassen. Der Farbverlauf ist eine Datei, aber wo und wie kann ich es beeinflussen, dass er doch bitteschön für die ganze Seite zu funzen hat? Das müsste doch in der CSS irgendwie zu regeln sein, oder? Würde mir bitte jemand den möglicherweise vorhanden Wald vor lauter Bäumen abholzen?
Hier wäre die aktuelle CSS:
Code
body {
padding: 0 0 2em 0;
margin: 0;
text-align: center;
font: 62.5% verdana, sans-serif;
background: #759D00 url(images/bg.jpg) repeat-x;
color: #333;
line-height: 150%;
}
hr {
display: none;
}
img {
border: none;
}
ins {
text-decoration: none;
border-bottom: 1px dashed #F26722;
}
acronym, abbr, dfn {
border-bottom: 1px dashed #333;
font-style: normal;
}
blockquote {
border: 1px solid #e2001a; /*#759D00;*/
margin: 1em 20px;
padding: 1px 5px;
background: #d0e2f5; /*#E3EBCC;*/
width: 90%;
}
code, pre {
color: #F26722;
font: 1.1em 'courier new', courier, monospace;
}
.bild-links {
float: left;
margin: 0 15px 3px 0;
}
.bild-rechts {
float: right;
margin: 0 0 3px 15px;
}
.center {
text-align: center;
}
#container {
text-align: left;
margin: 0 auto;
width: 770px;
padding: 0 0 1em 0;
position: relative;
background: url(images/background.jpg) repeat-y;
border-bottom: 1px solid #ddd;
}
#kopf {
background: url(images/progrochblogkopf2.gif) no-repeat;
height: 190px;
margin-bottom: 15px;
}
#kopf h1 {
font: 30px 'trebuchet ms', sans-serif;
color: #144b93; /*#759D00;*/
margin: 0;
padding: 5px 15px;
}
#kopf h1 a {
color: #144b93; /*#759D00;*/
text-decoration: none;
}
#navi {
float: right;
width: 200px;
text-align: center;
background: #d0e2f5; /*#E3EBCC;*/
font-size: 1.1em;
padding: 0 0 5px 0;
margin: 0 15px 15px 0;
display: inline;
}
#navi ul, #navi ol, #navi p, #navi form, #navi dl {
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
#navi div {
margin: 10px 10px 15px 10px;
text-align: left;
}
#navi h2 {
font: bold 1.2em verdana, sans-serif;
color: #fff;
margin: 0 0 .5em 0;
padding: 1px 5px 1px 35px;
background: #144b93 url(images/bg_item08.gif) no-repeat center left;
text-align: left;
}
#navi a {
font-weight: bold;
color:#144b93; /*#759D00;*/
text-decoration: none;
}
#navi a:hover {
color: #e2001a; /*#444;*/
}
#navi ul {
list-style: none;
margin: .5em 0 1em 0;
}
#navi ul ul {
margin: 2px 0 2px 7px;
padding: 0;
}
#navi .navi-search {
margin-bottom: 3px;
width: 150px;
}
#inhalt {
margin-right: 235px;
margin-left: 15px;
padding: 1.1em 0;
font-size: 1.1em;
}
#inhalt h2 {
color: #e2001a; /*#666;*/
border-bottom: 1px solid #d0e2f5; /*#E3EBCC;*/
font: bold 1em verdana, sans-serif;
text-align: right; /*center;*/
margin: .5em 0 0 0;
padding: 2px 5px;
}
#inhalt h2 a {
text-decoration: none;
}
#inhalt h3 {
padding: 2px 0 2px 17px;
margin: .5em 0;
font-size: 1.4em;
background: url(images/pfeil4.gif) no-repeat left center;
}
#inhalt h3 a {
color: #144b96; /*#648600;*/
text-decoration: none;
}
#inhalt h3 a:hover {
color: #e2001a; /*#759D00;*/
text-decoration: none;
}
#inhalt h4 {
font-size: 1.3em;
padding: 0;
margin: 1em 0;
color: #144b93; /*#444;*/
}
#inhalt h5 {
font-size: 1.1em;
padding: 0;
margin: 1em 0;
color: #144b93; /*#444;*/
}
#inhalt a, #footer a {
color: #144b93; /*#6C9100;*/
}
#inhalt a:hover, #footer a:hover {
color: #144b93; /*#444;*/
text-decoration: none;
}
#inhalt .meta {
font-size: .9em;
background: #d0e2f5; /*#E3EBCC;*/
margin: 0;
padding: 1px 5px;
}
#inhalt .feedback {
margin: 1em 1.7em 1em 1em;
text-align: right;
}
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #d0e2f5; /*#E3EBCC;*/
}
#commentform {
margin: 1em 0;
padding: 1em;
border: 1px solid #e2001a; /*#759D00;*/
background: #d0e2f5; /*#E3EBCC;*/
}
#footer {
clear: both;
margin: 3em 15px 0 15px;
padding: 5px;
text-align: center;
font-size: .8em;
}