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

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%;}

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;
}

---

You did not specify a measurement -- e.g. percent %, em, pixel px

Quote:

---

#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,

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