Page 41 of 235 FirstFirst ... 3139404142435191141 ... LastLast
Results 401 to 410 of 2344
  1. #401
    Join Date
    Jan 2005
    Location
    USA, St. Louis
    Posts
    3,719
    Plugin Contributions
    9

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by Woodymon View Post
    As previously reported the settings offered by Jade did appear to not help.

    Woody
    Hi Woody,

    Changing each menu item to a percentage will get rid of the space, and I think it will be a better way to go about it than you have. Here's the exact post with instructions on doing so (you can always find it by searching for "percentage" in this thread):

    http://www.zen-cart.com/forum/showthread.php?p=390897

    Sorry, I can't follow css without looking at its' visual expression, so I can't offer advice on your method. I'd reload the original stylesheet, and follow the instructions above.

  2. #402
    Join Date
    Sep 2004
    Posts
    2,420
    Plugin Contributions
    2

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by CES View Post
    Do you want to have a look at my shop and see if that is what you want? www.NicheLocks.com. If you want I can post my css to show what I did. (I can't remember if or what alterations I did make - lol.)
    Hi Craig-

    I like what you did with "dropmenu.gif". That is what I was looking for or something similar.

    So is that a mod option or something custom?

    For the site I'm working on I probably would want to create the gif to match background color so then the menu bar does not appear to go all the way across.

    I just took a snapshot of your CSS but still not sure how you did it.

    Yes it would be great if you could post any code and/or CSS changes used to customize your menu bar.

    Thanks,

    Woody.

  3. #403
    Join Date
    Sep 2004
    Posts
    2,420
    Plugin Contributions
    2

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by jettrue View Post
    Changing each menu item to a percentage will get rid of the space, and I think it will be a better way to go about it than you have.

    Here's the exact post with instructions on doing so (you can always find it by searching for "percentage" in this thread):

    http://www.zen-cart.com/forum/showthread.php?p=390897
    Oops. I missed that one. Yes I like your way better than mine ;-)

    I was previously understanding your "percentage" recommend was just to control the menu resizing and not anything to do with the centering. but now I think I understand.

    I'll wait to see CES/Craig's updated code.

    I like his idea of creating a gif file and adding to
    #dropMenuWrapper

    Code:
    background:transparent url(../images/dropmenu.gif) repeat-x scroll 100%;
    That fits in very well with how the Future Zen Template works.

    Thanks again,
    Woody

  4. #404
    Join Date
    Sep 2004
    Posts
    2,420
    Plugin Contributions
    2

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by Woodymon View Post
    if you could post any code and/or CSS changes used to customize your menu bar..
    I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?

    I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template.

    Woody

  5. #405
    Join Date
    Jan 2005
    Location
    USA, St. Louis
    Posts
    3,719
    Plugin Contributions
    9

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by Woodymon View Post
    I just used firebug to capture your two relevant CSS files. I am investigating. Were there any menu bar mod code changes besides the CSS adjustments and the placeholder gif?

    I see you're using a template based on one of jade's template creations (nice look by the way...very clean). I suspect Jade also has inside knowledge how well the menu integrates into that specific template.

    Woody
    Hi Woody,

    I think I'm still trying to visualize your issue. As I mentioned, I'm a very visual person, and I always have a hard time working with offline sites. If I see it, I can usually figure it out quickly.

    If I understand correctly, you want a menu that is centered. :-) Now, do you want the drop down items to start all the way to the left, and end all the way to the right, so that there is no empty menu space? Or do you want it centered with space between the menu and the edges of the site?

    I also understand that you want the menu to match the background color of your site. Is it a solid color? If so, instead of using a gif, you can just give dropMenuWrapper a background color that matches your sites color.

    I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site. So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.

  6. #406
    Join Date
    Sep 2004
    Posts
    2,420
    Plugin Contributions
    2

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by jettrue View Post
    Or do you want it centered with space between the menu and the edges of the site?
    Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.

    Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.

    I just looked at future zen, and I see that it has kind of an "open" background near the top. I also see that is a fluid site.
    It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).

    So, you could give dropMenuWrapper and dropMenu the same background color of your site. Make dropMenuWrapper a width of 100%, give it the text-align:center AND margin:0 auto. Make dropMenu have a smaller width, like 90%. Do the percentage instructions I gave above. I think that'll get you close.
    Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.

    Thanks again for the advice. Most appreciated.
    Woody

  7. #407
    Join Date
    May 2005
    Location
    Phoenix Arizona (whew!)
    Posts
    191
    Plugin Contributions
    0

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by Woodymon View Post
    Yes. It's just the extra space to the right causing me issues. When I look more closely at CSE's menu he also still has a bit of space to the right, but not much at all, and that is fine.

    Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.


    It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).



    Already did something similar but not getting the centering happening due to that space to the right of the menu. I'll keep trying but waiting to hear back from CSE. Whatever he did he hit it pretty much on the bullseye.

    Thanks again for the advice. Most appreciated.
    Woody
    you might want to take a look at our menu. Ours runs 'side to side' (aka 100%) of the window, but you could easily change the percentage to suit, or use a transparent base wrapper and a color wrapper for the actual dropdowns. Perhaps the transparent base, with a color flip on mouseover/hover?
    [FONT=Comic Sans MS]Vicki[/FONT]
    www.moebiusenterprises.com
    Fragrance*jewelry*metaphysical supplies*art*LIFE ... 'bout sums it up....

  8. #408
    Join Date
    Jan 2005
    Location
    USA, St. Louis
    Posts
    3,719
    Plugin Contributions
    9

    Default Re: CSS Dropdown menu for your header- With Categories!

    Quote Originally Posted by Woodymon View Post

    Regards to color, I got that handled. I was just commenting on CSE's use of a colored gif to match his menu. I can set the gif to my background color as stated.
    I'm confused, why use a colored gif, if you can just set the background color?

    background:#000000;

    Quote Originally Posted by Woodymon View Post
    It's fluid except when the font size changes it messes with the sideboxes headings and the caption bars (e.g. Featured products) in the center column, since the SB header and caption backgrounds are fixed height images (aka sliding windows/doors).
    You can change em's to pixels. Change the padding from em's to pixels, etc. Get rid of em's you get rid of resizing with font changes.


    Quote Originally Posted by Woodymon View Post
    Already did something similar but not getting the centering happening due to that space to the right of the menu.
    Have you tried switching to percentages like my post? That gets rid of the extra space to the right of the menu.

  9. #409
    Join Date
    Sep 2004
    Posts
    2,420
    Plugin Contributions
    2

    Default Re: CSS Dropdown menu for your header- With Categories!

    Jade-

    I uploaded original CSS (v. 1.2 dated Feb 23, 2007) and then made edits as you recommended in this thread on June 17, 2007 and presto. Just what I was looking for... mostly.

    The menu centers well in both Firefox and IE6. But when I adjust type size in IE6 I get mixed results.

    At small/smaller/larger/largest text sizes the menu stays on one line. Cool!

    But in IE6 when set text size to medium, the menu wraps to two lines ("Shopping Cart" moved to under "Home"). Strange that this only happens at default medium type size in IE6? And only in IE6, does not wrap not in FF.

    Any ideas? My current relevant CSS is below.

    I still need to test IE7 when it goes online but that can wait.

    Thanks for your assist.

    Woody

    Code:
    #dropMenuWrapper {
    	width: 100%; /* ORIG */
    	height: 2.17em; /* ORIG */
    	margin: 0; /* ORIG  */
    	font-size: 1em; /* ORIG */
    	padding-bottom: 1em; /*NOT IN ORIG */
    	}
    	
    div#dropMenu {
    	width:70em; /* ORIG */
    	margin:0 auto; /* ORIG */
            text-align:center; /* ORIG */
    	z-index:1000; /* ORIG */
    	position:relative; /* ORIG */
    	}
    
    div#dropMenu li { 
    	position: relative; /* ORIG */
    	list-style: none; /* ORIG */
    	margin: 0; /* ORIG */
    	float: left; /* ORIG */
    	line-height: 1em; /* ORIG */
    	width:16.667%; /* by jade */
    	}
    
    div#dropMenu ul.level1 {
    	width:70em; /* ORIG */
    	margin:0 auto; /* ORIG */
    	background:#4F4F4F;  /* ORIG */
    	text-align:center; /* ORIG */
    	height:2.17em; /* ORIG */
    	z-index:1000; /* ORIG */
    	}
    
    div#dropMenu li a {
    	display: block; /* ORIG */
    	/* padding: .6em 2em .6em 2em; */ /* ORIG */
    	padding: .6em 0 .6em 0; /* by Jade */
    	text-decoration: none; /* ORIG */
    	text-transform: uppercase; /* ORIG */
    	color:#ffffff; /* ORIG */
    	text-align: center; /* ORIG */
    	border-right:1px solid #ffffff; /* ORIG */
    	border-left: 1px solid #ffffff; /* by jade  */
    	}	
    
    div#dropMenu ul.level2 {
    	top: 2.17em; 
    	background:#4f4f4f;
    	z-index:1000;
    	left:0; /* by jade */
    	}
    
    /*
    div#dropMenu li a.noLine {
    	padding-right:2em;
    	border:none;
    	} */

  10. #410
    Join Date
    Sep 2004
    Posts
    2,420
    Plugin Contributions
    2

    Default Re: CSS Dropdown menu for your header- With Categories!

    I have learned to take things one step at a time, especially when I am learning something new ;-)

    When you recommended change em's to pixels I understood that had to do with resizing the menu objects but not anything to do with centering the menu on the page and maintaining all in one line. My first goal was to achieve centering and nowrapping. Then the undesirable effects resulting from type resizing could be dealt with next.

    So when I have the IE6 wrapping issue solved (when type size id default medium) I will proceed changing em's to px.

    But then there are fifteen or so em settings in the menu CSS file. Any recommends on what px sizes to change the em sizes to (based on orginal CSS)?

    Thanks for any recommends,
    Woody
    Last edited by Woodymon; 23 Aug 2007 at 03:12 AM.

 

 

Similar Threads

  1. Categories dropdown menu/css
    By KenshiroU in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 5 Apr 2013, 01:04 PM
  2. HIde categories mod with css dropdown menu
    By adowty in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 9 Feb 2012, 01:05 AM
  3. How to use ezpages/categories as dropdown menu in the header?
    By mdivk in forum Templates, Stylesheets, Page Layout
    Replies: 12
    Last Post: 21 Dec 2011, 06:32 PM
  4. whats wrong with this css for my dropdown menu?
    By 1kell in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 28 May 2010, 02:47 AM
  5. Header Dropdown Menu (CSS) Without the Dropdown???
    By hcd888 in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 27 May 2009, 01:20 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR