|
|
|
| Don't see the menu? Switch to a different scheme | ||
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.
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: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 } /*ENTRIES ON TOP OF HEADER IMAGE*/ *html body .shadowed img.x{ z-index: -1; } table, .shadowed div{ z-index: 80; } html>body table{ position: relative; } /*POSITION YOUR HEADER*/ .x{ position:absolute; top:0px; width: 780px; left:50%; margin-left:-390px !important; margin-left:-389;} /*YOUR SIDEBAR*/ #sidebar{ position:absolute; top:120px; left: 50%; margin-left: 145px; width: 225px;height: 100%; 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 { width: 510px; margin-left:-240px;} table table { width: 100%; margin:0; } table table table { width: auto; } /*JUSTIFIES TEXT*/ .entrybox td{ 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> <!--HEADER IMAGE--> <img src="http://pics.livejournal.com/carrie <=LASTN_WEBSITE Positioning codes explained 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. It also gets rid of the bottom scrollbar (bonus!). 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 except for the table code. You do not need to put this in the table(entries) code! | |||||
![[info]](http://www.caleida.com/img/userinfo.gif){kind=small}
