Page 1 of 1

Rounded corners with images [SOLVED]

Posted: Mon Oct 23, 2006 7:04 am
by Stryks
I know, this seems like a few of the other posts here, but for some reason I just cant get them to work the way I'd like.

The box I'm trying to make can be seen below hopefully.

Image

This is done with the following:

Code: Select all

<table width="388" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="23" height="21" background="images/border_tl.gif"></td>
    <td rowspan="3" valign="top" class="border_horiz">
		<div class="heading_box">Welcome</div>
		Tester words tester text testing testing Tester words tester text testing testing Tester words tester text testing testing Tester words tester text testing testing tester text testing testing Tester words tester text testing testing. tester text testing testing Tester words tester text testing testing.
	</td>
    <td width="24" height="21" background="images/border_tr.gif"></td>
  </tr>
  <tr>
    <td height="152" class="border_left">&nbsp;</td>
    <td class="border_right">&nbsp;</td>
  </tr>
  <tr>
    <td height="23" background="images/border_bl.gif"></td>
    <td height="23" background="images/border_br.gif"></td>
  </tr>
</table>
The problem is that I'd like the box to auto-adjust the height of the box based on the content. Say, start off at 150px high and get bigger if needed. At the moment, it only working in IE if I specify the height here -

Code: Select all

<td height="152" class="border_left">&nbsp;</td>
- otherwise it's all messed up. Of course, it's perfect in firefox *sigh*.

If the height is set as above however, it also breaks in IE if the content is longer than the box.

I think what is complicating the issue is that I'm spanning the central column, but with the size of the rounded corners, too much space is lost if I dont reclaim it.

Any help would be great.

Posted: Mon Oct 23, 2006 10:53 am
by hawleyjr
Searching for round and corner directed me to this link:

viewtopic.php?t=53689&highlight=round+corner
:roll:

Posted: Mon Oct 23, 2006 11:30 am
by RobertGonzalez
A list apart also has some good rounded corner CSS technique (using javascript for dynamically adjustable sizing).

Posted: Mon Oct 23, 2006 5:41 pm
by Stryks
Thanks guys, but I guess I didnt make myself clear.

I'm totally capable of searching on here for answers :roll: and yes ... I did turn up those links.

If the box is a solid color or against a different solid color, then the examples give me something to work with. However, mine is not. So ... I'm still at "I cant get CSS to render the box in the way I would like".

In the image provided, the outline is made by four corner images and upper / lower / left and right CSS borders. I can find nothing which replicates this in a way I can use which is also going to give any kind of cross platform reliability.

This is the question I was intending to ask.

Thanks.

Posted: Mon Oct 23, 2006 8:12 pm
by alex.barylski
Did you read my previous post on this very subject?

d11 had an excellent method for accomplishing perfect rounded corners in CSS and it's totally cross browser...

Lots of nesting but it works awesome!!!

Posted: Mon Oct 23, 2006 10:54 pm
by Stryks
Hockey:

Yeah I did. I couldnt seem to get it to work though. Perhaps because I didnt have the CSS for .content? I clipped what was there and dropped it into a new file but it wasn't doing anything close to what I expected. I'm also too much of a newbie at CSS to tinker with it to get it going.

I'm not even too sure about how it would work for what I need. In a few places ... I need the rounded corners to either be on a table or surrounding a table. I have a few lists of data that would best be shown in a table, but yeah, I'm trying to get it in theme with the rounded corners.

Would the CSS version even do that? :?

Posted: Tue Oct 24, 2006 5:20 am
by Stryks
Well, lacking a working alternative, I've adapted the table method to get the heading text where I wanted it.

Code: Select all

<table width="388" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="23" height="21" background="images/border_tl.gif"></td>
    <td valign="top" class="border_top">&nbsp;</td>
    <td width="24" height="21" background="images/border_tr.gif"></td>
  </tr>
  <tr>
    <td class="border_left">&nbsp;</td>
	<td valign="top">
		<div class="heading_box">Welcome</div>
		Tester words tester text testing testing Tester words tester text testing testing Tester words tester text testing testing Tester words tester text testing testing tester text testing testing Tester words tester text testing testing. tester text testing testing Tester words tester text testing testing.
	</td>
    <td class="border_right">&nbsp;</td>
  </tr>
  <tr>
    <td height="23" background="images/border_bl.gif"></td>
	<td class="border_bottom">&nbsp;</td>
    <td height="23" background="images/border_br.gif"></td>
  </tr>
</table>
This gets the desired output in IE and Firefox (and hopefully alot of others too) with the following CSS

Code: Select all

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #4e4e4e;
	margin: 0px;
}
.border_left {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #e9e9e9;
}
.border_right {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #e9e9e9;
}
.border_top {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #e9e9e9;
}
.border_bottom {

	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #e9e9e9;
}
.navbar_left {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-left: 20px;
	float: left;
}
.navbar_right {
	font-size: 16px;
	line-height: 24px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	margin-right: 20px;
	float: right;
}
.navbar_base {
	background-color: #df0329;
}
.heading_box {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #DF0329;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	position: relative;
	top: -8px;
}
This really doesnt workaround the table use, but then I dont know that I feel that they are as evil as people seem to think. I know there are arguments for a fully CSS design, but I still find it restricting. Of course, I suck at CSS so that may explain it.

