Solved

livejournal userpic placement & css

Posted on 2009-05-10
2
891 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Insert Button on a table 16 52
alert on input text 2 37
CSS - Centering an image 2 44
Dropdown animation to normal dropdown 6 22
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
SEO can be a real minefield to navigate, but there are three simple ways to up your SEO game just be re-assessing your content output.
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…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

740 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