Emma (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} sonicwaffle) wrote in ![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small} everything_lj,@ 2005-10-19 22:41:00 |
|
Centering a header/image map
Centering a header/image map
You'll need to add this code to your *_HEAD overrides within the style tags:
You can change the number for the
When you are using this method, you may use either positive or negative numbers to move the header left and right:
Then, of course, you need the actual header code:
To make sure it works in IE, you need this code after every div:
Example
Related links
Adding a header to your journal
Adding a sidebar to your journal
Image mapping
Entries on top of header
Centering a header/image map
You'll need to add this code to your *_HEAD overrides within the style tags:
#x{
position:absolute;
visibility: visible;
top:0px;
width: 780px;
left:50%;
margin-left:-390px;
height: 200px;
}
You can change the number for the
top to what you like. The left needs to stay at 50% and the margin-left needs to be half the number of pixels of the width of your image. So if you have an image with width 800px, you'd put 800px in the width and 400px in the margin-left part.When you are using this method, you may use either positive or negative numbers to move the header left and right:
- 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 image to the right.
- A negative margin-left will push your image to the left.
- A negative margin-left that is exactly half of the width will center image as shown above
Then, of course, you need the actual header code:
<div id="x">
<!--HEADER IMAGE-->
<img src="http://yourheaderurlhere" style="display:inline;">
</div>
To make sure it works in IE, you need this code after every div:
<!--This fixes a bug in Internet Explorer-->
<div> </div>
Example
LASTN_WEBSITE<=
<style type="text/css">
<!--
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
}
.shadowed span#navigation img{
display: inline;
visibility: visible;
position: relative;
}
-->
</style>
The text, links, and pictures you want in your sidebar.<br />
--------------------
</div>
<!--This fixes a bug in Internet Explorer-->
<div> </div>
<div id="x">
<!--HEADER IMAGE-->
<img src="http://yourheaderurlhere" style="display:inline;">
</div>
<!--This fixes a bug in Internet Explorer-->
<div> </div>
<=LASTN_WEBSITE
GLOBAL_HEAD<=
<style type="text/css">
<!--
#x{
position:absolute;
visibility: visible;
top:0px;
width: 780px;
left:50%;
margin-left:-390px;
height: 200px;
}
-->
</style>
<=GLOBAL_HEAD
Related links
Adding a header to your journal
Adding a sidebar to your journal
Image mapping
Entries on top of header
