Hallo,
ich würde auf meinem Weblog http://www.schreibfauler.de/ gerne das Design ein bisschen verändern, habe aber nicht gerade besonders gute CSS-Kenntnisse.
Meine Vorstellung ist, dass dasselbe (Dunkel)Rot in Zukunft dauerhaft den Headertext "Schreibfauler." hinterlegt, das zur Zeit nur erscheint, wenn man mit der Maus über den Link fährt.
Außerdem hätte ich den Untertitel im Header gerne mit demselben Grauton hinterlegt wie "Aus der Kategorie" und "florian-b am 10.Januar um 14.21"
Ich würde mich über Hilfe und eine Erklärung freuen,
flo
PHP
/* Begin Typography & Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
/* font-family: "Trebuchet MS", Arial, sans-serif; */
font-family: Arial, Helvetica, sans-serif;
background: #a9ac99 url(images/roonit.gif) no-repeat top right;
color: #333;
text-align: center;
}
#page {
background-color: #DBDBDB;
border: 1px solid #959596;
text-align: left;
}
#header {
background-color: #DBDBDB;
}
#content {
font-size: 1.2em
}
#pages {
background: #fff;
font-size: 12px;
margin-left: 10px;
padding: 4px ;
width: 90%
}
#pages li {
display: inline;
list-style-type: none;
}
#pages ul, ol {
margin: 0;
padding: 5px 1em 5px 1em;
}
#pages a {
background: #dddddd;
font-weight: bold;
margin: 0 3px 0 0;
padding: 6px 6px;
}
.widecolumn .entry p {
font-size: 1.2em;
color: #07293C;
}
.#column .entry, .widecolumn .entry {
line-height: 1.4em;
}
.narrowcolumn {
line-height: 1.4em;
}
.narrowcolumn .postmetadata {
text-align: right;
font-size: 0.9em;
width: 450px;
border-top: 1px dotted #CCC;
border-bottom: 1px dotted #CCC;
padding: 0px 0 3px 0;
}
.alt {
background-color: #FAFAF6;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
#footer {
background-color: #eee;
}
small {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 0.9em;
line-height: 1.5em;
}
h1, h2, h3 {
font-family: Helvetica, Arial, Sans-Serif;
font-weight: bold;
}
h1 {
font-size: 4em;
text-align: center;
}
.description {
font-size: 1.2em;
text-align: center;
}
h2 {
font-size: 1.6em;
}
h2.pagetitle {
font-size: 1.6em;
}
#sidebar h2 {
font-family: 'Lucida Grande', Verdana, Sans-Serif;
font-size: 1.2em;
}
h3 {
font-size: 1.3em;
}
h1, h1 a, h1 a:hover, h1 a:visited, .description {
text-decoration: none;
color: #FFFFFF;
}
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {
color: #333;
}
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {
text-decoration: none;
}
.entry p a:visited {
color: #07293C;
}
.entry p a:hover {
color: #FFFFFF;
}
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentlist li {
font-weight: bold;
}
.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}
#commentform p {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentmetadata {
font-weight: normal;
}
#sidebar {
font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike {
color: #777;
}
code {
font: 1.1em 'Courier New', Courier, Fixed;
}
acronym, abbr, span.caps
{
font-size: 0.9em;
letter-spacing: .07em;
}
a,h3 a:hover {
color: #07293C;
text-decoration: none;
}
h2 a:hover {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
background-color: #BD0000;
}
#wp-calendar #prev a {
font-size: 9pt;
}
#wp-calendar a {
text-decoration: none;
}
#wp-calendar caption {
font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: center;
}
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
/* End Typography & Colors */
/* Begin Structure */
body {
margin: 0;
padding: 0;
}
#page {
background-color: white;
margin: 0px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
}
#header {
padding: 0;
margin: 0 auto;
height: 200px;
width: 100%;
background-color: #73a0c5;
}
#headerimg {
margin: 0;
height: 200px;
width: 100%;
}
.narrowcolumn {
float: left;
padding: 0 25px 20px 45px;
margin: 0px 0 0;
width: 450px;
border-right: 1px dotted #CCC;
}
.widecolumn {
padding: 10px 0 20px 0;
margin: 5px 0 0 150px;
width: 450px;
}
.post {
margin: 0 0 40px;
text-align: justify;
}
.widecolumn .post {
margin: 0;
}
.narrowcolumn .postmetadata {
padding-top: 5px;
}
.widecolumn .postmetadata {
margin: 30px 0;
}
#footer {
padding: 0;
margin:0px auto!important;
margin:0px 0px 0px 1px;
width: 760px;
clear: both;
}
#footer p {
margin: 0;
padding: 20px 0;
text-align: center;
}
/* End Structure */
/* Begin Headers */
h1 {
padding-top: 22px;
margin: 0;
text-align: left; padding-left: 28px;
}
.description {
text-align: left; padding-left: 30px;
}
h2 {
margin: 30px 0 0;
}
h2.pagetitle {
margin-top: 30px;
text-align: left;
}
#sidebar h2 {
margin: 5px 0 0;
padding: 0;
}
h3 {
padding: 0;
margin: 30px 0 0;
}
h3.comments {
padding: 0;
margin: 40px auto 20px ;
}
/* End Headers */
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/* End Images */</span>
[FONT="]florian-b, http://www.schreibfauler.de/ [/FONT]