Need some classes pls

HTML & CSS
1

hi there:)

I need to mock something up

ImageShack® - Online Photo and Video Hosting

Where it says ‘news’, I want to paste this code into a post

http://www.pastie.org/1997783

and use classes to make it fit nicely. Can you help?

I want to float the text right, and have about 20pixals between the thumbnail and the text. I will need a h2 in there also

Thanks

2

Hi,

It would have been good if you could have had a stab at this yourself first :slight_smile:

I guess you are looking for something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.col-thumb img {
    border:0 none;
    display:block;
    width:150px;/* for testing only - remove this*/
    height:150px;/* for testing only - remove this*/
    background:red;/* for testing only - remove this*/
}
.container-news {
    width:600px;
    border:1px solid #000;
    overflow:hidden;
    padding:10px;
}
.col-thumb {
    float:left;
    margin:0 20px 10px 0;
}
.col-description {
    overflow:hidden;
    min-height:0;
}
* html .col-description {
    zoom:1.0
}
</style>
</head>
<body>
<div class="container-news">
    <div class="col-thumb"> <img class "news-thumb" src="" /> </div>
    <div class="col-description">
        <p>lorem ipsum</p>
    </div>
</div>
<div class="container-news">
    <div class="col-thumb"> <img class "news-thumb" src="" /> </div>
    <div class="col-description">
        <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
        <p>lorem ipsum</p>
        <p>lorem ipsum</p>
        <p>lorem ipsum</p>
        <p>lorem ipsum</p>
    </div>
</div>
</body>
</html>
3

Ohh man I have be learning stuff all day trust me!

I am still after 12 months getting my head around css layouts etc - I have even gone to a two day course were I got a site point book ! Score (was so happy about that).

It has worked fine cept CAn you pls explain the 'for testing parts.

Also this:

  • html .col-description {
    zoom:1.0

Finally, it looks like that

http://www.mylifeisagarden.com/images/forcooldude2.jpg

It looks like the bottom one is wrapped in something, but it’s not. See how it is shiftied to the right?

I have the html code in a page for a wordpress theme, and the css in a child theme

4

I didn’t know the size of your images and an image tag without dimensions would have collapsed to zero and you wouldn’t have seen anything on the page. You can remove those parts when you add an actual image but make sure you add the height and width attributes in the image tag itself.

Also this:

  • html .col-description {
    zoom:1.0

That’s for IE6 to cause “haslayout” (see css faq) and in this case its needed to make that content form a rectangular block to the side rather than wrapping underneath. Overflow:hidden is having the same effect for other browsers and stops the text sliding under the image should it reach.

Finally, it looks like that

http://www.mylifeisagarden.com/images/forcooldude2.jpg

It looks like the bottom one is wrapped in something, but it’s not. See how it is shiftied to the right?

I have the html code in a page for a wordpress theme, and the css in a child theme
I’d need to see the html but it looks like you either have a misplaced tag or some misplaced content as there is no reason for the last element to snag. Unless it was a specific browser issue as you didn’t mention if all browsers behaved the same.

5

Thanks for your help - I think I misplaced a tag.

I am going back to class to do some basic tutorials to get my head around a couple of things - but I am debugging a wp site for 1e6 now.