Help - Search - Members - Calendar
Full Version: new to this
Forums > Resource Center > Support Center > Livejournal Support > Livejournal Resolved Topics
clalyan
I all new to this but I'm working hard on a layout right now and wonderd if I can have both a header that scrolls and a sidebar/background image that's fixed.
Cause I don't understand how and I belive I saw something like that but maybe I'm just delusional whistling.gif
Libertie
Yes, it is very possible (all of the layouts I made for cB have this). _smile.gif

Examples:
http://www.createblog.com/layouts/index.php?author_id=155796

I don't mind if you look through the code on my layouts (I wouldn't recommend doing this on another author's layout), but if you want a tutorial that explains the code, look here:
http://community.livejournal.com/overridehelp/1695437.html
http://community.livejournal.com/everything_lj/3804169.html

And if you run into any problems with your layouts, check here for common mistakes:
http://www.createblog.com/forums/index.php?showtopic=122189
clalyan
Thank you I did use this
http://community.livejournal.com/everything_lj/3804169.html
tutorial and it help me with many things but I can't get the sidebar fixed I don't know what to change.
Libertie
Hmm, can you post a link to your journal or post the overrides you're using?
clalyan
Here's my test journal

http://testclalyan.livejournal.com/

CODE
GLOBAL_HEAD<=
<style type="text/css">
<!--
/*GETS RID OF ICON*/
.shadowed img{
display:none;
}
/*HIDES YOUR NAVIGATION*/
table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}

body{
margin-top:400px;
}


tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}



/*POSITION YOUR HEADER*/
#x{
position:absolute;
visibility: visible;top:0px;
width: 419px;
left:40%;
margin-left:-412px;
height: 500px;
}




/*YOUR SIDEBAR*/
#sidebar{
position:absolute;
top:px;
left: 50%;
margin-left: 50px;
width: 225px;height: 100%;
visibility: visible;
z-index:2;
font-size:8pt;
text-align:justify;
}
#sidebar img{
display:inline;
}



/*BACKGROUND IMAGE*/
body {
background-color:#000000;
background-image: url(http://img59.imageshack.us/img59/3206/swbg34hy.jpg);
background-attachment:fixed;
background-repeat: repeat-y;
background-position: top center;
}


/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background: transparent;
}

table {
width: 450px;
left:50%;
margin-left:-400px;}

table table {
width: 100%;
margin:0;
}
table table table {
width: auto;
}


/*JUSTIFIES TEXT*/
.entrybox td{
position:relative;
text-align: justify;
}
.entrybox td.index, .entrybox td.comments{
text-align: right;
}

/*LINKS*/
a{
color: #ffffff;
}
a:hover{
color: #66CC9A;
}
-->
</style>
<=GLOBAL_HEAD

LASTN_WEBSITE<=

<!--YOUR SIDEBAR STUFF HERE-->
<div id="sidebar">
<br />
<br />
<br />
<center>
<img src=" http://img222.imageshack.us/img222/5742/swsb1vl.jpg">
</center>
</div>

<!--This fixes a bug in Internet Explorer-->
<div> </div>


<div id="x">
<!--HEADER IMAGE-->
<img src=" http://img216.imageshack.us/img216/714/swbg0qj.jpg" style="display:inline;">
</div>

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