Solved

Css- use png transparent images for borders and corners

Posted on 2014-03-20
8
338 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
Independent Software Vendors: 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

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

636 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