SitePoint Sponsor

User Tag List

Results 1 to 25 of 26

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New member has a question

    This is my very first post to this forum. I have made a few small web sites but just using html. Now I am venturing into CSS and want to learn more

    I read on one post that you like to answer questions so I will probably have a few of them for you.

    I am following the Site point build your web site the right way, 2nd edition. I have gone through the book twice up to the point of starting chapter 6 I did not think I understood it good enough the first time so I wanted to get a better grasp of things.

    I want to make a page with as many images that can go across the page till it if full but I do not want to use tables as I have in the past.

    In the book we use images but it does not help me to figure out how to get mine to be horizontal as in the photo gallery page we use images but
    they run vertical centered on the page with only one in the middle going down so I don't know how to put them side by side.

    I am understanding a lot about css but I have to admit I am still pretty mixed up with the positioning and layout part.

    I think this is probably a hard thing to lay out graphics in this order using css but maybe there is an easier way than I think there is.

    I hope I have explained this so someone can understand what I am talking about. I would appreciate if anyone has any good advice about putting
    these images as I would like to do.

    Carlynn

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you post the html? That will make it easier to see what your problem is. But from reading I expect it has to do with floating the images.

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply. I actually have not started the site I want to make yet. I did not want to use tables for the images so that is why I have been reading and working through this book to see if I could see how to use the my images without putting in a table.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hi carlynn. Welcome to SitePoint.

    Yes indeed, we love to answer questions. The most common way to do what you are describing is to use a list, since this is really a list of images. So the basic HTML is this:

    Code:
    <ul>
      <li><img src=images/image1.jpg" alt=""></li>
      <li><img src=images/image2.jpg" alt=""></li>
      <li><img src=images/image3.jpg" alt=""></li>
      <li><img src=images/image4.jpg" alt=""></li>
      <li><img src=images/image5.jpg" alt=""></li>
      <li><img src=images/image6.jpg" alt=""></li>
    </ul>
    The CSS would be something like this:

    Code:
    ul {
      list-style: none; 
      overflow: hidden;
    }
    
    li {
      float: left; 
      margin: 0 5px 5px 0;
    }
    That basic code will make the images site in rows across the page. It can be refined further, but it's worth starting with something basic like that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your reply. I was not aware that you could use images in a list. I have always just used it for list items. I see so many websites that use tables for
    laying out there images and I know now that tables are suppose to be only for tabular data by reading these books.

    If only some other authors would do the same as the site point book and actually make a site while your working through the book. It is kind of hard to read a 400
    page book and then say ok now go make a site, how can you retain all that in your head when you are a beginner. There is no better way than doing it to learn.

    I am sure when I get started I will come to more things I need help with and it is nice that you are here for some help.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by carlynn View Post
    I was not aware that you could use images in a list.
    You can put pretty much anything into a list, and lists are considered the most meaningful way to mark up a lot of things like this, which are basically a list of items. So here you really have a list of images. A menu is basically a list of links, so ULs are normally used for menus as well. There are several ways to get them to display horizontally, but float: left is possibly the most reliable way.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought of another question last night, what if I want a small border to go around each image and I want a small space between them so that they don't but up against each other on the page. I have taken a lot of Paint Shop Pro lessons so I am good to go on that part, now I just want to style my site using css.

    I finished the book last night build your web site the right way, there was one part I hoped he would cover more was about folder stucture but otherwise it was laid out in very
    easy to follow chapters. I have to go over it again as the layout and positioning is the hardest part for me to get.

  8. #8
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you happen to have the sitepoint book Everything you know about CSS is wrong? If you do I have a question I would like to ask you.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by carlynn View Post
    what if I want a small border to go around each image and I want a small space between them so that they don't but up against each other on the page.
    I accounted for that in my sample code by giving each LI a left and bottom margin of 5px. Don't try to put these margins into images. Let it be handled by CSS.

    there was one part I hoped he would cover more was about folder stucture
    It's pretty intuitive, really, but feel free to ask questions.

    Quote Originally Posted by carlynn View Post
    Do you happen to have the sitepoint book Everything you know about CSS is wrong? If you do I have a question I would like to ask you.
    Fire away.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Addict Newviewit's Avatar
    Join Date
    Apr 2008
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ul li {
    background: url(...
    padding: 5px 0;
    }
    UNLIMITED Domains - UNLIMITED Disk Space - UNLIMITED Bandwidth
    *Black Friday - Website Hosting Deal of The Year - 50% OFF!

  11. #11
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you !! I got it to work, now I have a program I actually like to do web pages that I can use on Linux. I just wish that Paint Shop Pro would make a version that you
    could use on Linux.

    I have to experiment now with crossover. Wine will not work with Paint Shop and I don't want to spend all the time to learn the Gimp, it may be good but it takes time before you can get to be good on a gaphics program and I have done paint shop for years now.

    Crossover has a free trial that I can experiment to see if Paint shop will work, first I have to figure out how to set it up.

    One more question do you notice that bluefish crashes quite often, it has been doing that on me.

  12. #12
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by carlynn View Post
    Thank you !! I got it to work, now I have a program I actually like to do web pages that I can use on Linux.
    Hooray!

    Quote Originally Posted by carlynn View Post
    I have to experiment now with crossover. Wine will not work with Paint Shop and I don't want to spend all the time to learn the Gimp, it may be good but it takes time before you can get to be good on a gaphics program and I have done paint shop for years now.

    Crossover has a free trial that I can experiment to see if Paint shop will work, first I have to figure out how to set it up.
    Good luck with that. Post in the computer hardware/software section if you need help. I don't know that I'll be much use to you, but hopefully somebody will.

    Quote Originally Posted by carlynn View Post
    One more question do you notice that bluefish crashes quite often, it has been doing that on me.
    It's fine on Linux; I haven't used it enough on Windows to know if there's a problem there.


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
  •