Rounded corners with one background image?

[Dan06]

I'm trying to create a content container - like the ones found on linkedin and the yellowpages. Ideally, I'd like to do this with one background image, rather than having multiple images for each section and then combining the images to form the container. Is there a way to do that?

 

Do give you a better idea of what I mean by content container I've attached the image I'd like to use. The title of the content goes in the top green portion and the actual content goes in the white portion. Any thoughts/ideas?

 

Thanks.

 

[attachment deleted by admin]

[aximbigfan]

 

<table border='0'>

<tr><td style='background-color: green'>Title here</td></tr>

<tr><td>

content here

 

</td></tr>

</table>

 

 

I'm sure there's better ways of doing it though.

[dbrimlow]

In your css, create the background for the container using that image the same way linked-in did, as follows:

 

{background: #fff url(/img/bg/bg_byn_box_1000x1000.gif) 100% 100% no-repeat;}

 

This is a form of "sliding door" technique, only it uses the one image that resizes entirely to the container.

[alexweber15]

only way to do it with 1 image is to use image sprites, which unfortunately is not something ive dominated yet  ???

 

here's 2 great articles on the subject that i haven't gotten around to reading but i'm sure have all the answers you need!

 

http://www.alistapart.com/articles/sprites

http://www.alistapart.com/articles/sprites2

[Dan06]

Thanks for the tip on using CSS sprites. I've put together the code for it, but unfortunately does not work as I'd like it to. I'm able to get the top border, the left border, and content, to show correctly but am not able to get the right border, bottom border to show correctly. Also, I don't know how to get the left and right border to adjust based on the length of the content.

 

If anyone has any suggestions or ideas, let me know. Thanks! Below is the css and html code:

 

.topLeftBorder, .topCenterRightBorder, .bottomLeftBorder, .bottomCenterRightBorder, .leftBorder, .rightBorder{
background: url(Images/bg_byn_box_1000x1000.gif) no-repeat;
}

.topLeftBorder{
background-position: 0 0;
width: 10px;
height: 39px;
position: absolute;
top: 0px;
left: 0px;
}

.topCenterRightBorder{
background-position: -700px 0;
max-width: 500px;
min-width: 300px;
height: 39px;
text-align: center;
position: absolute;
top: 0px;
left: 10px;
}

.leftBorder{
background-position: 0 -39px;
width: 10px;
min-height: 50px;
max-height: 966px;
position: absolute;
top: 39px;
left: 0px;
}

.containerContent{
background: transparent;
position: absolute;
top: 39px;
left: 10px;
width: auto;
height: auto;
margin: 10px 10px 10px 10px;
}

.rightBorder{
background-position: -990px -39px;
width: 10px
min-height: 50px;
max-height: 966px;
position: absolute;
top: 39px;
right: 0px;
}

.bottomleftBorder{
background-position: bottom left;
width: 10px;
height: 39px;
position: absolute;
left: 0px;
bottom: 100%;
}

.bottomCenterRightBorder{
background-position: bottom right;
min-width: 400px;
max-width: 500px;
height: 39px;
position: absolute;
left: 10px;
bottom: 100%;
}

 

<div class="topLeftBorder"></div>
        <div class="topCenterRightBorder">Title for "AdditionalLocations" Goes Here.</div>
        <div class="leftBorder"></div>
        <div class="containerContent">Testing 1,2,3...</div>
        <div class="rightBorder"></div>
        <div class="bottomLeftBorder"></div>
        <div class="bottomCenterRightBorder"></div>

[alexweber15]

hey Dan glad that link helped!

 

still gotta get around to reading it myself...lol

 

if you can post a demo link to help visualize im sure you'll get more help!

[SuperBlue]

You may want to check out the Border Technique i use on my site, this is combined with use of CSS sprites.

[alexweber15]

You may want to check out the Border Technique i use on my site, this is combined with use of CSS sprites.

 

thanks for the link!

 

ill put that on my "CSS Sprite" reading list (which is growing by the day...lol)

 

can't keep pushing it away much longer... 

[feha]

Hi here is some of my experiments

http://www.vision.to/test/

This will not work with tranparent images ...

and

http://www.vision.to/single-image-rounded-corners.php

 

Some more research about this problem.

Hope this helps

:-)

