ColMatrix Posted January 16, 2006 Share Posted January 16, 2006 Hi EveryoneI am havin a problem with making the <hr /> in HTML to display as a image background within my external css file. I have created image backgrounds before...but do have some problems (why I am unsure, I have followed many website tutorials etc but still have same problem).I have tried moving the code to the bottom of the css file (higher priority) and using a z-index...just incase for some reasons something was above it. I do have this (the content information ie...seperate from the navigation) in a <div> element which all the content is in.Any suggestions or comments would be much appreciatedHTML <hr /><h3>Introduction</h3><hr /> CSS hr { position:relative; background-image:url(images/hr.gif); width:611px; height:1px;} Link to comment Share on other sites More sharing options...
~Shinta Posted January 17, 2006 Share Posted January 17, 2006 I think you are having code issues. hr is a horizontal rule, not a span. Just change your HTML to <span style="position:relative;background-image:url(images/hr.gif);width:611px;height:1px;"><h3>Introduction</h3></span> Link to comment Share on other sites More sharing options...
ColMatrix Posted January 17, 2006 Author Share Posted January 17, 2006 Thx for your help ~Shinta but unfortunately I still have not managed to resolve the situation.I have tried using <span> tag, with no effect...I have definately got the root of the image file correct.I have tried <div> given the <hr />, <div> a class and nothing...it does work with a <div> + class (from a previous website I have created) but when I try to using the image with anythign else other than that particular <div> + class it does not work!With the <hr /> (as a test) the border set to 1 and solid...a border is created and the height is specified so it is working...but for some reason the image is not appearing.I am definately calling the correct location (I have even put it in the same locationas index.html) and nothing??Any ideas please anyone?Thx Col Link to comment Share on other sites More sharing options...
boen_robot Posted January 17, 2006 Share Posted January 17, 2006 The background of an element is treathed as it's "inside" part. Scince hr is an empty element, there's practically no inner part by default. Try increasing the height of the hr until it actually reaches the height of the image you want to use on it. Link to comment Share on other sites More sharing options...
ColMatrix Posted January 18, 2006 Author Share Posted January 18, 2006 Hi...I have found a solution, even though not exactly what I was after, suppose we have to meet half way!Solution:I turned the <hr /> tag into a <div> tag with a class attribute. The CSS was then placed in the <head> section of the webpage, I was hoping to keep all CSS in the one external file, as this code will have to be applied to every page! I am unsure why it would not allow me to put the code in the external CSS file, I am guessing it is due to priority but as I mentioned earlier I moved the CSS code around the bottom, middle and top etc, but with no apparent change.Anyone has any suggestions as to keeping the code working in the external CSS file I would much appreciate it.Thank you for all your comments and support!Regards Col Link to comment Share on other sites More sharing options...
boen_robot Posted January 18, 2006 Share Posted January 18, 2006 The position of the code doesn't specify priority unless we're talking about absolutely identical selectors. For example: div{border: 1px red solid}div{border: 1px blue solid} This will tyrn the div blue, because the blue is below the div with red border.The thing which TRULY specifies priority are the selectors along with classes and IDs. body div{border: 1px red solid}div{border: 1px blue solid} Despite the fact that both selectors select all divs and that the div only code is below, the div is going to have a red border this time, because by saying we want the div to be inside a body tag, we are being more specific.In other words: try giving the div with the class some priority by being more specific like "html body div.classname". Link to comment Share on other sites More sharing options...
ColMatrix Posted January 19, 2006 Author Share Posted January 19, 2006 Thx BoenI did try what you suggested but unfortunately no luck...tried different combinations...this div (containing img) is within another div (which is surrounding all my content) would this at all affect, or make the image appear invisible any suggestions to overide this?RegardsCol Link to comment Share on other sites More sharing options...
Mimika Posted January 19, 2006 Share Posted January 19, 2006 the CSS code should look like this to be able to work properly body.div{border: 1px red solid;}div{border: 1px blue solid;} 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