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
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Simple CSS question

    Well I hope it's a simple question but it's been frustrating me for the past hour.

    I'm trying to get the Login Cart Social icons (top right) to line up with the search button (top left), without having the menu navigation (home/heylee/shop/about...etc) move. I'm obviously not changing the correct things in the CSS.

    http://heyleeb.bondicreative.com

    Any ideas what I should change?

    Mark

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Well, this is hacky but it's Friday and I'm all but checked out for the day...

    Code:
    #navigation {
        font-size: 1em;
        height: 100px;
        padding-top: 26px;
        position: absolute;
        right: 0;
        top: 27px;
    }
    #icons{
    /*    float: right;
        margin-left: 450px;
        margin-right: 14px;/**/
        position: absolute;
        right: 14px;
        top: -26px;
        width: 182px;
    }
    Make the highlighted adjustments to your CSS file and this should get you in the ballpark.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    cool. why is that hacky?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by MarkBondi View Post
    cool. why is that hacky?
    Well, if it were me, I would move the login and social icons into the same container with the search form (not within the form itself, of course, but into the parent div) and then float the form and the cart/social div in opposite directions and apply margins/padding as appropriate. I generally find that mode of operation to be more durable and forgiving of browser and OS rendering differences. For example, the 182px width I provided for the #icons div can break the social icons layout if another user's browser renders the login/cart text even a single pixel wider than my browser did when I tweaked the page. You can adjust for that to give yourself some insurance but I still find unpositioned layout to be more flexible for this.

    I also have a personal distaste for using absolute positioning without pretty solid reason to do so and this probably further colors my perception of the method as "hacky" since this could be done just as easily without the absolute positioning and negative "top" value. In fact, if I were you, I would get away from the absolute positioning for #navigation also. You really don't need it for the layout you have there.

    But, since this is a Drupal installation it can get hairy making HTML changes without potentially compromising the usability of some modules and such so I assume tweaking the theme is probably more work than you're interested in. It's easier to "hack" the CSS and just make it fit.

    So, since I broke a few of my own guidelines in order to avoid any PHP/HTML adjustment and CSS rewrites I consider my approach to be "hacky." There is nothing technically wrong with this approach but you will need to know and respect the limitations of absolute positioning in order to effectively manage the layout cross-browser and cross-platform.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    got it. drupal is it's own monster. i'm not a coder, just can edit code. so for now, it'll have to be hacky.

  • #6
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    yeah, that code broke the icons layout in the first browser I checked, worked fine in mine tho.

    Anyone help me out on how to the move the login and social icons into the same container w/ the search form and float the form and the cart/social div in opposite directions?

  • #7
    New Coder
    Join Date
    Apr 2012
    Location
    Nashville, TN
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    any chance someone can help me out so the icons don't break the layout?


  •  

    Posting Permissions

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