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.

[VIPStephan]

Yeah, no wonder it doesn’t work because you have positioned everything absolutely. With your current set-up you’d need to change the top positions. When I opened Firebug in order to look at your code I noticed that the page is scaling, but not proportionally, rather, it is stretched and squeezed which is not a very good approach. You should use a fixed size layout, especially since you’re using so many non-repeatable graphics.

[Repatilian]

Hi, I tried to use relative and fixed to the position line in my nav element in my main.css. I also tried adding an outline line to the nav, nav li, and nav a elements. I still can't get it to space out. It changed it a little bit, but it's pretty messed up. Check out what it's doing. www.marksbodyshop.org


Thank you
Shane








Here is my main.css code:


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

[Repatilian]

I got it fixed. I used a method of <ul>'s, and applied the styling to the index.html file itself. Thank you.

Shane