ZeRgII Posted December 5, 2006 Share Posted December 5, 2006 Okie well... what I've been doing is going through tutorials and trying to teach myself web design.I'll let you check the code first then explain my problem. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <title>Messing Around with CSS Positioning...</title> <style type="text/css"> #maincontain { width: 500px; margin: auto; margin-top: 100px; } #1 { float: top; width: 500px; height: 100px; border: 0px; background-image: url("image1.ext"); } #2 { float: top; width: 100px; border: 0px; background-image: url("image2.ext"); } #3 } float: top; width: 400px; border: 0px; background-image: url("imag3.ext"); { </style></head><body><div id="maincontain"> <div id="1">(contents here) </div> <div id="2">(contents here) </div> <div id="3">(contents here) </div></div></body></html> If your all pro and such you might have guessed my problem...My problem being that only one of these images will show up as a background. This code here isn't "my" code, just a replica. My real stuff is at home.*No I have no typos in any of my coding at home - I checked several times*I'll come back and post an image of basically want I want it to look like. so brb ;] Link to comment Share on other sites More sharing options...
ZeRgII Posted December 5, 2006 Author Share Posted December 5, 2006 ^-- Basically what my goal is. --^ Link to comment Share on other sites More sharing options...
ZeRgII Posted December 5, 2006 Author Share Posted December 5, 2006 Alright well... I got the left nav bar showing via background so I know that the main section can be visible as well. How though? To fix the blue all I did was add height: 400px; to the head under the correct section. Adding a height attribute to the main section did absolutely nothing visibly atm.I can also use <img src="image3.ext"> under the correct <div>... This shows the image but it's out of place.When I have text in the third div tag it appears under the left navigation bar. Link to comment Share on other sites More sharing options...
ZeRgII Posted December 5, 2006 Author Share Posted December 5, 2006 Seems like everyone is off teh internet or somthing I'll come back around in a few hours to see if anyone can figure out my prob. Remember, my current problem is: I can't get the main area to show (which is gray in the iamge). The BG image it's self is 400px by 400px trying to fit into a perfect 400px by 400px section. Even if the image wasn't able to fit (as a background image) into the space shouldn't it still show on the page somewhere?This is suppose to be a simple background image. I'm rly just messing around trying to learn css through the if you fail try try again method. Now I turn to you all. Link to comment Share on other sites More sharing options...
jesh Posted December 5, 2006 Share Posted December 5, 2006 The first thing I would recommend is that you don't use numbers as the ids for your elements. Use something like this instead: <div id="d1">(contents here)</div> <div id="d2">(contents here) </div><div id="d3">(contents here)</div> Also, if you are using url() in the CSS, try doing it without quote-marks: background-image: url(image1.ext); Link to comment Share on other sites More sharing options...
ZeRgII Posted December 5, 2006 Author Share Posted December 5, 2006 The id's were just examples in the actual code it is words like "banner" "body" "leftnav" etc. What I was just attempting before I viewed your post was... Inserting 2 <div> into a single <div> to get my desired outcome. It's going to look something like this.... <html><head><style>#one{bg-img: (banner);}#two{;}#three{bg-img: (nav);}#four{bg-img: (bod);}</style></head><body><div id="one"></div><div id="two"><div id="three">(content)</div><div id="four">(content)</div></div></body></html> That's just a breif overlook of what I was just about to attempt. Would this be wise or should I stick with my original ideas?lmfao... I think I found one of my major mistakes... #3 }<--- reversed tags hehe :s float: top; width: 400px; border: 0px; background-image: url("imag3.ext"); { Link to comment Share on other sites More sharing options...
jlhaslip Posted December 6, 2006 Share Posted December 6, 2006 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /><style type="text/css">body { margin: 0px; padding-bottom: 0px; background-image: url('test.gif'); background-repeat: repeat;}#Header { width:100%; height: 150px; margin-left:auto; margin-right:auto; text-align:center; background-image: url('test.gif'); background-repeat: repeat;}.Sidebar { float:left; width:12em; background-color: #0fc; padding-left:6px; background-image: url('test.gif'); background-repeat: repeat;}#Content { margin-left: 12.5em; padding-left:6px; padding-right:6px; background-image: url('test.gif'); background-repeat: repeat;}</style></head><body><div id="Header"> Header Content Goes Here </div><div id="Main"> <div class="Sidebar">Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br />Sidebar Goes Here<br /></div> <div id="Content">Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br />Main Content Goes Here<br /></div></div></body></html> Something like this?I have tested it using a single gif and repeating it. If you have full-size images, then take out the repeat factor. Header, Left sidebar, Main content and Body all have the capability of having their own Background images.You will have to resolve the problem of the different column heights, since in this layout the images only provide a background where there is content. ie: if the sidebar is not equal length to the Main content div, the body image or colour will show through in those places. But at least here is a layout to show that all of the components will carry an image.The sidebar is done using a float left and then the Content div is given a margin-left to push the div over to the right. For the life of me, I could not find a reference to float:top which you have used in your code. If it is acceptable css, it is a proprietory code, it seems. The w3schools CSS reference gives the options of left, right and none for float.Created in Netscape 7. Might have to check it in IE, Firefox, Opera, etc. Link to comment Share on other sites More sharing options...
ZeRgII Posted December 6, 2006 Author Share Posted December 6, 2006 Lol yeah. I kinda just threw that float:top in there :S just to see if it did anything significant. I did not see it from a ref lol . Thanks alot for all the help. I resolved every problem I had ^^ Link to comment Share on other sites More sharing options...
jlhaslip Posted December 7, 2006 Share Posted December 7, 2006 Change the sidebar from a class to an id. Classes are designed for multiple occurences on a page. You will also need to change it in the page declaration, too.And glad it helped you. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now