Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Where would I set the space size within buttons

    Where would I set the size of the space within buttons?

    Code:
    <style type="text/css">
    <!--
    .expand-down {
      font-family:Arial, Helvetica, sans-serif;
      line-height:normal;
      margin-top:190px;
      height:175px;
      width:665px;
      background: url() no-repeat;
      margin-bottom:30px;
    }
    /* reset margins and paddings */
    .expand-down * {
      margin: 0;
      padding: 0;
    }
    .expand-down ul {
      padding-top:5px;
      margin-left:10px;
    }
    .expand-down ul li {
      float:left;
      list-style-type:none;
    }
    .expand-down ul li a {
      text-decoration:none;
    }
    .expand-down ul li a img {
      width:55px;  /* initial width of images, 50% of width */
      height:50px; /* initial height of images, 50% of height */
      border:none;
    }
    /* initially, don't show the label inside <span> tag */
    .expand-down ul li a span {
      display:none;
    }
    .expand-down ul li:hover a span {
      /* show label on mouse hover */
      display:block;
      font-size:14px;
      text-align:center;
      color:#fff;
    }
    /* expand the image to 100% on mouse hover.
    ** an image becomes active when mouse hovers it
    ** ideally, the image should have same width and height as below 
    */
    .expand-down ul li:hover a img {
      width:100px;
      height:100px;
    }
    /* expand the image next to the right of the active image to 60% using + selector */
    .expand-down ul li:hover + li a img {
      width:60px;
      height:60px;
    }
    /* expand the image second to the right of the active image to 55% using + selectors */
    .expand-down ul li:hover + li + li a img {
      width:55px;
      height:55px;
    }
    -->
    </style>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Give the button an ID or CLASS and place it in the CSS section or use inline css.
    Code:
    <input type="button" value="A big click here" style="width:400px;height:400px;background-color:red;" onclick="document.getElementById('divy').style.display='block';"  />
    <div id="divy" style="display:none;">Some Woeds To Live By...</div>

  • Users who have thanked sunfighter for this post:

    bravo_ATL284 (12-23-2011)

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •