Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Junior Member
    Join Date
    Aug 2012
    Posts
    26
    Member #
    32353
    So in my footer I have two divs floated right- a set of links followed by some icon png's. The only way I can get icons to appear below the links is to set 'overlow: hidden' on the unordered list; if I don't, the icons will appear to the left of the links, and if I set overflow to auto, then a scroll bar appears on the line with the links.

    Technically, overflow: hidden gets the job done, but I want there to be a bottom border when the user hovers over a link (personal preference, learn to troubleshoot). Suggestions?

    HTML Code:
    <div id="footer">
           <div id="copyright">
               <p>Copyright &copy; 2012 test. All rights reserved.</p>
                    <p>The test brand and logo are property of test.</p>
                    <p>Contact us: <a href="#">office@test.com</a></p>
    
                </div><!-- END copyright -->
    
                <div id="bottom-nav">
               <ul>
                   <li><a href="#" title="T-Shirts">T-Shirts</a></li>
                        <li><a href="#" title="Contact">Contact</a></li>
                        <li><a href="#" title="Sevices">Services</a></li>
                        <li><a href="#" title="About">About</a></li>
                        <li><a href="#" title="Work">Work</a></li>
                        <li><a href="#" title="Latest">Latest</a></li>
                    </ul>
    
                   <a href="#" title="Delicious"> <img src="images/social_delicious.jpg" alt="" /></a>
                   <a href="#" title="Linked In"> <img src="images/social_linkedin.png" alt="" /></a>
                   <a href="#" title="Facebook"> <img src="images/social_facebook.png" alt="" /></a>
                   <a href="#" title="Twitter"> <img src="images/social_twitter.png" alt="" /></a>
    
                </div>
    Code:
    div#footer {
        border-top: 1px solid #a8aeaa;
        color: #a8aeaa;
    }
    
    div#copyright {
        float: left;
    }
    
    div#copyright p {
        font-size: .7em;
        line-height: .5;
    }
    
    div#copyright a {
        text-decoration: none;
        color: #000;
    }
        div#copyright a:hover {
            border-bottom: 1px dotted #000;
        }
    
    #bottom-nav ul {
        overflow: hidden;
    }
    
    #bottom-nav ul li {
        display: inline;
        float: right;
        margin-left: 15px;
    }
        #bottom-nav ul li a {
            text-decoration: none;
            text-transform: uppercase;
            color: #a8aeaa;
            font-size: 0.7em;
        }
        #bottom-nav ul li a:hover {
            border-bottom: 1px dotted #000;
        }
    
    #bottom-nav ul li:first-child a{
        color: #fd0c99;
    }
    
    #bottom-nav img {
        height: 32px;
        width: 32px;
        float: right;
        border: none;
    }
    
    #bottom-nav a img {
        margin-left: 5px;
    }
        #bottom-nav a img:hover {
            margin-top: -3px;
        }

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    When you float, you must clear. <-- TheGAME1264's Immutable Float Law. Learn it, memorize it, study it backwards, forwards, upwards, downwards, inwards, outwards, and any otherwards you can think of.

    In your particular case, I'd add a list element that looks like this to the unordered list:
    Code:
    <li style="clear:  right;  float:  none;"></li>
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member
    Join Date
    Aug 2012
    Posts
    26
    Member #
    32353
    What would I add in CSS though?

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    The CSS is inline in this case, although if you wanted to you could add a CSS class for the extra list item and put it in there. It'll accomplish the same purpose. I just find this is easier for most people to interpret.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member
    Join Date
    Aug 2012
    Posts
    26
    Member #
    32353
    Hmm okay. I guess I could get rid of the display: inline and it will do what I want...


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:55 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com