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 15 of 15
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation CSS Hover Button Problems

    Website:
    http://www.mycwcreations.com

    Problem:
    I need to put spaces in between the buttons but when I do, it makes doubles of the buttons. Also can anyone tell me how to center the text so it does not stick to the top of the button? Thanks.

    Link to style sheet:
    http://www.mycwcreations.com/main/assets/style.css

    Link to header.php:
    http://www.mycwcreations.com/main/includes/header.php

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Get rid of the part in red, add the parts in green
    Code:
    /*----- First State  -----*/		
    .cssnav,
    .cssnav a {
    DISPLAY: block;
    FONT-SIZE: 11px; 
    BACKGROUND: url(http://www.mycwcreations.com/main/assets/topbutton.png) no-repeat; 
    FLOAT: left; 
    WIDTH: 86px; 
    HEIGHT: 20px;
    text-decoration:none;
    line-height:20px;
    FONT-FAMILY: arial, helvetica, sans-serif; 
    COLOR: black;
    margin:10px;
    }
    I advise that you read this as you don't seem to quite understand how html should be structured. http://brainstormsandraves.com/artic...ics/structure/
    Last edited by _Aerospace_Eng_; 05-27-2007 at 10:29 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I did that and everything looks better, except that the buttons are positioned wrong height wise. The buttons are sticking to the bottom. I tried line height for them but that did not work. How would I fix that?

    And, what did I do wrong that made you think that I don't know how to structure html properly? Was there any mistakes that you did not point out? I am new to this method of coding, I was used to positioning things with absolute positioning, but someone has recently showed me how to use wrappers and stuff.

    Thanks.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    How should they look? As to what you did wrong, if you read the article you might have understood. One good example is your menu. You used a bunch of divs to get the effect you wanted when a simple unordered or ordered list would have been better to use.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Well, someone else in these forums showed me how to make that menu. The menu that I was using used unordered list, but it did not work with the new wrapper method of coding because it was absolutely positioned.

    http://www.uafclan.com that's a website that I did using my old method of coding. It worked for that website but not for this one, as one of the things I had tried positioning on cwcreations would not display the same on all browsers. So I made a post here and they showed me code to make a new type of menu, and how to use wrappers and stuff.

    About what the menu is supposed to look like... it's supposed to be more towards the middle up and down wise. Right now it's stuck to the bottom of the menu background. It's supposed to be aligned up and down wise to the middle like how it is on my http://www.uafclan.com site. It looks funny the way it is right now.

  • #6
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Bump?

  • #7
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Is this not fixable at all, or have I done something to annoy? : /

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try using a container div and then position that

  • #9
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi!

    I checked out your site, and I think it looks cool with the buttons sitting on the line. It's a design technique that can lend a sense of "energy".

    But if you still don't like it, the suggestion to use a DIV container is a good one and one that I was going to suggest as well.

    I really hope that you let us know how it worked for you. I know how irritating it can be to have something that "tasks" you about your design!

    GOOD LUCK!!

    TTYS,
    Cyn

    Quote Originally Posted by wolfcry044 View Post
    Website:
    http://www.mycwcreations.com

    Problem:
    I need to put spaces in between the buttons but when I do, it makes doubles of the buttons. Also can anyone tell me how to center the text so it does not stick to the top of the button? Thanks.

    Link to style sheet:
    http://www.mycwcreations.com/main/assets/style.css

    Link to header.php:
    http://www.mycwcreations.com/main/includes/header.php

  • #10
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry... my bad. I didn't read your question closely enough and I thought your buttons were sticking to closely to the line of your graphic. I didn't realize that you were talking about the text of your button in the graphic itself.

    Please forgive me for not reading closely enough, and as I checked your page today, it looks like you've solved your problem!

    -Cyn

    Quote Originally Posted by TechCyn View Post
    Hi!

    I checked out your site, and I think it looks cool with the buttons sitting on the line. It's a design technique that can lend a sense of "energy".

    =cut=
    TTYS,
    Cyn

  • #11
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thank you for your help guys. Do I position it with absolute positioning or .... ?

  • #12
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts
    **Actually**
    I tried positioning the buttons using absolute and relative postioning and although it works fine, when you stretch the page or make it smaller, the buttons stay the same on the page but the entire website content moves, so it looks horrible.

  • #13
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hello?
    It won't work positioning it, because the page is using a wrapper. If you stretch the page, the menu stays where it is and the rest of the pages stretches around it, making the menu not in the right spot anymore.

    Can someone explain to me how to get it to move with the page as it's stretched, while centering the menu as a whole at the same time?

  • #14
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,046
    Thanks
    19
    Thanked 42 Times in 42 Posts
    from www.w3schools.com, i dont no much about css so sorry if its not helpfull
    http://www.w3schools.com/css/css_positioning.asp
    although i hope it does help

  • #15
    New Coder
    Join Date
    Jan 2007
    Posts
    88
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I appreciate your trying to help, but using css positioning on the menu isn't working since the website is done using a wrapper and stretches when the browser is stretched.


  •  

    Posting Permissions

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