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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Aligning list items

    For some reason I cannot get the 2 items to line up side by side. I have the entire UL center aligned. http://shilohcreative.gethifi.com/work#/esque

    Thanks so much for your help.

  • #2
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have no idea what two items you are speaking of, can you give a little more detail.

  • #3
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Sorry about that. I am dynamically loading portfolio projects. Identity and web presence are the list items I am speaking of. Thanks.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    At the moment you have those li elements within two different unordered list elements. Combine these into one:

    Code:
    <ul class="projects">
                        
                        <li>
                        
                            <a href="/work/esque/identity">
                            <div>
                            <img src="http://files.shilohcreative.gethifi.com/work/esque/identity/Identity-process-s306x-q100-t1322080711.jpg" alt="Identity">  
                            </div>
                            
                            <h3>Identity</h3>
                            </a>
                            
                        </li>
                        
    
                        
                        <li>
                        
                            <a href="/work/esque/web-presence">
                            <div>
                            <img src="http://files.shilohcreative.gethifi.com/work/esque/web-presence/Web_Presence-process-s306x-q100-t1322081130.jpg" alt="Web Presence">  
                            </div>
                            
                            <h3>Web Presence</h3>
                            </a>
                            
                        </li>
                        
                    </ul>
    and make your css:

    Code:
    .projects li {
        float: left;
        height: 500px;
        margin-right: 50px;
        width: 300px;
    }

  • #5
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thank you for the help, but I need all list items centered horizontally. Usually i can just do this using display: inline instead of float: left for the list item. When I do display: inline, it stacks them again.

    Also, how would I make it where each list item is vertically centered to each other?

    Thanks so much!

  • #6
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Anyone know how to do this?

    Thanks in advance!

  • #7
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Any help would be greatly appreciated. Just need to get the portfolio list items to horizontally center on page and vertically center with each other.

    Thanks in advance!

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,678
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by speck View Post
    Any help would be greatly appreciated. Just need to get the portfolio list items to horizontally center on page and vertically center with each other.

    Thanks in advance!

    In FF the two li's appear to be aligned vertically the same.
    To center an element horizontally, you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto


    That centers your ul inside containing #esque
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I have tried so many suggestions, but it is still not working. There are 2 things I am needing to do. Please keep in mind these portfolio items are dynamically created and will vary.

    1) Horizontally center align list items (identity, web presence, etc)
    2) Vertically center align each list item with each other.

    Thank you so much!

  • #10
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Sorry about that. I forget the view is changing as I work on the site. Here you go.... http://shilohcreative.gethifi.com/work#/esque. See the two list items... Identity and Web Presence.

    Thanks

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    To centre the items horizontally you need to change the lis back to display:inline, remove the float, but then you also need to make the divs and h3s contained within that li display:inline as well. Since these are block elements if you don't do that the lis will not align side by side. I'm not actually sure you need the div element at all.

    Since it looks like your page uses javascript heavily I'd be inclined to vertically centre with javascript here.

  • #12
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I did the following:

    - Removed the div
    - Removed float: left
    - Added display: inline to li and all elements within

    We are close but not fully there: http://shilohcreative.gethifi.com/work#/esque

    Thanks,
    Josh

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think you'll find that is centred - the effect is more obvious if you remove the margin-right on the li.

    EDIT: Perhaps a better approach, guessing you want the h3 under the image:

    Code:
    .projects li {
        display: inline-block;
        margin-right: 50px;
    }
    .projects li h3 {
        /*display: inline;*/
        font-size: 14px;
        margin-bottom: 30px;
        text-align: center;
    }
    You might want to check that in IE, as IE7 and under don't always play well with inline-block.
    Last edited by SB65; 11-28-2011 at 05:40 PM.

  • #14
    New Coder
    Join Date
    Nov 2009
    Posts
    78
    Thanks
    7
    Thanked 0 Times in 0 Posts
    The images are centered, but I am having trouble getting the h3 to center under each image. Also, how do I vertically align each list item. Thanks so much!

  • #15
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Your page doesn't show the changes above - revert the h3 to display:block as well as making the li inline-block.

    Vertically, as I said above, I'd suggest javascript.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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