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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: Help Please

  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Help Please

    Alright I ran into another problem I can't seem to fix. Look at this picture:



    As you can see the buttons ain't directly on the nav. How can I center them on there?

    style.css
    Code:
    body {
    font-family: FANTASY;
    background-color: #000000;
    font-size:100%;
    }
    
    #container {
    width: 600px;
    margin:43px auto 0;
    }
    
    #header {
    width: 600px;
    height: 110px;
    background-image:url(images/1.png);
    margin: -24px auto;
    }
    
    #nav {
    width: 600px;
    height: 45px;
    background-image:url(images/1.png);
    margin: 50px auto;
    }
    
    #menu {
    list-style:none;
    }
    
    #menu a{position: relative; float: left; display: block; background: url("images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
    #menu span{position: relative; display: block; margin: -6px 5px 0px 5px; padding: 4px 15px 0px 10px; height: 27px; background: url("images/menuSpan.gif") bottom right;}
    #menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
    #menu a:hover span{ background: url("images/menuSpan.gif") top right;}
    index.html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    
    <div id="container">
    
    <div id="header"> </div>
    
    <div id="nav">
    
    <div id="menu">
    
    <div class="menu">
    
    <a href="index.html"><span>Home</span></a>
    <a href="register.html"><span>Register</span></a>
    <a href="download.html"><span>Downloads</span></a>
    <a href="support.html"><span>Donate</span></a>
    <a href="forum"><span>Forum</span></a>
    <a href="forum"><span>Vote</span></a>
    <a href="forum"><span>Contact</span></a>
    
    </div> 
    </div>
    </div>
    
    </body>
    </html>
    Last edited by Decker; 08-26-2010 at 07:25 PM.

  • #2
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Alright I kind of have that fixed but now I have another problem, check it out:



    index.html is the same, but here is the new css:

    Code:
    body {
    font-family: FANTASY;
    background-color: #000000;
    font-size:100%;
    }
    
    #container {
    width: 600px;
    margin:43px auto 0;
    }
    
    #header {
    width: 600px;
    height: 110px;
    background-image:url(images/1.png);
    margin: -24px auto;
    }
    
    #nav {
    width: 600px;
    height: 45px;
    background-image:url(images/1.png);
    margin: 50px auto;
    }
    
    #menu {
    list-style:none;
    }
    
    #menu a{position: relative; float: left;  background: url("images/menuLink.gif") bottom left no-repeat; padding: 6px 0px 0px 0px; height: 25px; text-decoration: none; font-size: 15px; color: #afafaf;}
    #menu span{position: relative; display: block; margin: 5px 5px 5px 6px; padding: 4px 15px 0px 10px; height: 27px; background: url("images/menuSpan.gif") bottom right;}
    #menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
    #menu a:hover span{ background: url("images/menuSpan.gif") top right;}

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Study your margins in the old CSS and the New. You obviously changed some of them to move the tabs down. So if you part of the button positions, you may need to change the other parts to match. Study it out and think about it.

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    I have been trying to all day. I cannot figure it out.

  • #5
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    What's all that stuff in orange at the bottom?

    I can't understand relative positioning, myself - but I do know, that when I've used it, the whole thing goes tits-up. I don't know what the hell I'm doing with CSS, but I would advise not trying to mix relative positioning with floats. I don't think it works and that's why this is happening. Instead, remove the positional attribute altogether, keep the floats and use margins and padding to position the bits and pieces of your menu.

    But you don't have to listen to me. As you can see from my sig, I'm crap at CSS.

    Dr. V
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    His tabs are made up of two images and he changed some of his margins on one of the images but didnt't change the margins for the other image to compensate. At least I think thats what happened. Im not that good at CSS either. lol

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    #Bump

    Couple days have passed now and am still having the same issue. Can someone help please?

  • #8
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    #bump

    Still needing help........

  • #9
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    #bump again....

    Can someone please help me now?

  • #10
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    #bump..................................................

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Old CSS

    Code:
    #menu a{position: relative; float: left; 
    display: block; 
    background: url("images/menuLink.gif") bottom left no-repeat; 
    padding: 6px 0px 0px 0px; 
    height: 25px; text-decoration: none; 
    font-size: 15px; color: #afafaf;}
    #menu span{position: relative; 
    display: block; 
    margin: -6px 5px 0px 5px; 
    padding: 4px 15px 0px 10px; 
    height: 27px; 
    background: url("images/menuSpan.gif") bottom right;}
    #menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
    #menu a:hover span{ background: url("images/menuSpan.gif") top right;}
    New CSS

    Code:
    #menu a{position: relative; 
    float: left;  
    background: url("images/menuLink.gif") bottom left no-repeat; 
    padding: 6px 0px 0px 0px; 
    height: 25px; 
    text-decoration: none; 
    font-size: 15px; color: #afafaf;}
     
    #menu span{position: relative; 
    display: block; 
    margin: 5px 5px 5px 6px; 
    padding: 4px 15px 0px 10px; 
    height: 27px; 
    background: url("images/menuSpan.gif") bottom right;}
    #menu a:hover{background: url("images/menuLink.gif") top left no-repeat; color: #252525;}
    #menu a:hover span{ background: url("images/menuSpan.gif") top right;}
    the margin values have been changed in the new CSS. Again I think the tabs you are using are created with two images, hence when you changed the margins for one part of the tabs, the other part or image of the tabs were not changed and therefore stay in the original positions. Play around with some of the margins in your CSS. Trial and error can TEACH alot.
    Last edited by teedoff; 09-03-2010 at 09:19 PM.

  • #12
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Still doesn't work.

    Here is the site

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by Decker View Post
    Would you please post a link to online version? You may even use a free host like freehostia.com
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #14
    New Coder
    Join Date
    Aug 2010
    Posts
    62
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Would you please post a link to online version? You may even use a free host like freehostia.com
    I don't have it setup yet to a website online.

  • #15
    Regular Coder
    Join Date
    Jul 2010
    Location
    St George, UT
    Posts
    138
    Thanks
    6
    Thanked 17 Times in 17 Posts
    Could you post the entire CSS file?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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