CODEWITHSUNDEEP
htmlcss
max_
max_

Reputation: 24481

Trying to position a image in HTML/CSS

I am a beginner at CSS and HTML and I am coding a landing page for an upcoming application. I am trying to align the title (image) on the page roughly in the center, but higher up on the y axis.

Please can you tell me why the CSS in this code is not repositioning the image but retaining the image in the top left hand corner?

<header><title>title</title></header>
<style type="text/css">
    body {
        background-image:url('Background.png');
    }
    title {
        top:30px;
        right:50px;
    }
</style>
<body>
<div class=body></div>
<div class=title><img src='title.png'></img></div>
</body>

Upvotes: 1

Views: 125

Answers (3)

BonyT
BonyT

Reputation: 10940

Among other things, you need to set 

 position:absolute;

on the div.title.

See http://jsfiddle.net/Wvkvw/1/

Also

1) You define classes on your divs, but don't refer to them in your styles - you need to use .classname syntax.

2) You should use "" around your class names:

<div class="classname">

3) Finally - I wouldn't recommend using "body" as a stylename - it just leads to confusion

Upvotes: 1

prodigitalson
prodigitalson

Reputation: 60413

Your selector is incorrect youre missing the leading . should be:

.title {
        top:30px;
        right:50px;
        position: absolute; /* or relative depending... */
    }

Additionally you shoudl really enclose your attribute values on the html elements in double quotes ".

And the image tag cannot have child elements so its closed with short syntax typically like:

<img src="myimage.jpg" />

You should also put your style tag in the head element (its head NOT header).

Upvotes: 2

Jage
Jage

Reputation: 8086

You need to give it a position property. Also, your selector isn't correct:

.title {
    position:absolute;
    top:30px;
    right:50px;
}

Upvotes: 1

Related Questions