SOLVED
Hi!
I'm using
this layout by
ohcodey . I've been fiddling around with it; I managed to add a background and move the sidebar to the other side, but there are two problems I can't work out how to fix (I have absolutely no idea about CSS). I have a Plus account.
1. The first is with the userpics. The icon appears over the top of the journal entry. I want it to be just to the right of it, but I'm not sure how to do this.
2. The second is the comments. There's a huge gap between where my entry ends and where the comments begin. The comments don't start until the sidebar and the ad there have finished.
Both of these problems can be seen here:
http://just-drifting-6.livejournal.com/16847.html My code:
/*-------------------------------------------------
Gin [02/01/10]
Flexible Squares
by darlingbones @ ohcodey.livejournal.com
----------------------------------------------------*/
body {
background-color: #ffffff;
text-align: center;
color: #aaa;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12pt;
margin: 0;
background-image: url("
http://i51.tinypic.com/wt87pv.png");
background-position: bottom right;
background-repeat: no repeat;
background-attachment: fixed; }
a, a:link, a:visited {
color: #777777;
text-decoration: none;
}
#qrformdiv table {
border-color: #f6f6f6!important;
}
a:hover {
color: #777777;
text-decoration: underline;
}
blockquote {
padding:10px;
background-color:#fff;
border-bottom:1px solid #e6e6e6;
border-right:1px solid #e6e6e6;
text-align:justify;}
p, td, {
font-size: 12pt;
}
code, kbd, pre, tt {
font-family: monospace;
}
#content
{ width: 600px;
background-color: #fff;
padding:0;
margin-left:280px;
}
#maincontent {
margin-top: 20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12pt;
background-color: #fff;
color: #000000;
text-align: left;
width: 600px;
}
.subcontent {
width: 500px;
border-bottom:1px #e6e6e6 solid;
border-right:1px #e6e6e6 solid;
}
#sidebar {
background-color: #f6f6f6;
font-size: 8pt;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #bbb;
width: 200px;
float: left;
margin-left:-230px;
margin-top:-20px;
border-bottom:1px #e6e6e6 solid;
border-right:1px #e6e6e6 solid;
}
#header {
width: 100%;
padding: 10px 0px 0px 0px;
margin: 50px 0 0 0;
text-align: right;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
background-color: #ffffff;
color: #e6e6e6;
text-transform:lowercase;
border-bottom:8px solid #e6e6e6;
}
div#header a, div#header a:link, div#header a:visited {
color: #e6e6e6;
}
div#footer a, div#footer a:link, div#footer a:visited {
color:#bbb;}
div#header a:hover, div#footer a:hover {
color: #e6e6e6;
text-decoration: none;
}
.title {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20pt;
font-weight: normal;
color:#f5f5f5;
text-align:left;
letter-spacing:-2px;
text-transform:lowercase;
margin-bottom:-7px;
border-bottom:20px solid #f6f6f6;
display:block;
line-height:70%;
}
.subtitle{display:none;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
.entry {
width: 600px;
background-color: #f6f6f6;
color: #aaa;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 10pt;
text-align:justify;
line-height:170%;
}
.entry_text {
max-width:580px;
padding:10px 20px;
min-height:70px;
}
.entry_text img{
max-width:400px;
}
.userpic img, .userpicfriends img, .userpicfriends img a:hover, .userpicfriends a font, .userpicfriends a:hover font, .userpicfriends a, .userpicfriends a:hover {
max-width:90px;
height:90px;
color:#888;
text-align:right;
text-decoration:none!important;
}
.userpic, .userpicfriends {
position: relative;
float: right;
padding: 5px;
color:#f6f6f6;
background-color:#f6f6f6!important;
border-bottom:#E6E6E6 solid 1px;
border-right:#E6E6E6 solid 1px;
margin: 0 0 0 -100px;
text-align: center;
font-family:tahoma;
font-size: 6pt;
text-transform:uppercase;
z-index: 15;
max-width:70px;
text-decoration:none!important;
}
.date {
top: 5px;
margin-right:7px;
line-height:70%;
color: #ddd;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 7pt;
text-align: right;
}
.subject {
font-weight: normal;
color: #d5d5d5;
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
text-align: right;
letter-spacing:-1px;
text-transform:uppercase;
}
.subject a, .subject a:link, .subject a:visited {
color: #d5d5d5;
font-weight:normal;
text-decoration:none;
}
.subject a:hover {
color: #d5d5d5;
}
.datesubject {
background-color: #f6f6f6;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.currents div {
display: block;
border-left:solid 2px #e6e6e6;
padding-left:5px;
}
.currents strong, .currentmood strong, .currentmusic .currentlocation
{
font-size:7pt;
color:#ccc;
text-transform:uppercase;
font-weight:normal!important;
}
.currentmusic {
}
.currentmood {
margin-left: 5px;
}
.currentlocation {
margin-left: 10px;
}
.ljtags {display:none; }
.currents, .currentmood, .currentmusic {
font-size: 10px;
margin-left: 10px;
font-weight: normal;
color: #ccc;
text-transform: uppercase;
}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #ccc;
font-weight: normal;
text-transform: uppercase;
}
.currentlocation a:hover {
color: #ccc;
font-weight: normal;
text-transform: uppercasee;
}
.comments {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
text-align: center;
background-color: #f6f6f6;
padding: 5px;
position: relative;
color:#f6f6f6;
text-transform:uppercase;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #d5d5d5;
}
div.comments a:hover {
color: #d5d5d5;
text-decoration: none;
}
.defaultuserpic {
display:none;
}
.sbarheader {
display:none;
}
.sbarbody {
}
.sbarbody2 {
padding: 10px;
text-align:right;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #555555;
}
div#sidebar a:hover {
color: #777777;
text-decoration: none;
}
table.calendar {
display:none;
}
.sbarcalendar {
display:none;
}
.sbarcalendarposts {
display:none;
}
ul.sbarlist
{list-style: none;
}
.sbarlist
{padding:0 10px 10px 10px;
margin-top:-10px;
}
li.sbaritem
{ display:inline-block;
border-bottom:#e6e6e6 1px solid;
border-right:#e6e6e6 1px solid;
padding:5px;
background-color:#fff;
list-style: none;
}
li.sbartitle
{ display:none;
}
#footer {
width: 100%;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
font-weight: normal;
text-transform:uppercase;
letter-spacing: 1px;
background-color: #f6f6f6;
color: #ccc;
clear: both;
margin:-20px 0 30px 0;
border-bottom:1px solid #e6e6e6;
border-right:1px solid #e6e6e6;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
ul.year {
text-align: center;
padding-bottom: 40px;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border-width: 1px;
border-style: solid;
border-color: #999999;
}
table.yeartable td.yearday {
background-color: #dddddd;
text-align: center;
}
td.yearmonth {
border-style: none;
}
.datesubjectcomment {
background-color: #f6f6f6;
padding: 5px;
margin-top: 30px;
color:#ddd;
font-size:7pt;
font-family:Georgia, "Times New Roman", Times, serif;
}
.userpiccomment {
position: relative;
background-color: #fff;
width:75px;
height:75px;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-right:solid 1px #e6e6e6;
border-bottom:solid 1px #e6e6e6;
}
.box, .box a, .box a:hover, .box b {
padding: 0px;
clear: left;
font-weight:normal;
color:#bbb;
}
input, textarea, select {
background-color: #fff;
color: #999;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:8pt;
}
textarea.textbox {
width: 100% !important;
color: #999;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
line-height:160%;
font-size:8pt;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 8pt;
line-height: 125%;
background-color: #dddddd;
color: #000000;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
padding: 20px;
font-size: 8pt;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #bbb;
line-height:160%;
}
.commentbox {
border-right:solid 1px #e6e6e6;
border-bottom:solid 1px #e6e6e6;
padding: 10px;
margin: 10px;
background-color: #f6f6f6;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ccc;
font-weight:normal;
}
.datesubjectcomment a:hover {
color: #bbbbbb;
font-weight:normal;
text-decoration:none;
}
.commentboxpartial {
padding: 5px;
margin: 5px;
background-color: #dddddd;
}
.commentinfo {
background-color: #dddddd;
margin-top: 5px;
width: 100%;
}
.skiplinks {
text-align: center;
color:#e6e6e6;
}
.clear {
height: 15px;
color:transparent!important;
}
.separator{
height: 35px;
color:transparent!important;
}
.subject img[src="
http://l-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0;
background: url(
http://i48.tinypic.com/9bhrnl.jpg); }
.subject img[src="
http://l-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0;
background: url(
http://i47.tinypic.com/53nvki.jpg); }
.ljuser a, .ljuser a:hover{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
letter-spacing:+1px;
text-transform:uppercase;
font-size:8pt;
text-decoration:none;
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
background-image: url(
http://i49.tinypic.com/t0m7hg.jpg); padding: 0 !important;
}
.ljuser img[src="
http://l-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(
http://i49.tinypic.com/t0m7hg.jpg)!important; background-repeat: no-repeat!important;
padding: 0!important;
}
.ljuser img[src="
http://l-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(
http://i47.tinypic.com/e6b0js.jpg)!important; background-repeat: no-repeat!important;
padding: 0;
}