SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making lists like this help needed !!

    Hello everyone,

    Right then yesterday i was looking around on the internet at web 2.0, i now have plenty of bookmarks and i actually started making my website into web 2.0 .. i have started from scratch and have being following little hints and tips i have come across on here.

    Anyway i have just run into a problem .. all my site so far has gone great and for my first attempt i think it looks great. Anyway what i have its a tutorials website and i have a database that contains alot of information. What i am trying to do is bring that information out of the database which so far i have acheived .. the problem is i cant get a preview picture of the tutorial in the right place ... i am going to include a screenshot of how i want it to look and a good example of it working is over at D I G G where it has the ammount of digs in a nice image to the left and all the information on the right hand side.



    I also want to know how to do the little report box and the box above it containing the image.

    Can someone please help me acheive this in css using divs ?

    Reagards
    Chris Baines
    Last edited by PixelPerfect; Jan 2, 2007 at 07:50.

  2. #2
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PixelPerfect View Post
    Can someone please help me acheive this in css using divs ?
    Not until you stop using the phrase "web 2.0" in completely irrelevant contexts.

    You can nest other elements inside LI elements, so for your layout you would probably have an image, a heading, a paragraph and some sub-headings. Then lay them out normally with CSS.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha yeah sorry about that.

    So how do you meen, i tryed to use the list elements befor and i had the image at the top of the page, then it threw all the other information onto another line so the layout then all messed up. I'm still pretty new to all of this i meen iv read quight a few articles but i have not come across this in any of them .

    Sorry if it sounds really dumb but im used to php and good old tables ( please don't shoot me ) this is my first time making a table-less website.

  4. #4
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the basic layout is just a series of block-level elements with an image floated to the left, so you would have something like this:
    Code:
    <ul id="tutorials">
      <li>
        <img src="images/pic.gif" alt="" />
        <h3>Test Data</h3>
        <p>Testing</p>
        <p><strong>Category:</strong> Photoshop | <strong>Rating:</strong> <img src="images/5stars.gif" alt="5 stars" /> | <strong>Views:</strong> 0</p>
      </li>
    ...
    </ul>
    CSS:
    Code:
    ul#tutorials {
      list-style: none;
    }
    
    ul#tutorials li img {
      float: left;
      margin-right: 5px;
    }
    That will give you the basic layout.


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
  •