?
Solved

livejournal userpic placement & css

Posted on 2009-05-10
2
Medium Priority
?
903 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 1000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

With Wordpress gaining more and more popularity not only as blogging platform but as a shopping or CMS solution, it's worth to know which plugins are the first ones to grab and integrate with your website. We will briefly go over the most useful plu…
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month11 days, 8 hours left to enroll

752 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