All in a night's work.......

Printable View

11-11-2008, 03:40 AM
Black_Apalachi

All in a night's work.......

Some of you may have seen my first layout I posted a few days ago. Well that was my first ever attempt at designing a layout so I decided I may as well have ago at the coding side of things.

I'm very happy to say I've managed to code the layout all well and good (at the same time as writing a lab report from scratch which is due in tomorrow) :8.

I'm so pleased that it looks good in both IE and FF (I'll check other browsers later) but the onnnnnnnnnnnnnnly problem I have is this:

In IE the background doesn't appear :S. So... any ideas as to how to have such a luxury as a background in Internet bloody Explorer? :P

Edit: it's fit in Opera! :O
11-11-2008, 03:51 AM
UniqueHabbo

Have you put this in the <body></body> tags?

Code:

<body background="/images/bg.gif">

Changing the

Code:

"/images/bg.gif"

to your image's location?
11-11-2008, 03:52 AM
Black_Apalachi

Quote:

Originally Posted by UniqueHabbo

Have you put this in the <body></body> tags?

Code:

<body background="/images/bg.gif">

Changing the

Code:

"/images/bg.gif"

to your image's location?

Nope, I love you!!!!!! +rep.

Although, how come this isn't reuired in all the other browsers?

Edit: It doesn't make a difference :(.
11-11-2008, 04:02 AM
wsg14

Are you using CSS?
11-11-2008, 04:05 AM
Black_Apalachi

Quote:

Originally Posted by BOX!

Are you using CSS?

I was just asking myself that lmao... I'm afraid I don't know :( (this is my first time ever attempting any of this).

If I'm using divs would that mean yes?

Edit: I am using HTML. Does that mean I'm not using CSS or can you use both?...
11-11-2008, 04:07 AM
wsg14

Post your whole index.html code, then we'll find out.
11-11-2008, 04:09 AM
Black_Apalachi

Oh it says <style type="text/css"> so then yeah :).
11-11-2008, 04:15 AM
Jaysun

Do this

Quote:

body {
background-image: url(images/bg.gif);
background-repeat: repeat-x;
}

I feel like I missed something in that piece of code.
11-11-2008, 04:17 AM
wsg14

So yeah, you're using CSS. add the following to your CSS:

Code:

body { background-image: url(url goes here); }

Oh, Jaysun beat me to it.
11-11-2008, 04:21 AM
Black_Apalachi

Quote:

Originally Posted by Jaysun

Do this

I feel like I missed something in that piece of code.

I already have that in the "top half" as I call it. I need what ever goes in the <body></body> tags.
11-11-2008, 04:29 AM
wsg14

You don't need anything in the body tags as long as you use the code we provided. Post a link?
11-11-2008, 04:36 AM
Black_Apalachi

I don't have it online yet.

