Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post

    Question How to get various DIVs to align by their tops?

    OK, I have Drupal spitting out all the site's menus out into a series of ULs using this line:
    Code:
    <div id="<?php print $class.'-foot'; ?>"><?php print render($menu_output); ?></div>
    But I want to take these 8 menus and place them in 6 columns at the foot of the site, as a site map. Like I have started at the bottom of this Drupal test page:
    http://www.girlscoutsmoheartland.org/drupal/

    Here's the issue:
    While I'm using CSS to moves these UL's around by their DIV IDs horizontally with margin-left values, how do I get them to all line up by the top?
    I can't use top or margin-top attributes, and I can't absolute position because I never know how tall/long/high/whatever the page's content is going to be.

    Any ideas?
    I'll paste the CSS I have here below.
    Thanks for any help!

    Code:
    #menu-about-us-foot {
    	margin-left:0px;
    	float:left;
    	margin-bottom:20px;
    }
    #menu-topmenu-foot {
    	margin-left:0px;
    	clear:both;
    	margin-bottom:20px;
    }
    #main-menu-foot {
    	margin-left:0px;
    	float:left;
    	margin-bottom:20px;
    }
    #menu-topmost-menu-foot {
    	margin-left:0px;
    	float:left;
    	padding-bottom:20px;
    }
    
    
    #menu-for-girls-foot {
    	margin-left:160px;
    	clear:both;
    }
    
    #menu-for-parents-foot {
    	margin-left:320px;
    	clear:both;
    }
    
    #menu-for-volunteers-foot {
    	margin-left:480px;
    	clear:both;
    }
    
    #menu-for-donors-foot {
    	margin-left:640px;
    	clear:both;
    }
    
    #menu-for-alumnae-foot {
    	margin-left:800px;
    	clear:both;
    }
    Last edited by Mechphisto; 03-27-2013 at 05:34 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The easiest would be simply to float all the menus left, no left margin, and remove clear:both. If you've got sufficient width, they should all stack up horizontally in columns.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    The easiest would be simply to float all the menus left, no left margin, and remove clear:both. If you've got sufficient width, they should all stack up horizontally in columns.
    I'd test it, but I want to give a little more time for other readers to take a look at what I posted. So, thinking about this suggestion...

    Without setting a left margin, they'll all print out horizontally... but the problems are: a. they'll print out in the order the Drupal array spits them out in which is not the order I want them to be in (I want the appropriate menu to come below the label in the green bar right above the footer), b. there are 8, no, 9 menus and I want them in 6 columns (so I have 4 of those menus atop each other, and the other 5 out in their own columns).

    Did that make sense? This is where I would usually draw what I need on the back of a random piece of paper.
    Thanks for taking the time to reply!

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    If they're not coming out in the order you want to display them, and you can't change that, then just floating them won't give you what you want, no.

    Messy. Um...assuming you want the set of four menus in the left hand column, let these display as normal, then they'll stack up on top of each other naturally. The rest, set position:absolute and top and left to take them out of the flow and into columns as required.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    [...]
    Messy.
    [...]
    The rest, set position:absolute and top and left to take them out of the flow and into columns as required.
    Messy, indeed.

    Won't setting them with absolute position fix them vertically based on the top of the browser? If the height of the rest of the page's content changes (extremely likely, in fact, certain), won't that conflict with the position of the menus? I.e.: create content overlap?

    Thanks again!!

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Setting position:absolute sets the position of the element with respect to the first containing element that has either position:absolute or position:relative set, or failing any of these, the body element.

    So, set position:relative on .block-footer-sitemap and then anything within this will be positioned with respect to that element - so top:0 will set it at the top of .block-footer-sitemap.

    What you describe is why position:absolute should be used with caution - but if used properly it can be very useful.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    Mechphisto (03-27-2013)

  • #7
    Regular Coder
    Join Date
    Mar 2009
    Posts
    101
    Thanks
    14
    Thanked 1 Time in 1 Post
    Quote Originally Posted by SB65 View Post
    Setting position:absolute sets the position of the element with respect to the first containing element that has either position:absolute or position:relative set, or failing any of these, the body element.

    So, set position:relative on .block-footer-sitemap and then anything within this will be positioned with respect to that element - so top:0 will set it at the top of .block-footer-sitemap.

    What you describe is why position:absolute should be used with caution - but if used properly it can be very useful.
    YES! OMG yes that did it! I still need to play around with it a bit, but that's it! That's the fix! You're the bestest. Thank you!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •