HTML/CSS Border CRAP~~

[Moon Rabbits]

So I'm building a website to (re)teach myself CSS and etc.

The image attached is what I've thrown together so far. I'm having a problem with borders though. I want to make a floating div style that acts as a border but also overlaps the surrounding objects. Basically, the border would be a single, 1px high black line with an image of two vertically placed ~'s in the centre where the red circle in that screen shot is.

My question is just ... uh ... how?

[Necronopticous]

I can help you out, but I'm not entirely sure I'm understanding what you want. Can you do a quick edit of that picture in Paint to visualize what you want?

[Moon Rabbits]

Sure!! Here you go. Uhmmm, the little squiggley things would be coming from a transparent .png file or something. I just don't know how to make it overlap the content above and below the border (which would be part of separate <div> tags ... )

Thanks!!!!

[Necronopticous]

What you want is a div that is absolutely positioned in the root of your body tag with the "posi<b></b>tion: absolute" CSS, then you want to adjust the actual position on the screen by playing around with pixel values in the "top: #px" and "left: #px" CSS. Throw those transparent images in the DIV and you'll be good to go on that. As far as making that border a solid 1px line, I'm not really sure what you're currently using to produce that thick line, but I'd just set a "border-top: 1px solid black" in the CSS for the gray element just below it.

[Moon Rabbits]

Thanks~ That's what I thought.

Is there a way to do this without absolute positioning, though? I planned to use the same little border flourish in more than one area.

[Necronopticous]

If you want to reuse this, you could put everything that makes it happen inside of a div using "posi<b></b>tion: relative" which would make the absolutely positioned stuff inside of it absolute within the confines of the outer div. In this case, you might consider using a CSS-styled horizontal rule &lt;hr&gt; tag to make that 1px black line.

[Rantz]

I would probably solve it this way. (HTML|CSS)

So yeah, pretty much what Necro suggested. Should work in all major browsers as far as I know.

[Moon Rabbits]

Whew~ Thanks a lot Necro & Rantz.

Uh, I just have one more question. I have a really stupid looking flourish as a place holder til I find something that looks better ... the problem is that it's placed so ridiculously close to the menu that the bounding box of the image actually overlaps the menu. Because of this, in any place the bounding box overlaps the menu the menu cannot be clicked / isn't activated. ie. If I hover the mouse (or click) on the red area I highlighted on the attached image, the navigation menu doesn't respond.

[Rantz]

Try setting the CSS property "z-index" for the <</>a> elements in your menu to something higher than default, say 50. Something like:

#nav a
{
z-index:50;
}

[Moon Rabbits]

Assuming all those Umaros mean ... I will try!

edit: Didn't work