CODEWITHSUNDEEP
htmlcss
Jhilom
Jhilom

Reputation: 1028

Add padding on a background picture

Please help me someone with this code.

CSS Code

    #nav, #nav ul
            {
                width:1000px;
                background-color: #F3F3F3;
                margin: 0 auto;

            }


     #nav li
        {
            float: left;
            padding-top:3px;
            height:20px;
            text-align:left;
            text-transform:uppercase; 
            position: relative; 
            display: block;
            font-family: Tahoma;
            font-size: 10px;
            font-weight:bold;
            text-align: left;
            text-decoration: none;
            padding:10px 15px 0 15px;
            background:url(../image/border.png) no-repeat right center;
        }

And I have problem with

#nav li:hover
    {   

        background: #3EBBEC url(../image/arrow.png) no-repeat left; 
        color: #FFFFFF;
        margin:0 auto;
    }

HTML code

<html>
<head>Test Page</head>
<body>
<ul>
<li id="nav">test1</li>
<li id="nav">test2</li>
</ul>
</body>
</html>

The total code below. Here I need to remove space before text and the image "Arrow". How will I be able to do?

Upvotes: 0

Views: 637

Answers (5)

Jhilom
Jhilom

Reputation: 1028

Replace this CSS and see what happens

#nav li:hover
    {   

        background: url("../image/arrow.png") no-repeat scroll 4px 10px #3EBBEC; 
        color: #FFFFFF;
    }

Upvotes: 1

A_funs
A_funs

Reputation: 1246

the ul element also has default styling try adding this if you want to remove all the space

ul{
  margin:0px;
  padding:0px;
}
li.nav{
  padding:0px;
  margin: 0px;
}

li.nav:hover{
  background:url(images/arrow.png) no-repeat left center;
  text-align:center;
  margin: 0 auto;
}

you also might want this:

ul{
margin:0px;
padding:0px;
list-style-type: none;
}

Upvotes: 0

lakshmi priya
lakshmi priya

Reputation: 159

This code below ll never work....

.nav li
{
  padding:0px;
  margin: 0px;
}

.nav li:hover
{
  background:url(images/arrow.png) no-repeat left center;
  text-align:center;
  margin 0 auto;

}

use,

li.nav
{
  padding:0px;
  margin: 0px;
}

li.nav:hover
{
  background:url(images/arrow.png) no-repeat left center;
  text-align:center;
  margin: 0 auto;
}

Upvotes: 0

syrkull
syrkull

Reputation: 2344

to remove the image you have to delete this line 

background:url(images/arrow.png) no-repeat left center;

about the space you need to do this :

li {float:right; display:block;}

Upvotes: 0

killebytes
killebytes

Reputation: 980

.nav li{
   padding-left: 20px;
}

I just realized that your current css is not correct, that wouldnt take effect on your html. You should use:

li.nav{
   padding-left: 20px;
}

Upvotes: 2

Related Questions