set up a nine part background

scipets2

New Member
Messages
28
Reaction score
1
Points
0
Hi, I download a royalty free theme however I can't get it to work properly. I would like the corners to be in the correct corner the sides top and bottom to tile as much as necessary and the middle to be solid colour ehere my content will go, any help?

I have put the images in a zip file if it helps.


NOTE: The code I would prefer to be in HTML, however I will use PHP if necessary
 

Attachments

  • bg.zip
    17.1 KB · Views: 5

Zubair

Community Leader
Community Support
Messages
8,766
Reaction score
305
Points
83
I will Give it a try.

Post the website URL if you already uploaded it..
 
Last edited:

scipets2

New Member
Messages
28
Reaction score
1
Points
0
Following my last thread, I finally got the background working, however, there is one minor fault with the code. Is there anyway to get the sides and top to fit to the content not to whe windows size, alternatively You could tell me how to fix the background. As I do have some long/ soon-to-be long pages on my site, eg. the homepage.

Thanks
 

garikr

New Member
Messages
46
Reaction score
0
Points
0
Find the style for the body
Code:
 body{
    background-color:#434142;
    position:absolute;
    width:100%;
    height:100%;
    min-width:640px;
    min-height:480px;
   }
and erase the line height:100%
Basically that line sets the hight of the body to 100% of the hight of the screen (since the body is the child of the screen ). Without it the body will stretch according to how much you'll stuff in there. The reason it was there in the first place was because I didn't have enough content, so the bottom corners would've been in the middle of the screen. Hope that makes sense to you.
Keep on coding. :)
P.S.
Eventually you should move your styles to the separate file/files so if you have different pages with the same styles you won't have to type them in over and over.
P.S.S.
Try changing min-height to min-height:100% that should set it to the height of the screen or more. I think that should work.
Edit:
In case you don't know how to put styles into separate file:
take everything inside the <style> </style> tags and post it into the new file named "style_main.css"(or whatever you choose to call it). Replace the <style> tags with:
HTML:
<link rel="stylesheet" type="text/css" href="design/style_main.css"/>
were "design/style_main.css" is the directory/filename of your stylesheet. This way when you change something you changing it in one place, instead of going to every page.
 
Last edited:

scipets2

New Member
Messages
28
Reaction score
1
Points
0
I hope I'm not going too far with this, but when I was attempting to access my site on Internet Explorer it showed the corner images however the sides top and bottom were not tiled and the contend overflowed. A IE friendly code addition would be much appreciated

Thanks,
 

garikr

New Member
Messages
46
Reaction score
0
Points
0
here it is

I think I got it to work in IE6. Took some figuring out and some not too proper code. But honestly, I'm surprised it worked at all the way it was. Promise me you are gona look into what I'm about to say... here it goes:
The html structure is
HTML:
<html><head></head><body></body></html>
NO presentational stuff goes between <head></head> tags. This is the place for initialization, the things like <meta> tags,<title></title>, scripts and styles go here. nothing that can be displayed on the screen goes into <head>, that stuff goes between the <body> </body> tags. You MUST close all the tags. You CAN'T have <div> without </div>. If you opened the first tag, and then the second you MUST close the second one before the first.<div><span></span></div> and not <div><span></div></span>. Tags like <br/>, <img src="aaa"/> and such, MUST have / before the >. You should find out about code validation. Some tags, such us <font> are considered obsolete. HTML tags should be used for structure. Things like size, color, position and much more should go into stylesheets. You should read up on all of this. I'm by no means an expert, so if I'm saying something wrong, somebody please correct me.
Keep on coding. :)
 

Attachments

  • index.html
    6.9 KB · Views: 54
Last edited:

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Re: here it is

I'm by no means an expert, so if I'm saying something wrong, somebody please correct me.
Looks nicely succinct. The advice is better than a complete description, as the cases that aren't covered aren't useful and would only cause problems.

For more on what garikr mentions, check out HowToCreate's "HTML tutorial - The Basics".
 
Top