sidebar repositioning comments in entry
Journal Preview: nymphah
Style Name: Flexible Squares
Account Type: Plus
Problem I'm having: This is sort of an ad placement problem that I'm having on the account I'm testing this layout on, but I can see where it could be a problem if the sidebar just had a lot of random info in it too. What's going on is that it looks fine from the recent entries page but when you click into an entry, the comments to that entry are positioned below the sidebar even if it's a short entry. It leaves a lot of space between the entry and the comments and with vertical ads you'd have to scroll down to read them. I'm hoping somebody can point out what's wrong with my code, and thanks in advance. :)
/*------------------------------------------------
:: breezy [natural]:: flexisquares ::
:: designed by Kikkyo at http://landofkikkyo.livejournal.com/
:: please do not remove credit
------------------------------------------------*/
body {
background-color: #696969;
text-align: center;
color: #000000;
font-family: "verdana";
font-size: 11px;
margin: 0px 0 0px 0;
}
a, a:link, a:visited {
color: #CFCFCF;
text-decoration: none;
}
a:hover {
color: #696969;
text-decoration: none;
}
p, td, blockquote {
font-size: 11px;
color: #483D8B;
border-left: 1px solid #696969;
padding: 0px 0px 0px 8px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*-----------PAGE ALIGNMENT, ETC.------------*/
#content
{
width: 80%;
margin-left: auto; margin-right: auto;
background: url(http://i50.photobucket.com/albums/f335/Stareyed7/backgrounds/swirlies1.png) repeat;
border: 0px solid #ffffff;
padding-top: 0px;
padding-left: 0px;
padding-right: 30px;
padding-bottom; 0px;
}
#maincontent {
margin-top: 30px;
margin-bottom: 0px;
font-family: "verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #000000;
border-style: solid;
border-color: #999999;
border-width: 0px;
margin-left: 380px;
text-align: left;
}
#sidebar {
padding: 15px 15px 20px 15px;
margin-top: 30px;
margin-left: 30px;
background-color: #ffffff;
border-bottom: 10px solid #828282;
border-top: 0px;
border-left: 0px;
border-right: 0px;
font: 9px georgia; color: #9C9C9C;
text-align: justify;
width: 280px;
float: left;
text-align: left;
}
/*-----------------HEADER------------------*/
/*---you can add a header image with either #header or .headerimage---*/
#header {
width: 100%;
padding: 30px 0px 0px 30px;
margin:0px 0px 0px auto;
text-align: left;
font-family: "georgia";
font-size: 10px;
font-weight: bold;
letter-spacing: 5px;
border: 0px solid #828282;
background-color: #ffffff;
color: #363636;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #CFCFCF;
}
div#header a:hover, div#footer a:hover {
color: #696969;
text-decoration: none;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*------------HEADER - TOP NAV.-------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*--------------ENTRY STUFFS--------------*/
.subcontent {
}
.entry {
margin: 0px 0px 10px 10px;
padding: 30px;
background-color: #ffffff;
color: #4F4F4F;
font-family: "georgia";
font-size: 12px;
text-align: justify;
border-bottom: 10px solid #828282;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
.userpic {
position: relative;
float: right;
background-color: #828282;
padding: 5px;
margin: 15px;
z-index: 15;
border-width: 0px solid #ffffff;
}
.date {
line-height: 200%;
top: 2px;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 8px;
}
.subject {
font-weight: bold;
padding: 0px;
color: #696969;
font-family: "Georgia", sans-serif;
font-size: 25px;
}
.subject a, .subject a:link, .subject a:visited {
color: #CFCFCF;
}
.subject a:hover {
color: #696969;
}
.datesubject {
margin: 0px 0px 0px 10px;
padding: 5px;
background-color: #ffffff;
border-bottom: 0px solid #CFCFCF;
padding: 3px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*----------ENTRY STUFFS - CURRENTS----------*/
.currents, .ljtags {
margin: 10px 0 0 0;
font-family: "Georgia";
font-size: 12px;
text-align: right;
}
.currents img {float: right; }
.currents strong, .ljtags {text-transform: uppercase; }
/*--------------COMMENTS--------------*/
.comments {
font-family: "Georgia";
font-size: 15px;
text-align: center;
background-color: #ffffff;
border-top: 1px solid #696969;
padding: 0px 0px 0px 0px;
position: relative;
top: 10px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #CFCFCF;
}
div.comments a:hover {
color: #696969;
text-decoration: none;
}
/*--------------SEPERATOR----------------*/
.separator{
/* for formatting separators between entries */
height: 20px;
}
/*--------------FRIENDS PAGE---------------*/
.userpicfriends {
position: relative;
float: right;
background-color: #828282 !important;
padding: 5px;
margin: 10px;
text-align: left;
border: 0px;
font-size: 0;
color: #ffffff;
z-index: 15;
}
.userpicfriends font {
color: #CFCFCF;
background: #9C9C9C;
margin: 0px 5px 0px 0px;
padding: 0px 7px 0px 20px;
}
.userpicfriends a {
border: 0px solid #eeeeee;
font-family: "Georgia";
font-size: 9px !important;
background: #CFCFCF;
}
.userpicfriends a:hover {background: #98F5FF; }
.userpicfriends a:hover font {color: #ffffff; }
/*-----------------SIDEBAR----------------*/
.defaultuserpic {
text-align: center;
background: #CFCFCF; padding: 10px; text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbartitle { font: 30px georgia; color: #696969; text-align: right; padding: 0px 5px 0px 5px; }
.sbarbody {
font: 11px georgia; color: #363636; text-align: left; padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 5px 0 5px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #CFCFCF;
}
div#sidebar a:hover {color: #696969; text-decoration: none;}
.sbaritem {
background: #F5F5F5;
font: 12px georgia;
border-bottom: 2px solid #ffffff;}
.sbaritem:hover {background: #F5F5F5;}
/*---------------CALENDAR-----------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border: 0px solid #000000;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border: 2px solid #CFCFCF;
background-color: #eeeeee;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*--------------SIDEBAR LINKS---------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border: 0px;
background-color: #ffffff;
margin-bottom: 10px;
margin-top: 10px;
}
/*----------------FOOTER-----------------*/
#footer {
width: 100%;
padding: 40px 0px 3px 30px;
text-align: left;
font-family: "georgia", sans-serif;
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
background-color: #ffffff;
color: #000000;
border-top: 15px solid #696969;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------ARCHIVE----------------*/
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: 5px;
border-style: solid;
border-color: #ffffff;
}
table.yeartable td.yearday {
background-color: #B5B5B5;
font-family: "georgia";
font-size: 15px;
font-style: italic;
text-align: left;
color: #696969;
}
table.yeartable td.yeardate {
background-color: #eeeeee;
font-family: "georgia";
font-size: 12px;
text-align: left;
color: #FF69B4;
}
td.yearmonth {
border-style: none;
font-family: "georgia";
font-size: 20px;
text-align: center;
color: #FF69B4;
}
/*--------------COMMENTS PAGE--------------*/
.datesubjectcomment {
background-color: #F5F5F5;
border: 0px;
padding: 0px;
margin-top: 0px;
font-family: "Georgia";
font-size: 9px;
}
.userpiccomment {
position: relative;
border: 0px;
background-color: #ffffff;
top: 0px;
right: 0px;
padding: 5px;
margin: -5px 0px 0px 0px;
z-index: 15;
float: right;
border-width: 0px;
}
.box {
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #9C9C9C;
padding: 10px;
clear: left;
}
input, textarea {
border: 1px solid #9C9C9C;
background-color: #ffffff;
color: #696969;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: justify;
font-family: "Verdana";
font-size: 10px;
line-height: 125%;
background-color: #ffffff;
color: #9C9C9C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Georgia", sans-serif;
font-size: 10px;
color: #9C9C9C;
}
.commentbox {
border: 0px solid #999999;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #CFCFCF;
}
.datesubjectcomment a:hover {
color: #696969;
}
.commentboxpartial {
border: 0px solid #E8E8E8;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*----------------EXTRA CODE----------------*/
.clear {
height: 15px;
}
::-moz-selection { background: #FFFFFF; color: #FF69B4; }
::selection { background: #FFFFFF; color: #FF69B4; }
code::-moz-selection { background: #FFFFFF; color: #FF69B4; }
code::selection { background: #FFFFFF; color: #FF69B4; }
div.ContextualPopup div.Inner div.Content span a, div.ContextualPopup div.Inner div.Content a
{ color: #CFCFCF !important; text-decoration: none !important; font-weight: lighter; border-bottom: 0px solid #696969;
}
div.ContextualPopup div.Inner div.Content span a:hover, div.ContextualPopup div.Inner div.Content a:hover
{color: #696969 !important; }
div.ContextualPopup div.Inner
{ background-color: #F5F5F5 !important; border: 0; text-align: left;
}
Style Name: Flexible Squares
Account Type: Plus
Problem I'm having: This is sort of an ad placement problem that I'm having on the account I'm testing this layout on, but I can see where it could be a problem if the sidebar just had a lot of random info in it too. What's going on is that it looks fine from the recent entries page but when you click into an entry, the comments to that entry are positioned below the sidebar even if it's a short entry. It leaves a lot of space between the entry and the comments and with vertical ads you'd have to scroll down to read them. I'm hoping somebody can point out what's wrong with my code, and thanks in advance. :)
/*------------------------------------------------
:: breezy [natural]:: flexisquares ::
:: designed by Kikkyo at http://landofkikkyo.livejournal.com/
:: please do not remove credit
------------------------------------------------*/
body {
background-color: #696969;
text-align: center;
color: #000000;
font-family: "verdana";
font-size: 11px;
margin: 0px 0 0px 0;
}
a, a:link, a:visited {
color: #CFCFCF;
text-decoration: none;
}
a:hover {
color: #696969;
text-decoration: none;
}
p, td, blockquote {
font-size: 11px;
color: #483D8B;
border-left: 1px solid #696969;
padding: 0px 0px 0px 8px;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*-----------PAGE ALIGNMENT, ETC.------------*/
#content
{
width: 80%;
margin-left: auto; margin-right: auto;
background: url(http://i50.photobucket.com/albums/f335/Stareyed7/backgrounds/swirlies1.png) repeat;
border: 0px solid #ffffff;
padding-top: 0px;
padding-left: 0px;
padding-right: 30px;
padding-bottom; 0px;
}
#maincontent {
margin-top: 30px;
margin-bottom: 0px;
font-family: "verdana", sans-serif;
font-size: 11px;
background-color: transparent;
color: #000000;
border-style: solid;
border-color: #999999;
border-width: 0px;
margin-left: 380px;
text-align: left;
}
#sidebar {
padding: 15px 15px 20px 15px;
margin-top: 30px;
margin-left: 30px;
background-color: #ffffff;
border-bottom: 10px solid #828282;
border-top: 0px;
border-left: 0px;
border-right: 0px;
font: 9px georgia; color: #9C9C9C;
text-align: justify;
width: 280px;
float: left;
text-align: left;
}
/*-----------------HEADER------------------*/
/*---you can add a header image with either #header or .headerimage---*/
#header {
width: 100%;
padding: 30px 0px 0px 30px;
margin:0px 0px 0px auto;
text-align: left;
font-family: "georgia";
font-size: 10px;
font-weight: bold;
letter-spacing: 5px;
border: 0px solid #828282;
background-color: #ffffff;
color: #363636;
}
.headerimage {
/* for formatting header image */
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #CFCFCF;
}
div#header a:hover, div#footer a:hover {
color: #696969;
text-decoration: none;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*------------HEADER - TOP NAV.-------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*--------------ENTRY STUFFS--------------*/
.subcontent {
}
.entry {
margin: 0px 0px 10px 10px;
padding: 30px;
background-color: #ffffff;
color: #4F4F4F;
font-family: "georgia";
font-size: 12px;
text-align: justify;
border-bottom: 10px solid #828282;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}
.userpic {
position: relative;
float: right;
background-color: #828282;
padding: 5px;
margin: 15px;
z-index: 15;
border-width: 0px solid #ffffff;
}
.date {
line-height: 200%;
top: 2px;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 8px;
}
.subject {
font-weight: bold;
padding: 0px;
color: #696969;
font-family: "Georgia", sans-serif;
font-size: 25px;
}
.subject a, .subject a:link, .subject a:visited {
color: #CFCFCF;
}
.subject a:hover {
color: #696969;
}
.datesubject {
margin: 0px 0px 0px 10px;
padding: 5px;
background-color: #ffffff;
border-bottom: 0px solid #CFCFCF;
padding: 3px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*----------ENTRY STUFFS - CURRENTS----------*/
.currents, .ljtags {
margin: 10px 0 0 0;
font-family: "Georgia";
font-size: 12px;
text-align: right;
}
.currents img {float: right; }
.currents strong, .ljtags {text-transform: uppercase; }
/*--------------COMMENTS--------------*/
.comments {
font-family: "Georgia";
font-size: 15px;
text-align: center;
background-color: #ffffff;
border-top: 1px solid #696969;
padding: 0px 0px 0px 0px;
position: relative;
top: 10px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #CFCFCF;
}
div.comments a:hover {
color: #696969;
text-decoration: none;
}
/*--------------SEPERATOR----------------*/
.separator{
/* for formatting separators between entries */
height: 20px;
}
/*--------------FRIENDS PAGE---------------*/
.userpicfriends {
position: relative;
float: right;
background-color: #828282 !important;
padding: 5px;
margin: 10px;
text-align: left;
border: 0px;
font-size: 0;
color: #ffffff;
z-index: 15;
}
.userpicfriends font {
color: #CFCFCF;
background: #9C9C9C;
margin: 0px 5px 0px 0px;
padding: 0px 7px 0px 20px;
}
.userpicfriends a {
border: 0px solid #eeeeee;
font-family: "Georgia";
font-size: 9px !important;
background: #CFCFCF;
}
.userpicfriends a:hover {background: #98F5FF; }
.userpicfriends a:hover font {color: #ffffff; }
/*-----------------SIDEBAR----------------*/
.defaultuserpic {
text-align: center;
background: #CFCFCF; padding: 10px; text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbartitle { font: 30px georgia; color: #696969; text-align: right; padding: 0px 5px 0px 5px; }
.sbarbody {
font: 11px georgia; color: #363636; text-align: left; padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 5px 0 5px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #CFCFCF;
}
div#sidebar a:hover {color: #696969; text-decoration: none;}
.sbaritem {
background: #F5F5F5;
font: 12px georgia;
border-bottom: 2px solid #ffffff;}
.sbaritem:hover {background: #F5F5F5;}
/*---------------CALENDAR-----------------*/
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border: 0px solid #000000;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border: 2px solid #CFCFCF;
background-color: #eeeeee;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
/*--------------SIDEBAR LINKS---------------*/
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
padding-left: 15px;
list-style: none;
}
li.sbartitle
{
padding-left: 15px;
list-style: none;
border: 0px;
background-color: #ffffff;
margin-bottom: 10px;
margin-top: 10px;
}
/*----------------FOOTER-----------------*/
#footer {
width: 100%;
padding: 40px 0px 3px 30px;
text-align: left;
font-family: "georgia", sans-serif;
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
background-color: #ffffff;
color: #000000;
border-top: 15px solid #696969;
z-index: 100;
clear: both;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*----------------ARCHIVE----------------*/
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: 5px;
border-style: solid;
border-color: #ffffff;
}
table.yeartable td.yearday {
background-color: #B5B5B5;
font-family: "georgia";
font-size: 15px;
font-style: italic;
text-align: left;
color: #696969;
}
table.yeartable td.yeardate {
background-color: #eeeeee;
font-family: "georgia";
font-size: 12px;
text-align: left;
color: #FF69B4;
}
td.yearmonth {
border-style: none;
font-family: "georgia";
font-size: 20px;
text-align: center;
color: #FF69B4;
}
/*--------------COMMENTS PAGE--------------*/
.datesubjectcomment {
background-color: #F5F5F5;
border: 0px;
padding: 0px;
margin-top: 0px;
font-family: "Georgia";
font-size: 9px;
}
.userpiccomment {
position: relative;
border: 0px;
background-color: #ffffff;
top: 0px;
right: 0px;
padding: 5px;
margin: -5px 0px 0px 0px;
z-index: 15;
float: right;
border-width: 0px;
}
.box {
border-style: solid;
border-width: 0px 0px 0px 0px;
border-color: #9C9C9C;
padding: 10px;
clear: left;
}
input, textarea {
border: 1px solid #9C9C9C;
background-color: #ffffff;
color: #696969;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: justify;
font-family: "Verdana";
font-size: 10px;
line-height: 125%;
background-color: #ffffff;
color: #9C9C9C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "Georgia", sans-serif;
font-size: 10px;
color: #9C9C9C;
}
.commentbox {
border: 0px solid #999999;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #CFCFCF;
}
.datesubjectcomment a:hover {
color: #696969;
}
.commentboxpartial {
border: 0px solid #E8E8E8;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*----------------EXTRA CODE----------------*/
.clear {
height: 15px;
}
::-moz-selection { background: #FFFFFF; color: #FF69B4; }
::selection { background: #FFFFFF; color: #FF69B4; }
code::-moz-selection { background: #FFFFFF; color: #FF69B4; }
code::selection { background: #FFFFFF; color: #FF69B4; }
div.ContextualPopup div.Inner div.Content span a, div.ContextualPopup div.Inner div.Content a
{ color: #CFCFCF !important; text-decoration: none !important; font-weight: lighter; border-bottom: 0px solid #696969;
}
div.ContextualPopup div.Inner div.Content span a:hover, div.ContextualPopup div.Inner div.Content a:hover
{color: #696969 !important; }
div.ContextualPopup div.Inner
{ background-color: #F5F5F5 !important; border: 0; text-align: left;
}