[alexweber15]

thanks!

[Dan06]

Thanks, everyone, for the links to examples. After reviewing the examples, I think my problem is in the positioning attributes and the nesting of the div tags. Each div is absolute positioned and in the HTML is nested. Since with absolute positioning the element position is relative to its containing block - thus with each layer of the nest, the containing block changes.

 

Does anyone know how to fix this or if there is a better way to do it? Below is both the CSS code and the HTML. Unfortunately, I do not have a demo link.

 

.topLeftBorder, .topCenterRightBorder, .bottomLeftBorder, .bottomCenterRightBorder, .leftBorder, .rightBorder{
background: url(Images/bg_byn_box_1000x1000.gif) no-repeat;
}

.topLeftBorder{
background-position: top left;
width: 10px;
min-height: 29px;
max-height: 39px;
position: absolute;
top: 0;
left: 0px;
}

.topCenterRightBorder{
background-position: top right;
max-width: 300px;
min-height: 29px;
max-height: 39px;
position: absolute;
top: 0px;
left: 10px;
}

.leftBorder{
background-position: 0 -39px;
width: 10px;
max-height: 950px;
position: absolute;
top: 29px;
left: -10px;
}


.rightBorder{
background-position: -980px -39px;
width: 10px;
max-height: 950px;
position: absolute;
top: 39px;
right: 0;
}

.bottomLeftBorder{
background-position: bottom left;
width: 10px;
height: 10px;
position: absolute;
left: 0;
bottom: 0;
}

.bottomCenterRightBorder{
background-position: bottom right;
max-width: 300px;
height: 10px;
position: absolute;
left: 10px;
bottom: 0;
}

.containerContent{
background: transparent;
padding: 0 10px 5px 10px;
max-width: 200px;
max-height: 945px;
}

 

<div class="topLeftBorder">
<div class="topCenterRightBorder">"Title"
<div class="leftBorder">
<div class="containerContent">Testing 1,2,3...
<div class="rightBorder">
<div class="bottomLeftBorder">
<div class="bottomCenterRightBorder">
</div></div></div></div></div></div></div>

[dbrimlow]

You are right ... it is your css that is a problem.

 

It will not work with position:absolute. You must use floats.

 

You also need to have a liquid box and a graphic that auto resizes accordingly - the trick being creating two pieces of the same graphic and making them much larger than will actually display.

 

Here is Doug Bowman's brilliant , Sliding Doors technique which nearly every css pro uses in one way or another.

 

But, you also have two other problems that you need to overcome; the sliding doors example will also help you with:

 

1. "DIV-itus" - WAY too many divs

2. Naked text all alone in a div - text not placed in a proper text level tag (paragraph, heading, list).

 

Divs are not meant to hold text without proper tags, nor do they replace table cells - and they should not be approached that way.

 

Here is your example html:

<body>
<div class="topLeftBorder">
<div class="topCenterRightBorder">"Title"
<div class="leftBorder">
<div class="containerContent">Testing 1,2,3...
<div class="rightBorder">
<div class="bottomLeftBorder">
<div class="bottomCenterRightBorder">
</div></div></div></div></div></div></div>
</body>

Whoa. Apart from being hard to read, bloated code, using absolute position on this block of divs does nothing ... nesting "position:absolute" divs also does nothing.

Unless contained in a "position:relative" block, "position:absolute" elements have no relation to the html code ... they are outside the html and are relative only to the (left, right, top, bottom) of the browser window.

 

Here is the simple html of a menu that uses the sliding doors technique (here is the actual example sliding door example - increase your browser's text size and you see the tab graphics resize proportionately with the text):

<body>
<div id="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li id="current"><a href="#">News</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
</body>

 

While they both use extensive css to display and position graphics, yours is div heavy, while Doug's is clean SEO and vision impaired reader friendly.

 

Try to start with proper semantic html code always before designing how it looks using css.

 

Good luck