Solved

livejournal userpic placement & css

Posted on 2009-05-10
2
877 Views
Last Modified: 2012-05-06
I've done this layout http://community.livejournal.com/th_apex/ and if you look at the entry by cruxette on 5/10 you can see my issue. the stars are going behind the userpic and the comment links are going to the left of it because the entry is so short. what i want to do is have the line of stars ALWAYS under the userpic so this isn't an issue. I simply don't know the CSS coding for this problem, and have looked extensively. if this option doesn't exist, is there a way i can fix it with padding or margins?

thanks for any help.
body	{background-color: #b6bac2;

	font-family: lucida sans unicode, sans-serif;

	font-size: 8pt;

	color: #ffffff;

	text-align: center;

	margin: 10px}
 

background-color: #b6bac2;

	font-family: lucida sans unicode, sans-serif;

	font-size: 8pt;

	color: #ffffff;

	text-align: center;

	margin-bottom: 0px;}
 

.clearfoot {clear: both; height: 0;}

.title, .subtitle, .clear, #sidebar_calendar, #sidebar_summary {display: none;}
 

p,

td,

blockquote {font-size: 8pt;

	color: #999999;

	line-height: 1;}
 

	

a,

a:link,

a:visited {color: #878e9c;

	text-decoration: none;

	font-weight: bold;

	font-family: trebuchet ms, verdana, sans-serif;

        text-transform: uppercase}

	

a:hover {color: #878e9c;

	background-color: #eeeeee}

		

code,

kbd,

pre,

tt	{font-family: monospace;}
 
 

/*main table and page*/
 

#content {width: 670px;

	margin-left: auto;

	margin-right: auto;

	padding: 10px;

	text-align: justify;

	border-color: #cccccc;

	border-style: solid;

        border-width: 0px}
 

#maincontent {margin: 0px;

	font-family: lucida sans unicode, sans-serif;

	font-size: 8pt;

	color: #5F5A59;

	border-width: 0px;

	text-align: justify;

	padding: 0px}
 
 
 
 
 
 

/* sidebar i.e. the bar with calendar etc.*/
 

#sidebar {visibility: hidden} 
 

#header 
 

{width: 100%;

	padding: 0px;

	margin: -10px 0px 25px 0px;

	text-align: center;

	font-family: trebuchet ms, verdana, sans-serif;

	font-size: 8pt;

	font-weight: bold;

	text-transform: uppercase;

	color: #999999;

        background-color: #ffffff;

	border: 0px} 
 

/*title and subtitle of your journal in the header - currently 
 

invisible*/
 

.title	{visibility: hidden; font-size: 1px}

	

.subtitle {visibility: hidden; font-size: 1px}
 
 
 
 

/*the bottom of the page with links to entries*/
 

#footer	{width: 100%;

	padding: 0px 0px 0px 0px;

	margin: -30px 0px 0px 0px;

	text-align: right;

	font-family: trebuchet ms, verdana, sans-serif;

	font-size: 8pt;

        font-weight: bold;

        text-transform: uppercase;

	background-color: #ffffff;

	color: #878e9c;	

	z-index: 100;

	clear: both}
 
 
 
 

/*more footer and header*/	

	

div#header a,

div#header a:link,

div#header a:visited,

div#footer a,

div#footer a:link,

div#footer a:visited {color: #878e9c;

         font-weight: bold}

	

div#header a:hover,

div#footer a:hover {color: #ffffff}	

	

ul.navheader {padding: 0px;	

	margin: 0px}
 

ul.navheader li {display: inline;			

	padding: 0 3px 0 3px}
 
 
 
 
 

/*entry layout*/	

	

.subcontent {background-color: ffffff}

		

.entry	

        {margin: 0px;

	padding: 10px 10px 0px 10px;

	background-color: #ffffff;

	font-size: 8pt;

	color: #5F5A59;

	line-height: 1.3;

	text-align: justify;

        border-width: 0;

	bottom-border: 5px}

		

.entry ul li {padding-left: 5px;

	margin-left: 15px; padding-bottom: 10px}

		

.entry ol li {padding-left: 5px;

	margin-left: 15px; padding bottom: 10px}
 

.userpic {display: none}

		

.userpicfriends {position: relative;

	float: right;

	background-color: #ffffff;

	padding: 5px;

	margin: 10px;

	z-index: 15;

	border-width: 1px;

	border-color: #eeeeee;

	border-style: sdotted;

	font-family: franklin gothic medium, verdana, arial, helvetica, 
 

sans-serif;

	font-size: 8pt;

	font-weight: bold;

        text-align: center;

        color: #878e9c;

	z-index: 15}
 

.altuserpic {position: relative;

	float: right;

	text-align: center;

	background-color: #ffffff;

	padding: 5px;

	margin: 10px;

	z-index: 15;

	border-width: 1px;

	border-color: #eeeeee;

	border-style: dotted}

		

.date	{font-family: trebuchet ms, verdana, sans-serif;

	font-size: 8pt;

        font-weight: bold;

	color: #878e9c; 

	text-transform: uppercase;

	background-color: #e7e7e7;

	text-align: left;

	padding: 2px;

	border-width: 0px}

	

.subject {font-family: trebuchet ms, verdana, sans-serif;

	font-size: 8pt;

        font-weight: bold;

	color: #808080; 

	text-transform: uppercase;

	background-color: #ffffff;

	text-align: left;

	padding: 2px;

	border-width: 0px}

		

