PDA

View Full Version : All in a night's work.......


Black_Apalachi
11-11-2008, 03:40 AM
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
UniqueHabbo
11-11-2008, 03:51 AM
Have you put this in the <body></body> tags?


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

"/images/bg.gif"
to your image's location?
Black_Apalachi
11-11-2008, 03:52 AM
Have you put this in the <body></body> tags?


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

"/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 :(.
wsg14
11-11-2008, 04:02 AM
Are you using CSS?
Black_Apalachi
11-11-2008, 04:05 AM
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?...
wsg14
11-11-2008, 04:07 AM
Post your whole index.html code, then we'll find out.
Black_Apalachi
11-11-2008, 04:09 AM
Oh it says <style type="text/css"> so then yeah :).
Jaysun
11-11-2008, 04:15 AM
Do this


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

I feel like I missed something in that piece of code.
wsg14
11-11-2008, 04:17 AM
So yeah, you're using CSS. add the following to your CSS:

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

Oh, Jaysun beat me to it.
Black_Apalachi
11-11-2008, 04:21 AM
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.
wsg14
11-11-2008, 04:29 AM
You don't need anything in the body tags as long as you use the code we provided. Post a link?
Black_Apalachi
11-11-2008, 04:36 AM
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?
UniqueHabbo
11-11-2008, 04:39 AM
hmm
this is a wild stab in the dark as i dont use CSS but...



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


Like I said, real small chance of it working lol...
Black_Apalachi
11-11-2008, 04:43 AM
hmm
this is a wild stab in the dark as i dont use CSS but...



<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 :(.
UniqueHabbo
11-11-2008, 04:45 AM
I assume I put that between the body tags already there? Nope didn't work :(.
sorry then :P :(
Black_Apalachi
11-11-2008, 04:47 AM
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.


<!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>
wsg14
11-11-2008, 04:54 AM
Your CSS:

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

Proper CSS:

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

You don't need quotations.
Jaysun
11-11-2008, 04:59 AM
BOX! Beat me to it this time. Also you should place your css in another file as an external style sheet.
Black_Apalachi
11-11-2008, 05:01 AM
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!!


Your CSS:

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

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.
Jaysun
11-11-2008, 05:04 AM
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. =]
Black_Apalachi
11-11-2008, 05:13 AM
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
J0SH
11-11-2008, 05:22 AM
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
UniqueHabbo
11-11-2008, 07:13 AM
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.
Black_Apalachi
11-11-2008, 12:43 PM
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.


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.
Meti
11-11-2008, 04:46 PM
i can't see any link?

Please post one =)
Black_Apalachi
11-11-2008, 06:16 PM
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...


ยป 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.

Want to hide these adverts? Register an account for free!