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
精彩评论