Search code examples
htmlcssmenubar

how can i set image for list border in menu bar?

i want create header & menu in website like as below screen shot:

enter image description here

i want nice view in mobile & tablet.

i try with below cod but cant add border between <li> in menu bar list. u can see my cod in :

http://jsfiddle.net/saghian/rvdg8es5/1/

please help to create header & menu.

HTML:

<!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>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <div class="header">
        <div class="header-logo">

            <div class="small-menu">
                    <ul>
                        <li><a href="#"> درباره ما </a></li>
                        <li><a href="#"> تماس با ما </a></li>
                        <li><a href="#"> گالری تصاویر </a></li>
                    </ul>
            </div> <!-- small-menu -->      

        </div>    
    </div>

</body>
</html>

CSS:

@charset "utf-8";
/* custom CSS */

* {
    padding:0;
    margin:0;
    border:0;
    }

.header {
    background-color:#b92f0b;

    width:100%;
    height:650px;
    margin-bottom:20px;
    }

.header-logo {
    background:url(../img/header/takmazzeh.png) no-repeat;
    width:820px;
    height:445px;
    margin:auto;
    position:relative;
    }

.small-menu {
    position:absolute;
    right:250px;
    top:450px;
        border-bottom:1px #CCCCCC solid;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 229, 214, 1);
    -moz-box-shadow:    0px 1px 0px 0px rgba(255, 229, 214, 1);
    box-shadow:         0px 1px 0px 0px rgba(255, 229, 214, 1);



    }

.small-menu ul {

    }

.small-menu ul li {
    float:right;
    padding:10px;
    list-style:none;

border-style: solid;
border-width: 0px 15px 0px 0px;
-moz-border-image: url(../img/header/border-dot.png) 27 repeat;
-webkit-border-image: url(../img/header/border-dot.png) 27 repeat;
-o-border-image: url(../img/header/border-dot.png) 27 repeat;
border-image: url(../img/header/border-dot.png) 27 fill repeat;
    }
/*.small-menu ul li:last-child {
    border:none;
}*/

.small-menu ul li a {
    text-decoration:none;
    color:#FFF;
    font:14px Droid Arabic Kufi;
    font-weight:900;
    }
Solution

  • You need to do background not border-image...

    .small-menu ul li {
background: url(http://saghian.ir/takmazzeh/img/header/border-dot.png) no-repeat -8px 6px;}

    Then add first-child to delete first:

    .small-menu ul li:first-child {
    background:none;
}

    Check the: FIDDLE