SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css on Joomla template issues

    I thought I'd come back here again (where I always seem to get the most help for Joomla, odd isn't it?) and ask a question about this new template that I'm trying to install.

    My original website is located at:
    http://vcob.org

    and I'm trying to install this template but it only shows one out of six of my top menu items. The template is located here:
    http://vcob.org/templates/template4/

    One thing I noticed is that if I add this little bit of code
    Code:
    #header #pillmenu li ul {            /* Sub-Menu */
     position: absolute;
     left: -999em;
    }
    in my template.css they show up which makes me think, is it a css thing? Someone please help as I want to try and do the drop down menus on this template but when I take it that next step further and throw in this code
    Code:
    #header #pillmenu li ul {            /* Sub-Menu */
     position: absolute;
     left: -999em;
     top: 2em;
     width: 17em;                 /* Width for Sub-Menus*/
     margin: 0;
     padding: 0;
     background: #3D1E00;         /* Color for Sub-Menus*/
    }
    #header #pillmenu li ul li {
     margin: 0;
     width: 100%;
    }
    #header #pillmenu li ul li a {
     float: none;
     display: block;
    }
    #header #pillmenu li ul ul {
     top: 0px;
     margin-left: 17em;            /* Moves sub-sub menu to the right*/
    }
    #header #pillmenu li:hover {
     z-index: 10;
    }
    #header #pillmenu li:hover ul ul, #header #pillmenu li.sfhover ul ul {
     left: -999em;
    }
    #header #pillmenu li:hover ul, #header #pillmenu ul li.sfhover ul,
    #header #pillmenu ul ul li:hover ul, #header #pillmenu ul ul li.sfhover ul{
     left: 0px;
     z-index: 10;
    }
    #header #pillmenu ul li ul a {
     padding:0;
     text-align: center;
    }
    #header #pillmenu ul li ul a:hover {
     border-color: #000 #E1DDC5;    /* Border colors for sub-menus */
    }
    It seems to only show one sub-menu (similar to the original problem). Any help is appreciated, thanks in advance!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, on that link you gave where exactly is hte dropdown menu?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a top menu that is at http://vcob.org that has the links
    User Menu - About Us - Grow - Info - Media - Pastor Candidate Information

    This exact same database was replicated to http://vcob.org/templates/template4 but with a new template that only shows the menu item User Menu.

    My problem is that I'm trying to get the new template to show all...

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, I'm a bit confused, you don't position:absolute the submenu at all-you don't give position:relative; to the links, and as far as I know you don't do a :hover rule to set them back to left:0; (or margin-left:0)

    But to answer your question on how to get them all to show-give "#pillmenu ul" position:absolute
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I don't know what that means as I downloaded this template. Are those things that I should be doing or things that the template is doing and shouldn't be doing?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It should be doing and it isn't doing it. You seem to have copied the HTML but you didn'tcopy the CSS.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  7. #7
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've added some code. Please critique and help me figure out why I can only get one level of drop down (using IE). Thanks for your help.

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, you don't do anything to target the other menu.

    I tend to give each dropdpwn <ul> a class and set the coordiantes.

    And then on
    Code:
    li:hover ul.one{}
    I'll put the menu into view..

    It's much eaisser to maintain then the messiness and confusingness ofsomething like

    li ul ul li:hover ul{}

    Which could easily be applied to multiple things.

    Also the "#pillmenu ul" needs overflow:hidden; removed as it's clipping the dropdown.

    And "#pillmenu li" needs position:relative; set to have the dropdowns relative to that instead of the outermost parent.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forgive my ignorance in css but I'm really not sure what all that means. I did however pick up on these other things
    Also the "#pillmenu ul" needs overflow:hidden; removed as it's clipping the dropdown.

    And "#pillmenu li" needs position:relative; set to have the dropdowns relative to that instead of the outermost parent.
    and made those changes. My dropdowns are now showing up but only when I mouse down over the first dropdown and then they dissapear.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #pillmenu li ul ul{position:absolute;left:-999em;top:0;}
    #pillmenu li ul li:hover ul{left:0px;}
    #pillmenu li a{background:blue!important;}/*visual ONLY!!*/
    Try that out for you .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  11. #11
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've added the code but it seems to work but now the parent links have a crazy height to them and the grandchildren links appear on top of the children links.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well it's nothing that my code did as there is no possible way it could influence that...but alas I'll take another look.

    Ok just took a look and it looks perfect...
    Edit:

    Hold up I see it now..gimme a min
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's because the anchors are so big it's hanging out

    Reduce the line height on "#pillmenu a" to 27px. 4px top and bottom padding=8px. 27+8=35 which is the height of the <li>
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  14. #14
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Done, thanks! I don't know how you understand all this... I'm still struggling with the following:

    - It looks like I need to move the pillmenu a down a pixel
    - there's a space between the second child and rest of the other children dropdowns
    - The mouseover for the grandchildren appears on top of the children

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    - It looks like I need to move the pillmenu a down a pixel
    If you mean the bg isn't covering all of it, you need to nest the <div> you are using for the background inside of the actual menu and make sure the stacking context is of the #pillmenu div.
    - there's a space between the second child and rest of the other children dropdowns
    On "#pillmenu ul li ul a" you set the padding to 0 and I believe you need to remove that statement so it can inherit the "4px 8px" value from the top level.
    - The mouseover for the grandchildren appears on top of the children
    I'm not sure what you mean..overlapping?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  16. #16
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    - It looks like I need to move the pillmenu a down a pixel
    I'm realizing that there is actually an image in the background
    http://vcob.org/templates/template4/...es/topmenu.png
    that I would like every link to inherit. Maybe I need to make an image that's one pixel wide for the backgrounds of each link... Is that possible?

    - The mouseover for the grandchildren appears on top of the children
    When you mouse over 'About Us' and then go down to 'Leadership' there should be another list of links that pops out to the side of the 'Leadership' link that shows the following links 'Deacons', 'Elders', 'Ministry Directors' and 'Support Staff'. Instead it pops up the list on top of the 'Leadership' link. Hope that makes more sense.

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes just do like #pillmenu li a{background:url(whatever.jpg) and repeat it across the x axis if the height is 35px like the anchors. That way every anchor insidoe of a <li> will inherit that backgrround.

    As for the overlapping-I oroginally told you left:0; (for the hover rule)..yea change that to a higher value llol.
    C
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  18. #18
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #pillmenu li ul li:hover ul{
     left:100px;
    }
    doesn't seem to be working, am I editing the right one?

  19. #19
    SitePoint Addict
    Join Date
    Aug 2003
    Location
    IL
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By George I think I've got it! Look it over and critique (if you have the time). Thanks!

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,596
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Looks great .
    Always looking for web design/development work. Willing to do it cheap to build portfolio!


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
  •