Posted: Tue Oct 24, 2006 7:13 pm
by supermike
Hockey wrote:Did you read my previous post on this very subject?

d11 had an excellent method for accomplishing perfect rounded corners in CSS and it's totally cross browser...

Lots of nesting but it works awesome!!!
Yep, I can vouch for this guy too. I've used it and it works great.

Posted: Thu Oct 26, 2006 12:47 am
by Stryks
I dunno. I'm really not doubting that it works. I'm just not getting anything to work the way that I need it to.

I have a few references back to Hockeys post (which I had read and tried before I posted) but as I have said several times now, they dont seem to work.

It's clear that this is the method that is being recommended to me, but what else can I say ..... they dont seem to work properly for a BORDERED box as opposed to a solid box. I just dont know CSS well enough to understand what these posts mean and not understanding is what stops me from adjusting to make a solution, hence my initial post.

Sorry if I seem somewhat aggressive here, I'm just really frustrated. I know it works ... I know it's there. But if you go in and take those code snippets and put them in a document and provide some corner images ... they just do not work. My feeling is that there is something missing from the snippets.

I've been and looked around the alistapart site, and yeah ...they seem to be good, however I cant make heads or tails of what they are describing, and all of the examples I have run arent bordered boxes. They are solid color boxes. Either that, or they use images to make the side edges. Maybe this is irrelevant and I'm missing the point. I dont know. Thats why I came here for help.

Can someone please give me an example like from Hockeys post that works and is complete so that I can at least see what it produces.

The closest I can get to a CSS box is (again from Hockeys post)

Code: Select all

div.rounded_box {
	height: 400px;
	width: 400px;    /* Make style for borders */
}

div.rounded_box div {
    background-image: url(images/border_tl.gif);
    background-repeat: no-repeat;
    background-position: top left;
}

div.rounded_box div div {
    background-image: url(images/border_tr.gif);
    background-repeat: no-repeat;
    background-position: top right;
}

div.rounded_box div div div {
    background-image: url(images/border_br.gif);
    background-repeat: no-repeat;
    background-position: bottom right;
}

div.rounded_box div div div div {
    background-image: url(images/border_bl.gif);
    background-repeat: no-repeat;
    background-position: bottom left;
}

div.rounded_box div div div div div {
	background-image: none;
}

div.box_content {
	margin: 20px;
}

Code: Select all

<div class="rounded_box">
    <div>
        <div>
            <div>
                <div class="box_content">
					<p>Enough nesting yet?</p>
					<p>Enough nesting yet?</p>
					<p>Enough nesting yet?</p>
					<p>Enough nesting yet?</p>
					<p>Enough nesting yet?</p>
					<p>Enough nesting yet? </p>
                </div>
            </div>
        </div>
    </div>
</div> 
I know that I've been adjusting things in the wrong places, but it's the only combo that I have found that shows all four corners.

Any assistance or explainations would be great. Thanks

Posted: Thu Oct 26, 2006 6:55 am
by matthijs
I think you should first try to understand the CSS box-model well. If you understand that, the rest follows.

A box has a height and width. Say 200px x 200px. Then around that there's the border. Say 1px solid black. You can give the box a background image, which goes inside. So you could make a 200px x 200px image and set it as the background.

Maybe I'm wrong but I think a problem you encounter is that when you combine a border with a background-image the border is around the image? Personally I would place the border in the image. the alternative would be messing around with 1px negative margins, which makes things more complicated then necessary.

Your last example should work as a starting point. Since your box has fixed height and width you can get rid of many of the divs by combining images.

For more examples and explanations see CSS rounded corners roundup

If I look at your original image I would:

Code: Select all

html:
<div class="box">
<h2>Welcome</h2>
<p>blabla</p>
</div>

css:
.div {
width:400px;
background: url(large_left_bottom_right_piece.gif) bottom left no-repeat;
padding:0 0 10px;
}
.div h2 {
background:url(small_topleftcorner_topborder_toprightcorner.gif) top left no-repeat;
margin:0;
padding:10px 10px 0;
}
The background image for the box would be a very high (1000px) by 400px wide image for the left border, bottom stuff and right border. The background image for the h2 would be just the top part. If you do it this way your box can even increase in (vertical) size without breaking the design when the content increases.

Posted: Sat Nov 04, 2006 4:45 am
by Stryks
Thanks for the great response matthijs. I had moved on for a while to get past where I was stuck, but I checked back in yesterday and have been frantically experimenting ever since.

Box model. They should have a big sign up somewhere telling people wanting to get into CSS to go look that up.

The page HERE gave me one of those "Ahhhhh" moments. I had a few other links as well but of course I misplaced them. I'll find them at work and post them when I get a chance.