.subject a,

.subject a:link,

.subject a:visited {color: #8dbcb1}

	

.subject a:hover {color: #ffffff}
 

.datesubject {background-color: #ffffff;

	padding: 5px}
 

.ljtags {display: block; font-family: lucida sans unicode, sans-serif;

	font-size: 8pt; 

	padding: 5px 0px 0px 0px;

	text-align: left; padding-top: 30px; padding-bottom: 5px}
 

.ljtags a:link,

.ljtags a:visited {color: #8dbcb1}
 

		

.currents,

.currentmood,

.currentmusic

        {font-family: franklin gothic medium, verdana, arial, 
 

helvetica, sans-serif;

        margin: 10px;

	font-size: 8pt;

        color: #5F5A59;

	text-transform: lowercase;

	line-height: 0.8}
 

.comments {font-family: trebuchet ms, verdana, sans-serif;

	font-size: 8pt;

        font-weight: bold;

	text-align: right;

        background-color: #ffffff;

        background-image: url('http://www.explorenorcal.com/images/tiny-star-grey.gif');

        background-position: top left;

        background-repeat: repeat-x;

	padding: 15px 0px 0px 0px;

        margin: 5px; 

        border-width: 5px;

	position: relative;

        border-bottom: 5px;

        padding-bottom: 10px;}

		

div.comments a,

div.comments a:link,

div.comments a:visited {color: #878e9c;

        font-size: 9pt}

	

div.comments a:hover {color: #878e9c;

	text-decoration: none}
 
 
 

	

/*content on entries and comments*/	

	

.datesubjectcomment {background-color: #ffffff;

	padding: 5px;

	margin-top: 20px}	

		

.userpiccomment {position: right;

	border-width: 1px;

	border-style: dotted;

	border-color: #eeeeee;

	background-color: #ffffff;

	top: -30px;

	left: 0px;

	padding: 2px;

	margin: 0px 10px -20px 10px;

	z-index: 15;

	float: right}

		

.box	{border-color: #ffffff;

	padding: 20px}
 

input,

textarea {background-color: #ffffff;

	color: #999999;

        font-family: lucida sans unicode, sans-serif;

        font-size: 8pt;

        border-width: 5px;

        border-color: #666666}

		

textarea.textbox  {width: 100% !important}

	

.reply	{position: relative;

	margin: 20px 30px 10px 30px;

	padding: 25px 10px 10px 10px;

	text-align: left;

	font-family: lucida sans unicode, sans-serif;

	font-size: 8pt;

	line-height: 125%;

	background-color: #ffffff;

	color: #5F5A59;

	line-height: 1}

		

.replytosubject {font-weight: bold;}

			

.commentreply {position: relative;

	margin: 10px;

	font-size: 8pt;

	font-family: lucida sans unicode, sans-serif;

	color: #5F5A59;

	line-height: 1}

		

.commentbox {border-color: #eeeeee; 

	border-width: 1px; 

	border-style: solid; 

	padding: 10px; 

	margin: 10px; 

	background-color: #ffffff}

		

.datesubjectcomment a:link,

.datesubjectcomment a:visited {color: #878e9c}

		

.datesubjectcomment a:hover {color: #ffffff}

	

.commentboxpartial {border-color: #eeeeee; 

	border-width: 5px; 

	border-style: solid; 

	padding: 5px; 

	margin: 5px; 

	background-color: #ffffff}
 

.commentinfo {background-color: #ffffff; 

	margin-top: 5px; 

	width: 100%}

/*----------------------------------------------------------------------------------------------

	TAGS PAGE

-----------------------------------------------------------------------------------------------*/

ul.ljtaglist {background: #ffffff; border: 10px solid #F5F5F5; margin: 0; padding: 5px 5px 5px 25px;}

h2 {background: #999999; border: 10px solid #F1F1F1; color: #C2BAB6; font-family: arial; font-size: 8pt; letter-spacing: 1px; text-transform: uppercase; padding: 5px; font-weight: normal; margin-bottom: 20px; display: none;}

			

		

/*calendar pages*/

		

ul.year	{text-align: center; 

	padding-bottom: 40px}
 

{font-size: 8pt. color: #543837}

	

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;

        background-color:#ffffff}

	

table.yeartable td.yearday {background-color: #ffffff;

	text-align: center}

	

td.yearmonth {border-style: none}

	

ul.navfooter {padding: 0px	

	margin: 0px}

	

ul.navfooter li {display: inline;	

	margin: 0 5px 0 5px}
 

.clearfoot {clear: both}

		

.clear {height: 15px}

		

.skiplinks {text-align: center}
 

.separator {height: 15px}
 

.headerimage {position: top; background: url(http://i42.tinypic.com/2u6epmp.jpg); width: 670px; height: 387px; align: center; background-repeat: no-repeat;margin-left: auto;margin-right: auto;margin-bottom: 0px; top:0; left:0;}

Open in new window

0
Comment
Question by:yougetajob
2 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 250 total points
ID: 24350626
You could add a new rule to give ".entry_text" a min-height.
.entry_text {

  min-height: 80px;

}

Open in new window

0
 

Author Closing Comment

by:yougetajob
ID: 31580005
simple and it worked
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Nowadays, it is so easy to get started with a website and all thanks to the Content Management Systems (CMS) like WordPress, Drupal, Joomla, and many others like them. However, if we talk about the reliability and ratings, WordPress definitely rules…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now