rounded corner with a border

I have a div that I want to look like a tab. I want a border on the top and right side only and I want a rounded corner with a border to go in between the top and right border so that my tab has one rounded corner at the top right and a border on it's top and right side. What's the best way to do this with a seamless look and as little html code as possible (heavy css) and/or as simply or as efficient as possible? (Experienced coders know these issues of efficiency, simplicity....)

P.S., assume I know everything about the graphics creation for the corner.
LVL 9
BobHavertyComhAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

slovisaCommented:
You can set up a grid of divs, imitating a table layout - but the simplest/easiest way to do it is to create one div for the top border and top corner(s), using one wide graphic.

If your div will be short, you can basically create one big background graphic containing your top & side borders.

If your div will be tall, you can use the "top" div as the top margin and then create an adjacent div with a repeating pixel graphic along the right side to extend that border as long as you need.

The corner graphic can be a JPG, if your background is a solid color, or a GIF if you want transparency.

See the attached example file. Make sense?
tab.zip
0
BobHavertyComhAuthor Commented:
Yes, it makes sense and I'm sure it will work, but I don't like the giant background image part of the solution. Although that would work, it's an unnecessarily big graphic, and it would have to be recreated if the div size changed.

So far, what I've figured out on my own is to create an outer div with no padding, margins....and then create an inner div with a right border and a top border. The problem is that if I put the rounded corner as a background image in the inner div with the borders, it won't cover the corner where the borders meet. If I put it as a background image in the outer div, the meeting of the two borders of the inner div will cover over it. So I made the rounded corner an absolutely positioned image within the outer div so that it covers the corner meeting of the two borders in the inner div. So this works. I just usually don't like to resort to absolute positioning because to me it's kind of like a hack sort of cheat and technically speaking, since the rounded corner is now an image rather than a background image, it is now being treated as content rather than presentation when clearly that rounded corner is presentation. So technically speaking, there might be a more proper way to do this. I don't know so i wanted to see what the pros think.
0
slovisaCommented:
The background graphic is only a few pixels high and can be very small in file size. Without making separate divs for each corner, it's the best way. Otherwise your borders ruin the rounded corner effect.

To make your box expandable, you can make the graphic longer horizontally at the top and/or vertically on the right side, so that it fills the space necessary. I personally like to make one dimension static (usually the width) and create one fixed div & graphic for the top/corners. Then you can have the content in an expandalbe div with CSS borders in the middle, followed by a fixed footer div using another graphic for the bottom/corners.

I'm sure there are other solutions out there, but I've read a lot of books and found this to be a very popular, workable solution.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

BobHavertyComhAuthor Commented:
You need a background image in the div to mimmick a top border. Then a background image in another div for the right side border. Or, as you said, you need a giant image that can contain the border for the top and the border for the right. So to me, it looks like, based on your method, that I would need three divs, one for the top border, one for the right border and one for the corner image or one div with a giant background image that would include all three. Am i correct?

This is the code I have so far.

#tab {
background-color: #069;
width: 500px;
padding: 0;
margin: 0;
}

#tab div {
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
}

#tab img {
position: absolute;
top: 0;
right: 0;
}


<div id="tab">
<div>
<img src= "/images/tabCorner.png"/>
</div>
</div>

0
BobHavertyComhAuthor Commented:
Also, I left out some code because you didn't need to see it, but this is what I was talking about. The big tab has a white border and a rounded corner

http://www.dwiwin1.com/index2.asp
0
slovisaCommented:
Seeing your example helps - and I think the way you have it set up looks good! You could also position that image with a float instead of absolute positioning.

If you wanted that box to have an expandable height, you could right-float a div containing the top-right corner and the right border (longer than actually needed).

Is there something you don't like about your posted example?
0
BobHavertyComhAuthor Commented:
In the way I did it, it's completely flexible because the image is set to the absolute top right. So whatever the tab gets resized to, it will always be in the top right and it will always have a border on the top and right that obviously matches the size of the div. However, the problem with my method is that I am using an image rather than a background image. You're not supposed to use an image unless it's actual content. Ex., picture of a person. But the corner is not content, it's presentation, so it carries no meaning or value except asthetics. It's not really a big deal, but I just want to know that I am doing everything the best way possible as if a critic were looking at it and this is one very minor breach of the theory I've been told about presentation and content. But, it will certainly work reliably and flexibly and involves little code and extra markup on the html page.
0
slovisaCommented:
Yes, so again - to use a background image, just float a div off to the right with a right border that extends to the max height you will want to use. The main rectangle can use CSS for the top border, and the graphic in the adjacent div will take care of the rounded corner & right border.

