Solved

Css- use png transparent images for borders and corners

Posted on 2014-03-20
8
326 Views
Last Modified: 2014-03-26
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
0
Comment
Question by:Panos
  • 5
  • 2
8 Comments
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
Comment Utility
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
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
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
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
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.
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
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.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 2

Author Comment

by:Panos
Comment Utility
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
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 500 total points
Comment Utility
I looked at your screenshot .gif , and did some more to get a better match -
<style>
.widget_holder{ 
width:280px; 
height:280px;
border:1px solid #f00;
}

.widget_container{
position:relative;
height:200px;
padding:7px 14px;
}

.dvr{
position:absolute;
top:11px;
right:0px;
width:11px;
height:194px;
background-image:url(images3/right_border.png);
background-repeat: repeat-y;
}
</style>

<div class="widget_holder">
<!---  --->
<div class='widget_container'>ok
  <img src="images3/top_border.png" style="height:11px;width:260px;position:absolute;top:0px;left:10px;"/>
  <img src="images3/top_border.png" style="height:11px;width:260px;position:absolute;bottom:-4px;left:10px;"/>
  <div class="dvr"></div>
  <div class="dvr" style="right:0;left:0px;background-image:url(images3/left_border.png);"></div>

  <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>
<!--- end of box border --->
</div>

Open in new window

But I do not understand so much, what you may mean by "two disavantages" -
"I need a fixed height for the divs"
"I can t you css with backround image "

Oh well? ?
have you really looked at the CSS3 background positioning properties? ?
there is the background-position, you only use %, BUT you can use pixel on line border as -
background-position: 11px 100%;

there is also the - background-clip -  and the - background-size  - properties, I do not have time to see if they could be a help in your 8 div with background image approach.

you may can set the background-clip  to - padding-box - and have the padding as 11px in that div, , maybe, maybe not? ? ?  , , does not seem likely.

The only thing that having a white background on the corner png, is that it just covers up the line border that are offending your transparent display. But white backgrounds are very little used any more.

Just an observation , you really need to put SOMETHING inside your widget_container <div> for testing and sizing , if you do NOT have padding then the contents will cover the border images.
0
 
LVL 2

Author Comment

by:Panos
Comment Utility
Hi  Slick812
I just was able to test your code.It is working fine and it is a solution. Thank you.
0
 
LVL 2

Author Closing Comment

by:Panos
Comment Utility
Thank you
regards
panos
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now