Author Topic: menu walking accros the page  (Read 2522 times)

Offline dude

  • Posts: 12
menu walking accros the page
« on: January 10, 2008, 01:01:31 PM »
On http://www.arnobakker.nl/musketiers/wb/pages/home.php you can see my website for wich i use website baker. I am trying to adapt a template to make it work for WebsiteBaker. But now my menu is running accros my page how can i solve this so it will be in one straight line? :?

Offline marathoner

  • Posts: 495
Re: menu walking accros the page
« Reply #1 on: January 10, 2008, 01:44:17 PM »
Visually, your home page is very nice looking.

It's hard to answer without knowing exactly what you want it to look like. When I go to your "Arno" link I see that the submenu doesn't fit on the page. You'll need to modify your CSS file to do whatever you want. It appears that your CSS is only designed for a single level menu but you are generating a multi-level menu. Take a look at your "navigation" class and you'll see what I mean.

You might want to take a look at the ALLCSS template and specifically at the CSS files there to get a better understanding of what you can do.

Also, I noticed that you have have style tags within the body of your page generated by the news module. Your page won't validate with style tags within the body of the page and should be incorporated into your CSS files.

Offline dude

  • Posts: 12
Re: menu walking accros the page
« Reply #2 on: January 10, 2008, 02:01:51 PM »
Hmm ok thanks for the advice so far i will try to figure it out. i am not a programmer so and i now am trying the template at www.superbowlparty. nl/kamp2007 with a single level of menu and still its dropping down in a stairs look o and my navigation code looks like this:

/* navigation */
.navigation {
    background: #DED9D0 url(img/nav.gif) repeat-x; height: 41px;
    border-top: 1px solid #996;
}
.navigation a {
    background: #FFF url(img/nav.gif) repeat-x;
    border-right: 1px solid #C9C6B3;
    color: #553;
    float: left;
    font: bold 1em Tahoma,sans-serif;
    padding: 0 14px;
    line-height: 41px;
    text-align: center;
    text-decoration: none;
}
.navigation a:hover,.navigation a#active {background-position: left bottom; color: #331;}