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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    Junior Member
    Join Date
    May 2009
    Posts
    7
    Member #
    18932
    It's an assignment I'm doing and I have a problem getting the items to display correctly. Basically I've got one class for the products and I need to know how to style them to make them fit in my content box. I want 3 rows of 3 items ideally.

    Link to the problematic page is: http://www.rickygray1987.co.uk/index...age_mensshirts

    If you need me to post any source code that you can't grab from there or if you want any more info just let me know, I'm pretty new to all this.

    Thanks.

  2.  

  3. #2
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Hey.

    Your shirts are what....LISTS!!!!

    do this

    <ul class="shirtContainer">
    <li>Shirt 1</li>
    <li>Shirt2</li>
    <li>Shirt3</li>
    </ul>

    .shirtContainer{display: block; width: 400px; overflow: hidden; border: 1px solid red;} //this is now like a container for all your items, it has no height so it will expand as your content does

    .shirtContainer li{
    border: 1px solid blue; //helps visualize
    display: block; //this items takes up its own line in the browser
    float: left; //this item does not sit in normal flow, now doesnt push any other items down (which is what your seeing with them on top of each other)
    width: 100px; //this items 100pixels wide
    height: 80px; //this items 80pixels high
    margin: 10px 10px 0px 0px; //each row is pushed down 10px, and each item pushes the next item right 10pixels
    }

    One thing i recommend is work with borders on, it really helps visualize what your doing.

    Oh and take out the //comments . THey were just to help u understand

  4. #3
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    HTML Code:
    <html>
    <head>
    <style>
    
    ul.shirtContainer{display: block; width: 600px; overflow: hidden; border: 1px solid red;}
    
    ul.shirtContainer li{
    border: 1px solid blue;
    display: block;
    float: left; 
    width: 150px;
    height: 120px;
    margin: 10px 10px 0px 0px;
    list-style-type: none;
    }
    </style>
    </head>
    <body>
    <ul class="shirtContainer">
    <li>Shirt1</li>
    <li>Shirt2</li>
    <li>Shirt3</li>
    <li>Shirt1</li>
    <li>Shirt2</li>
    <li>Shirt3</li>
    <li>Shirt1</li>
    <li>Shirt2</li>
    <li>Shirt3</li>
    </ul>
    
    </body>
    </html>
    Save and view this.

  5. #4
    Junior Member
    Join Date
    May 2009
    Posts
    7
    Member #
    18932
    Thanks for trying to help but that's not what I was after, I should've explained better. The images aren't individual things, they're being pulled into a template type thing from Expression Engine so I only have one item to style.

    I've fixed a lot of problems with the page now but for some reason the images keep overflowing the content box despite the .shirts class being in a div tag inside it

  6. #5
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Im not quite sure what you mean, it really doesnt matter that theyre dynamic.
    In php for example:
    <ul class="shirtContainer">
    <?php
    while ($row=$mysql_fetch_row($resultset)){
    print '<li><img src="'.$row[imgsrc].'"/></li>';
    }
    ?>
    </ul>

    dynamically printed ^ from a database resultset using a while loop.

    Anyways,
    "individual type things, template type things" hard to understand what youre looking for man. Scrap the individual thing and template thing and if you know how to write html, and w/e language ur using (jsp, asp.net, php) use a <ul> and <li>s to set them up. Are the shirt items floated left? theyre not overflowing, if the item isnt floated left its put into normal flow and all imgs or divs after it are put on the next available line.

    by what it sounds like you have a container div and a shirtclass repeater inside those divs? try floating that .shirt class left. and apply a margin-right to it, also you may have to set the overflow on the container to hidden

  7. #6
    Junior Member
    Join Date
    May 2009
    Posts
    7
    Member #
    18932
    Hmmm well I don't really know php yet so I'm not sure what to do with that. Of course it'd be easier to just put the items as individual things but then they wouldn't be dynamic and it's for an assignment where I need to display dynamic content.

    Pretty sure they're already floated left, I'll have a look and see what happens though.

    Thanks again for trying to help.

  8. #7
    Junior Member
    Join Date
    May 2009
    Posts
    7
    Member #
    18932
    Ok just had a tinker and this bit is correct:

    "by what it sounds like you have a container div and a shirtclass repeater inside those divs? try floating that .shirt class left. and apply a margin-right to it, also you may have to set the overflow on the container to hidden"

    That's exactly what I'm trying to do, overflow helped but they're still tiling downwards and I want them to be going left to right but stopping at the edge of the container and then continuing on the next line so that all 9 fit in the box (if that makes sense).

  9. #8
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    i really dont get what your saying..what i said is what you should do.
    what part of the html example i first showed you is wrong? (try to help me understand why you think my example was wrong, cuz honestly i think this
    is the best way to do it)
    its 3 rows of 3 shirts, you can put img tags, p tags, etc within the li


    if theyre on a different line its because theyre not floated left, or their width is taking up the entire line.

    .shirt{float: left; width: 15px; margin: 0;}

    I know you dont need it 15px, but try this, and if it solves it then its a width/margin problem on your li items inside your container.

    add this to your container and list items
    border: 1px solid blue; it will let you see how things are being layed out.

    the solution i gave you should work.
    check out the wallpaper section on www.alldeathnote.com
    3 rows of 3 wallpapers dynamically pulled from a mysql DB
    ive used this technique many many times
    lemme know if you have any luck

  10. #9
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    .shirt{
    display: block;
    border: 1px solid blue;
    float: left;
    width: 50px;
    margin: 0px 5px 5px 0px;
    }

    set the container to overflow: hidden;

    If this doesnt work, then honeslty I have no clue whats going on.
    Let me see your html for the container and items as well as ur css styling

    Also you said its dynamic..how exactly is it dynamic?
    Are you pulling from a database? a text file?

    Whether its dynamic or not doesnt really matter, you style the container and then style the repeater inside. let me see your html and css, well figure this out

  11. #10
    Junior Member
    Join Date
    May 2009
    Posts
    7
    Member #
    18932
    Maybe I just misunderstood you, I'll give it a go later and see what happens. Thanks.


Page 1 of 2 1 2 LastLast

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 11:48 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com