Solved

Css- use png transparent images for borders and corners

Posted on 2014-03-20
8
335 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
8 Comments
 
LVL 11

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39944470
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
ID: 39945622
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 34

Expert Comment

by:Slick812
ID: 39946007
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Author Comment

by:Panos
ID: 39946022
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
 
LVL 2

Author Comment

by:Panos
ID: 39947075
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 34

Accepted Solution

by:
Slick812 earned 500 total points
ID: 39947734
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
ID: 39957062
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
ID: 39957065
Thank you
regards
panos
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

726 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