9homie 05-13-2008, 07:49 PM Hello.
When I am coding, I want the background image to stay where it is and then I can type in it.
For an example of what I mean, look at this:
www.pokemonbattlearena.net, then you can see a grey box with ALL the writing, well the writing STAYS in there when you scroll up and down, and it also fits all screen resolutions.
So I need to be able to do that on my webpage. Could someone please post the code.
Thank You
9homie
jcdevelopment 05-13-2008, 08:00 PM #wrapper {
background-image:url(whatever.gif);
background-repeat:repeat;
width:800px;
margin:0 auto;
}
once you start writing data in that CSS property it will embed and not move!
is that what u were looking for?
9homie 05-13-2008, 08:01 PM Sort of. Just to ask. Will that be like the site that i said?
Also when it says repeat, WILL it repeat the image loads?
9homie 05-13-2008, 08:03 PM <html>
<head>
<title>Pokémon Oracle</title>
<script>
//body {background-image:url(background2.png); background-attachment: fixed; background-repeat: no-repeat; position: absolute;}
</script>
<style>
wrapper {
background-image:url(background2.png);
background-repeat:repeat;
width:800px;
margin:0 auto;
}
.links {position:absolute; left:120%; top:20%}
.title {position:absolute; left:50%; top:5%; margin-right: 10%; width: 826%; height: 184%;}
.explanation {top:300%;}
.newstitle {top:100%;}
.news {top:200%;}
</style>
</head>
<body leftmargin="50" rightmargin="50" bgcolor="#780000>
<hr color="red" width="95%">
<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
<td><b><h3>Join The Game!</h3></b><hr color="red"><br />
<center><a href="register.php">Register</a><br />
<a href="login.php">Login</a></center><br />
<b><h3>Other Features</h3></b><hr color="red"><br />
<center>
Home/News<br />
News Archive<br />
Forums<br />
Chat Box<br />
</td>
</tr>
</table>
<p class="title"><b><h1>Pokémon Oracle</h1></b></p><br /><br /><br /><br /><br /><br /><br />
<p class="explanation"><font face="comic sans ms">Welcome to Pokémon Oracle, have you ever thought
'I really want to play<br /> Pokémon online!' well now you can!<br /><br />
Just come here and all your Pokémon needs will be gone!<br />
Pokémon Oracle is a NEW online pokemon game where you can train and<br /> catch
as many pokemon as you can!<br />
The best thing about all of this, is that it is absolutely
FREE!<br />
Trainers from all over the world come here to train their pokemon and have<br /> a load of fun!
<br /><br />
When you sign up to Pokémon Oracle, you can experence all the things about<br /> being
a pokémon trainer.<br /><br />
So come on in and have some fun training pokémon.</font></p><br /><br />
<center>
<b><h1><font face="comic sans ms"><u><p class="newstitle">News</p></u></font></h1></b><br />
</center>
<p class="news"><b>10th May 2008</b><br />
Pokémon Oracle was first thought of.<br /><br />
<b>11th May 2008</b><br />
The first building process of Pokémon Oracle started.<br /><br /></p>
</body>
</html>
That is what i have got at the moment, but the background is all black, and it is not meant to be.
jcdevelopment 05-13-2008, 08:04 PM Yes it is like the site.
No what it does is it will repeat the image to the amount of content that is added. It has a fixed width to it, and it will repeat all the way down!
jcdevelopment 05-13-2008, 08:06 PM <div id="wrapper">
<hr color="red" width="95%">
<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
<td><b><h3>Join The Game!</h3></b><hr color="red"><br />
<center><a href="register.php">Register</a><br />
<a href="login.php">Login</a></center><br />
<b><h3>Other Features</h3></b><hr color="red"><br />
<center>
Home/News<br />
News Archive<br />
Forums<br />
Chat Box<br />
</td>
</tr>
</table>
<p class="title"><b><h1>Pokémon Oracle</h1></b></p><br /><br /><br /><br /><br /><br /><br />
<p class="explanation"><font face="comic sans ms">Welcome to Pokémon Oracle, have you ever thought
'I really want to play<br /> Pokémon online!' well now you can!<br /><br />
Just come here and all your Pokémon needs will be gone!<br />
Pokémon Oracle is a NEW online pokemon game where you can train and<br /> catch
as many pokemon as you can!<br />
The best thing about all of this, is that it is absolutely
FREE!<br />
Trainers from all over the world come here to train their pokemon and have<br /> a load of fun!
<br /><br />
When you sign up to Pokémon Oracle, you can experence all the things about<br /> being
a pokémon trainer.<br /><br />
So come on in and have some fun training pokémon.</font></p><br /><br />
<center>
<b><h1><font face="comic sans ms"><u><p class="newstitle">News</p></u></font></h1></b><br />
</center>
<p class="news"><b>10th May 2008</b><br />
Pokémon Oracle was first thought of.<br /><br />
<b>11th May 2008</b><br />
The first building process of Pokémon Oracle started.<br /><br /></p>
</div>
I messed up on the code, look back at my example!
You just need to wrap your content in the div
9homie 05-13-2008, 08:11 PM I am trying to put the image in as a background like you said. But it just all turns red and doesn't do the image i did.
I wrote it:
wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:800px;
margin:0 auto;
}
Is that right? Should it work?
jcdevelopment 05-13-2008, 08:14 PM #wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:800px;
margin:0 auto;
}
i missed the #, so try it with that in your CSS
9homie 05-13-2008, 08:19 PM 1) I forgot to take away the actual background color, that is why it kept going red.
2) It doesn't work. It makes the thing go into the middle. BUT it makes the border on the right side, GONE... I need that back...
jcdevelopment 05-13-2008, 08:25 PM #wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:800px;
}
9homie 05-13-2008, 08:28 PM Ok then, i have done that.
When i have done... I need the rest of the white background to be the same color as the pic border.
When i set a body bgcolor, will it delete my pic?
<style>
#wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}
</style>
<body bgcolor="red">
</body>
What will that do to it?
jcdevelopment 05-13-2008, 08:29 PM just make the body red!
9homie 05-13-2008, 08:33 PM Ok then.
I think this is the last thing, but there might be more.
I have got everything into the box and then i can't move the writing on the left, more to the right... How do i do that?
jcdevelopment 05-13-2008, 08:36 PM well it depends you could do this
<p style="padding-left:20px;">sdggdfgdfgdggdfg</p>
9homie 05-13-2008, 08:40 PM Nope, that doesn't work for me....
jcdevelopment 05-13-2008, 08:44 PM <p style="margin-left:20px;">sdggdfgdfgdggdfg</p>
9homie 05-14-2008, 07:17 AM No, that doesn't work either. I need something that will work.
At the moment as well my website background, when i put it on the web, goes all red.
The background image doesn't come.
Also the writing is still stuck on the left of my background image.
jcdevelopment 05-14-2008, 03:12 PM not sure whats going on or if its being done right.
Post the code with everything you have done, including CSS and html on one page. I will take a look at it.
9homie 05-14-2008, 04:40 PM Well i actually made the text move to the middle. So that was fine.
So now i can't move the title...
Here is the code:
<html>
<head>
<title>Pokémon Oracle</title>
<script>
//body {background-image:url(background2.png); background-attachment: fixed; background-repeat: no-repeat; position: absolute;}
</script>
<style>
#wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}
.links {position:absolute; left:75%; top:20%; text-align:right;}
.title {left:50%;}
.explanation {top:300%; text-align:center;}
.newstitle {top:100%;}
.news {top:200%; text-align:center;}
</style>
</head>
<body leftmargin="100" rightmargin="50" bgcolor="#740000">
<div id="wrapper">
<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
<td><b><h3>Join The Game!</h3></b><hr color="red"><br />
<center><a href="register.php">Register</a><br />
<a href="login.php">Login</a></center><br />
<b><h3>Other Features</h3></b><hr color="red"><br />
<center>
Home/News<br />
News Archive<br />
Forums<br />
Chat Box<br />
</td>
</tr>
</table>
<p class="title"><b><h1>Pokémon Oracle</h1></b></p><br /><br /><br /><br /><br /><br /><br />
<p class="explanation" "margin-left:20px;"><font face="comic sans ms">Welcome to Pokémon Oracle, have you ever thought
'I really want to play<br /> Pokémon online!' well now you can!<br /><br />
Just come here and all your Pokémon needs will be gone!<br />
Pokémon Oracle is a NEW online pokemon game where you can train and<br /> catch
as many pokemon as you can!<br />
The best thing about all of this, is that it is absolutely
FREE!<br />
Trainers from all over the world come here to train their pokemon and have<br /> a load of fun!
<br /><br />
When you sign up to Pokémon Oracle, you can experence all the things about<br /> being
a pokémon trainer.<br /><br />
So come on in and have some fun training pokémon.</font></p><br /><br />
<center>
<b><h1><font face="comic sans ms"><u><p class="newstitle">News</p></u></font></h1></b><br />
</center>
<p class="news"><b>10th May 2008</b><br />
Pokémon Oracle was first thought of.<br /><br />
<b>11th May 2008</b><br />
The first building process of Pokémon Oracle started.<br /><br /></p>
</div>
</body>
</html>
jcdevelopment 05-14-2008, 05:01 PM you didnt put the style in your html
before
<p class="explanation" "margin-left:20px;">
after
<p class="explanation" style="margin-left:20px;">
it works then!
jcdevelopment 05-14-2008, 05:07 PM if you want also, upload the background image and i can make sure that it is working correctly.
9homie 05-14-2008, 05:39 PM How do i do that?
jcdevelopment 05-14-2008, 05:55 PM when you do
"post reply"
scroll down and look for "manage my attachments" and upload the image.
Then i can grab it and see whats wrong!
9homie 05-14-2008, 05:59 PM This is the background :D
jcdevelopment 05-14-2008, 06:48 PM Its doing exactly what it needs to be doing. You arent getting the full picture at the bottom because the contten doesnt expan that far down. Othere then that its doing what i think you want it too do.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Pokémon Oracle</title>
<script>
//body {background-image:url(background2.png); background-attachment: fixed; background-repeat: no-repeat; position: absolute;}
</script>
<style>
#wrapper {
background-image:url('background2.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}
.links {position:absolute; left:75%; top:20%; text-align:right;}
.title {left:50%;}
.explanation {top:300%; text-align:center;}
.newstitle {top:100%;}
.news {top:200%; text-align:center;}
</style>
</head>
<body leftmargin="100" rightmargin="50" bgcolor="#740000">
<div id="wrapper">
<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
<td><b><h3>Join The Game!</h3></b><hr color="red"><br />
<center><a href="register.php">Register</a><br />
<a href="login.php">Login</a></center><br />
<b><h3>Other Features</h3></b><hr color="red"><br />
<center>
Home/News<br />
News Archive<br />
Forums<br />
Chat Box<br />
</td>
</tr>
</table>
<p class="title"><b><h1>Pokémon Oracle</h1></b></p><br /><br /><br /><br /><br /><br /><br />
<p class="explanation" style="margin-left:20px;"><font face="comic sans ms">Welcome to Pokémon Oracle, have you ever thought
'I really want to play<br /> Pokémon online!' well now you can!<br /><br />
Just come here and all your Pokémon needs will be gone!<br />
Pokémon Oracle is a NEW online pokemon game where you can train and<br /> catch
as many pokemon as you can!<br />
The best thing about all of this, is that it is absolutely
FREE!<br />
Trainers from all over the world come here to train their pokemon and have<br /> a load of fun!
<br /><br />
When you sign up to Pokémon Oracle, you can experence all the things about<br /> being
a pokémon trainer.<br /><br />
So come on in and have some fun training pokémon.</font></p><br /><br />
<center>
<b><h1><font face="comic sans ms"><u><p class="newstitle">News</p></u></font></h1></b><br />
</center>
<p class="news"><b>10th May 2008</b><br />
Pokémon Oracle was first thought of.<br /><br />
<b>11th May 2008</b><br />
The first building process of Pokémon Oracle started.<br /><br /></p>
</div>
</body>
</html>
9homie 05-14-2008, 06:49 PM I know that.
When i go on the actual website, the background doesn't come up.
Look:
http://pokemonoracle.biz.tc/
and you can see the background image that i showed you DOESN'T come up...
jcdevelopment 05-14-2008, 06:54 PM this what you have now
#wrapper {
background-image:url('background4.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}
change it to
#wrapper {
background-image:url('background2.png');
background-repeat:repeat;
width:1000px;
margin:0 auto;
}
You have #4, you gave me the second one
9homie 05-14-2008, 06:58 PM DONE...
So now, what should i do to get it right?
jcdevelopment 05-14-2008, 07:00 PM well, is it where you want it? Centered?
9homie 05-14-2008, 07:02 PM The image should be there, it is there when i open it NOT on the internet, but it doesn't work when it IS on the web...
jcdevelopment 05-14-2008, 07:08 PM have you uploaded the image into the folder where the html file is. Is it in the root folder?
9homie 05-14-2008, 07:09 PM Yes...
jcdevelopment 05-14-2008, 07:16 PM copy and paste what i uploaded and over write your whole html and see what happens.
9homie 05-14-2008, 07:21 PM Nope. Doesn't work...
jcdevelopment 05-14-2008, 07:27 PM the only thing i can think of is that its not in the right folder... lets do some error checking
go into your html <body>
and right above any content do this
<img src="background2.png" />
so it will look like this
<body bgcolor="#740000">
<img src="background2.png" />
<div id="wrapper">
<table border="1" align="right" bgcolor="#CCCCCC" class="links">
<tr>
let me know when its up
9homie 05-14-2008, 07:48 PM No, that doesn't work, because it makes another image and so 2 of the big backgrounds are now there, all the writing is on the bottom one.
jcdevelopment 05-14-2008, 07:49 PM no, i need you to put that up so i can look at something, just post that code in your html, i know it will mess things up, but i need to trouble shoot something.
9homie 05-14-2008, 08:30 PM Done that now :D Look at troubleshoot away :D
jcdevelopment 05-14-2008, 08:42 PM ok, just as i thought. i't cant find the picture. Which means its the wrong path to the image. You need to find out where that image is on the server. Look to see if its in the same folder or in a different one.
Look at the web page, see the big red "X".. right click on it and go down to "properties" Then see where its looking for it.
9homie 05-14-2008, 08:50 PM I can't, i use a MAC... How do i find out?
jcdevelopment 05-14-2008, 08:52 PM Well let me ask you, what are you using to upload your html and all of that great stuff? Which ftp program?
9homie 05-14-2008, 08:54 PM Smultron
That is for mac by the way... SOON, i will have Dreamweaver
jcdevelopment 05-14-2008, 08:57 PM ok, so you did upload the picture in the same folder as the html file?
9homie 05-14-2008, 08:58 PM Yes i did.
jcdevelopment 05-14-2008, 09:05 PM That doesnt make sense... ok try this, create a folder loacaly and lets call it
gfx
Then place the image
background2.png
upload it.
now go into the html and change
<img src="background2.png" />
to
<img src="gfx/background2.png" />
Then upload the html file.
EDIT* Just noticed its my 1,000 post, yeah me!!!
9homie 05-15-2008, 07:17 AM Nope, I did it and it comes up with the same question box thing...
karlmeh 05-15-2008, 09:33 AM Hi
well for this i 'll suggest you to use dreamweaver or edit plus.....
well this is my first post so......i just join this forum
thanks
Karl Meh
jcdevelopment 05-15-2008, 03:09 PM Ok, so we know for a fact that the main problem is that the image is not coming up at all. So thats a starting point. We need to figure out why the path is broken or why the image is not uploading to your server.
If you trust me enough, and its fine if you dont, but Personal Message me your username and password to your ftp and i can take a look. Otherwise we can find another way. I understand now a days people cant trust anyone on the web but thats the only thing i can think of right now.. then you can change ur pswd to something else if you want.
9homie 05-15-2008, 04:27 PM Sorry, i can't trust you.
So yes, we know that the image won't work, but it is a png, so it SHOULD work as a background. But it doesn't, so how do we make it work...
I have saved it into that folder you said and it still has the question mark box.
So What should we do now?
jcdevelopment 05-15-2008, 04:56 PM ok, go into the editor where you made the image and save it as a gif instead of a .png
(dont worry i dont trust me either)
9homie 05-15-2008, 06:04 PM No. Gif and PNG don't work...
jcdevelopment 05-15-2008, 06:25 PM Ok, i dont know whats going on, put that img src tag back into the body again with the .gif as the background.
9homie 05-15-2008, 06:38 PM I did and it didn't even work on the preview...
jcdevelopment 05-15-2008, 06:41 PM Im not seeing it in the code, did you upload it? Im not sure what its doing just put it in the body section again and i will look at it. I have an idea.
9homie 05-15-2008, 07:13 PM Uploaded it now...
Tell me what you think is wrong :D
jcdevelopment 05-15-2008, 07:26 PM i have no other solutions, the image is not on the server. put this in that img src so you can see that it does work
http://i246.photobucket.com/albums/gg86/jcdevelopment/miller.jpg
so it will look like this
<img src="http://i246.photobucket.com/albums/gg86/jcdevelopment/miller.jpg">
That way u see that the code is right and that the image path is no good or the image is not on the server.
|
|