(And you probably don't need to use absolute positioning - those divs should behave predictably in the normal flow of the document with margins or padding.)
0
David S.Commented:
250x20 is not a giant image.  In my current project one of the background images is 900x1200 and it's under 3kb since I used the PNG-8 format (the less commonly discussed sibling of the PNG-24 format).

These days limiting the number of files that have to be transferred is just as important if not more so than limiting individual file sizes, because of the extra overhead of each request, e.g. HTTP headers.

http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html
http://developer.yahoo.com/performance/
0
BobHavertyComhAuthor Commented:
High Kravmir, if you look at the link above for the site, you'll see that the tab has a gradation which means a much larger palette and image size. As far as limiting the number of files transferred, it is almost identical in the giant background image solution as it is in my solution, except that I only need to download a tiny corner image and a 1px by 80px background gradation image. Also, a giant background image is not flexible to handle size changes to the tab (div) and would have to be re done every time. We would both agree that that's not our idea of fun and efficiency. Therefore, for that reason alone, I would like to avoid giant background images.
0
slovisaCommented:
The main gradient needs to be only a few pixels wide, and only as tall as the gradient itself - you can end the gradient and make up the difference with a solid background color.

The right-hand image could be 20px wide or less, and then only as tall as your tallest expected content.

Just to illustrate the point, I've attached an example. This div can expand as tall as 360px, and the "giant" graphics used to create it only total about 1.5K. Minimal.
rounded-corner.zip
0
David S.Commented:
> Also, a giant background image is not flexible to handle size changes to the tab (div)

When it's too big only part of the image is shown, so when the size changes it still looks fine. The background-position property is used to control which area of the image is shown.
0
BobHavertyComhAuthor Commented:
slovisa, what happens if I want to resize the tab? I have to redo the image, right? That's what I don't want to do that. In terms in the image, yes, i forgot to resize it to a width of one, but it's small anyway. Smaller than a giant image.
0
BobHavertyComhAuthor Commented:
kravmir
When it's too big only part of the image is shown, so when the size changes it still looks fine.

Not when the image has a white border, right?

www.dwiwin1.com/index2.asp
0
BobHavertyComhAuthor Commented:
This seems to be the most efficient thing even though I use an absolutely positioned image for non content instead of a background image. Other than that, it's the least code, the least markup on the page and possibly the most reliable across browsers

<div id="tab">
                  <div>
                  <h3>Law Office of</h3>
                  <h1>Michael Bowser, P.C.</h1>
                  <img src= "/images/tabCorner.png"/>
                  </div>
</div>

#tab {
background-color: #069;
background-image: url(/images/tabBg.png);
background-repeat: repeat-x;
width: 500px;
position: absolute;
bottom: 0;
left: 0;
}

#tab div {
padding: 15px 0 10px 20px;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;      
}

#tab img {
position: absolute;
top: 0;
right: 0;
}

#tab h1 {
color: #FFF;
font-size: 24pt;
font-family: "Times New Roman";
border-top: solid 1px #FFF;
width: 295px;
margin: 0;
}

#tab h3 {
color: #FFF;
font-size: 14pt;
font-family: "Times New Roman";
margin: 0;
}
0
David S.Commented:
> Not when the image has a white border, right?

No reason why it wouldn't work comes to mind.


Do you have a particular reason for using JavaScript for those rollovers?  It's more efficient to use CSS sprites: http://www.dynamicsitesolutions.com/css/background-image-switching/

P.S. Are you aware that your page contains HTML errors?
http://validator.w3.org/
0
BobHavertyComhAuthor Commented:
The page is still in development and i have no isea what I might have been working on when you checked it for errors.

If I have a 220px wide background tab image with a white border and a rounded corner that shares the border, are you telling me that I can expand the tab div to double it's width without changing the image?. The top border will no longer be wide enough and the corner will come prematurely, right? If I make it half it's width, then I lose the right border and the corner, right? Am I missing something?
0
BobHavertyComhAuthor Commented:
Do you have a particular reason for using JavaScript for those rollovers?  It's more efficient to use CSS sprites: http://www.dynamicsitesolutions.com/css/background-image-switching/

I wanted to just style the hyperlink and give it a background image and then use it's on hover. The problem is that the <a> is always sized based on it's child. So I had to use different padding for each link because the text of the link is different sizes. But even if I put the background image in the hyperlink, it still ignores the LI and the hover only occurs when you hovor over the text, not the whole button (background image). So although my hyperlink was wrapping the LI, and each LI all had the same specific width, the link and pointer mouse would only happen on hover over the text, not the LI.
0
David S.Commented:
Sure it won't work if the image isn't big enough. There are, of course, limits to it. Here's an example of it at 500px and 700px wide using the same image. The image could be made wider if needed.  (rename the .txt file to .html)

Note how I used one heading element and a span to achieve the same look (because semantically it's one heading, not two).
example.txt
header-bg.png
0
David S.Commented:
> The problem is that the <a> is always sized based on it's child.

Not when it has display:block. display:block allows you to set its width and height properties as needed. (It's probably best not to set a height though.)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BobHavertyComhAuthor Commented:
Now THAT'S what I'm looking for. I forgot about this. So I can set the <a> that wraps the <li> as having the background image and can then give each link the same width. The only thing is that I still need to get the hover effect when it hovers over the entire <li> and if I remember corrected, it only seemed to give me the hover effect when I moused over the <li> text, but not the entire <li>
0
BobHavertyComhAuthor Commented:
"Sure it won't work if the image isn't big enough. There are, of course, limits to it."

Then why do it when I have the option of simply popping an absolutely positioned corner image right on the div's corner which will remain there no matter what I resize it to?  
0
BobHavertyComhAuthor Commented:
partially correct answer
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.