TrueGrave Posted May 13, 2010 Share Posted May 13, 2010 background-image: url(../HTML/x.jpg);background-repeat: no-repeat;Is what I have as the css background, and it fits well. The only problem is that it doesn't take up the entire screen so there is a white space when fully maximized.And is there a way to make is that the screen gets smaller instead of it over lapping the site itself when messing around with the browser size.Thanks in advance. Link to comment Share on other sites More sharing options...
Synook Posted May 13, 2010 Share Posted May 13, 2010 You can't resize the background dynamically - you'll have to make it tile or use an image tag acting as a pseudo-background. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 Did the solution I gave you yesterday not work? What do you have? Link to comment Share on other sites More sharing options...
TrueGrave Posted May 13, 2010 Author Share Posted May 13, 2010 I got it to work (with your help jkloth) perfectly,but ._.now the banner and the navigation bar is completely gone. I don't know if it was maybe a mistype on my code but I can't seem to get it back, the page is basically my background, and nothing on it. { padding:10px; font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#bg_img {position: fixed;top: 0;left: 0;z-index: 0;height: 100%;width: 100%;}li{display:inline;}#nav {width: 45%;margin: 0 auto;}#nav li {float: left;}#nav li a {text-decoration:none;padding:0px 0;width:80px;background:silver;color:black;float:left;font: 100% "Arial"} <!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html><head><title> Hunterz </title><link rel="stylesheet" href="mystyle.css"></title></head><body> <img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"></div><div id="banner"></div><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 I wonder...I think maybe all your stuff is behind the image. I think the z-index is acting goofy. Try putting all your content (but not the img tag for your background) inside a content wrapper div and set the z-index of the wrapper to something like 5 to bring it in front of your background image: <!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html>...<body><img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"><div id="banner"></div><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></body></html> I see you already have a <div id='wrapper'> so I just moved the ending tag to include everything on your page.Anyway here's the CSS that should go with that wrapper div: #wrapper { z-index: 5;} Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 I thought z-indexing only worked on absolutely, relatively, or fixed positioned elements. Would you have to give the other div's positioning attributes as well? Link to comment Share on other sites More sharing options...
TrueGrave Posted May 13, 2010 Author Share Posted May 13, 2010 I did exactly that, and what it did was create some white border around the background :Sthe border and navi is still not visible either. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 I did exactly that, and what it did was create some white border around the background :Sthe border and navi is still not visible either.Did you try changing the position of the div as scientist suggested above?Edit: relative would be best, as it won't mess up anything with the layout. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 13, 2010 Share Posted May 13, 2010 why add relative and z-index to any other element? when you can just set the image to z-index:-1; it has positioning and its a background image.Edit: small note, IE6 not really happy with the use of position: fixed; Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 why add relative and z-index to any other element? when you can just set the image to z-index:-1; it has positioning and its a background image.Edit: small note, IE6 not really happy with the use of position: fixed;I was under the impression that negative z-indexes are bad news for cross browser compatibility. Is that not the case?And who cares about IE6? IE6 should be put out of its misery, go the way of Old Yeller, if you know what I mean. Link to comment Share on other sites More sharing options...
TrueGrave Posted May 13, 2010 Author Share Posted May 13, 2010 No matter what I do it stays the same (background with white border on the back)Maybe I did something wrong here? <!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html>...<body><img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"><div id="banner"><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></body></html> body { padding-right: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: red; background-image:url('Hunterz Background.jpg'); background-repeat:no-repeat; }h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } { margin:0px auto; padding:0px; color:red; background:white; } body { padding:10px; font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#wrapper { z-index: 3;}#bg_img {position: relative;top: 0;left: 0;z-index: 0;height: 100%;width: 100%;}li{display:inline;}#nav {width: 45%;margin: 0 auto;}#nav li {float: left;}#nav li a {text-decoration:none;padding:0px 0;width:80px;background:silver;color:black;float:left;font: 100% "Arial"} Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 You're missing the closing </div> tags on these two:<div id="banner"><div id="nav"> <div id="wrapper"><div id="banner"><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div> <!-- End of nav div; must contain all of the <ul> --></div> <!-- End of banner div; contains nav div as well as whatever else you want in the banner --></div> <!-- End of wrapper div; contains all of your content --> Edit: I just noticed your <ul> has an incomplete id. Link to comment Share on other sites More sharing options...
TrueGrave Posted May 13, 2010 Author Share Posted May 13, 2010 Did that, still the same.Argh I don't even know what caused this problem.Ah wow, how did I not notice that. I think it's because I was trying to do something.. but I forgot what Lol.even if I use it as <ul>/ </u> it still displays the same way. Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 is there something in head section? You only keep showing it as ... Link to comment Share on other sites More sharing options...
dsonesuk Posted May 13, 2010 Share Posted May 13, 2010 z-index using - seems to be problem if used on container, i've used it on few occasions with no problems, in all browsers.display:block; is required try this <!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html><style type="text/css">body { padding:10px; font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#bg_img {position: fixed;top: 0;left: 0;z-index: 0;height: 100%;width: 100%;z-index:-1;}li{display:inline;}#nav {width: 45%;margin: 0 auto;}#nav li {float: left;}#nav li a {text-decoration:none;padding:0px 0;width:80px;background:silver;color:#fff;float:left;font: 100% "Arial";display:block;}</style></head><body><img src="AVP-Predator_1024.jpg" id="bg_img"/><div id="wrapper"></div><div id="banner"></div><div id="nav"><ul id="menu"><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></div></div> </body></html> Link to comment Share on other sites More sharing options...
TrueGrave Posted May 13, 2010 Author Share Posted May 13, 2010 Sorry about that. <!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html><head><title> Hunterz </title><link rel="stylesheet" href="mystyle.css"></title></head><body> <img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"><div id="banner"></div><div id="nav"><ul id='><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 Scratch what I had. I see the real problem:body {padding:10px;font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}You have a 10px padding on the body which is going to create space around anything within it. Set padding to 0px; and then set the padding of your wrapper div to 10px instead. In a situation like this you want to treat the wrapper div as the body element. So anything you want to apply CSS-wise to the body should be applied to the wrapper instead. Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 I often find it best to leave styles out of <body> and <html>. Generally, if I need to style something, its already in a tag, and can be targeted that way. Well, save background color/img, that I would do on the body.kinda similar in concept to avoiding globals when programming. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2010 Share Posted May 13, 2010 I often find it best to leave styles out of <body> and <html>.I'll agree with you on the <html> tag but <body> not quite so much. Sure there are lots of things that I wouldn't put in the body, but I often have padding in the body, or background stuff as you mention. Actually, now that I think about it, that's about all I use, so I guess you're right! Link to comment Share on other sites More sharing options...
thescientist Posted May 13, 2010 Share Posted May 13, 2010 I'll agree with you on the <html> tag but <body> not quite so much. Sure there are lots of things that I wouldn't put in the body, but I often have padding in the body, or background stuff as you mention. Actually, now that I think about it, that's about all I use, so I guess you're right! ba-dump-ba! Link to comment Share on other sites More sharing options...
TrueGrave Posted May 13, 2010 Author Share Posted May 13, 2010 So then it should look like this? body { padding:0px; font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#wrapper { padding:10px;}If so, the problem remains.and now the navigation bar is at the bottom of the page..lol what the ###### caused all this >.< Link to comment Share on other sites More sharing options...
dsonesuk Posted May 14, 2010 Share Posted May 14, 2010 remove one of the two closing title tags you have from html page, and in the css file, move padding from body to wrapper should look like thisbody {font:76% "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;}#banner {height: 110px;width: 840px;margin: 0px auto;}#bg_img {position: fixed;top: 0;left: 0;height: 100%;width: 100%;z-index:-1;}li{display:inline;}#nav {width: 45%;margin: 0 auto;}#nav li {float: left;}#nav li a {text-decoration:none;padding:0px 0;width:80px;background:silver;color:#fff;float:left;font: 100% "Arial";#wrapper{padding:10px;}and html page like this<!DOCTYPE html PUBLIC "-//W3C DTD HTML 4.01//EN"><html><head><title> Hunterz </title><link rel="stylesheet" href="mystyle.css"></head><body><img src="Hunterz Background.jpg" id="bg_img"/><div id="wrapper"><div id="banner"></div><div id="nav"><ul id="menu"><li><a href="mainpage.htm">Home</a></li><li><a href="register.htm">Register</a></li><li><a href="story.htm">Story</a></li><li><a href="characters.htm">Characters</a></li><li><a href="forums.htm">Forums</a></li></ul></div></div></body></html> Link to comment Share on other sites More sharing options...
TrueGrave Posted May 14, 2010 Author Share Posted May 14, 2010 Truely impressive work dsonesukYou fixed the background and the navigation bar perfectly.Now the only problem... (sigh)is the banner, it's not showing up.I set up my style and html exactly the way you did Link to comment Share on other sites More sharing options...
dsonesuk Posted May 14, 2010 Share Posted May 14, 2010 but, but....its empty? i just assigned a background color to it, and it worked fine.theres been two different versions on where the closing tag finishes before or after menu, being a banner i choose before. Link to comment Share on other sites More sharing options...
TrueGrave Posted May 14, 2010 Author Share Posted May 14, 2010 Sorry that was my own mistake.I didn't notice I removed the banner since it only had the height width and margin lol, I swear I make the simplest mistakes.Thank you very much dsonesuk, you were great help.Thanks to everyone else as well! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.