And yeah ... I know I'm showing my CSS newbishness here, but this advice really helped me get my head around how the examples were working and has lead me to a much more comfortable understanding of what it is doing.

Anyhow ... the solution (yes, I'm cautiously calling it that) I have now has been hammered together from a few different places, but seems to work fine.

Any feedback or improvements would be great.

Cheers.

Code: Select all

.dialog {
	width: 100%;
	margin: 0px auto;
	color:#000000;
}

.dialog .hd .c,
.dialog .ft .c {
	font-size:1px; /* ensure minimum height */
	height:21px;
}


.dialog .hd .c {
	background-image: url(images/bbox_top_right.gif);
	background-repeat: no-repeat;
	background-position: right 0px;
}

.dialog .hd {
	background-image: url(images/bbox_top_left.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
.dialog .ft .c {
	background-image: url(images/bbox_bot_right.gif);
	background-repeat: no-repeat;
	background-position: right 0px;
}
.dialog .ft {
	background-image: url(images/bbox_bot_left.gif);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}
.dialog .body {
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #E8E8E8;
	border-left-color: #E8E8E8;
	padding-right: 20px;
	padding-left: 20px;
}
.dialog h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #DF0329;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
	position: relative;
	top: -8px;
	margin: 0px;
	padding: 0px;
}

#container {
	background-color: #FFFFFF;
	width: 800px;
	left: 50%;
	position: relative;
	margin-left: -400px;
	overflow: auto;
}
#wrapper {
	float:left;
	width:578px;
	position: relative;
	left: 14px;
}
#main-content {
	float:right;
	width:384px;
}
#sub-content {
	float:left;
	width:180px;
}
#navigation {
	float:right;
	width:180px;
	position: relative;
	right: 14px;
}

Code: Select all

<body bgcolor="#999999">
<div id="container">
	<div id="wrapper">

	
		<div class="dialog" id="sub-content">
			<div class="hd"><div class="c"></div></div>
			<div class="body">
				<h1>Content</h1>
				The bulk of the text is to go here, kind like this but not entirely, in that the content wont be pure drivel (I hope).
			
			</div>
			<div class="ft"><div class="c"></div></div>
		</div>	

		<div class="dialog" id="main-content">
			<div class="hd"><div class="c"></div></div>
			<div class="body">
				<h1>Content</h1>
				The bulk of the text is to go here, kind like this but not entirely, in that the content wont be pure drivel (I hope).
			
			</div>
			<div class="ft"><div class="c"></div></div>
		</div>	
	
	</div>

	<div class="dialog" id="navigation">
		<div class="hd"><div class="c"></div></div>
		<div class="body">
			<h1>Content</h1>
			The bulk of the text is to go here, kind like this but not entirely, in that the content wont be pure drivel (I hope).
		
		</div>
		<div class="ft"><div class="c"></div></div>
	</div>  
  
</div>

</body>
Once the corner images are added, it looks something like this:

Image

Posted: Sat Nov 04, 2006 11:29 am
by matthijs
You're welcome. Glad you got it working.

There are a couple of improvements possible. Mainly, you can decrease the amount of code needed to create the same effect. As it is, you have 3 boxes of fixed width. Each box has 4 images. But because the box has a fixed width, you can decrease that to 2 images. Replace the top left and top right image with one image. Replace the bottom left and bottom right images by one.

Then the html. You now have 2 images. So you need 2 "hooks" for those. Take the left box, #sub-content. that's the first one. In it you have a h1 at the top of the box. That will be the second one. Now remove all other divs.

Code: Select all

<div class="dialog" id="sub-content"> 
<h1>Content</h1>
 The bulk of the text is to go here, kind like this but not entirely, in that the content wont be pure drivel (I hope).            
</div> 

css:
#sub-content {
background: url(bigbottomimage.gif) bottom left no-repeat;
}
#sub-content h1 {
background:url(topimage.gif) top left no-repeat;
}
That's it. You don't need any other divs. This method also decreases the amount of css needed, and the amount of requests from the server (2 img instead of 4). You could even use one large image. Often it's faster to download one larger image then a few smaller ones.

Posted: Sat Nov 04, 2006 9:53 pm
by Stryks
Nice. I had tinkered with that as per your previous post, but I thought it was better to go this way as I want to use this style of box in a number of different sizes and configurations on different pages.

Again, stop me if I'm going about it the wrong way, but I was going to put the box and some assorted other styles in a generic CSS file to be included in all pages, and then do page specific CSS files to determine the size and positioning of the boxes as needed. This way, all the boxes will share a common image set.

God I love Firefox's spell checker. :)

Anyhow ... thanks for the fantastic pointers. I was about to give up this whole CSS dealy but now I can see that it going to just make it SOOOOOO much easier to get php to drop in dynamic content without having to constantly wrestle the inevitable table tangle. I'm actually looking forward to recoding some pages I have been putting off for a while now.

Cheers 8)