Changing from JS to CSS for site navigation

HTML & CSS
1

Gudday all
Late last month my wife’s hosting company experienced many problems that caused her site (and heaps of others) off the air. Eventually they folded. We found a new hosting company and got the site back on air.
However now the JS navigation does not work. The code is the same and I have tried to get the settings between the 2 hosts the same e.g both Linux servers etc: but to no avail.
I knew that it was time to change from a JS menu to a CSS menu.
My attempts thus far have been quite ordinary e.g. it does not work :nono:

The attachment is a picture of what I would like it to look like.
My attempt looks like http://www.petalsandpatches.com/testCSSnavigation.htm
The current live page is http://www.petalsandpatches.com. I have been forced to go back to links at present :frowning:
I am after a two column look with the navigation buttons in the LH column and the body in the right. The body on the current live page is different to that on the testCSSnavigation.htm page as the test page is my default page.
Some points on the testCSSnavigation.htm page

  1. The black box is an outer container called ‘outer’
  2. The left column, called ‘l-col’, is in green
  3. The right column, called ‘cont’, is in blue
  4. I have put edges onto two of the buttons to highlight their position
  5. Blog does not have a button yet

Ideally I would like the buttons to be in the left column and centred. At present they have a mind of their own and seem to be atop both columns. I am sure that the solution is frightfully simple but I can not see it. I would like this fixed as the missus is on my back about it. :eek:

All donations gratefully recieved.

2

Hi,

To move the nav over just removed the default left padding and margin fro the menu.

e.g.


ul#navbuttons {
    padding:0;
    list-style:none;
    width:130px;
    margin:0 auto;
}
ul#navbuttons img {
    border:none
}

Then tidy up the html like so:


        <ul id="navbuttons">
            <li><a href="testCSSnavigation.htm"><img src="buttons/home.gif" alt="Petals & Patches home" height="30px" width="130px" ></a></li>
            <li><a href="clothdolls.htm"><img src="buttons/clothdolls.gif" alt="Petals & Patches cloth dolls patterns" height="30px" width="130px" ></a></li>
            <li><a href="stitcheries.htm"><img src="buttons/stitcheries.gif" alt="Petals & Patches stitcheries patterns" height="30px" width="130px" ></a></li>
            <li><a href="applique.htm"><img src="buttons/applique.gif" alt="Petals & Patches applique patterns" height="30px" width="130px" ></a></li>
            <li><a href="bears.htm"><img src="buttons/bears.gif" alt="Petals & Patches bear patterns" height="30px" width="130px" ></a></li>
            <li><a href="quilts.htm"><img src="buttons/quilts.gif" alt="Petals & Patches bear patterns" height="30px" width="130px" ></a></li>
            <li><a href="bags.htm"><img src="buttons/bags.gif" alt="Petals & Patches bag patterns" height="30px" width="130px" ></a></li>
            <li><a href="bags.htm"><img src="buttons/bags.gif" alt="Petals & Patches bag patterns" height="30px" width="130px" ></a></li>
            <li><a href="seasidemoments.htm"><img src="buttons/seasidemoments.gif" alt="Petals & Patches Seaside Moments patterns" height="30px" width="130px" ></a></li>
            <li><a href="blockofthemonth.htm"><img src="buttons/bom.gif" alt="Petals & Patches BoM patterns" height="30px" width="130px" ></a></li>
            <li><a href="accessories.htm"><img src="buttons/accessories.gif" alt="Petals & Patches accessories" height="30px" width="130px" ></a></li>
            <li><a href="ordering.htm"><img src="buttons/ordering.gif" alt="Petals & Patches bear ordering information" height="30px" width="130px" ></a></li>
            <li><a href="contactus.htm"><img src="buttons/contactus.gif" alt="Contacting Petals & Patches" height="30px" width="130px" ></a></li>
            <li><a href="stockists.htm"><img src="buttons/stockists.gif" alt="Petals & Patches pattern stockists" height="30px" width="130px" ></a></li>
            <li><a href="mailto:info&#64petalsandpatches.com?subject=E-mail request for Petals and Patches"><img src="buttons/e-mailus.gif" alt="E-mailing Petals & Patches" height="30px" width="130px" ></a></li>
            <li><a href="links.htm"><img src="buttons/links.gif" alt="Petals & Patches pattern stockists" height="30px" width="130px" ></a></li>
            <li><a href="http://ww8.aitsafe.com/cf/review.cfm?userid=A736163"><img src="buttons/reviewcart.gif" alt="Petals & Patches bear patterns" height="30px" width="130px" ></a></li>
            <li><a href="http://petalsandpatches.wordpress.com/">Blog</a></li>
        </ul>
3

Paul
Thank you for your prompt reply.
I assume that the new CSS code you mention goes in the file called petalsandpatches-layout-1.css? That where I placed it.
I then tidied up the html as you suggested.
It now looks like the attachment.

It still looks like the buttons are determined not to be bound by the left column.

PS: - I added a new link called chalkboards.htm

4

Hi,

It looks as though the left column is in place here. The screenshot you posted means you probably entered the code incorrectly because you still have bullets on the list and the code I gave above removed the bullets :slight_smile:

You need to clear the floated side column (see faq on floats). You can do it using overflow:hidden (assuming that you don’t want visible overflow later on):


#outer {
    text-align:left;
    border:1px solid #888888;
    width:800px;
    margin:auto;
   [B] overflow:hidden;
}[/B]

Don’t us the deprecated (in strict doctypes) align attribute as you are using css to handle this and it may conflict.


    <div id="l-col" [B]align="left"[/B]>

Don’t use breaks to make space as they are not meant for that. If you have paragraphs then use the p element properly:)

e.g. code snippet


.....    or to New Zealand, USA or UK. <br />
         We have a catalogue ....

It should be:


<p>......
or to New Zealand, USA or UK. </p>
<p> We have a catalogue ..... </p>

Hope that’s of some use :wink: