开发者

Trying to position a image in HTML/CSS

开发者 https://www.devze.com 2023-03-17 09:15 出处:网络
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.

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.

Ple开发者_高级运维ase 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>


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).


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

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


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

0

精彩评论

暂无评论...
验证码 换一张
取 消