Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times

    whats going on here??

    ok, so im making navbar and a home button. when i hover over the home whether i hover the text or the button the hand pointer appears but when i hover the navbar i have to hover over the text???

    heres the css

    html {
    background: url('../pics/interior.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

    .button{position: relative;
    top: 10px;
    left: 10px;
    border: 1px solid white;
    box-shadow: 0px 0px 2px grey;
    width: 60px;
    display: block;
    tet-align: center;
    line-height: 60px;
    border-radius: 10px;
    text-align:center;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(90,90,90)));
    background:-moz-linear-gradient(top,rgb(168,168,168),rgb(90,90,90));
    }

    a.button:hover{
    background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(255,255,255,1)),to(rgba(69,69,69, 1)));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(255,255,255,1) 0%,rgba(0,28,78,1) 100%);
    border-radius: 9px;
    }


    a {
    text-decoration: none;
    font-family: arial;
    color: #505050;
    font-weight: 600;
    text-transform: uppercase;
    text-shadow: 0px 0px 1px #262626;
    }


    .button1 li {position: relative;
    top: -65px;
    left: 50px;
    float: left;
    display: inline-block;
    height: 30px;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid black;
    box-shadow: 0px 0px 2px grey;
    width: 175px;
    tet-align: center;
    line-height: 30px;
    text-align:center;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(90,90,90)));
    background:-moz-linear-gradient(top,rgb(168,168,168),rgb(90,90,90));
    }

    a.button1:hover{
    background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(255,255,255,1)),to(rgba(69,69,69, 1)));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(255,255,255,1) 0%,rgba(0,28,78,1) 100%);
    border-radius: 9px;
    }



    #left {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    }

    #right {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    }
    Last edited by coleio; Jan 31st, 2014 at 10:16 AM.

  2.  

  3. #2
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    button1 is the navbar, i had it set to na but changed it when i noticed it wasnt hovering right. thought changing it to button1 might fix it

    edit: i added hover and borders to the navbar but their not showing up for some reason???

    i have the borders id'd because they are the left and right tabs, and i only want a radius on each end

    where am i going wrong here???
    Last edited by coleio; Jan 31st, 2014 at 10:17 AM.

  4. #3
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    heres the html

    <!doctype html>
    <html>
    <head>
    <title> learning this **** </title>
    <link rel="stylesheet" href="../css/button.css">

    </head>

    <body>
    <div class="box">
    <a href="#" class="button"> home </a>
    </div>

    <div class="button1">
    <ul>
    <li><a href="#" id="left"> F1 </a></li>
    <li><a href="#"> The beat </a></li>
    <li><a href="#"> Random </a></li>
    <li><a href="#"> Dont you hate </a></li>
    <li><a href="#"> Truth about cars </a></li>
    <li><a href="#" id="right"> scribbles </a></li>
    </ul>
    </div>

    </body>
    </html>

  5. #4
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    ok have the border radius fixed, had the id in the wrong place.

  6. #5
    Junior Member
    Join Date
    Feb 2014
    Posts
    14
    Member #
    38383
    Lots is going on here. First, I'm not sure the exact effect you're looking for. If I follow your code logic I get one effect but if I understand you right, you may want a different effect entirely. The way to achieve each one is different as well. I made four templates for you to check out and in the source code will be the main differences to see for yourself.

    The biggest problem in each template is you need to make the links inside the list items block level and increase their height/width to be 100%. Like this:

    .button1 a {
    display: block;
    width: 100%;
    height: 100%;
    }

    This is where things get tricky, depending on what you were trying to do.

    In some cases your #left and #right ID's are fine but in others they're on the wrong element. Let's go over test1 in a new post.

  7. #6
    Junior Member
    Join Date
    Feb 2014
    Posts
    14
    Member #
    38383
    http://www.draftnikcentral.com/site_...leio/test1.cfm

    The biggest change here is the #left #right being added to the LI elements instead of the A element. Can't stop there though. You must also add the hover effect to get it to stay rounded:

    .button1 li#left a:hover {
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    }

    .button1 li#right a:hover {
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
    }

    You also need to increase the button height/line-height from 30px to 60px for the LI items. That is IF you are trying to make them the same size as the home button. I was unsure about that but I left that item alone in test2.cfm

  8. #7
    Junior Member
    Join Date
    Feb 2014
    Posts
    14
    Member #
    38383
    http://www.draftnikcentral.com/site_...leio/test2.cfm

    Pretty much the same code as test1.cfm but the height/line-height is unaltered.

  9. #8
    Junior Member
    Join Date
    Feb 2014
    Posts
    14
    Member #
    38383
    http://www.draftnikcentral.com/site_...leio/test3.cfm

    This one is more or less fixing your original code just to work properly with the effect you wanted but as you can see, you're just making all of the buttons rounded and I didn't think that was the desired effect you were trying to achieve. That's more or less what just adding the a display: block code would have got you.

  10. #9
    Junior Member
    Join Date
    Feb 2014
    Posts
    14
    Member #
    38383
    http://www.draftnikcentral.com/site_...leio/test4.cfm

    Last but not least, this effect fixes the button effect of making them all rounded but it's without adding the line of code from test1.cfm that makes #left and #right have the rounded corners. Without that, they are all square.

    Hope this helps you and others!

  11. #10
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    dude thanks alot, i had it fixed (well.....) but thanks for taking the time to go through all that


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:34 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com