How to make a Fluid Image or Logo | Percentage based Web Design
A lot of people want to make a fluid, percentaged-based site design, but after hitting numerous walls they give up and choose a fixed width. One problem I initially had was
my logo which, because of its fixed width, wouldn't stay fluid with the rest of the site design. Below is an easy fix using CSS and HTML.
Start with a fixed with image that you've designed to be your logo as below, some sort of repeating or consistant background is required:
Then break the image into its component parts:
The left section of the logo.
The section of repeating background.
The right side of the logo.
Now create a div in your CSS as below. The height: 50px; should be changed to the height of the image you are using. The min-width: 300px; should be changed to the total
width of the left side plus the right side of the logo:
#logo
{
width: 100%;
height: 50px;
min-width: 300px;
background-color: #FFFFFF;
background-image: url('../background.jpg');
background-repeat: repeat-x;
}
Now, place the div on the page you want the logo on. Inside the div place the two sections of the logo. You may use more than two sections, but I'm using two for the purposes of this guide:
<div id="logo">
<img src="../leftlogo.jpg" title="Donutey" alt="Donutey Logo Right" style="float: left;" />
<img src="../rightlogo.jpg" title="Donutey" alt="Donutey Logo Left" style="float: right;" />
</div>
Below is the finished product, resize your browser window to see how the logo changes size with the width of the page:
Note: This page is not valid XHTML 1.1 because I've used a div id twice on one page, however, it is valid otherwise.
Kevin C. July 26th 2006 kcas88@gmail.com
『For a period in the late Nineties denim became unfashionable. 501s, Levi's flagship brand, in particular suffered from the so-called 'Jeremy Clarkson effect', the association with men in middle youth.』 - Alex Benady
