Forums > coding problems

Forums > Resource Center > Support Center > Livejournal Support > Livejournal Resolved Topics

Mulder

Dec 27 2005, 12:23 AM

ok, so im trying to make a layout with a sidebar. but it looks like i cant do it with S2, and im having some problems doing it in S1.

but before i can even start on the sidebar, i have to position the entries. they're in the right place... but theres some problems.

and my codes are a mess cuz they're basically a mix of S2 css and S1 stuff.

so..

help?

http://www.livejournal.com/users/skinattempts

my overrides:

<!-- begin code provided by createblog.com --><br />GLOBAL_HEAD<=<br /><style type="text/css"><br />	body	{<br />  background-color: #f2f2f2;<br />                <br />                background-position: center;<br />                background-attachment: scroll;<br />        	text-align: center;<br />  color: #5d5d5d;<br />  font-family: "Trebuchet MS", sans-serif;<br />  font-size: 10px;<br />  margin: 20px 0 20px 0;<br />  }<br />	<br />	a, a:link, a:visited {<br />  color: #61830E;<br />  text-decoration: none;<br />                font-weight: bold;<br />  }<br />	<br />	a:hover {<br />  color: #E75E68;<br />  text-decoration: none;<br />                }<br />	<br />	p, td, blockquote {<br />      font-size: 9px;<br />                }<br />  <br />	code, kbd, pre, tt {<br />      font-family: monospace;<br />  }<br />  <br />  <br />  	#sidebar {<br />  padding-top: 5px;<br />  margin-top: 5px;<br />  background-color: #f1f1f1;<br />  border-width: 1px;<br />  border-style: solid;<br />  border-color: #cccccc;<br />    font-size: 10px;<br />  line-height: 15px;<br />                font-family: "Trebuchet MS", sans-serif;<br />    color: #666666;<br />  width: 155px;<br />  float: left;<br />  text-align: justify;<br />position:absolute; <br />top:430px; <br />left: 50%;<br />margin-left: 325px; <br />width: 225px;<br />height: 100%; <br />visibility: visible;<br />z-index:2;<br />                }<br /><br />	#header {  <br />  width: 100%;<br />  padding: 10px 0px 0px 0px;<br />  margin: 0px;<br />  text-align: center;<br />  font-family: "trebuchet ms", sans-serif;<br />  font-size: 10px;<br />  font-weight: none;<br />  letter-spacing: 2px;<br />  text-transform: lowercase;	<br />  background-color: #ffffff;<br />  border-width: 1px;<br />  border-style: dashed;<br />  border-color: #61830E;<br />  color: #E75E68;	<br />                line-height: 10px;<br />                }<br /><br />	#footer {  	<br />  width: 100%;<br />  text-align: center;<br />  font-family: "trebuchet ms", sans-serif;<br />  font-size: 10px;<br />  font-weight: bold;<br />  letter-spacing: 2px;<br />  background-color: #f2f2f2;<br />  border-width: 1px;<br />  border-style: dashed;<br />  border-color: #E75E68;<br />  color: #61830E;<br />  z-index: 100;<br />  clear: both;<br />  }<br />  <br />	/* header -- links to views; title of journal; subtitle of journal */	<br />	<br />	div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {<br />  color: #61830E;<br />	}<br />	<br />	div#header a:hover, div#footer a:hover {<br />  color: #9CC33D;<br />  text-decoration: none;<br /><br />	}	<br />	<br />        ul.navheader  {	<br />  padding: 0px;	<br />  margin: 0px;<br />  }<br /><br />        ul.navheader li  {<br />  display: inline;  	<br />  padding: 0 3px 0 3px;<br />  }<br /><br />	.title	{<br />  font-family: "trebuchet ms", sans-serif;<br />  font-size: 10px;  <br />  font-weight: normal;<br />                visibility: hidden;<br />  top: 10px;<br />                }<br />	<br />	.subtitle{<br />  font-family: "trebuchet ms", sans-serif;<br />  font-size: 10px;<br />  font-weight: normal;  <br />  visibility: hidden;<br />  top: 10px;<br />                }<br /><br />/*YOUR ENTRIES*/<br />table, tr, td, .shadowed {<br />background: transparent;<br />}<br /><br />table {<br />width: 500px;<br />}<br /><br />table table {<br />width: 100%;<br />margin:0;<br />}<br />table table table {<br />width: auto;<br />}<br /><br />table.entrybox{<br />border: 10px solid #3F2B00;<br />padding: 5px;<br />position:absolute; <br />left: 50%;<br />top: 430px;<br />margin-left: -400px; <br />width: 500px;<br />height: 100%; <br />visibility: visible;<br />z-index: 0;<br />}<br /><br />table.entrybox table{<br />border: 0;<br /><br /><br />}<br /><br />  <br /><br />	/* sidebar */  <br />  	<br />	div#sidebar a, div#sidebar a:link, div#sidebar a:visited{<br />  color: #75961B;<br />	}<br />	<br />	div#sidebar a:hover {<br />  color: #89AB2C;<br />  text-decoration: underline;<br />	}<br />	<br />	.defaultuserpic {<br />  text-align: center;<br />  }<br />	<br />	.sbarheader {<br />  padding: 0px 5px 0px 5px;<br />                color: #000000;<br />  text-align: center;<br />                }<br />	<br />	.sbarbody {<br />  padding: 0 10px 0 -11px;  <br />  }<br />	<br />	.sbarbody2 {<br />  padding: 0 10px 0 10px;<br />	}<br />  	<br />	table.calendar {<br />  margin-right: auto;<br />  margin-left: auto;<br />  }<br />  <br />	.sbarcalendar {<br />  border-color: #cccccc;<br />  border-width: 1px;<br />  border-style: solid;<br />  text-align: center;<br />  font-family: "trebuchet ms", sans-serif;<br />  font-size: 10px;<br />  }<br />	<br />	.sbarcalendarposts {<br />  border-color:  #bbbbbb;<br />  border-width: 1px;<br />  border-style: dotted;<br />  background-color: #e5e5e5;<br />  text-align: center;<br />  font-family: "Arial", sans-serif;<br />  font-size: 10px;<br />  }<br />  <br />	ul.sbarlist<br />	{<br />  padding-left: 0px;<br />  margin-left: 0px;<br />  list-style: none;<br />	}<br /><br />	li.sbaritem<br />	{<br />  padding-left: 15px;<br />  list-style: none;  <br />	}<br /><br />	li.sbartitle<br />	{<br />  padding-left: 5px;<br />  padding-right: 5px;<br />  list-style: none;  <br />  margin-bottom: 10px;<br />  margin-top: 10px;<br />                text-transform:lowercase;<br />                letter-spacing: 2pt;<br />                font-color: #4D4D4D;<br />                font-weight: none;<br />  font-family: "century gothic", sans-serif;<br />  font-size: 15px;<br />} <br /><br />	<br />	/* maincontent */	<br />	<br />	.subcontent {  <br />	background-color: white;<br />        }<br />  <br />	.entry	{<br />  margin: 0px 10px 10px 10px;<br />  padding: 10px;<br />  background-color: #ffffff;<br />  color: #000000;<br />  font-family: "trebuchet ms", sans-serif;<br />  font-size: 10px;<br />  text-align: justify;<br />  border-width: 0px;<br />  border-color: #5d5d5d;<br />  border-style: solid;<br /><br />                  }<br />  <br />	.entry ul li<br />  {<br />  padding-left: 5px;<br />  margin-left: 15px;<br />  }<br />  <br />    .entry ol li<br />  {<br />  padding-left: 5px;<br />  margin-left: 15px;<br />  }<br /><br />	.userpic {<br />  position: relative;<br />  float: left;<br />  background-color: #ffffff;<br />  padding: 5px;<br />  margin: 10px;<br />  z-index: 15;<br />  border-width: 0px;<br />  border-color: #ffffff;<br />  border-style: solid;<br />  }<br />  <br />	.userpicfriends {<br />  position: relative;<br />  float: left;<br />  padding: 5px;<br />  margin: 10px;<br />  text-align: center;<br />  border-style: solid;<br />  border-width: 0px;<br />  border-color: #ffffff;<br />  font-family: "tahoma", sans-serif;<br />  font-size: 10px;<br />  z-index: 15;<br />  }<br />  <br />	.date {  <br />  line-height: 200%;  <br />  top: 5px;<br />  font-family: "trebuchet ms", sans-serif;<br />  font-size: 10px;<br />                color: #cccccc;<br />                font-weight: bold; <br />                text-transform:lowercase;<br />                letter-spacing: 2pt;<br />                background-color: transparent;<br />  }<br />	<br />	.subject {  	<br />  padding: 10px;<br />  font-weight: none; <br />                color: #454545;<br />  font-family: "century gothic", sans-serif;<br />                text-transform:lowercase;<br />  font-size: 15px;<br />  background-color: #f2f2f2;<br />  border-width: 1px;<br />  border-style: solid;<br />  border-color: #cccccc;<br />  }<br />  <br />	.subject a, .subject a:link, .subject a:visited {<br />  color: #E75E68;<br />  }<br />	<br />	.subject a:hover {<br />  color: #607B0E;<br />  }	<br /><br />	.datesubject {    <br />  background-color: #ffffff;<br />  padding: 5px;<br />  }<br />  <br />	.currents, .currentmood, .currentmusic {<br />  font-family: "trebuchet ms", sans-serif;<br />  font-size: 10px;<br />  color: #84A521;	<br />  }<br /><br />	.comments {<br />  font-family: "century gothic", sans-serif;<br />  font-size: 18px;<br />  text-align: right;<br />  background-color: #ffffff;<br />  padding: 0px 5px 0px 5px;<br />  position: relative;<br />  top: 15px;<br />  }<br />  <br />	div.comments a, div.comments a:link, div.comments a:visited{<br />  color: #607B0E;<br />                font-size: 10px;<br />	}<br />	<br />	div.comments a:hover {<br />  color: #F06C7C;<br />  text-decoration: none;<br />	}<br /><br />	<br />	/* maincontent --  entry, reply pages */	<br />	<br />	.datesubjectcomment {    <br />  	background-color: #ffffff;<br />  	padding: 5px;<br />  	margin-top: 20px;<br />  	}	<br />  <br />	.userpiccomment {<br />  position: relative;<br />  border-width: 5px;<br />  border-style: solid;<br />  border-color: #ffffff;<br />  background-color: #ffffff;<br />  top: -30px;<br />  left: 0px;<br />  padding: 5px;<br />  margin: 10px 10px -20px 10px;<br />  z-index: 15;<br />  float: left;<br />  border-width: 1px;<br />  border-color: #ffffff;<br />  border-style: solid;<br />  }<br />  <br />	.box {<br />  border-style: solid;<br />  border-width: 1px 0px 0px 0px;<br />  border-color: #e5e5e5;<br />  padding: 10px;<br />  clear: right;<br />  }<br /><br />	input, textarea {<br />  background-color: #ffffff;<br />  color: #5d5d5d;<br />  }<br />  <br />	textarea.textbox  {<br />      	width: 100% !important;<br />    	}<br />	<br />	.reply	{<br />  position: relative;<br />  margin: 20px 30px 10px 30px;<br />  padding: 25px 10px 10px 10px;<br />  text-align: left;<br />  font-family: "Arial", sans-serif;<br />  font-size: 10px;<br />  line-height: 125%;<br />  background-color: #ffffff;<br />  color: #5d5d5d;<br />  }<br />  <br />	.replytosubject {<br />  font-weight: bold;<br />  }<br />  	<br />  <br />	.commentreply {<br />  position: relative;<br />  margin: 10px;<br />  font-size: 10px;<br />  font-family: "Tahoma", sans-serif;<br />  color: #5d5d5d;<br />  }<br />  <br />	.commentbox {<br />  <br />  border-color: #cccccc; <br />  border-width: 1px; <br />  border-style: dashed; <br />  padding: 10px; <br />  margin: 10px; <br />  background-color: #ffffff;<br />  }<br />  <br />	.datesubjectcomment a:link, .datesubjectcomment a:visited {<br />  color: #61830E;<br />  }<br />  <br />	.datesubjectcomment a:hover {<br />  color: #E75E68;<br />  }<br />	<br />	.commentboxpartial {<br />  border-color: #cccccc; <br />  border-width: 1px; <br />  border-style: dashed; <br />  padding: 10px; <br />  margin: 10px; <br />  background-color: #ffffff;<br />  }<br /><br />	.commentinfo {<br />  background-color: #ffffff; <br />  margin-top: 10px; <br />  width: 100%;<br />  }<br />  	<br />  <br />	/* maincontent -- year/achive pages */<br />  <br />	ul.year {<br />  text-align: center;<br />  padding-bottom: 40px;<br />  }<br />	<br />	ul.year li {<br />  display: inline;  <br />  }<br />	<br />	table.yeartable {<br />  margin-left: auto;<br />  margin-right: auto;<br />  }<br />	<br />	table.yeartable td.yeardate, table.yeartable td.yearday {<br />  border-width: 1px;<br />  border-style: dashed;<br />  border-color: #cccccc;<br />  }<br />	<br />	table.yeartable td.yearday {<br />  background-color: #ffffff;<br />  text-align: center;<br />  }<br />	<br />	td.yearmonth {<br />  border-style: none;<br />  }<br />	<br />  <br />	/* footer */<br />  <br />	ul.navfooter{<br />  padding: 0px;	<br />  margin: 0px;<br />  }<br />	<br />	ul.navfooter li  {<br />  display: inline;	<br />  margin: 0 5px 0 5px;<br />  }<br /><br />  <br />	.clearfoot {  <br />  clear: both;<br />  }<br />  <br />  <br />	/* misc  */<br />    <br />	.clear {  <br />  height: 15px;<br />  }<br />  <br />	.skiplinks {<br />  text-align: center;<br />  }<br />  <br />/*GETS RID OF ICON*/<br />.shadowed img{<br />display:none;<br />}<br /><br />/*HIDES YOUR NAVIGATION*/<br />table table table table .meta {visibility:hidden;position:absolute;top:1px}<br />table table table table table .meta {visibility:visible;position:relative;top:1px}<br /><br />tr.caption{<br />display:none<br />}<br />.shadowed td div{<br />visibility: hidden;<br />position: absolute;<br />top: 1px<br />}<br /><br />.x {<br />    position:absolute;<br />    top:20px; <br />    width: 800px;<br />    left:50%;<br />    margin-left:-400px;<br />    background-image: url("http://img264.imageshack.us/img264/3600/livejournalhead1jh.png");  <br />    background-position: center;  <br />    background-repeat: no-repeat;<br />}<br /><br /><br />	.separator{<br />  /* for formatting separators between entries */<br />  height: 5px;<br />	}<br /><br /></style><br /><=GLOBAL_HEAD<br /><br />LASTN_WEBSITE<=<br /><br /><!--YOUR SIDEBAR STUFF HERE--><br /><div id="sidebar"><br />testing<br /><br />testing<br /><br />testing<br /><br />testing<br /><br />testing<br /><br /></div><br /><br /><!--This fixes a bug in Internet Explorer--><br /><div>&nbsp;</div><br /><br /><img src="http://img209.imageshack.us/img209/6580/bored25tc.jpg" class="x" style="display:inline;"><br /><br /><=LASTN_WEBSITE<br /><!-- end code provided by createblog.com -->

edit// : it got really.... really screwed up.

Libertie

Dec 28 2005, 02:10 PM

Hmm. In IE it almost looks normal except that the comment links and entries sort of overlap. But in FF the content bar is way off to the left and you can only see part of the datestamp. Hmm. And by looking through the code I can't really tell what's wrong. I'll hafta mess around with it a little bit..

I'm not sure whether to start over with all S1 stuff or keep what you've got and try to fix it.. but give me a while and I'll try to figure out how to tell you what's wrong. =\

Mulder

Dec 29 2005, 08:48 PM

err.. ok.

im pretty sure im going to give up on having a sidebar and a header..

i heard that its really difficult to do.. so im not sure its worth it.

Libertie

Dec 29 2005, 10:33 PM

Nah, it really isn't difficult.

You already know how to use a header image with LASTN_WEBSITE - the sidebar isn't much different. In LJ codes, I would stay away from relying completely on CSS for DIV positioning. It just makes things really messy, plus LJ is really strict on what code is acceptable.

Fairly simple:

<!-- begin code provided by createblog.com --><br />LASTN_WEBSITE<=<br /><img src="your header image" style="position: absolute; left: ##px; top: ##px; visibility: visible"><br /><br /><div style="position: absolute; left: ##px; top: ##px; width: ###px; visibility: visible"><br />Sidebar stuff here<br /></div><br /><br /><style type="text/css"><br /><!--<br />table table table table .meta {visibility:hidden;position:absolute;top:1px}<br />table table table table table .meta {visibility:visible;position:relative;top:1px}<br /><br />tr.caption{<br />display:none<br />}<br />.shadowed td div{<br />visibility: hidden;<br />position: absolute;<br />top: 1px<br />}<br />--><br /></style><br /><=LASTN_WEBSITE<br /><!-- end code provided by createblog.com -->

Obviously, change the ##s to whatever works. But yeah, it's possible and it really doesn't take too much work. Give it a shot.

Mulder

Dec 30 2005, 02:03 PM

ok, i have a very basic sidebar layout. so, thanks!

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.