CSS nav button display - Post ID 156377

User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Could you upload your changes, please. It's easier to understand when we can see what is going on.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Oh, forgot to say that you don't change the urls in the style sheet. The Css file is linked to the main html file, which then calls the menu buttons. Maybe not the correct way to explain it, but don't change the URL to the background images!
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 243515 Photo


Registered User
508 posts

OK, I took a little "time-out" to try to figure this out for myself and I think I've done it, somewhat.

This is the URL for the site: http://www.tacomagames.org

I've got the nav buttons changing on mouse hover on all but two pages. I still need to add "target=_blank" to the external links but essentially I think I'm done.

The two pages still resisting are the "Past Results" and "Piping and Drumming". The Past results page, the Footer wants to cover the bottom of the navigation buttons even though I use the "Clear:both;" statement, and the Piping and Drumming page is just plain screwy. I have tried everything I can think of and nothing. You'll notice that I created a border around the content and navigate to hilite the situation.

Any assistance will be greatly appreciated.

Thanks
Greg
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

I'm looking into it right now. One thing I'd suggest that you do is to set a fixed width for the body tag in your css file. As it is now, the pages go wall to wall on a large monitor screen, and that makes them look a bit askew, see attached screen shot of how it looks on my screen (22inch).

I tried it with this:
body{ color:#000;
background-color:#fff;
background-image: url('../images/backgrnd.png');
width: 1200px;
margin:auto;
height:100%;
}

That looked better IMHO.
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 122279 Photo


Senior Advisor
14,649 posts
Online Now

So, I have replicated the index page and the two troublesome pages here: http://www.coffeecuphelp.com/inger/greg/ (well, I didn't download all the nav buttons...)

What I have done with the Pipes and drums page is to remove the class of gallery from the links, and then I used the format of the links on the Past results page to add them back in. Og course I don't know if that is what you want, but well...

To fix the footer on the Past results page I had to change the height 100% in the css file to height: auto;
Then I set a margin-bottom, as you already had done on the other page.

I have adjusted those margins in order not to have too long pages, but of course that leads to no scroll bar, and the pages will jump slightly when navigating between the index, which has a scroll bar, and the two other pages. If you don't like that, then just increase the margin-bottom until the scroll bar reappears.

As I said in my previous post, you ought to have a fixed width for the body tag, and I used the same width that you had given to the wrapper, 1200px. Also, the container was a bit too far to the right, so I let it float left - instead of right - and adjusted the left margin and the width a wee bit.

I removed some of the borders you had put in to show what was wrong, but some are still in there. I'm sure you'll find them...

Well, take it or leave it... ;)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 243515 Photo


Registered User
508 posts

Thank you so much Inger! I tried everything I could think of. I made a few modifications but everything looks great.

Thank you
Greg
User 122279 Photo


Senior Advisor
14,649 posts
Online Now

Glad you liked it! :)
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.