Making lists like ****.com

[PixelPerfect]

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

[Buddy Bradley]

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.

[PixelPerfect]

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.

[Buddy Bradley]

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:

<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:

ul#tutorials {
  list-style: none;
}

ul#tutorials li img {
  float: left;
  margin-right: 5px;
}

That will give you the basic layout.