Hallo,
ein Hilferuf an alle html-Juenger. Ich moechte mein Layout von blogger.com leicht modifizieren. Dazu moechte ich die rechte Sidebar etwas verbreitern.
Leider bin ich nicht so firm in html und so macht mir der weisse Rahmen etwas zu schaffen. Ich moechte eigentlich nur, dass die dunkelgruene Sidebar bis zum Seitenende die gleiche Breite behaelt und nicht nur bis zum Ende meiner Eintraege. Ein kurzer Blick und ein Stueckchen scrollen macht mein Problem sicher klarer.
http://kniffo.blogspot.com
Ich fuege mal den Header mit ein. Die beiden fettgedruckten Zahlen habe ich um 30px vergroessert, um die Verbreiterung der Sidebar zu erreichen.
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<style type="text/css">
/*
-----------------------------------------------
Blogger Template Style
Name: 565
Designer: Douglas Bowman
URL: http://www.stopdesign.com
Date: 28 Feb 2004
----------------------------------------------- */
body {
background:#cdb;
margin:0;
padding:10px 0 14px;
font:x-small Verdana,Sans-serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
/* Page Structure
----------------------------------------------- */
#wrap {
position:relative;
top:4px;
left:4px;
background:#ab8;
width:774px;
margin:0 auto;
text-align:left;
}
#wrap2 {
position:relative;
top:-4px;
left:-4px;
background:#fff;
padding:10px;
}
#content {
background:url("http://www.blogblog.com/no565/bg_content.gif") repeat-y left top;
width:100%;
font-size:85%;
}
#main {
background:#cdb url("http://www.blogblog.com/no565/corner_main.gif") no-repeat right top;
width:460px;
float:left;
color:#333;
}
#main2 {
margin:0;
padding:15px 20px;
}
#sidebar {
background:#565 url("http://www.blogblog.com/no565/corner_sidebar.gif") no-repeat left top;
width:284px;
float:right;
padding:0;
color:#cdb;
}
#sidebar2 {
margin:0;
padding:2px 20px 10px;
}
/* Links
----------------------------------------------- */
a:link {
color:#388;
text-decoration:none;
}
a:visited {
color:#776;
text-decoration:none;
}
a:hover {
color:#333;
text-decoration:underline;
}
a img {
border-width:0;
}
#sidebar a:link {
color:#fff;
}
#sidebar a:visited {
color:#ab9;
}
#sidebar a:hover {
color:#fff;
}
/* Header
----------------------------------------------- */
#header {
background:#be4 url("http://www.blogblog.com/no565/topleft.gif") no-repeat left bottom;
padding:0 0 0 160px;
margin:0 0 10px;
color:#fff;
width:100%;
width/* */:/**/auto;
width:auto;
}
#blog-title {
background:url("http://www.blogblog.com/no565/bg_header.gif") no-repeat left top;
margin:0;
padding:40px 0 0;
font:bold 275%/97px Helvetica,Arial,Verdana,Sans-serif;
text-transform:none;
}
#blog-title a {
color:#fff;
text-decoration:none;
}
.postpage #blog-title {
padding-top:0;
background-position:0 -40px;
}
/* Description
----------------------------------------------- */
#description {
background:#f90 url("http://www.blogblog.com/no565/bg_desc_top.gif") no-repeat left top;
margin:0 0 10px;
padding:12px 0 0;
color:#fff;
}
#description p {
background:url("http://www.blogblog.com/no565/bg_desc_bot.gif") no-repeat left bottom;
margin:0;
padding:0 0 12px;
}
#description em {
/* To remove the word next to the desription, delete the following background property */
background:url("http://www.blogblog.com/no565/temp_no.gif") no-repeat left center;
/* Keep everything below */
display:block;
padding:0 0 0 160px;
font:bold 75%/1.6em Arial,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
min-height:12px;
}
.postpage #description em {
font-size:1px;
line-height:1px;
color:#8df;
visibility:hidden;
}
/* Posts
----------------------------------------------- */
.date-header {
margin:0 0 .5em;
font:bold 112%/1.4em Arial,Verdana,Sans-serif;
text-transform:lowercase;
color:#fff;
}
.post {
margin:0 0 2em;
}
.post-title {
margin:0 0 .25em;
font:bold 150%/1.4em Helvetica,Arial,Verdana,Sans-serif;
color:#333;
}
#main .post-title a {
text-decoration:none;
color:#366;
}
#main .post-title a:hover {
color:#333;
}
.post p, .post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
color:#ab9;
text-transform:none;
}
.post-footer em {
font-style:normal;
color:#787;
}
.post blockquote {
margin:1em 20px;
padding:5px 0;
border:2px solid #dec;
border-width:2px 0;
}
.post blockquote p {
margin:.5em 0;
}
.post img {
border:5px solid #fff;
}
/* Comments
----------------------------------------------- */
#comments {
margin:2em 0 0;
border-top:2px solid #dec;
padding-top:1em;
}
#comments h4 {
margin:0 0 .25em;
font:bold 150%/1.4em Helvetica,Arial,Verdana,Sans-serif;
text-transform:none;
color:#366;
}
#comments-block {
margin:0;
line-height:1.6em;
}
.comment-poster {
margin:0 0 .25em;
font:bold 112%/1.4em Arial,Verdana,Sans-serif;
text-transform:none /*lowercase removed*/;
}
.comment-body, .comment-body p {
margin:0 0 .75em;
}
p.comment-timestamp {
margin:-.25em 0 2em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
/* Sidebar
----------------------------------------------- */
.sidebar-title {
margin:1em 0 .25em;
font:bold 150%/1.4em Helvetica,Arial,Verdana,Sans-serif;
color:#897;
text-transform:none;
}
#sidebar ul {
margin:0 0 1.5em;
padding:0;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 20px;
text-indent:-20px;
line-height:1.4em;
}
#sidebar p {
margin:0 0 .75em;
line-height:1.4em;
}
/* Profile
----------------------------------------------- */
#profile-container {
margin:0 0 1.75em;
}
.profile-datablock, .profile-textblock {
margin:0 0 .75em;
line-height:1.4em;
}
.profile-img {
display:inline;
}
.profile-img img {
float:left;
margin:0 10px 5px 0;
border:5px solid #786;
}
.profile-data {
font-weight:bold;
color:#fff;
}
.profile-data strong {
display:none;
}
/* Footer
----------------------------------------------- */
#footer {
clear:both;
padding:10px 0 0;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding:5px 0;
}
/* Misc
----------------------------------------------- */
.clear {
clear:both;
display:block;
height:1px;
margin:0;
padding:0;
font-size:1px;
line-height:1px;
}
</style>
</head>
Vielen Dank fuer eure Hilfe
Pierre