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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Aligning a row of floated images to their bottoms

    Hey I am very new to the CSS and HTML world, so forgive me if this is something really simple I am over looking.

    The problem is I have four images, one of which is taller than the rest. I making a nav bar. I got the images to float and have the desired space between them but the problem is they are aligning to the top of the image. I want them to be all on the same level at the bottom:

    html code:

    <nav>
    <div id="menu">
    <ul>

    <li><a href="home.html"><img src="home_button_unselected.png" width="134" height="41" alt="home" /></a> </li>
    <li><a href="comics.html"><img src="comics_button_selected.png" width="137" height="48" alt="comics"/></a> </li>
    <li><a href="animated_shorts.html"><img src="animatedshorts_button_unselected.png" width="255" height="41" /></a> </li>
    <li><a href="contact_us.html"><img src="contactus_button_unselected.png" width="179" height="41" /></a> </li>

    </div>

    </ul>
    </div>
    </nav>

    css code:

    #menu {
    margin-left: 19px;
    position:absolute;
    }

    nav li {
    float: left;
    list-style: none;
    padding: 0;
    margin-top: 230px;
    margin-right: 19px;
    margin-bottom: 0;
    display:table-footer-group;
    }

    Thank you in advance for all the help.

    AJ

  • #2
    New Coder
    Join Date
    Jan 2012
    Posts
    53
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Could you possibly link us to the page that's you're working on?

  • Users who have thanked DarkLaika for this post:

    lostsanity90 (01-23-2012)

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry I can't but here is a image of the page to show the problem:
    Attached Thumbnails Attached Thumbnails Aligning a row of floated images to their bottoms-capture.jpg  

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts

    Arrow

    AJ,

    Without going into a long explanation what your trying to do takes a bit of manipulation using position:relative and position:absolute on the containing div then the child div's.

    But, I'm going to offer a simpler solution, just use a table contained in DIV(menu), set the menu div to position:absolute and then move the menu (DIV) into position as needed:

    CSS
    Code:
    #menu { width:765px; height:48px; position:absolute;}
    #nav td {vertical-align:bottom;}
    HTML
    Code:
    <div id="menu">
    <table width="100%" height="48" cellpadding="0" cellspacing="0" id="nav">
    <tr>
    <td><a href="home.html"><img src="home_button_unselected.png" alt="home" width="134" height="41" border="0" /></a></td>
    <td><a href="comics.html"><img src="comics_button_selected.png" alt="comics" width="137" height="48" border="0"/></a></td>
    <td><a href="animated_shorts.html"><img src="animatedshorts_button_unselected.png" width="255" height="41" border="0" /></a></td>
    <td><a href="contact_us.html"><img src="contactus_button_unselected.png" width="179" height="41" border="0" /></a></td>
    </tr>
    </table>
    </div>
    Hope this Helps.


  •  

    Tags for this Thread

    Posting Permissions

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