...

View Full Version : Image won't position correctly and...



Jemdt
06-10-2012, 12:47 PM
Bascially, I've got two problems.

Firstly, my image won't position as absoloute. If I zoom out, my images automatically go out of position.

Here's my CSS:


body
{
background-image:url('http://www.rs-317.net/assets/img/layout/scroll/scroll466Bg.gif');
background-color:#CDB79E;
background-repeat: no-repeat;
background-attachment:fixed;
background-position: center;
background-size:800px 500px;
}




/*Defines the banner wrap along the top of the page */

.topbanner
{
width:50px;
height:44px;
background:url(http://www.w3schools.com/css/img_navsprites.gif) 0 0;
}

And my HTML


<!Doctype HTML>
<html>
<head>
<meta name="description" content="Runevision - Reliving the past, in the present">
<meta name="keywords" content="RuneVision, Runescape, Private Server, Relive, Old,
2006, past, website, 317, cache, client, source, play, webclient, forums, Runeserver" />
<meta http-equiv="content-type" content="text/html;Charset=UTF-8">
</head>
<div align="center">
<body>

<link href="C:\users\elizabeth\Project\CSS\body.css" rel="stylesheet" type="text/css">
<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" height="50" alt="ScrollTop">
<img src="" width="800px" height="150" alt="Banner">

What should I do?

Richter
06-10-2012, 01:25 PM
Um... which image has class name "topbanner" ?
And what's this <div align="center"> do outside body ?

Jemdt
06-10-2012, 01:50 PM
Um... which image has class name "topbanner" ?
And what's this <div align="center"> do outside body ?

That was a mistake, div align should be within the body tags.

Also, ignore the topbanner class.

As you can tell, I'm a newb at HTML and CSS.

Richter
06-10-2012, 03:11 PM
I still not understand what you try to solve, which image won't position as absoloute and which images is out of position ?
Do you mean background image of body, ScrollTop or Banner ?

Jemdt
06-10-2012, 03:50 PM
Sorry, I should've made this much clearer. You don't actually need most of that code mentioned.

Ignore the CSS and take a look at the HTML:


<img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" width="810px" height="50" alt="ScrollTop">

Basically, I've tried using the style="position....." tags to try and keep this image in a fixed position. However, whenever I zoom out a significant amount the image moves out of position. I'd like to know how to keep this image (and the banner for that matter) in a fixed position.

Richter
06-10-2012, 04:47 PM
Ok Jemdt, I fix some code and add a shell for help us adjust them easier.

Css

.Shell {
top:0; left:0; right:0; position:fixed; /*make it fix position*/
text-align:center; /*Make it show at center of page*/
}
.Shell>img {
width:100%; /*make it stretch, if you don't like this you can change 100% back to 810px*/
height:50px;
}

Html

<div class="Shell"><img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" alt="ScrollTop"> </div>

Jemdt
06-10-2012, 05:04 PM
Ok Jemdt, I fix some code and add a shell for help us adjust them easier.

Css

.Shell {
top:0; left:0; right:0; position:fixed; /*make it fix position*/
text-align:center; /*Make it show at center of page*/
}
.Shell>img {
width:100%; /*make it stretch, if you don't like this you can change 100% back to 810px*/
height:50px;
}

Html

<div class="Shell"><img src="http://www.rs-317.net/assets/img/layout/scroll/scroll765Top.gif" alt="ScrollTop"> </div>

Thanks for helping, but I've still got the same problem. I'd like the whole page to simply get smaller on the page (like the background does) not stretch out. For example, if you zoom out on this site, the resolution changes, but the site containers do not change in shape.

Richter
06-10-2012, 05:51 PM
No they not, because of you still not config css of your page to be responsive.
I suggest to find a book or web that teach you about responsive web design because your page need to be recreate entire page for it :)

Oh, for background image just replace "background-size:800px 500px;" to "background-size:cover;" and it will be fine :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum