Can't sort this out

HTML & CSS
1


This is the image that I have.

And I was trying to get it like this in CSS in my website.

I’ve studied the source code where I found it, couldn’t understand anything out of it, I don’t want to copy and paste, but I really wanna learn to do this :frowning:

I’ve also googled abit for css tutorials but never could find something like this.
What I want to do is :
Place an linking image in it, and linking text and the description.
But I don’t have any clue how I would do this.

If anyone could help I would very appreciate it.

2

This is not hard to lay out with CSS, but it looks like there’s some dynamic code in there too (for the Ratings, Comments etc) which CSS won’t handle, of course.

It would be better if you could make an attempt at this, showing us what you know ho to do already. Then we can point the way to get it looking right.

That’s a good starting point, though. The source code for something like this should be pretty simple, as it’s not a complex layout.

3

I tried this and the result was everything under each other then I was out ideas :stuck_out_tongue:

CSS :

#test {
	background:url(img/bar.png) no-repeat;
}

HTML :

<div id="test">
<img src="http://sphotos.ak.fbcdn.net/hphotos-ak-snc4/hs005.snc4/33596_155334541165035_100000654710761_327671_3620723_n.jpg" / >
<h2>Test Title</h2>
<b>Read This Chapter!</b>
The info here
</div>
4

What you would do is set that image as the background of an element, lets say a container div and then type the content: Episode tumbnail, rating, etc in that div

So if the image is names barb.png with a Width of 735 pixels and a Height of 150 pixels and the naruto thumbnail is called narutoThumbnail.png and both the images are in a sub-directory called images.

This is some simple code:

<!Doctype HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Naruto</title>
<style type="text/css">
.episode{
            background:#000 url(images/barb.png) no-repeat;
            width:735px;
            height:150px;
}

</style>
</head>
<body>
<div class="episode" id="e190">
<img src="images/narutoThumbnail.png"/ style="float:left;">
<p style="margin-top:5px; color:#fff;">Watch This Episode!</p>
<div>
<p style="float:right; margin-right:15px; color:#fff; font-weight:800;">Naruto Shippuden Episode 190</p>
<br/>
<p style="float:right; margin-right:15px; margin-top:3px; color:#fff; font-weight:200;">
Naruto is assigned to a team led by jonin Hayama to patrol the north border of the Leaf Village. On of the teammates Kosuke, an old man who has been a genin for over fifty years, earning him the title "Eternal genin"....</p>
</div>
<p style="float:right; margin-top:35px; color:#fff;">Rating:5 Views:n/a Comments:n/a</p>
</div>

What I did is a series of multiple parts of CSS, which I think will be much easier to understand if you go through the CSS tutorials from W3 schools here

First I made a valid HTML document. Then inside the body of the document, I put a <div> tag, which is a tag to contain elements. This div is given the class episode and an id (indentification) of e190. This div is styled using some css in the head of the document.
In css, elements are styled by selectors. writing the tag, div, styles all div tags. Writing .something styles all elemetns with the class something. writing #thisthing stlyes all elements with the id thisthing. writing div.something styles only div tags with the class something and div#thisthing styles only div tags with the id this thing.

Since this div tag is of class episode, it has the width, height, and background of the bakc-ground image barb.png in the images folder (directory).
Inside the div tag are various elements, most <p> or paragraph tags, holding you content. The are styled using inline stlye, which is in the tag as this is <p style=“css styling goes here. Do not actually write css styling goes here”>Content</p> Then the content and then a closing tag
Then the HTML document closes.

That should be it. Again, this contains a lot of css and html concepts that I believe can be best learned wrather than explained.

Regards,
Team 1504

5

Alright, this is what I needed I will work from the code you gave and thanks for the tips.
Ill let you know the result !

6

Here’s an easier way of placing the text and image to the side:


<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
h2,p{margin:0 0 .5em}
.wrap {
    width:640px;
    margin:0 auto;
    border:1px dashed #ccc;
    padding:10px;
    overflow:hidden;
    background:#f2f2f2;
}
/* 
 this next rule makes text stay clear of image in a rectangular block and not wrap
 IE6 though just needs haslayout which is done with the height:1% hack (or zoom)
 but will need overflow set back to visible in case it hides it all  at 1%
*/
.text {overflow:hidden;}
* html .txt {height:1%;overflow:visible}

.image {/* this would be an image in the html */
    float:left;
    margin:0 10px 0 0;
    width:100px;
    height:100px;
    background:red;
    border:1px solid #000;
} 
* html .text {
    height:1%
}/* 3px jog*/
</style>
</head>
<body>
<div class="wrap">
    <p class="image">This would be the image</p>
    <div class="text">
        <h2>Title goes here</h2>
        <p>The description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here the description goes here  .</p>
    </div>
</div>
</body>
</html>
7

Also thanks will be looking at both, only the next problem I run against is, when I’m using links they are applying the navigation style I made.

The navigation style is made with : li, lu and when I’m using other li, lu css they apply navigations style, how can I make a special li and lu for my navigation I’ve tried doing
<ul class=“'navigation”>
<li class=“navigation”>

Then in my css making a
.navigation {
Any thing I entered didn’t apply.
}

8

Hi,

You were on the right track and you should just add a class to the ul and then you can target all inner elements without any other classes.

Here is an example where I have added the class to the ul but also added styles to the list and to the anchor via the parents class.


<!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">
ul.navigation {
    list-style:none;
    margin:0;
    padding:0;
    border:1px solid #000;
    border-bottom:none;
    width:200px;
}
ul.navigation li {
    border-bottom:1px solid #000;
}
ul.navigation li a, ul.navigation li a:visited {
    text-decoration:none;
    background:#ffc;
    color:#f00;
    display:block;
    text-align:center;
    position:relative;/* ie6 fix to mak whole area active*/
}
ul.navigation li a:hover {
    background:#f00;
    color:#ffc;
}
</style>
</head>
<body>
<ul class="navigation">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>
</body>
</html>
9

Love you thanks!