Carrie (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} carriep63) wrote in ![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small} everything_lj,@ 2005-08-18 23:51:00 |
|
Everybody's favorite layout (new sidebar tutorial)
I had it in my head to revamp our existing sidebar tutorial with a few "upgrades" and ended up writing a whole new code. This is more than just a sidebar tutorial. I have taken everyone's favorite layout (EFL) and came up with this.
This code will put your content in the middle of the page. If you want a layout that is on the left side of the page, do not use this tutorial! Left-aligned sidebar tutorial
GLOBAL_HEAD<=
<style type="text/css">
<!--
/* MOVE ENTRIES DOWN */
body{
margin-top:200px;
}
/*GETS RID OF ICON*/
.shadowed img{
display:none;
}
/*HIDES YOUR NAVIGATION*/
table table table table .meta {visibility:hidden;position:absolute;top:1
table table table table table .meta {visibility:visible;position:relative;to
tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}
/*POSITION YOUR HEADER*/
#x{
position:absolute;
visibility: visible;
left:50%;top:0px;
width: 780px;
margin-left:-390px;
height: 200px;}
/*YOUR SIDEBAR*/
#sidebar{
position:absolute;
top:120px;
left: 50%;
margin-left: 146px;
width: 224px;height: auto;
visibility: visible;
z-index:2;
font-size:8pt;
text-align:justify;
}
#sidebar img{
display:inline;
}
/*BACKGROUND IMAGE*/
body {
background-color:#66CC9A;
background-image: url(http://pics.livejournal.com/carriep
background-attachment:fixed;
background-repeat: repeat-y;
background-position: top center;
}
/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background: transparent;
}
table {
left:50%;
width: 510px;
margin-left:-240px;}
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">
The text, links, and pictures you want in your sidebar.<br />
--------------------
<br />
I am going to put an image in this sidebar. Usually when you hide
your icon, you have to put a visibility code in every image you use.
That is not necessary with this layout. We have not hidden our icon,
we have DESTROYED it! It's gone. Not hiding. I just put a simple
code in the HEAD overrides that will allow all of the sidebar pictures
to show without extra code. Look:<br /><br />
<center>
<img src="http://pics.livejournal.com/carrie
</center>
</div>
<!--This fixes a bug in Internet Explorer-->
<div> </div>
<div id="x">
<!--HEADER IMAGE-->
<img src="http://pics.livejournal.com/carrie
</div>
<=LASTN_WEBSITE
Positioning codes explained To move your content to the right and left, change your margin-left number!
You may notice that in this tutorial, I have positioned everything with the margin-left override and no margin-right overrides. Using this method will keep the content of your page in the same spot regardless of the screen resolution. When you are using this method, you may use either positive or negative numbers.
More on centering... Notice the header image positioning. It has a width of 780px and the margin-left is negative 390px. 390 is exactly half of 780, so that puts the header in the center. All of the position codes have the left:50% override in them. Do not change that portion of the code.
INTERNET EXPLORER
Is your header one pixel off in Internet Explorer?grumble....stupid IE (get firefox!) This usually only occurs if your header image is an "odd" number of pixels like 537px. If it's an even number (538px) then this usually doesn't occur.
Second Sidebar
Want to add another sidebar? Just copy the #sidebar code and name it something else. We'll name it sidebartwo:
The GLOBAL_HEAD codes:(you will have to change the margin-left to suit your needs)
#sidebartwo{
position:absolute;
top:120px;
left: 50%;
margin-left: 145px;
width: 225px;
height: auto;
visibility: visible;
z-index:2;
font-size:8pt;
text-align:justify;
}
#sidebartwo img{
display:inline;
}
The LASTN_WEBSITE codes:
<div id="sidebartwo">
The text, links, and pictures you want in your sidebar.<br />
</div>
I had it in my head to revamp our existing sidebar tutorial with a few "upgrades" and ended up writing a whole new code. This is more than just a sidebar tutorial. I have taken everyone's favorite layout (EFL) and came up with this.
This code will put your content in the middle of the page. If you want a layout that is on the left side of the page, do not use this tutorial! Left-aligned sidebar tutorial
- Here is an example of EFL
- EFL has a header image, a sidebar, hidden navigation and hidden icon.
- The text is justified in the entries and in the sidebar
- The entries are on top of the header in both Internet Explorer and in Mozilla Firefox.
- Images are easier to put in the sidebar.
- You STILL NEED A WEBSITE listed in your userinfo!
- This is for the S1 Generator style
- This tutorial deals only with the main entries page. You will need a FRIENDS_WEBSITE, DAY_WEBSITE and CALENDAR_WEBSITE override to match your layout across all pages. (Read More)
- Remember to Keep your numbers even!
GLOBAL_HEAD<=
<style type="text/css">
<!--
/* MOVE ENTRIES DOWN */
body{
margin-top:200px;
}
/*GETS RID OF ICON*/
.shadowed img{
display:none;
}
/*HIDES YOUR NAVIGATION*/
table table table table .meta {visibility:hidden;position:absolute;top:1
table table table table table .meta {visibility:visible;position:relative;to
tr.caption{
display:none
}
.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px
}
/*POSITION YOUR HEADER*/
#x{
position:absolute;
visibility: visible;
left:50%;top:0px;
width: 780px;
margin-left:-390px;
height: 200px;}
/*YOUR SIDEBAR*/
#sidebar{
position:absolute;
top:120px;
left: 50%;
margin-left: 146px;
width: 224px;height: auto;
visibility: visible;
z-index:2;
font-size:8pt;
text-align:justify;
}
#sidebar img{
display:inline;
}
/*BACKGROUND IMAGE*/
body {
background-color:#66CC9A;
background-image: url(http://pics.livejournal.com/carriep
background-attachment:fixed;
background-repeat: repeat-y;
background-position: top center;
}
/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background: transparent;
}
table {
left:50%;
width: 510px;
margin-left:-240px;}
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">
The text, links, and pictures you want in your sidebar.<br />
--------------------
<br />
I am going to put an image in this sidebar. Usually when you hide
your icon, you have to put a visibility code in every image you use.
That is not necessary with this layout. We have not hidden our icon,
we have DESTROYED it! It's gone. Not hiding. I just put a simple
code in the HEAD overrides that will allow all of the sidebar pictures
to show without extra code. Look:<br /><br />
<center>
<img src="http://pics.livejournal.com/carrie
</center>
</div>
<!--This fixes a bug in Internet Explorer-->
<div> </div>
<div id="x">
<!--HEADER IMAGE-->
<img src="http://pics.livejournal.com/carrie
</div>
<=LASTN_WEBSITE
Positioning codes explained To move your content to the right and left, change your margin-left number!
You may notice that in this tutorial, I have positioned everything with the margin-left override and no margin-right overrides. Using this method will keep the content of your page in the same spot regardless of the screen resolution. When you are using this method, you may use either positive or negative numbers.
- Enter the height of your image where it says height.
- You MUST define a width or this will NOT work.
- A positive margin-left will push your content to the right.
- A negative margin-left will push your content to the left.
- A negative margin-left that is exactly half of the width will center the content
- Don't change the left:50% to anything else!
More on centering... Notice the header image positioning. It has a width of 780px and the margin-left is negative 390px. 390 is exactly half of 780, so that puts the header in the center. All of the position codes have the left:50% override in them. Do not change that portion of the code.
INTERNET EXPLORER
Is your header one pixel off in Internet Explorer?grumble....stupid IE (get firefox!) This usually only occurs if your header image is an "odd" number of pixels like 537px. If it's an even number (538px) then this usually doesn't occur.
Second Sidebar
Want to add another sidebar? Just copy the #sidebar code and name it something else. We'll name it sidebartwo:
The GLOBAL_HEAD codes:(you will have to change the margin-left to suit your needs)
#sidebartwo{
position:absolute;
top:120px;
left: 50%;
margin-left: 145px;
width: 225px;
height: auto;
visibility: visible;
z-index:2;
font-size:8pt;
text-align:justify;
}
#sidebartwo img{
display:inline;
}
The LASTN_WEBSITE codes:
<div id="sidebartwo">
The text, links, and pictures you want in your sidebar.<br />
</div>
