CODEWITHSUNDEEP
jqueryhtmlcss
rasheed
rasheed

Reputation: 1

how can i use images on the border of div tag all around to give custom border look with images?

Please help me in this as i am not getting any good solution for this problem i have set the following css to ger border image of the div container but the problem is that my right image is not coming right on the border but it leaves spaces from the right border side of the div container when it stretches out how to fix this problem.

div#container{
    position:relative;
    margin-left:120px;
    margin-right:120px;
    float:top;
    /*margin-top:-14px;*/
    margin-bottom:50px;
    /*border:2px solid #000;*/
    width:auto;
    height:100%;

    }   
ul#ulmenu{
    padding-left:0;
    list-style:none;

    }
div#menus{
    width:900px;
    margin-top:7px;
    margin-bottom:5px;
    /*display:block;*/

    }       
ul#ulmenu li{
    margin-top:15px;
    float:left;
    line-height:16px;
    }

ul#ulmenu a{
    margin-top:13px;
    text-decoration:none;
    font-family:Verdana, Geneva, sans-serif;
    font-size:16px;
    font-weight:bold;
    padding:8px;
    border:2px solid #060;
    background:#069;
    color:#FFF;
    }
ul#ulmenu a:hover, ul#ulmenu a:visited{
    background:#09F;
    color:#C06;
}
div#left-image{
    position:absolute;
    left:0;
    width:28px;
    height:100%;
    float:left;
    background:url(nios%20admin%20images/images/images/border-left.png) repeat-y;   
    }

div#right-image{
    position:absolute;
    display:compact;
    right:0;
    margin:0;
    width:30px;
    height:100%;
    float:right;
    background:url(nios%20admin%20images/images/images/border-right.png) repeat-y;
    }   
div#bottom{
    position:absolute;
    bottom:0;
    width:100%;
    /*border:2px solid #000;*/
    height:36px;
    z-index:100;
    }   
div#bottom-left{
    width:51px;
    height:36px;
    background:url(nios%20admin%20images/images/images/corner-left.png) no-repeat;
    float:left;
    }   
    div#bottom-center{

    height:36px;
    background:url(nios%20admin%20images/images/images/bottom-image.png) repeat-x;
    margin-right:49px;
    /*clear:both:*/
    }       
div#bottom-right{
    width:49px;
    height:36px;
    background:url(nios%20admin%20images/images/images/corner-right.png) no-repeat;
    float:right;
    margin-top:-36px;

    }   

div#main-containts{
    position:absolute;
    margin-right:30px;
    left:25px;
    right:30px;
    padding:25px 10px;
    text-align:center;
    width:auto;}    
div#data-containts{
    /*position:absolute;*/
    margin-top:50px;
    padding-top:50px;
    }                   
#container #main-containts #data-containts strong {
    font-family: Tahoma, Geneva, sans-serif;
    color: #C03;
    font-size: 18px;
}
.msg {
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    color: #C06;
    font-size: 18px;
}
div#workspace{
    position:relative;}
</style>

</head>
<body>
<div id="workspace">
<div id="adminwrapper">
<div align="center">
<img src="images/adminbg-2.png" />
</div>
</div>

<div id="container">
<div id="left-image"></div>

<div id="main-containts" align="center">
    <div id="menus">
    <ul id="ulmenu">
    <li><a href="index.php?act=admin_logout" >Logout</a></li>
    <li><a href="javascript:void(0);" OnClick="c_pass()">Change-Password</a></li>
    <li><a href="#" >Back-Up</a></li>
    <li><a href="students.php?act=show_stud_rec" >Students</a></li>
    </ul>
    </div>
    <div id="data-containts">
    <span class="msg">{$msg}</span> </div>
    <br/>
    <p>
   {$body_data}
    </p>
</div>


<div id="right-image"></div>

   <div id="bottom">

       <div id="bottom-left"></div>
       <div id="bottom-center"></div>
       <div id="bottom-right"></div>

   </div>


</div>
</div>
</body>
</html>

Upvotes: 0

Views: 524

Answers (1)

user1499644
user1499644

Reputation:

You could use the border-image css property.

Its given here in detail: http://css-tricks.com/understanding-border-image/

And this is the demo: http://www.norabrowndesign.com/css-experiments/border-image-anim.html

Upvotes: 4

Related Questions