Loading ...
Mar
19
Elastic css layout
March 19, 2008 |
I had some questions on how the elastic layout used in the “Summer Romance” template works.
Elastic layouts are cool because they scale perfectly when your visitor want to adjust the font size in his or her browser, even the images scale. It’s not “the perfect solution” but it’s fun to try new things. We are going to use the em unit on everything, even the borders. If you don’t know what I am talking about you should download the template I made for this project. I called it Summer Romance and you can download it here. To see how this works simply open the index page in your browser and change the font size. You should be familiar with Html, Css, basic Photoshop and basic Flash before you start.
To get the basic idea on how this works just open the “Summer Romance” stylesheet called style.css. The only values you need to edit to see how this works is the values of the so called “em”. Try to change the width to 40em in the container element.
#container {
width: 50.5505em;
margin: 1em auto;
border: 0.286em solid #a2ba8c;
background-color: #FFFFFF;
}
As you can see the main page will become smaller. Where we usually use pixel values we now use em values. The easiest way to make a page like this is to simply build it with pixel values first then convert the pixel values to em values. The key to get control over this is to set your body font size to 75%, 87.5% or 100% (small, medium or large)
If you use 75% one pixel would be 0,0833 em
If you use 87.5% one pixel would be 0,0715 em
If you use 100% one pixel would be 0,0625 em
This means if you set your body font size to 87.5% (like in Summer Romance) you have to multiply all of your pixel values by 0.0715. Let’s try to convert the width in the container element to pixels and see if this works. If we divide 50.5505 with 0.0715 we get the value 707 which is our pixel value. Replace the value 50.5505em with 707px and check in your browser if it’s right.
(10px X 0.0715 = 0,715em)
Using the pixel converter that comes with the template makes it easy to convert all of your pixel values, simply choose your body font size and start converting.
Pretty simple but what about the images? we want them to resize as well. It’s very simple, in Summer Romance I have added this css class to the main image (Flash):
.mainimage{ width: 31.746em;
height: 24.024em;
}
The reason I use flash is that jpg’s dosen’t look good when you scale them with html or css. First you need to create an vector image (vector images can be scaled just like you want without the loss of quality). you should actually use illustrator for this and trace the image by hand, however here’s a quicker way (of course the quality is not as good as if you do it by hand, but it works if you don’t know how to make vector images). Open an image in Photoshop and resize it so it fits in your header, save as jpg. open Macromedia flash and create a new document, import your header image and go to modify—> bitmap —-> trace bitmap. Now try different values until you are happy with your vector image (Note, This is a quick solution and do not work very well with all images, but it can actually turn out quite nice with some images, experiment with different images and values). Now you have a simple vector image that can be scaled just like you want without the loss of quality. Export you little flash movie and insert it to your html document like this:
<object type=”application/x-shockwave-flash” data=”images/mainheader.swf” class=”mainimage”>
<param name=”movie” value=”images/mainheader.swf” />
<img src=”images/mainimage.jpg” class=”mainimage” alt=”Summer Romance Template” />
</object>
In Summer Romance this will be in the headerRight div, and as you can see we have used the “mainimage” class to make sure the image will scale properly with the rest of the page.
Spice up your typography as well
<object type=”application/x-shockwave-flash” data=”images/pixel_free.swf” class=”heading”>
<param name=”movie” value=”images/pixel_free.swf” />
<img src=”images/pixel_free_layouts.jpg” class=”heading” alt=”Pixel free layouts” />
</object>
<h1><span>Pixel free layouts</span></h1>
The class used here is
.heading{
width: 25.025em;
height: 2.574em;
margin-bottom: 1em;}
As you can see, it’s done the same way as the other flash images, the only difference is that I have added the H1 which is hidden using this class:
span {text-indent: -2000px;}
Note that this span is a little different than the method used in the Summer Romance. This is simply because this will make it a little more accessible than using display: none;
You can download Summer Romance for free here.
Comments
You must be logged in to post a comment.