Creative COW SIGN IN :: SPONSORS :: ABOUT US :: CONTACT US
ADOBE DREAMWEAVER: HomeDreamweaver ForumDreamweaver TutorialsFAQAdobe FlashWeb Design

Re: need to make horizontal spry menu fill div width

Cow Forums : Adobe Dreamweaver
FAQ   •   VIEW POSTS   •   ADD A NEW POST   •   SEARCH   •   CHANGE FORUM
Respond to this post   •   Return to posts index   •   Read entire thread


Re: need to make horizontal spry menu fill div width
by Fernando Mol on Jul 7, 2009 at 6:13:16 am

Well, the COW bar is not a Dreamweaver spry menu, so the CSS follow different rules here (that's my guess by seen the code here).

For me what has always worked is: doing some math.

>Get your main container width.

>Add a div for your menu (or use the ul of your spry menu) and place a background image to be repeated or stretched to the full width of your container.

>Populate your menu.

>Choose the font for your menu.

>Add some padding and margin until it fits, this is kind of try and error. Add a background for the hover state and maybe a background vertical line for every <li> tag, no repeat and left or right aligned for separation.

>USE ALWAYS PIXELS in all of your measures.

I like centered menus, to do this I create a div for the menu bar and then I give a fixed width to the list, try and error to get it right, and center it.

Here's an example:

http://www.claut.com.mx

As you can see, I don't use spry menu. I avoid them if I can for accessibility reasons. But sometimes you just have to use them. No problem, use the same principles.


Respond to this post   •   Return to posts index   •   Read entire thread


Current Message Thread:


Related Tags:
DI



Note: If you are a registered user please click here to login before posting.

Your post will not be accepted if your name and email address are not registered in our database. Click here if you do not have an account.

Name
E-Mail Address
Subject
E-Mail me when someone responds
Just This Message   Entire Thread   None  

Message:



Note: The following are HTML characters and may cause parts of your post to disappear if not used correctly: < > &
To include any portion of the post in your response, highlight the desired text and hit the "Q" key. Read more...



Add your message signature


 


Note: By clicking "Post Direct" button above, you are agreeing to the Creative Cow's Code of Conduct.



FORUMSTUTORIALSMAGAZINETRAININGVIDEOS - REELSPODCASTSEVENTSSERVICESNEWSLETTERNEWSBLOGS

© CreativeCOW.net All rights are reserved.

[Top]