Noob bg image question

[CraigC]

Hi,

I’m working on a rounded corner box, but I’m having trouble getting the middle part of my box to display.

You can see it at http://craigcurry.com/menu/blog.html. I think I may be not quite something in regards to the cascade/specificity or too many background images, but I’m not sure.

Any help would be greatly appreciated.

Thanks,

Craig

[Ramesh]

wrap a div around the paragraph and apply a bg to that div it will work

[ikthius]

"CraigC" wrote:

Hi,

I’m working on a rounded corner box, but I’m having trouble getting the middle part of my box to display.

You can see it at http://craigcurry.com/menu/blog.html. I think I may be not quite something in regards to the cascade/specificity or too many background images, but I’m not sure.

Any help would be greatly appreciated.

Thanks,

Craig

as ramesh said, you need to associate a background image to that block of code.

ok, you have done the right thing with the top and bottom of the block in assigning the images (but maybe not perfect in all browsers)

but you need one thing to wrap around the text and assign a background image to that, which is indeed a div.

best thing to do is make your image the same width but 1px height.

good luck

[Rob MacKay]

This is something everyone does now and again… check below

Code:

.blog_box_top {
background: url(images/blog_bg_mid) center repeat-y;
text-align: left;
margin:10px 0;
width: 647px;
}

.blog_box_top h3, p {
background: url(images/blog_bg_mid) center repeat-y;
text-align: center;
margin: 10px 10px;
}

Notice you missed off the file extention… blog_bg_mid.png

Also you have not specified the correct path. it should be ../images/blog_bg_mid.png

After fixing that – I can say that it still dosnt work properly – what I would recommend is stucture it either within 3 blocks like this:

<div class="boxtop"> </div>
<div class="boxmid"> <h2>Title for interesting stuff</h2> <p>interesting content</p> </div>
<div class="boxbot"> </div>

Set the background image of the div class’ boxtop and bottom with the corner sections you have, and dont link them in with the <img> tag. then set the background image of your boxmid class with the blog_bg_mid.png.

If you wanted to try something easyer you could have a single box and use the rounded corners JS code – you can find that here: http://malsup.com/jquery/corner/ There are many others, google just gave me that one first.

most browsers support a rounded corner css code – except of course IE…

There are many ways to achieve it, here are some useful tutorials.

http://www.cssjuice.com/25-rounded-corn … -with-css/

The site is coming on well! keep going! :D

[CraigC]

Thank you all for the help! That put me on the right track and I was able to fix the problem. And thanks for pointing out the missing .png and the path mistakes also. That’s one of those things that you can be staring right at and never "see"! (or at least I can…) This forum is such a help to me.

[CraigC]

And thanks Rob also for the encouragement to keep going… I needed that.

[Rob MacKay]

"CraigC" wrote:

Thank you all for the help! That put me on the right track and I was able to fix the problem. And thanks for pointing out the missing .png and the path mistakes also. That’s one of those things that you can be staring right at and never "see"! (or at least I can…) This forum is such a help to me.

And thanks Rob also for the encouragement to keep going… I needed that.

hehe – yea we all do it – its like you become code blind "Why isnt it working!!!" then you end up feeling really stupid lol – well I do atleast :)

We all need encouragement :) Plus with that site you will be teaching one of the most precious things on the planet!

[Author]

Posts