Introduction | Removing the Frame | Add a Banner or Two | Faux Frame Style | Making a New Frame | Blog Style Backgrounds
We have our page with no profile background or frame on it, but now we found a different background we want to use.
The problem? It is so busy that we can't see what we wrote for our profile.
The solution? Find a second background that is suitable for placing behind our profile.
A search for a background for our profile resulted with this image:
First thing to do is change the BODY background image URL with our new one.
Now for the background behind our profile, we are going to use the ID, #contentTable.
This is part 'A' as shown on the Introduction page.
Here is the code we will be adding to our existing style sheet:
DO NOT REMOVE the existing tranparency code that the #profileContent provides.
The results of these changes will make our page look like this:
Let's switch and use the #profileContent ID (part 'B' on the Introduction page) instead of #contentTable.
We will need to REMOVE the code for the #contentTable.
To the #profileContent, add the background-image code to the existing transparency:
Now our page looks like this. Note the differences between this and the one above.
The left and right sides of the profile area are close to the items on our page as well as a small gap appearing between the bottom of the profile and the site footer.
This is new technique and became possible due to the recently updated Frame_ID script.
What it amounts to is adding a 'padding' and a 'border' to your #profileContent.
Yep, those things we have warned you not to use in most places because they can mess up the alignment of your page.
This is one place you can now use them, BUT OF COURSE THERE IS A CATCH!
The size of the padding and the size of the border, when added together, must be equal to or less than 22 pixels!!!
Caution: The frames provided by Dogster and Catster can be aligned incorrectly on Internet Explorer pages if you use this technique. The code is mostly likely right, but IE doesn't always work correctly with the code.
Here is a look that creates a frame using borders that comes close to the size of the original frame (color area) on Dogster (6 pixels) and Catster (4 pixels).
This one has a border that is "solid", 5 pixels wide and color of #006600. A padding of 15 pixels was added.
When a padding is included the background area is filled in with whatever the background is of #profileContent.
Notice that the border width plus the padding width fall within the required size. (5 + 15 = 20)
Here is what the code would look like with the sample page:
Here is an example of what the code would look like plus its sample page when the border is 15 pixels and the padding is 5 pixels:
Finally this example is when the border is 12 pixels and the padding is 10 pixels.
Also in this example we opted to remove the image background and use a solid color instead.
This is great to use when you don't have a lot of time to work on your page.
A few extra notes about borders.
When specifying your border, make sure to declare your style (solid, double, groove, rigid, etc.) and the width before stating the color.
Why? Some browsers don't know what to do when the color comes first so they completely ignore the border settings.
Another quirk you need to be aware of is how the different kinds of browsers handle colors for style types that need to use 2 shades for the 3-D look of ridge, inset, outset and groove.
They take the original color and interpret which 2 colors to use the get the look. Browsers will NOT pick the same colors. The following is an example of what happens:
<< Previous Next >> "Add a Banner or Two"
