www.webdeveloper.com
Results 1 to 5 of 5

Thread: Hello, I'm trying to get spacing between my buttons. I'm not sure if its HTML or CSS.

  1. #1
    Join Date
    Aug 2010
    Posts
    24

    Hello, I'm trying to get spacing between my buttons. I'm not sure if its HTML or CSS.

    Hello,

    I was wondering if anybody could assist me in getting some space between the buttons on my website. The website is www.marksbodyshop.org I tried adding padding, margin, and border elements to the html div tags that have the buttons, but it didn't work. I also tried adding padding, margin, and border elements to the nav, nav a, and nav li parts of the css, but didn't work. Thank you, as any help would be appreciated. I attached the index.html, main.ccs, defult.css, and defult2.css files as one text file named Coding for Marksbodyshop.org.txt.

    Shane
    Attached Files Attached Files

  2. #2
    Join Date
    Aug 2010
    Posts
    24
    I have tried changing the position line in the nav element to fixed and relative, but still not having any luck. I also tried to add outline lines to my nav, nav li, and nav a elements. It hasn't given me any space. It's now kinda messed up. www.marksbodyshop.org



    Thanks
    Shane





    Here is my main.css coding as of now:



    html, body {
    height:100%;
    margin:0;
    background-color:#000;
    background-image:url(../images/firstpage.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;

    border:0;
    padding:0;
    }
    #container {

    height:73%;

    }
    #nav {
    position:fixed;
    padding:10;
    margin:10;
    border:10;
    outline:10;
    list-style-type:none;
    height:7%;
    width:57%;
    top:40%;
    left:5%;

    z-index:2;
    }
    #nav li {
    width:16%;
    margin:10%;
    outline:10%;
    border:10%;
    padding:10%;
    height:100%;

    }
    #nav a {

    display:block;
    width:100%;
    height:100%;
    margin:10%;
    border:10%;
    outline:10%;
    padding:10%;
    outline:none;
    text-indent:-9999px;
    background-size:100% 300%;
    }

    #about {background-image:url(../images/aboutus.png);}
    #about1 {background-image:url(../images/contactus.png);}
    #about2 {background-image:url(../images/freelunch.png);}
    #about3 {background-image:url(../images/map.png);}
    #about4 {background-image:url(../images/meettheteambutton.png);}
    #nav a:hover {background-position:0 -100%;}
    #nav a:active {background-position:0 -200%;}

  3. #3
    Join Date
    Oct 2012
    Posts
    78
    Using the inspect element your div tags for the HTML buttons on your home webpage are:
    The css is located in the defult.css file. Try adding the padding or margin to these elements and you should see the desired effect.
    From what I can see the #nav isn't doing anything with the buttons.

    Code:
    #position {
    position: absolute;
    top: 47%;
    left: 5%;
    overflow: hidden;
    width: 20%;
    z-index: 2;
    }
    
    #positioncontact {
    position: absolute;
    top: 55%;
    left: 5%;
    overflow: hidden;
    width: 20%;
    z-index: 2;
    }
    #positionfreelunch {
    position: absolute;
    top: 63%;
    left: 5%;
    overflow: hidden;
    width: 20%;
    z-index: 2;
    }
    #positionmap {
    position: absolute;
    top: 71%;
    left: 5%;
    overflow: hidden;
    width: 20%;
    z-index: 2;
    }

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    You did not specify a measurement -- e.g. percent %, em, pixel px
    #nav {
    position:fixed;
    padding:10;
    margin:10;
    border:10;
    outline:10;
    ...
    }
    Of course, if measurement is zero 0, you do not have to specify how much of nothing,

  5. #5
    Join Date
    Aug 2010
    Posts
    24
    Thank you. I ended up using a method of <ul>'s, and applying the styling directly into the index.html file. I will keep your suggestion in mind though.

    Shane

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles