SitePoint Sponsor

User Tag List

Results 1 to 19 of 19

Hybrid View

  1. #1
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Separate a menu item from the pack?

    Hi all,

    Building a test site: http://joomlatest.chrisbartlett.net/

    With the help of some folks here, I've put together the top menu as desired. What I'd like to do, if possible, is to move the final menu item ("Register Online") all the way to the right side, essentially separating it from the group of top-level items. Can someone give me a hand? I've tried a few things, but my CSS knowledge is mediocre at best and I've come up short. The attached JPG is a mock up of what I'm trying to achieve.

    Thanks!
    Attached Images Attached Images

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,060
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Apply the following declaration to the li element containing your menu item:
    margin-left:225px;

    HTH

    Edit: I see it has a class of "item201" you can target it through that.

  3. #3
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    Thanks! I kinda figured that. The only trouble is that I can't figure out how to apply that CSS to only the final menu item since those items (i.e. 201) are generated by the php code of the Joomla module. In the CSS file, I can only add the margin-left to all the items.

  4. #4
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya know, I think I'll need more php knowledge to do this as I don't think CSS alone can be the answer. I've decided to simply move the online registration link to a completely different area. Perhaps I will revisit this some other time.

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,060
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Why do you need PHP knowledge to do that?
    Unless I am missing something, you can just write .item201{ margin-left:225px;} in your css file and leave it at that.
    Or do the menu items change their class on a regular basis?

    If that won't work, you could always target the final menu item using the :last-child selector, something like: ul.menutop:last-child li{ margin-left:225px; }

  6. #6
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmmmmm... OK.

    I tried the "last child" code and that put 225px in between each item. No good. :-( But I then tried your first bit of code

    Code:
    .item201{ margin-left:225px;}
    and that works beautifully!

    However, YES, the items can an do change their class if I edit any menu items (which I assume is where the php for the module comes in), which does happen regularly. For instance, since your last post, the class is now 214, not 201. So it seems to me that using this CSS method, I will have to edit this margin-left property each and every time a menu item changes (which will be often until the site is 100% complete, but not so often afterwards). Or... Is there a way to get the "last child" thing operational? That may very well be the permanent solution, but it's all beyond me.

    Man, you guys here on SP are good...

    Thanks!

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,060
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Sorry, small mistake in the syntax.
    This should work:
    Code CSS:
    #header ul.menutop li:last-child{ margin-left:225px; }

  8. #8
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect-O!!! Have a look!

    Set to 250px, worked perfectly. So then I added a new menu item called "TEST". That never showed up, so in Joomla, I had to rearrange the menu items so that TEST was not last, and "Register Online" was again. Still did not appear. Went back to CSS and after a few tries, found that 207px was necessary.

    So now, for example, when I go to delete TEST, I will have to return the CSS to 250px, and subsequently, if any new top-level menu items are added, I will just have to adjust the CSS accordingly.

    Rather badass! Thank you very, very much!

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This might be too broad a deviation from your coding template, but I believe Joomla lets you mark menu items individually . So that the LI that contains "register online" can be targeted by class ( as mentioned above)

    ALSO!! You are going about this the wrong way!!! you actually dont want to push that item rightward 250px ( unless you are trying to align it to an image?!?)) What you really want to do is FLOAT:RIGHT ( then use margin-right if you don't want it toughing the right edge of your container) The added benefit is that this way you dont have to have the LI be the last item !


    #header ul.menutop li{ float:left; }
    #header ul.menutop .item201{ float:right; }


    hope that helps.

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,060
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    This might be too broad a deviation from your coding template, but I believe Joomla lets you mark menu items individually
    Apparently it's not as easy as one would think.
    There's a post discussing this here: http://forum.joomla.org/viewtopic.php?p=728320
    The conclusion of the discussion is to use the "Extend Menu" module.

    Quote Originally Posted by dresden_phoenix View Post
    What you really want to do is FLOAT:RIGHT
    Oh yes, this is a much better way.
    Thanks for pointing that out dresden_phoenix

  11. #11
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi fellas,

    Dresden, just out of curiosity, why is floating right better? I have your code in place now, and it's actually not working. The "Register Online" item moved back to the end of the other menu items. Have a look! No worries, I want to learn and understand. The item is 214, not 201, also. Here is the code I have right now.
    Code:
    /* Sitepoint Addition - This moves the final menu item (Register Online) to the right, separating it from the rest of the menu items...
    The "Register Online" menu item WILL GET MESSED UP if any top-level menu items are added, deleted, or edited in any way that alters the 
    width of the overall menu system.  Should that happen, simply edit the margin-left below until fixed... */
    
    /* #header ul.menutop li:last-child{margin-left:250px; } */
    #header ul.menutop li{ float:left; }
    #header ul.menutop .item214{ float:right; }
    Thanks!

    CB

    PS. I can always revert back to Pullo's suggestion, which definitely works. I'm perfectly happy testing out other methods.

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,060
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Howdy,
    The reason why it is better to use float:right is that it is more robust. For example, some of the older browser (think IE6 and IE7) are notoriously uncooperative when it comes to applying padding and margins. Using an absolute pixel value could possibly lead to the final menu point being aligned incorrectly in those browsers. Using float:right is also easier to maintain, for example if you add new menu points of change the padding on the existing menu points, you don't need to go back and realign things.

    The reason that this code isn't working for you, is because you have #header ul {position:absolute} and .menutop {float:left;} in your stylesheet.

    @dresden_phoenix ; I would be glad to hear what you have to say about this.

  13. #13
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I found the two instances you referenced (sorry, Joomla has a zillion different CSS files and they were in two places). I commented out the #header ul {position:absolute} and .menutop {float:left;} you mentioned.

    Have a look now, please. The menu is now below the slideshow header (commenting out position:absolute; did that), although the "Register Online" does seem to be in the right spot vertically after adding margin-right:20px;... If we can get the menus back on top, I think we have a winner!

  14. #14
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    QUOTE]Dresden, just out of curiosity, why is floating right better? [/QUOTE]

    Let me explain as if I has scrapped everything.

    1) when we float something it is taken out of the regular flow. To a certain degree it really doesnt affect the position of elements around it UNLESS they too are floated OR they have been 'cleared'
    2) I often say HTML/CSS works on a case by case basis! THIS BEHAVIOR IS PERFECT the case of what you want to do in this case. See you can float:left all the LI that you want on the left and all that you want on the right(yes you can do more than one !) you can float:right ( all w/o changing your mark up). That means that your register link doesnt have to be the last LI for this method to work!


    here is the concept in action:
    Code:
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    			.menutop {float:left; width:100%; background: silver}
    			.menutop, .menutop ul{ margin:0; padding:0;list-style: none}
    			.menutop li {float:left; position: relative; background: silver; }
    			.menutop li  li{float:none}
    			.menutop a {display:block; padding: 10px;}
     			.menutop  li ul  {position: absolute; left:-9999em;}
    			.menutop  li:hover .level2  {  left:auto}
    			.menutop .level2 li:hover ul  {left:100%; top:0}
    			.menutop .item214 , .menutop {float:right;} /*because of specificity you will need to have at least two elements and a class in the selector; am using 2 classes here. Note how I can position ANY menu item on the right */
    			#horizmenu-surround {background: pink;  float:left; width:100%; min-height: 250px; background: orange}/* this part is just for this example's sake*/
    		</style>
    	</head>
    	<body>
                                            <div id="horizmenu-surround">
            <ul class="menutop level1" >
                                <li class="item101 active root" >
                            <a class="item" href="/"  >
                        <span>Home</span>
                    </a>
                                    </li>
                                    <li class="item181 parent root" >
    
                            <a class="daddy item" href="/index.php/general-info"  >
                        <span>Information</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item156" >
                            <a class="item" href="/index.php/general-info/faqs"  >
                        <span>FAQs</span>
                    </a>
    
                                    </li>
                                            <li class="item182" >
                            <a class="item" href="/index.php/general-info/fields-directions"  >
                        <span>Fields &amp; Directions</span>
                    </a>
                                    </li>
                                            <li class="item216" >
    
                            <a class="item" href="/index.php/general-info/calendar/month.calendar/2012/11/15/-"  >
                        <span>Calendar of Events</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item152 parent root" >
                            <a class="daddy item" href="/index.php/contact-us"  >
    
                        <span>Contacts</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item154" >
                            <a class="item" href="/index.php/contact-us/contact-the-secretary"  >
                        <span>General Inquiry</span>
                    </a>
                                    </li>
    
                                            <li class="item153" >
                            <a class="item" href="/index.php/contact-us/board-of-directors"  >
                        <span>Board Of Directors</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item155 parent root" >
    
                            <a class="daddy item" href="/index.php/general"  >
                        <span>Rules</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item157" >
                            <a class="item" href="/index.php/general/by-law-s"  >
                        <span>By-Law's</span>
    
                    </a>
                                    </li>
                                            <li class="item144" >
                            <a class="item" href="/index.php/general/rules-changes"  >
                        <span>Latest Rule Changes</span>
                    </a>
                                    </li>
                                            <li class="item158 parent" >
    
                            <a class="daddy item" href="/index.php/general/divisions"  >
                        <span>Divisions</span>
                    </a>
                                    <ul class="level3">
                                        <li class="item159" >
                            <a class="item" href="/index.php/general/divisions/t-ball-rules"  >
                        <span>T-Ball Rules</span>
                    </a>
    
                                    </li>
                                            <li class="item161" >
                            <a class="item" href="/index.php/general/divisions/instructional-rules"  >
                        <span>Instructional Rules</span>
                    </a>
                                    </li>
                                            <li class="item162" >
                            <a class="item" href="/index.php/general/divisions/rookie-rules"  >
    
                        <span>Rookie League Rules</span>
                    </a>
                                    </li>
                                            <li class="item163" >
                            <a class="item" href="/index.php/general/divisions/minor-league-rules"  >
                        <span>Minor League Rules</span>
                    </a>
                                    </li>
    
                                            <li class="item183" >
                            <a class="item" href="/index.php/general/divisions/junior-league-rules"  >
                        <span>Junior League Rules</span>
                    </a>
                                    </li>
                                            <li class="item184" >
                            <a class="item" href="/index.php/general/divisions/senior-league-rules"  >
                        <span>Senior League Rules</span>
    
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                            <li class="item185" >
                            <a class="item" href="/index.php/general/home-run-derby-rules"  >
                        <span>Home Run Derby Rules</span>
                    </a>
    
                                    </li>
                                            <li class="item186" >
                            <a class="item" href="/index.php/general/jamboree-rules"  >
                        <span>Jamboree Rules</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
    
                                    <li class="item141 parent root" >
                            <a class="daddy item" href="/index.php/travel"  >
                        <span>Travel Baseball</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item142" >
                            <a class="item" href="/index.php/travel/cooperstown"  >
                        <span>Cooperstown Team</span>
    
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item178 parent root" >
                            <a class="daddy item" href="http://www.sportsmanager.us/sheddpark.htm"  >
                        <span>Shedd Park Database</span>
                    </a>
    
                                    <ul class="level2">
                                        <li class="item150" >
                            <a class="item" href="http://www.sportsmanager.us/PublicLinks/Schedule.asp?Org=549&amp;Link=8208" target="_blank" >
                        <span>Sr. League Schedule</span>
                    </a>
                                    </li>
                                            <li class="item151" >
                            <a class="item" href="http://www.sportsmanager.us/PublicLinks/Schedule.asp?Org=413&amp;Link=6677" target="_blank" >
    
                        <span>Girls Softball Schedule</span>
                    </a>
                                    </li>
                                            <li class="item213" >
                            <a class="item" href="http://www.sportsmanager.us/links/SheddPark/Standings.asp?Org=1" target="_blank" >
                        <span>Standings</span>
                    </a>
                                    </li>
    
                                        </ul>
                        </li>
                                    <li class="item200 root" >
                            <a class="item" href="/index.php/coach-s-corner"  >
                        <span>Coach's Corner</span>
                    </a>
                                    </li>
                                    <li class="item177 root" >
    
                            <a class="item" href="/index.php/the-snack-shack"  >
                        <span>Snack Shack</span>
                    </a>
                                    </li>
                                    <li class="item212 root" >
                            <a class="item" href="/index.php/useful-links"  >
                        <span>Useful Links</span>
                    </a>
    
                                    </li>
                                    <li class="item214 root" >
                            <a class="item" href="https://www.sportsmanager.us/PublicLinks/OnlineRegistration.asp?Org=1" target="_blank" >
                        <span>Register ONLINE!</span>
                    </a>
                                    </li>
                            </ul>
        </div>
    
    
    
    <p>CHANGE THE SOURCE CODE and voila  register is still on the right!!!</p>
    
    
                                            <div id="horizmenu-surround">
            <ul class="menutop level1" >
                                            <li class="item214 root" >
                            <a class="item" href="https://www.sportsmanager.us/PublicLinks/OnlineRegistration.asp?Org=1" target="_blank" >
                        <span>Register ONLINE!</span>
                    </a>
                                    </li>
    
                                <li class="item101 active root" >
                            <a class="item" href="/"  >
                        <span>Home</span>
                    </a>
                                    </li>
                                    <li class="item181 parent root" >
    
                            <a class="daddy item" href="/index.php/general-info"  >
                        <span>Information</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item156" >
                            <a class="item" href="/index.php/general-info/faqs"  >
                        <span>FAQs</span>
                    </a>
    
                                    </li>
                                            <li class="item182" >
                            <a class="item" href="/index.php/general-info/fields-directions"  >
                        <span>Fields &amp; Directions</span>
                    </a>
                                    </li>
                                            <li class="item216" >
    
                            <a class="item" href="/index.php/general-info/calendar/month.calendar/2012/11/15/-"  >
                        <span>Calendar of Events</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item152 parent root" >
                            <a class="daddy item" href="/index.php/contact-us"  >
    
                        <span>Contacts</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item154" >
                            <a class="item" href="/index.php/contact-us/contact-the-secretary"  >
                        <span>General Inquiry</span>
                    </a>
                                    </li>
    
                                            <li class="item153" >
                            <a class="item" href="/index.php/contact-us/board-of-directors"  >
                        <span>Board Of Directors</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item155 parent root" >
    
                            <a class="daddy item" href="/index.php/general"  >
                        <span>Rules</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item157" >
                            <a class="item" href="/index.php/general/by-law-s"  >
                        <span>By-Law's</span>
    
                    </a>
                                    </li>
                                            <li class="item144" >
                            <a class="item" href="/index.php/general/rules-changes"  >
                        <span>Latest Rule Changes</span>
                    </a>
                                    </li>
                                            <li class="item158 parent" >
    
                            <a class="daddy item" href="/index.php/general/divisions"  >
                        <span>Divisions</span>
                    </a>
                                    <ul class="level3">
                                        <li class="item159" >
                            <a class="item" href="/index.php/general/divisions/t-ball-rules"  >
                        <span>T-Ball Rules</span>
                    </a>
    
                                    </li>
                                            <li class="item161" >
                            <a class="item" href="/index.php/general/divisions/instructional-rules"  >
                        <span>Instructional Rules</span>
                    </a>
                                    </li>
                                            <li class="item162" >
                            <a class="item" href="/index.php/general/divisions/rookie-rules"  >
    
                        <span>Rookie League Rules</span>
                    </a>
                                    </li>
                                            <li class="item163" >
                            <a class="item" href="/index.php/general/divisions/minor-league-rules"  >
                        <span>Minor League Rules</span>
                    </a>
                                    </li>
    
                                            <li class="item183" >
                            <a class="item" href="/index.php/general/divisions/junior-league-rules"  >
                        <span>Junior League Rules</span>
                    </a>
                                    </li>
                                            <li class="item184" >
                            <a class="item" href="/index.php/general/divisions/senior-league-rules"  >
                        <span>Senior League Rules</span>
    
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                            <li class="item185" >
                            <a class="item" href="/index.php/general/home-run-derby-rules"  >
                        <span>Home Run Derby Rules</span>
                    </a>
    
                                    </li>
                                            <li class="item186" >
                            <a class="item" href="/index.php/general/jamboree-rules"  >
                        <span>Jamboree Rules</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
    
                                    <li class="item141 parent root" >
                            <a class="daddy item" href="/index.php/travel"  >
                        <span>Travel Baseball</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item142" >
                            <a class="item" href="/index.php/travel/cooperstown"  >
                        <span>Cooperstown Team</span>
    
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item178 parent root" >
                            <a class="daddy item" href="http://www.sportsmanager.us/sheddpark.htm"  >
                        <span>Shedd Park Database</span>
                    </a>
    
                                    <ul class="level2">
                                        <li class="item150" >
                            <a class="item" href="http://www.sportsmanager.us/PublicLinks/Schedule.asp?Org=549&amp;Link=8208" target="_blank" >
                        <span>Sr. League Schedule</span>
                    </a>
                                    </li>
                                            <li class="item151" >
                            <a class="item" href="http://www.sportsmanager.us/PublicLinks/Schedule.asp?Org=413&amp;Link=6677" target="_blank" >
    
                        <span>Girls Softball Schedule</span>
                    </a>
                                    </li>
                                            <li class="item213" >
                            <a class="item" href="http://www.sportsmanager.us/links/SheddPark/Standings.asp?Org=1" target="_blank" >
                        <span>Standings</span>
                    </a>
                                    </li>
    
                                        </ul>
                        </li>
                                    <li class="item200 root" >
                            <a class="item" href="/index.php/coach-s-corner"  >
                        <span>Coach's Corner</span>
                    </a>
                                    </li>
                                    <li class="item177 root" >
    
                            <a class="item" href="/index.php/the-snack-shack"  >
                        <span>Snack Shack</span>
                    </a>
                                    </li>
                                    <li class="item212 root" >
                            <a class="item" href="/index.php/useful-links"  >
                        <span>Useful Links</span>
                    </a>
    
                                    </li>
                            </ul>
        </div>
        <br/>
        <p>we can put the menu at the bottom, you need to take it out of the container</p>
            <div id="horizmenu-surround"></div>
            <ul class="menutop level1" >
                                            <li class="item214 root" >
                            <a class="item" href="https://www.sportsmanager.us/PublicLinks/OnlineRegistration.asp?Org=1" target="_blank" >
                        <span>Register ONLINE!</span>
                    </a>
                                    </li>
    
                                <li class="item101 active root" >
                            <a class="item" href="/"  >
                        <span>Home</span>
                    </a>
                                    </li>
                                    <li class="item181 parent root" >
    
                            <a class="daddy item" href="/index.php/general-info"  >
                        <span>Information</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item156" >
                            <a class="item" href="/index.php/general-info/faqs"  >
                        <span>FAQs</span>
                    </a>
    
                                    </li>
                                            <li class="item182" >
                            <a class="item" href="/index.php/general-info/fields-directions"  >
                        <span>Fields &amp; Directions</span>
                    </a>
                                    </li>
                                            <li class="item216" >
    
                            <a class="item" href="/index.php/general-info/calendar/month.calendar/2012/11/15/-"  >
                        <span>Calendar of Events</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item152 parent root" >
                            <a class="daddy item" href="/index.php/contact-us"  >
    
                        <span>Contacts</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item154" >
                            <a class="item" href="/index.php/contact-us/contact-the-secretary"  >
                        <span>General Inquiry</span>
                    </a>
                                    </li>
    
                                            <li class="item153" >
                            <a class="item" href="/index.php/contact-us/board-of-directors"  >
                        <span>Board Of Directors</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item155 parent root" >
    
                            <a class="daddy item" href="/index.php/general"  >
                        <span>Rules</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item157" >
                            <a class="item" href="/index.php/general/by-law-s"  >
                        <span>By-Law's</span>
    
                    </a>
                                    </li>
                                            <li class="item144" >
                            <a class="item" href="/index.php/general/rules-changes"  >
                        <span>Latest Rule Changes</span>
                    </a>
                                    </li>
                                            <li class="item158 parent" >
    
                            <a class="daddy item" href="/index.php/general/divisions"  >
                        <span>Divisions</span>
                    </a>
                                    <ul class="level3">
                                        <li class="item159" >
                            <a class="item" href="/index.php/general/divisions/t-ball-rules"  >
                        <span>T-Ball Rules</span>
                    </a>
    
                                    </li>
                                            <li class="item161" >
                            <a class="item" href="/index.php/general/divisions/instructional-rules"  >
                        <span>Instructional Rules</span>
                    </a>
                                    </li>
                                            <li class="item162" >
                            <a class="item" href="/index.php/general/divisions/rookie-rules"  >
    
                        <span>Rookie League Rules</span>
                    </a>
                                    </li>
                                            <li class="item163" >
                            <a class="item" href="/index.php/general/divisions/minor-league-rules"  >
                        <span>Minor League Rules</span>
                    </a>
                                    </li>
    
                                            <li class="item183" >
                            <a class="item" href="/index.php/general/divisions/junior-league-rules"  >
                        <span>Junior League Rules</span>
                    </a>
                                    </li>
                                            <li class="item184" >
                            <a class="item" href="/index.php/general/divisions/senior-league-rules"  >
                        <span>Senior League Rules</span>
    
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                            <li class="item185" >
                            <a class="item" href="/index.php/general/home-run-derby-rules"  >
                        <span>Home Run Derby Rules</span>
                    </a>
    
                                    </li>
                                            <li class="item186" >
                            <a class="item" href="/index.php/general/jamboree-rules"  >
                        <span>Jamboree Rules</span>
                    </a>
                                    </li>
                                        </ul>
                        </li>
    
                                    <li class="item141 parent root" >
                            <a class="daddy item" href="/index.php/travel"  >
                        <span>Travel Baseball</span>
                    </a>
                                    <ul class="level2">
                                        <li class="item142" >
                            <a class="item" href="/index.php/travel/cooperstown"  >
                        <span>Cooperstown Team</span>
    
                    </a>
                                    </li>
                                        </ul>
                        </li>
                                    <li class="item178 parent root" >
                            <a class="daddy item" href="http://www.sportsmanager.us/sheddpark.htm"  >
                        <span>Shedd Park Database</span>
                    </a>
    
                                    <ul class="level2">
                                        <li class="item150" >
                            <a class="item" href="http://www.sportsmanager.us/PublicLinks/Schedule.asp?Org=549&amp;Link=8208" target="_blank" >
                        <span>Sr. League Schedule</span>
                    </a>
                                    </li>
                                            <li class="item151" >
                            <a class="item" href="http://www.sportsmanager.us/PublicLinks/Schedule.asp?Org=413&amp;Link=6677" target="_blank" >
    
                        <span>Girls Softball Schedule</span>
                    </a>
                                    </li>
                                            <li class="item213" >
                            <a class="item" href="http://www.sportsmanager.us/links/SheddPark/Standings.asp?Org=1" target="_blank" >
                        <span>Standings</span>
                    </a>
                                    </li>
    
                                        </ul>
                        </li>
                                    <li class="item200 root" >
                            <a class="item" href="/index.php/coach-s-corner"  >
                        <span>Coach's Corner</span>
                    </a>
                                    </li>
                                    <li class="item177 root" >
    
                            <a class="item" href="/index.php/the-snack-shack"  >
                        <span>Snack Shack</span>
                    </a>
                                    </li>
                                    <li class="item212 root" >
                            <a class="item" href="/index.php/useful-links"  >
                        <span>Useful Links</span>
                    </a>
    
                                    </li>
                            </ul>
        
    	</body>
    </html>

  15. #15
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, in the meantime I've reverted back to Pullo's original suggestion of simply creating #header ul.menutop li:last-child{ margin-left:250px; } just so that it's working in FF, Chrome, and IE9. Haven't tested in IE8 or lower yet. I'm trying to soak in your explanation of floating, but please bear in mind I'm quite the novice. I think I understand in principle. Regarding this specific issue, however, you've created the CSS directly into the markup, and I can't do that because all the markup is generated by Joomla's php files, which I am in no way comfortable editing.

    At this point, I just wonder how to get the results Pullo's fix yielded, but using your method, which you both seem to agree makes more sense.

    This is the CSS file, in full, for the module that styles the menu:
    Code:
    /* body {font-family:Helvetica,Arial,sans-serif;font-size:12px;} Dunno why this is here, but was part of CSS that came with module.  Edited whole site, not just menu, so commented out */  
    
    /* Sitepoint Addition - This moves the final menu item (Register Online) to the right, separating it from the rest of the menu items...
    The "Register Online" menu item WILL GET MESSED UP if any top-level menu items are added, deleted, or edited in any way that alters the 
    width of the overall menu system.  Should that happen, simply edit the margin-left below until fixed... */
    
    #header ul.menutop li:last-child{margin-left:250px; }
    /*
    #header ul.menutop li{ float:left; }
    #header ul.menutop .item214{ float:right;margin-right:20px;}
    */
    
    /* CORE */
    
    .menutop,.menutop * {margin:0;padding:0;}
    .menutop {float:left;position:relative;padding-bottom:2px;}
    .menutop li {list-style:none;position:relative;width:100%;height:25px;float:none;}
    .menutop li a.item {cursor:pointer;}
    .menutop li span.item {cursor:default;outline:none;}
    .menutop li .item {display:block;float:left;display:block;margin:0;height:25px;line-height:25px;}
    .menutop li li .item, 
    .menutop li .item, .menutop li.active li .item {display:block;margin:0;text-decoration:none;float:none;}
    .menutop li .fusion-submenu-wrapper, .menutop li ul {float: none;left: -999em;position: absolute;z-index: 500;}
    .menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
    .menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
    .menutop li li {position:relative;float:none;}
    
    /* Drop Downs */
    .menutop ul {width:130px;position:relative;}
    
    /* Level 1 */
    .menutop li .item {
    text-decoration:none;
    display:block;
    padding:0 15px;
    background:#ddd;
    border-color:#eee #ccc #ccc #eee;
    border-style:solid;
    border-width:1px;
    color:#333333;
    text-decoration:none;
    }
    
    .level1 .f-mainparent-itemfocus .item {
    background:#ccc 100% 100% no-repeat;
    border-color:#ddd #bbb #bbb #ddd;
    border-style:solid;
    border-width:1px;
    }
    
    .menutop li:hover > .item {
    background-color:#ccc;
    border-top:1px solid #ddd;
    border-left:1px solid #ddd;
    border-right:1px solid #bbb;
    border-bottom:1px solid #bbb;
    }
    
    .menutop li:hover > .daddy:hover {
    background-image:url(../images/top-light.png);
    background-position: 100% 100%;
    }
    
    /* Level 2 */
    .menutop .level2 li > .item {
    background:#ccc;
    border-color:#ddd #bbb #bbb #ddd;
    border-style:solid;
    border-width:1px;
    }
    
    .menutop .level2 li:hover > .daddy, .menutop .level2 li > .daddy {
    background-image:url(../images/level2-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    .menutop .level2 .f-menuparent-itemfocus .item, .menutop .level2 li:hover .item {
    background:#bbb;
    border-color:#ccc #aaa #aaa #ccc;
    color:#333;
    }
    
    .menutop .level2 .f-menuparent-itemfocus .daddy, .menutop .level2 li:hover .daddy {
    background-image:url(../images/level3-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    
    /* Level 3 */
    .menutop .level3 li > .item {
    background:#bbb;
    border-color:#ccc #aaa #aaa #ccc;
    border-style:solid;
    border-width:1px;
    }
    
    .menutop .level3 li:hover > .daddy, .menutop .level3 li > .daddy {
    background-image:url(../images/level3-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    .menutop .level3 .f-menuparent-itemfocus .item, .menutop .level3 li:hover .item {
    background:#aaa;
    border-color:#bbb #999 #999 #bbb;
    color:#333;
    }
    
    .menutop .level3 .f-menuparent-itemfocus .daddy, .menutop .level3 li:hover .daddy {
    background-image:url(../images/level4-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    /* Level 4 */
    .menutop .level4 li > .item {
    background:#aaa;
    border-color:#bbb #999 #999 #bbb;
    border-style:solid;
    border-width:1px;
    }
    
    .menutop .level4 li:hover > .daddy, .menutop .level4 li > .daddy {
    background-image:url(../images/level4-parent.png);
    background-position:100% 50%;
    background-repeat:no-repeat;
    }
    
    .menutop .level4 .f-menuparent-itemfocus .item, .menutop .level4 li:hover .item {
    background:#999;
    border-color:#aaa #888 #888 #aaa;
    color:#333;
    }
    
    /* regular hover
    .menutop li:hover .item:hover, .menutop li.active .item:hover  {
    background-color:#2c87c0;
    border-top:1px solid #138fdc;
    border-left:1px solid #138fdc;
    border-right:1px solid #0d5f92;
    border-bottom:1px solid #0d5f92;
    color:#fff
    }
     */
    .menutop li:hover .daddy:hover, .menutop ul li.active:hover > .daddy:hover {
    background-image:url(../images/hover-parent.jpg);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    }
    
    /* seperator hover */
    .menutop span.item:hover,
    .menutop li:hover span.item:hover {
    background-color:#666;
    border-top:1px solid #777;
    border-left:1px solid #777;
    border-right:1px solid #555;
    border-bottom:1px solid #555;
    color:#fff
    }
    
    .menutop li:hover span.daddy:hover {
    background-image:url(../images/sep-parent.png);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    }
    
    /* Root Items */
    .menutop li.root {width:auto;float:left;height:30px;} 
    .menutop li.root > .item {float:left;width: auto;height:30px;line-height:30px;}
    .menutop li.root:hover > .daddy:hover {
    background-image:url(../images/top-light.png);
    background-position: 100% 100%;
    }
    
    .menutop li.root > .daddy, .menutop li.root:hover > .daddy {
    background-image: url(../images/top-dark.png);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    }
    
    /* Active Items 
    .menutop li.active > .item {
    background-color:#EE501C;
    border-color:#F86134 #D24916 #D24916 #F86134;
    color:#fff;
    } */
    
    .menutop li.active > .daddy {
    background-image:url(../images/hover-parent.jpg);
    background-repeat: no-repeat;
    background-position: 100% 50%;
    }
    
    .menutop li.root.active > .daddy, .menutop li.root.active:hover > .daddy {
    background-image:url(../images/top-light.png);
    background-position: 100% 100%;
    }
    
    
    /* No JS */
    .menutop li:hover > .fusion-submenu-wrapper, .menutop li:hover > ul {left:130px;top:0;}
    .menutop li.root:hover > .fusion-submenu-wrapper, .menutop li.root:hover > ul {top:32px;left:0;}
    .menutop li:hover ul, 
    .menutop li.sfHover ul {left: 0;top:32px;}
    .menutop ul {width:130px;}
    .menutop li li:hover > ul, .menutop li li.sfHover > ul {left:130px;top: 0;}
    
    .menutop .level2 li {position:relative;float:left;width:100%;}
    
    /* Fusion Pill */
    .fusion-pill-l {height: 35px;margin:0 0 0 12px;top:6px;width:50px;position:absolute;left:0;}
    .fusion-pill-r {margin-left: -12px;height: 35px;}
    
    /* Fusion JS */
    .fusion-js-container {
    display:block;
    height:0;
    left:0;
    overflow:visible;
    position:absolute;
    top:0;
    z-index:600000!important;
    background:transparent !important;
    }
    
    .fusion-js-subs {
    display:none;
    margin:0 0 0 -2px;
    overflow:hidden;
    padding:0 2px;
    position:absolute;
    }
    
    /* Paul O'B from Sitepoint Addition - This squished the menu height and left-aligned the text in sub-menus.  Beautiful!!! */
    
    #header ul,
    #header ul.menutop li,
    #header ul.menutop li a,
    ul,
    ul.menutop li,
    ul.menutop li a{
    font-family: garamond, georgia, monotype corsiva, calibri;
    font-size:12px;
    padding:0;
    height:auto;
    }
    
    #header ul.menutop li a,
    #header ul.menutop li.active a{
    padding:0 5px;
    height:auto;
    }
    
    .fusion-js-subs li{
    text-align:left;
    padding:0;
    }
    
    .fusion-js-subs li a{
    padding:0 5px!important;
    }
    
    #header ul li a {
    font-weight: bold;
    }
    Now, there are other CSS files that Joomla calls that impact the menu, mainly one called layout.css which is actually where the offending #header ul {position:absolute} lies. Commenting that out is what dropped the entire menu below the slideshow, and that doesn't work. :-(. My primary goal is to get it working, and with Pullo's #header ul.menutop li:last-child{ margin-left:250px; } code, it does. My secondary goal is to learn more. ;-)

    That being said, the "right" way is definitely preferable to me. :-) Can an edit to this existing code be performed to accomplish this?

    THANKS for the continued help, gents!

  16. #16
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, and an update... Pullo's code is definitely not working in IE7 & 8. "Register Online" just stays with the other items.

    Nor does it seem to work in Chrome, although there is a different issue there. In Chrome, "Register Online" doesn't even appear.

  17. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,060
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Worldbuilder View Post
    OK, and an update... Pullo's code is definitely not working in IE7 & 8. "Register Online" just stays with the other items.
    This is because the last-child selector is only supported in IE9 and above.
    At this juncture, I would point you at the SitePoint CSS reference: http://reference.sitepoint.com/css/p...lass-lastchild
    This is an excellent reference when running up against such problems (although they could do with updating the compatibility charts to include IE9)

    Quote Originally Posted by Worldbuilder View Post
    Nor does it seem to work in Chrome, although there is a different issue there. In Chrome, "Register Online" doesn't even appear.
    Change this:
    Code CSS:
    #header ul.menutop li a{ padding: 0 5px; }
    to this:
    Code CSS:
    #header ul.menutop li a{ padding: 0 4px; }
    and you will see the missing menu point in Chrome again.

    Regarding dresden_phoenix's proposed CSS code, can you not just drop it into the end of layout.css?

  18. #18
    SitePoint Evangelist Worldbuilder's Avatar
    Join Date
    Jan 2004
    Location
    Boston, MA
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    OK, well I implemented Dreden's code into the layout.css file and the results are as seen in the attachment here. Obviously, I can get rid of the orange by removing the min-height:250px; code, but there's now a strange gray line behind the menu items extending all the way to the right, and the Register Online remains attached.

    Here's what I'm gonna do... I haven't even shown the powers-that-be the test site yet, so I'll see what they prefer. They will probably prefer the blue registration button anyway, meaning that all this menu work will be for naught, and that will be removed. I will leave the suggested codes in the CSS files, but commented out for future reference.

    I've definitely learned a lot, fellas, and I thank you both! But for now, I'm going to undo all this and wait to see what the powers-that-be want. If I need to revisit menu item separation, I will. For now, though, it seems like entirely too much work to get it done when there's most likely an alternative in place that's perfectly acceptable.

    Cheers!
    Attached Images Attached Images

  19. #19
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,060
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Yup, good decision.
    Learning is always good, but at some point you have to be pragmatic!
    You can always revisit this topic if you need to later.


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
  •