asked on

Css- use png transparent images for borders and corners

Hello experts
I need help to create my "widget-box".
I want to use images for my corners and borders.Unfortunately the code i'm using is not helping me to get the expected result. Because of the transparent images the borders are overlapping the corners (100% width) and i don't get the corners as expected.
I post the full code and the images.
Any help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.widget_holder{ width:280px; height:280px;}
.widget_container{ height:200px;}
/*
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
*/

.tlc, .trc, .blc, .brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

.tlc
	{
	background-image:url(Stylesheet/widget/top_left_corner.png);
	background-position: 0% 0%;
	}

.trc
	{
	background-image:url(Stylesheet/widget/top_right_corner.png);
	background-position: 100% 0%;
	}
	
.blc
	{
	background-image:url(Stylesheet/widget/bottom_left_corner.png);
	background-position: 0% 100%;
	}

.brc
	{
	background-image:url(Stylesheet/widget/bottom_right_corner.png);
	background-position: 100% 100%;
	}

.tb, .bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
.tb
	{
	background-image:url(Stylesheet/widget/top_border.png);
	background-position: 0% 0%;
	}

.bb
	{
	background-image:url(Stylesheet/widget/bottom_border.png);
	background-position: 50% 100%;
	}
	
.rb
	{
	background-image:url(Stylesheet/widget/right_border.png);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

.lb
	{
	background-image:url(Stylesheet/widget/left_border.png);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}

</style>
</head>

<body>
<div class="widget_holder">
<div class="lb">
 <div class="rb">
  <div class="bb">
   <div class="blc">
    <div class="brc">
	 <div class="tb">
      <div class="tlc">
       <div class="trc">
       <!---  --->
        <div class='widget_container'></div>
	   <!--- end of box border --->
	   </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>
</div>
</body>
</html>

Open in new window

widget.zip
screenshot.gif

Tej Pratap Shukla ~Dexter

Hey there
I think i found the solution for your problem .
for top border and bottom border take margin-left and margin-right as 2 px
.tb
      {
      background-image:url(Stylesheet/widget/top_border.png);
      background-position: 0% 0%;
      margin-left:2px;
      margin-right:2px;

      }

.bb
      {
      background-image:url(Stylesheet/widget/bottom_border.png);
      background-position: 50% 100%;
      margin-left:2px;
      margin-right:2px;
      }
In similar way do for the left border and the right border but take margins from top and bottom if it doesn't work then use mozkit to trim the edges.
Please mark the question answered if you feel you achieved what you asked for

Thanks
~Dex

Panos

ASKER

Hi Dexter_morgan
Unfortunately the margin way is not working. I tried every combination. I don't want to use mozkit . I need a solution for all Browsers (and IE => 8).
Thank you anyway

Member_2_248744

greetings panosms, I have not found good results for image borders using the background image in 8 div, it rarely works for me with borders, unless the border images are simple, , due to the padding and margin for div do not change the background image as I need to do.
here is my version, I use absolute positioning to precisely place the borders, it's downside is that the images are not flexible (change the size in the widget_container) -

<style>
.widget_holder{ 
width:280px; 
height:280px;
border:1px solid #f00;}

.widget_container{
position:relative;
height:200px;
padding:10px;}
<style>

<div class="widget_holder">

<div class='widget_container'>ok test Text here
<img src="images3/top_border.png" style="height:5px;width:260px;position:absolute;top:2px;left:10px;"/>
<img src="images3/left_border.png" style="height:200px;width:5px;position:absolute;top:10px;left:2px;"/>
<img src="images3/left_border.png" style="height:200px;width:5px;position:absolute;top:10px;right:0px;"/>
<img src="images3/top_border.png" style="height:5px;width:260px;position:absolute;bottom:0px;left:10px;"/>
<img src="images3/tl-corner.png" style="position:absolute;top:0px;left:0px;"/>
<img src="images3/tr-corner.png" style="position:absolute;top:0px;right:0px;"/>
<img src="images3/br-corner.png" style="position:absolute;bottom:0px;right:0px;"/>
<img src="images3/bl-corner.png" style="position:absolute;bottom:0px;left:0px;"/></div>

</div>

Open in new window

I am not really sure about the way you may way the u want the borders to connect to the corners? But all of the border images can be moved and sized to anything you need.
Ask questions if you need more info.

Panos

ASKER

Hi
I m not at my working pc now. I will send xou a screenshot to show you what i want to show as soon as possible. I added a white bg to every corner image. It is working but only with a white bg.

Panos

ASKER

Hi Slick812
I tested your solution. It is very interesting.
There are two disavantages
1. I need a fixed height for the divs
2. I can t you css with backround image ( to avoid many calls to the server for all images x n divs ).

But it is a working solution. I post the expected screenshot and the result of your code.Can you take a look please?
screenshot.gif

ASKER CERTIFIED SOLUTION

Member_2_248744

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Panos

ASKER

Hi Slick812
I just was able to test your code.It is working fine and it is a solution. Thank you.

Panos

ASKER

Thank you
regards
panos