coding problems Options

[Mulder]

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*]

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.