SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Thread: Align a UL List

  1. #1
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Align a UL List

    I need some help on how to align the images you see in UL#Gallery so there are six at the top and six at the bottom with whatever left over just below. (link)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    That doesn't make a lot of sense from what 'm looking at there.

    You have a red block and 12 images ins pairs. I've no idea what you mean by six at the top and six at the bottom. At the bottom of what?

    There's not room for six images in one line in that red square anyway - if that's where they are supposed to do.

    You can reduce the margin on the ul to allow 3 across.

    Code:
    #gallery {
      list-style: none outside none;
      margin: 50px 0 0 30px;
      padding: 0;
    }
    You need to explain more clearly what you want as its not clear

  3. #3
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Under the navigation, click on 3DMotion you'll see there are two rows of 6 movie images, that is exactly what I want displayed on the Illustrations nested div, make sense ?
    It just annoys me that everything I say doesn't seem to make sense to anyone, some things are a easy comparison that is why I mention to look at another part of my page then I described the difference. I think sometimes people don't want to understand, I know I'm not speaking a tribe language.

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Poor Paul, you of all people !

    Dear OP, are you a sheep in a wolf's clothes?
    (Reason: The Creative Sheep = SiberianHuskey)

    I think we can all agree Paul is definitely not one of those that doesn't want to understand. The way I see it, you are defining your ideas as you go along, you don't have a precise plan. That makes you sound undecided and confused.

    This is how your page looks like. Can you make some sense out of it to let us know what the end result you're after looks like? Use less words, make something like a website wireframe. You should definitely have one by now


  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It just annoys me that everything I say doesn't seem to make sense to anyone, some things are a easy comparison that is why I mention to look at another part of my page then I described the difference.
    Yes, and when you look back at other segments of your page that we have helped you with you will find the answer there. On that page that seems to be working better you did not set a width on #ThreeDMot.

    I think sometimes people don't want to understand, I know I'm not speaking a tribe language.
    It's not that we don't want to understand, I think you share a part in that as well. We have told you many times to stop setting fixed dimensions on elements that contain fluid content. I tried to teach you about the box model over a year ago, that margins and paddings must be accounted for in the overall dimensions. I gave you links to pages within the SitePoint CSS Reference for you to read but you never made time for it and this is the result. I had told you that you would never be able to move forward until you understood the basic principles.

    The problem with that current page is that you set a width on the parent div (#Illus_3D) and you set left margins on it and the ul.
    Code:
    #Illus_3D {
    width: 576px;
    height: 350px;
    margin: -26px 0 0 268px;
    background: #800000;
    position:relative;
    }
    
    #gallery {
    margin: 50px 0 0 230px;
    padding:0;
    list-style: none;
    }
    Remove the width and height from that parent and set a left margin on just one of them. Just set the left margin on the parent so that it takes care of all it's children.

    Then contain the floated LI with overflow:hidden on the UL

    Code:
    #Illus_3D {
    min-height:0;/*haslayout IE7*/
    margin: -26px 0 0 268px;
    background: #800000;
    position:relative;
    }
    
    #gallery {
    overflow:hidden;/*contain floats*/
    margin: 50px 0 0 0;
    padding:0;
    list-style: none;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    It just annoys me that everything I say doesn't seem to make sense to anyone,
    This is what you said in post #1:
    I need some help on how to align the images you see in UL#Gallery so there are six at the top and six at the bottom with whatever left over just below. (link)
    And now you say this:

    [quote]
    Quote Originally Posted by SiberianHuskey View Post
    Under the navigation, click on 3DMotion you'll see there are two rows of 6 movie images, that is exactly what I want displayed on the Illustrations nested div, make sense ?
    Why didn't you say that in post #1. We're not mind readers. Your original post makes no sense as it reads.

    some things are a easy comparison that is why I mention to look at another part of my page then I described the difference.
    No you didn't you said nothing of the sort you only said this:

    I need some help on how to align the images you see in UL#Gallery so there are six at the top and six at the bottom with whatever left over just below. (link)
    I think sometimes people don't want to understand, I know I'm not speaking a tribe language.
    From the amount of help I have given you I find that extremely rude and condescending and is certainly not the way to go about getting more help.

  7. #7
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The comment was not specifically at Paul, although it's easy to see how one could take it at them. I have a precise vision on how I want the page to look, if I didn't I wouldn't know how I want it to look. It's in the right direction it may read as though I'm changing every other day but that's not true.

    Rayzur - The links you gave to me on positioning I did read them, and I do have a more stronger understanding of positioning and margins and the flow of things, I see what the problem was as you mentioned a fixed height and width, something I honestly didn't know. I would like to know why the background image in the ID#ThreeDMot is not showing up ?

    Everyone has been rude once, if Paul or other users want to hold a grudge against me, then there just gonna have to.

  8. #8
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    In your threads, much time is spent by members attempting to establish what your aims are. Therefore, why not create a reference page on your server describing your project in as much detail as possible: visual mockups, what has been done so far and what remains to be done. When you start a new thread, include a link to the page. Make a checklist of elements that need to be worked on and mark them as done as they are completed.

    Helpers will then be able to gain an overview of your project and things may run more smoothly.

    Please don't paint yourself as a victim of potential ill feeling. To suggest that anyone should "hold a grudge" against you is a groundless assertion that suggests you assume immaturity in others. It's an unwise opinion to state publicly, as it may be seen as saying more about you than anyone else.

    If you know of a forum more consistently tolerant than Sitepoint, let us know.

  9. #9
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your threads, much time is spent by members attempting to establish what your aims are. Therefore, why not create a reference page on your server describing your project in as much detail as possible: visual mockups, what has been done so far and what remains to be done. When you start a new thread, include a link to the page. Make a checklist of elements that need to be worked on and mark them as done as they are completed.
    I'd have to set something like this up, for future project excluding my current project.

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I see what the problem was as you mentioned a fixed height and width, something I honestly didn't know. I would like to know why the background image in the ID#ThreeDMot is not showing up ?
    It's because your floated list-items are not being contained in the UL.
    The UL height has collapsed to "0" so it's parent (#ThreeDMot) also has no height.

    Do yourself a favor and set your CSS up in a logical order that follows the same flow as your html. When I originally set that CSS up for you I had done that, as time has gone by it has become scattered. Logically speaking the footer styles should be at the end of your css, they are somewhere around the middle now.

    Back to the BG-image issue :

    Here is what you have, you have the parent after it's children
    Code:
    #videos li {    
    float: left;
    display:block;
    margin: 2px 0 0 20px;
    }
    #videos {
    margin:17px 0 0 220px;
    padding:0;
    list-style:none;
    }
    #ThreeDMot {
    background:url('/construction/images/motionbackdrop.png');
    }
    Now flip them around and let them flow like the html. If it helps you to see what's going on then indent the child styles.

    Keep things as consistent as you can, for example: use the same left margin that you used above on #Illus_3D or make them both the same. It's all about getting past that fixed position div coming up from the bottom of the page.

    Choose either 268px or 220px or something in between, but keep the left margins the same on #Illus_3D and #ThreeDMot for consistency

    Code:
    #ThreeDMot {
        min-height:0; /*hasLayout Property*/
        margin: 0 0 0 220px;
        background:url('/construction/images/motionbackdrop.png');
    }
        #videos {
            overflow: hidden;/*contain floated li's*/
            margin:17px 0 0 0;
            padding:0;
            list-style:none;
        }
        #videos li {    
            float: left;
            /*display:block; (the float makes it a block)*/
            margin: 2px 0 0 20px;
        }

  11. #11
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because your floated list-items are not being contained in the UL.
    The UL height has collapsed to "0" so it's parent (#ThreeDMot) also has no height.
    Since the child #Videos doesn't have a height, in which it's parent #ThreeDMot has not height so {min-height:0} adds or tricks the browser into thinking their is height !?!?!

    Edit: The Background image is not showing!!!

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    #ThreeDMot has not height so {min-height:0} adds or tricks the browser into thinking their is height !?!?!
    No, it is just for setting "haslayout" in IE7, I know you are not concerned about IE6 so I did not cater to it.

    I was just setting haslayout there for future insurance in case you do something that requires IE7 to need "haslayout".
    Edit: The Background image is not showing!!!
    When we take the time to fix your code and post instructions it's going to require you to read and not just scan.

    You did not follow my instructions, here is what you still have :

    Code:
    #videos {
        margin:17px 0 0 0px;
        padding:0;
        list-style:none;
    }
    What did I do different above? It's even highlighted in blue with a comment!

  13. #13
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The overflow property is when the content of an element exceeds the size of the element's box, in my case that content being the ID#Videos!

    Edit:
    I want to move the background position of the background image more to the left but it stops at it's current position.

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The overflow property does more than just clip overflowing content, it has some beneficial side effects as well. In this case it is being used to force the parent to enclose the floats.

    If you want the BG image to extend to the left then you need to swap the margins back around. If I would have known about the BG image beforehand we would not be having to change this back around.

    Code:
    #ThreeDMot {
        min-height:0; /*hasLayout Property*/
        /*margin: 0 0 0 220px; move margin to ul for full width background on div*/
        background:url('/construction/images/motionbackdrop.png');
    }
        #videos {
            overflow: hidden;/*contain floated li's*/
            margin:17px 0 0 220px;
            padding:0;
            list-style:none;
        }
        #videos li {    
            float: left;
            margin: 2px 0 0 20px;
        }

  15. #15
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I swapped both margins twice, the BG image doesn't load hrmmm.

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Code:
        
    #videos {
            overflow: hidden;/*contain floats*/
            margin:17px 0 0 220px;
            padding:0;
            list-style:none;
        }

  17. #17
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Skimmed by that


Bookmarks

Posting Permissions

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