Solved

livejournal userpic placement & css

Posted on 2009-05-10
2
882 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Bottom border change 5 15
CSS: Making Pure CSS read more boxes thinner 5 31
Place text over image using CSS 6 44
Add shadow behind div 5 10
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

773 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