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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    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.
    Attached Files Attached Files

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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%;}

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    I got it fixed. I used a method of <ul>'s, and applied the styling to the index.html file itself. Thank you.

    Shane


  •  

    Posting Permissions

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