Solved

livejournal userpic placement & css

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

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…
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 automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…

910 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

21 Experts available now in Live!

Get 1:1 Help Now