Jump to content
ColMatrix

<hr /> replaced with Image?

Recommended Posts

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;}

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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".

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

the CSS code should look like this to be able to work properly :)

body.div{border: 1px red solid;}div{border: 1px blue solid;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...