Blah blah blah
This is the float layout; as you can see if you resize your browser window, the width of everything is fixed. And as I said, this is much trickier to edit than the other layout.
How to edit this layout
- The three main divs are
#content
,#leftmenu
and#rightmenu
like in the other layout, with a#header
that reaches all the way across at the top and a#footer
that reaches all the way across at the bottom. However, there are a couple more divs needed for styling purposes than in the stretching layout -#layout
holds everything and keeps it centered,#container
holds the three main divs as it did in the other one, and#leftcontainer
holds the content and left menu and is necessary only for keeping the source order as we want it. Don't touch the widths on#layout
and#container
, but if you edit the widths of the anything, always remember to make sure#leftcontainer
's width is equal to the widths and double paddings of#leftmenu
and#content
put together, and#leftcontainer
and#rightmenu
's width and double padding put together should always equal 779. - To change fonts, font colors or font sizes for the whole page, change the font-family:verdana, sans-serif, color:#000000 and font-size:10pt; specified under body; to change them for the individual main divs, you should obviously just add similar declarations under the styles for that div.
- The CSS for backgrounds is
background:whatever;
, with "whatever" being either a hexadecimal color code or an image in the formurl(filename)
(or both). However, this is slightly more complicated than in the stretching layout: in order to make a background on the menus continue all the way down to the footer, you need to put the backgrounds on#layout
or#container
. Of course, this should not be too much of a problem; what I recommend is simply putting a 779px wide background image on#container
that has the content's background as well as the backgrounds for the menus, and if you want the lists of links or whatever to have different background images, you can put that in separately without fear. - Removing a menu is also more complicated in this layout than the other one. Remove the menu from the HTML, remove the start and end tags for
#leftcontainer
, remove both of them from the CSS, and then change the width of#content
to add the width and double the padding of the menu you removed (unless, of course, you choose to take some of that width and put it on the other menu instead). - The way the menus are made may appear alien to many, but basically, it's made with lists. If you don't get how it works, just be sure to leave the
#leftmenu ul, #rightmenu ul
stuff alone in the CSS and copy and paste when you add new categories and menu items. (I double spaced around the code that makes one category to help with that.) - To make a different background image for the sublinks in the menus, use
#leftmenu ul li ul, #rightmenu ul li ul
as the selector. - To edit the link styles only for the menus, use
#leftmenu a:link, #rightmenu a:link, #leftmenu a:visited, #rightmenu a:visited
for the normal links and#leftmenu a:active, #rightmenu a:active, #leftmenu a:hover, #rightmenu a:hover
for the links on hover. To remove the underline on any of them, change thetext-decoration
tonone
. - To make everything except the content appear the same on every page, you need to make sure your host supports SSI. If it does, cut out everything above the content in the code in your files and put in a separate file called for example
top.txt
, and the same for what is below the content except calling it something else, such asbottom.txt
. Instead of that code, put<!--#include file="top.txt" -->
above the content and<!--#include file="bottom.txt" --> below it.
. Save the pages (not the menus) with the .shtml extension. Editleftmenu.txt
andrightmenu.txt
when you want to edit the menus, and it will be edited everywhere. - It is also usually better to cut and paste everything between the
<style>
and</style>
tags (not including the tags themselves) into a separate file called something likestylesheet.css
and then externally link to it by replacing the<style>
tags with<link href="stylesheet.css" rel="stylesheet" type="text/css">
. Then the stylesheet will also be the same on every page, making a new style will be a breeze, and it will be completely separated from your HTML. - If you're going to link back, please visit the Link to Me section to find the most fitting button for your color scheme.
If you did not understand the instructions, it is probably best for you to either check out the other free layout, or learn more HTML and CSS before trying to make your own website.