Horizontal Menu - Containers, Elements

I’m not sure I’m posting this in the proper forum. I’m trying to make a personal website. I haven’t tinkered with this stuff for awhile, but decided to stop procrastinating this morning. Previously, I had obtained web hosting. My editor (HomeSite) didn’t work on Win7 (and after trying it in Virtual Machine gave up) and found HTML-Kit editor and then Filezilla for uploading.

I found this link: http://www.onextrapixel.com/2012/07/11/create-an-elegant-css3-navigation-menu/ to show me how to make a menu. I’ve been working through it trying to understand how it works, by plugging in various values. I’ve come up with something that kind of works, but there’s some huge gaps in my understanding.

My in-work site is at: http://www.horseyhouse.com/ . The forum (here at Sitepoint) instructs that I upload code, but it seems like an awful lot to upload in a forum message; that would be rude.

I have “buttons” across the top (I know they’re not called buttons anymore, but they look like buttons.) It seems to me like the “buttons” are being crammed into a container at the top of the screen. I can’t figure out why??? And whenever I try to take them out of the container, I make a huge mess.

Can someone point me to a web reference that explains this?

I’d be open to other suggestions, too (as in what am I missing?) By the way, I intend to put the menu stuff in a server side include so I only have one file to mess with if I update the menu-ing.



I’m not really sure what the question is? :smile:

Yes the list items are placed horizontally in a container which is achieved by floating the list items. If you want them vertical then you would remove the float from the list element.

I didn’t really understand what you meant when you said “And whenever I try to take them out of the container” ? What is it that you want to do with the menu exactly?

It looks as though you have it in place as it should be. It’s a pretty basic method for a horizontal menu and should be straight forward to customise to what you want.

I don’t know what I was asking; I think I was just frustrated. Sorry to bother you all.
I haven’t tinkered with this stuff in awhile. And I was really having trouble understanding positioning and floats. I found an article on the web that I think will help me; I haven’t had time to fully absorb/read it yet–weather got nice so had to shovel horse poop.

Seems like a good explanation though (might help someone else): http://alistapart.com/article/css-floats-101


Floats can be tricky to understand at first and this old Sitepoint article gives a brief primer (It says published in 2014 but that;s just when it was presented in the new format - I co-authored the original many many years ago (hence the ie6 references)).

These days I would argue that for horizontal navs like that you should be using the display:table and display:table-cell properties (ie8+) for more robust and scalable horizontal menus.

1 Like

Thank you very much. I had not read about CSS tables. I will do so now. Thanks again.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.