SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Melbourne
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Unordered list with images - pls help

    Hi,

    I'm trying to have a horizontal Unordered list with images, with text below them.

    I'd like the images to be side by side (inline) with the text relevant for each image below it. But as soon as I put the text into the <li> with <br> after each line, it then pushes the other list items below the first one, which is annoying.

    Can someone please assiste me with how to do this correctly...?

    Here is my working version:

    http://www.sydneyboutiquehotels.com/...g/template.htm

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe floating the list items would work?

    apply FLOAT:LEFT; to the LI items...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello,

    in "#content ul.hotelpics li" change display:inline into display:block and add float:left

  4. #4
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Melbourne
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks so much for your help... that's just about perfect... how do I now centre those items on the page.... once that's done it's perfect...

  5. #5
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should put them all a single DIV then apply an appropriate width to it - then maybe add a left and right margin of auto

  6. #6
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Melbourne
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wrapped the ul in a div called hotels, and this is the styling of that div:
    #hotels {
    width: 100&#37;;
    margin: 10px auto 0px auto;
    }

    but it still wont centre.. have I missed a step?

    ta

  7. #7
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Melbourne
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still wondering if i have missed a step here somewhere.

    here is my code.

    #hotels {
    width: 100&#37;;
    margin: 10px auto 0px auto;
    }
    #content ul.hotelpics {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    list-style: none;
    }
    #content ul.hotelpics li {
    display: block;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-size: .9em;
    }
    #content ul.hotelpics li a {
    margin-right: 10px;
    margin-bottom: 10px;
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should put them all a single DIV then apply an appropriate width to it - then maybe add a left and right margin of auto
    Since the ul that contains the li is a block element you don't need to add an extra div.

    the problem is:
    When you float items they are removed from the normal flow from the page, so for the browser now the ul and also the div you added has no elements.

    To solve this you have to clear the ul

    so first of all add the class "clearfix" to your ul

    then add the following to your css:
    (you find the explanation of that code at the following url: http://www.positioniseverything.net/easyclearing.html)

    Code:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    
    .clearfix {display: inline-block;}
    
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
    .clearfix:after is for the browser that understand the :after pseudoclass

    the display:inline block is to make it compatible with IE-mac

    and the last part is for the other IE versions

    anyway: i noticed the link to your example doesn't work any longer. Can you restore it, so i can have a look again at your code

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put a demo together of something like this which you might find useful

    http://www.dave-woods.co.uk/?p=202

    Hope that helps.

  10. #10
    SitePoint Member
    Join Date
    Jul 2007
    Location
    Melbourne
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The link is now here...

    http://www.sydneyboutiquehotels.com/

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2008
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by csswiz View Post
    I put a demo together of something like this which you might find useful

    http://www.dave-woods.co.uk/?p=202

    Hope that helps.
    I'm looking to get the effect that you use for the links across the top - home etc but I don't know how to do it.

    What I want is to have a list of links (inline) with my background image and be able to make each <li> of the <ul> manually sized.

    Previously this code was using an image for each link and it was in a table. I'm changing it over to a <div> with unordered list inside of it.

    The menu in that example is just what I want but with my text/coloring/background and height/width.

    I downloaded the css and the a:hover shows up, but I want the size etc to be that "of" the a:hover and can't get it.


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
  •