CSS Horizontal Menu in CSS

Hello, I feel like there is a really easy answer to my question, but it is somehow escaping me. Using only HTML and CSS, how do I create a horizontally centered menu that does not collapse? Free Website Templates, the Business Solutions template and the Cake Delights template all have what I'm looking for more or less, but for some reason without directly copying the template I can not make a Horizontal Menu that doesn't collapse when the page is resized?

Also is there a way to make it so that the menu stays a few pixels away from the left side even if the page is resized?

 

Why NOT directly copy the template? And change it for your needs... Or extract the bits you need and change them?

From my limited experience it's all pretty much trial and error with HTML/CSS so re-using things that work is essential. You may as well get some practice doing it.

If you want to get into this kind of stuff you really need a good teacher or a book because it isn't a trivial undertaking. Not in my view anyway.

 

I'm not comfortable with just using the template, because I want to understand what I'm doing. I do learn from templates, but I don't want to be dependent on them. I thank you for your suggestions.

 

I just realized I might've used some poor terminology. When I mention a menu that doesn't collapse I mean a menu in which the buttons remain in a fixed horizontal line in relation to each other. Typically when I make a menu bar the buttons will begin to stack as the screen get's smaller. To illustrate, four buttons would look something like this.
from: ----
To: ==

I think I'm on my way to figuring out the answer now, I found a tutorial and it looks like, in the final result the menu does what I want it to do so I should understand what I'm doing soon!

 

As you are putting in the time and effort - if you get stuck I'll help if I can.

If you want a good book on this kind of thing (and much, much more) I can recommend "CSS - The Missing Manual" by David Sawyer McFarland.

Geoff

 

Why not try a menu generator or try:
http://www.dynamicdrive.com/style/csslibrary/category/C1/
-
http://www.freedownloadcenter.com/W...s/CSS_Horizontal_Menu_Generator_Download.html
-
http://wonderwebware.com/css-horizontal-menu/
-
http://cssmenumaker.com/css-menus
-
http://www.mycssmenu.com/
-
http://css3menu.com/
-
You can modify the code and see what it does (and you can put remarks in the code to note what it does:
such as color; size; text; image; etc)
-
hope this helps
falcon

 

When you define the ul when hovering on the list you specify left as 0 px, aligining it to the left of the page, change it to your margin width then it will be in the right place

 

am new in web design.....i just created a site duno now how to create a contact us page and also create a webmail for the site..... any advice