0

I want to give equal spaces in between the list-items of a horizontal menu items . I tried to give them margin and padding but nothing seem to work. How to do that in between these rounded buttons?

And how to change the color when pressed upon and make that stay until I move forth or back to something else? here is my code snippet ...

<!DOCTYPE html>
<html>
<head>

<title>jQuery UI Dialog: Hide the Close Button/Title Bar</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<style type="text/css">

    .mySlider
    {
       //
    }

    .shadow_div
    {
       //

    }

    .mySlider img
    {
        //

    }

    .Parent_Slider > a
    {
        text-decoration:none;
        font-weight:bold;
        width:32px;
        height:32px;
        position:absolute;
        top:50%;
        text-indent:-9999px;
    }

    .Next_Class
    {
        right:250px;
        background-image:url(Images/rightarrow.jpg);
    }

    .Prev_Class
    {
        left:250px;
        background-image:url(Images/leftarrow.jpg);
    }

    ul.Round_Buttons
    {
        position:relative;
        left:40%;
        top:5px;
        text-decoration:none;
        list-style-type:none;
    }

   ul.Round_Buttons li
   {
       float:left;
       background-color:red;
       margin:0px 0px 3px 0px;
       border-radius:50%;
   }

</style>

<script type="text/javascript">

 //

</script>
</head>

<body>
<div class="Parent_Slider">
    <div id="my_image_slider" class="mySlider">
        <img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/>
        <img id="2" src="Images/audi.jpg" alt="" title="BMW India" />
        <img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" />
        <img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" />
        <img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" />
    </div>
    <a href="#" class="Next_Class">Next</a>
    <a href="#" class="Prev_Class">Prev</a>
</div>
    <div class="shadow_div" >
        <ul class="Round_Buttons">
            <li id="1st_Round"><a href="#">1</a></li>
            <li id="2nd_Round"><a href="#">2</a></li>
            <li id="3rd_Round"><a href="#">3</a></li>
        </ul>
    </div>  
</body>
</html>
recmach
  • 65
  • 2
  • 9

2 Answers2

0

To have equal spaces: margin or padding SHOULD work. Else you are doing something wrong and we need more "code" to help you.

To have a style when the button is pressed, is something like this: Can I have an onclick effect in CSS?

Cheers

Community
  • 1
  • 1
Yves Lange
  • 3,914
  • 3
  • 21
  • 33
0

I just modified one class like below. it is working fine for me.

ul.Round_Buttons li
   {
       float:left;
       background-color:red;
       margin:0px 0px 3px 10px;
       padding:0px 10px;
        border-radius:50%;
   }
Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54