I already had this in (hence there's a background in every browser except IE):

body {padding: 0; margin: 9px; text-align:center; background: url("images/bg_sky_trees.gif") repeat-x;}

Btw can you have repeat values X and Y together?
11-11-2008, 04:39 AM
UniqueHabbo

hmm
this is a wild stab in the dark as i dont use CSS but...

Code:

<body> <div id="body"></div> </body>

Like I said, real small chance of it working lol...
11-11-2008, 04:43 AM
Black_Apalachi

Quote:

Originally Posted by UniqueHabbo

hmm
this is a wild stab in the dark as i dont use CSS but...

Code:

<body> <div id="body"></div> </body>

Like I said, real small chance of it working lol...

I assume I put that between the body tags already there? Nope didn't work :(.
11-11-2008, 04:45 AM
UniqueHabbo

Quote:

Originally Posted by Robald

I assume I put that between the body tags already there? Nope didn't work :(.

sorry then :P :(
11-11-2008, 04:47 AM
Black_Apalachi

Quote:

Originally Posted by UniqueHabbo

sorry then :P :(

Thanks for trying ;).

IE always has some stupid thing that it does for no reason at all.

One last chance, I'll post the whole thing like BOX! said before just in case there's anything wrong with it.

Quote:

<!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=utf-8" />
<title>Robald.net</title>
<style type="text/css">

body {padding: 0; margin: 9px; text-align:center; background: url("images/bg_sky_trees.gif") repeat-x;}

div#container {margin: 0 auto; width: 700px; text-align:left;}
div#banner {width: 171px; height: 443px; margin-bottom: auto; float: left; background: url("images/banner.gif");}
div#nav_top {width: 35px; height: 60px; margin-right: auto; float: left; background: url("images/nav_top.gif");}
div#main_top {width: 493px; height: 60px; margin-right: auto; float: left; background: url("images/main_top.gif");}
div#nav_1 {width: 35px; height: 71px; margin-right: auto; float: left; background: url("images/nav_1.gif");}
div#main_middle {width: 493px; height: 355px; margin-right: 1px; float: right; background: url("images/main_middle.gif");}
div#nav_2 {width: 35px; height: 71px; margin-right: auto; float: left; background: url("images/nav_2.gif");}
div#nav_3 {width: 35px; height: 71px; margin-right: auto; float: left; background: url("images/nav_3.gif");}
div#nav_4 {width: 35px; height: 71px; margin-right: auto; float: left; background: url("images/nav_4.gif");}
div#nav_5 {width: 35px; height: 76px; margin-right: auto; float: left; background: url("images/nav_5.gif");}
div#main_bottom {width: 493px; height: 28px; margin-right: 1px; float: right; background: url("images/main_bottom.gif");}
div#nav_bottom {width: 35px; height: 23px; margin-right: auto; float: left; background: url("images/nav_bottom.gif");}
div#blank {clear:left;}

div#container_2 {margin: 0 auto; width: 700px; text-align:left;}
div#spacer_1 {width: 700px; height: 15px; margin-right: auto; background: url("images/spacer_1.gif");}
div#headlines_top {width: 514px; height: 39px; margin-right: auto; float: left; background: url("images/headlines_top.gif");}
div#radio_top {width: 171px; height: 39px; margin-right: auto; float: right; background: url("images/radio_top.gif");}
div#headlines_bottom {width: 514px; height: 90px; margin-right: auto; float: left; background: url("images/headlines_bottom.gif");}
div#spacer_2 {width: 15px; height: 114px; margin-right: auto; float: left; background: url("images/spacer_2.gif");}
div#radio_bottom {width: 171px; height: 90px; margin-right: auto; float: right; background: url("images/radio_bottom.gif");}

</style>
</head>

<body>

<div id="container">
<div id="banner"></div>
<div id="nav_top"></div>
<div id="main_top"></div>
<div id="nav_1"></div>
<div id="main_middle"></div>
<div id="nav_2"></div>
<div id="nav_3"></div>
<div id="nav_4"></div>
<div id="nav_5"></div>
<div id="main_bottom"></div>
<div id="nav_bottom"></div>
<div id="blank"></div>
</div>

<div id="container_2">
<div id="spacer_1"></div>
<div id="headlines_top"></div>
<div id="radio_top"></div>
<div id="headlines_bottom"></div>
<div id="spacer_2"></div>
<div id="radio_bottom"></div>
</div>

</body>
</html>
11-11-2008, 04:54 AM
wsg14

Your CSS:

Code:

body {padding: 0; margin: 9px; text-align:center; background: url("images/bg_sky_trees.gif") repeat-x;}

Proper CSS:

Code:

body {padding: 0; margin: 9px; text-align:center; background: url(images/bg_sky_trees.gif) repeat-x;}

You don't need quotations.
11-11-2008, 04:59 AM
Jaysun

BOX! Beat me to it this time. Also you should place your css in another file as an external style sheet.
11-11-2008, 05:01 AM
Black_Apalachi

I tried canging the background image but it still didn't work, then I tried an animated one I have (the rain one on Habbo Homes) and that works!!

Quote:

Originally Posted by BOX!

Your CSS:

Code:

body {padding: 0; margin: 9px; text-align:center; background: url("images/bg_sky_trees.gif") repeat-x;}

Proper CSS:

Code:

body {padding: 0; margin: 9px; text-align:center; background: url(images/bg_sky_trees.gif) repeat-x;}

You don't need quotations.

That made no difference :(. Thanks for trying, I'll just stick with the rain background for now :P.

Edit: Oh I found another that works. It seems to depend solely on the image (even though they're all .gifs) :S

In fact, the only two that won't work are the trees/sky one and the forrest/field one.
11-11-2008, 05:04 AM
Jaysun

Oh alright. Well you can go on http://w3schools.com and htmldog.com and html.net for some good coding tutorials that can help you. =]
11-11-2008, 05:13 AM
Black_Apalachi

Quote:

Originally Posted by Jaysun

Oh alright. Well you can go on http://w3schools.com and htmldog.com and html.net for some good coding tutorials that can help you. =]

Cool, thanks :)

+rep to everyone for helping :D
11-11-2008, 05:22 AM
J0SH

Oh and btw it's a very nice simple clean layout, very attractive to the eye, just change the font on the nav buttons :P
11-11-2008, 07:13 AM
UniqueHabbo

Quote:

Originally Posted by Robald

I tried canging the background image but it still didn't work, then I tried an animated one I have (the rain one on Habbo Homes) and that works!!

That made no difference :(. Thanks for trying, I'll just stick with the rain background for now :P.

Edit: Oh I found another that works. It seems to depend solely on the image (even though they're all .gifs) :S

In fact, the only two that won't work are the trees/sky one and the forrest/field one.

Are you sure in your coding it's not .gif and the file is .GIF. It does make a difference.
11-11-2008, 12:43 PM
Black_Apalachi

Quote:

Originally Posted by Josh

Oh and btw it's a very nice simple clean layout, very attractive to the eye, just change the font on the nav buttons :P

Yep that's something I will be doing as most peoplehave made the same comment :). Thanks.

Quote:

Originally Posted by UniqueHabbo

Are you sure in your coding it's not .gif and the file is .GIF. It does make a difference.

I didn't know that, no. However trying it didn't work.
11-11-2008, 04:46 PM
Meti

i can't see any link?

Please post one =)
11-11-2008, 06:16 PM
Black_Apalachi

Quote:

Originally Posted by Meti

i can't see any link?

Please post one =)

Hold your horses!!! I don't have any hosting/domain yet :P.

I'm gonna look for a nice free one to upload to for now though ;).

Edit: Which of the three packages on this site do you think would be best for a small fansite just starting off? The "Static" package has no ads but obviously offers less. Do you think I'd need the "Advanced" package or just stick with the "Static" package?

Edit again: I found this in their T&Cs, do you think it would apply to Habbo? Look at the part I highlighted...

Quote:

» Anime : Copyrighted anime is not allowed on our servers. This includes variations of anime including manga, hentai etc. Also inlcudes any sites which provide links to information about such material. If you created the material yourself, you may host the content on your site.