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

This site is best viewed in a modern browser with JavaScript enabled.

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

Repatilian

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

The attachments of this post were removed during the platform migration in 2018

Repatilian

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

theyoker

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.

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

auntnini

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,

Repatilian

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