Right Aligned Layout
Want to align your layouts to the right and make sure it fits all resolutions and that your background will stay in the right place? It takes only a few simple tags to accomplish just that.
Align Image
After making your layout, open up your HTML editor and begin to code it. Usually, position tags look somewhat like this:
|
<![CDATA[
<div style="position: absolute; top: 0; left: 0;">
</div>]]> |
Well, not in this layout. Instead of left 0, you'll want to put right: 0, so your code will end up looking like this instead:
|
<![CDATA[
<div style="position: absolute; top: 0; right: 0;">
</div>]]> |
With all of the layouts I've ever made, however, right: 0; is actually a bit off. I'll explain in a moment.
Now your image is aligned to the right, here is my layout so far:
I also position my divs the same way, by using right instead of left. All you have to do is change left to right (hopefully you notice a pattern). I ended up positioning my divs along the image itself, not the background.
As you can see, I am way off. How do I get my background to move over with the image as well?
CSS editing
This will step requires you to do some editing in the CSS department. In your body section, where you put your background colors, background images, and stuff like that, you are to add a special line that will move your background image to the right. This line should go right below your background-image tag:
|
<![CDATA[
background-position: right;
]]>
|
Here's how my layout looks now:
Though you can't see it in my thumbnail, the main image itself is not aligned to the background. Honestly, I never knew why this was, but it is this way with most of the layouts I've ever worked with.
The problem is the main image is one pixel too far to the left. Observe:
It is very easy to see that the divs do not line up. We're toast now, right? Wrong. Go back to your main image div tags:
|
<![CDATA[
<div style="position: absolute; top: 0; right: 0;">
</div>]]>
|
Use some brain power here. The image is one pixel too far to the left. So we want to move it back one pixel. But how? Instead of right: 0, put in right: -1. Trust me, it works...
|
<![CDATA[
<div style="position: absolute; top: 0; right: -1;">
</div>]]>
|
This saves you the time of having to crop your image. Here's how it looks after I re-positioned:
And that should be all. Nifty, eh?
|