Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS: Trouble with classes and transitions

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #32468
    Catasphere
    Member

    Hey guys, I’m new to this whole forum, so go easy on me.

    I have this:

    .navlinks { position: relative; -moz-transition: top .3s; }

    .navlinks:hover { top: 1px; }

    Which, obviously, grabs the links in my Nav bar at the top of the page and moves them down a pixel within .3 seconds.
    Then, I have:

    .sidelinks a { -moz-transition: padding .4s; }
    .sidelinks a:hover { padding-left: 6px; text-shadow: 1px 1px 5px black; }

    Further down the code. Problem is even though I assigned different transitions to both of these classes, the effects of both of them affect both the navlinks and the sidelinks. Why is that?

    #49344
    Catasphere
    Member

    LOL! Alright it’s gonna be pretty long but here goes nothing!

    HTML:








    The Roving Rover







    The Roving Rover







    Main Column


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna sem, pulvinar eget convallis a, ultrices ac dui. Proin a est metus, aliquet sollicitudin augue. Cras a diam nulla, non ultricies urna. Duis mattis sagittis ligula ut sodales. Ut eleifend varius lectus, ac fringilla risus pretium sit amet. Aenean et tincidunt ipsum. Nullam ligula felis, placerat eget blandit a, sagittis nec massa. Curabitur congue lectus a augue elementum varius. Ut iaculis mi nisl, eget mollis mi. Vestibulum laoreet, libero nec accumsan fringilla, dolor quam convallis neque, sollicitudin porta turpis elit nec est. Aliquam erat quam, tempus et tincidunt in, fermentum a lacus. Cras imperdiet mollis lacus, in semper nibh tempus at. Praesent mi mauris, sodales condimentum blandit eget, cursus hendrerit sapien. Vestibulum non eros sapien. Donec euismod elit at lectus accumsan elementum. Curabitur sed dignissim dui. Mauris euismod, arcu ut luctus porttitor, metus leo pellentesque nisl, sed vulputate dolor nibh tempor velit. Vivamus fermentum quam sit amet ante ullamcorper laoreet. Sed nec ante sit amet purus scelerisque gravida.

    Praesent elementum sapien a orci mattis in tristique nunc luctus. Fusce viverra quam lectus. Duis ullamcorper, massa sed bibendum cursus, purus risus lobortis tellus, in faucibus erat tellus id lectus. Sed in lectus dolor, id lobortis quam. Cras mi nunc, sodales in vehicula quis, tempus vitae lectus. Morbi mauris ante, suscipit ac interdum dictum, pulvinar non purus. Aenean vel lorem eget tortor fringilla blandit placerat non velit. Proin vehicula augue nec quam porttitor id tincidunt massa interdum. Vivamus ut nisi at lectus commodo commodo blandit quis quam. Pellentesque vitae elit eleifend leo sodales tempus. Aenean consectetur cursus accumsan. Etiam leo lacus, venenatis euismod rutrum non, iaculis sit amet elit. In hac habitasse platea dictumst. Nam orci nisi, mollis eu blandit ac, semper nec ante. Nullam a lacus interdum odio lacinia cursus malesuada a ligula. In scelerisque cursus urna, sit amet pretium libero mattis sit amet. Ut blandit imperdiet nisi sed gravida. Integer sed tortor dolor, eget porttitor turpis. Suspendisse turpis felis, feugiat eget imperdiet cursus, mollis eu lorem.

    Nunc gravida vehicula felis, eu rutrum sem elementum non. In hac habitasse platea dictumst. Phasellus quam sapien, tempor vel auctor quis, laoreet quis nulla. Maecenas gravida lorem sed metus consequat a consectetur ante commodo. Ut eget mi quis sem gravida rutrum. Nulla eu odio sem, at porta metus. Maecenas a mi in lorem scelerisque viverra ut ac quam. Donec ipsum ante, scelerisque sed dapibus eget, tempor a est. Quisque elit quam, rutrum vitae congue eget, tempus in lacus. Maecenas tincidunt orci non odio rutrum pellentesque. Nam et pellentesque est. Vestibulum sit amet vulputate dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur eu nibh odio. Nullam et odio ut lectus lacinia convallis.

    Proin condimentum purus et libero cursus a fringilla velit posuere. Maecenas vel leo tellus, a malesuada risus. Integer non dolor mi, eget pulvinar odio. Mauris lacinia magna eget dolor vestibulum vel vestibulum tortor mollis. Donec nibh odio, eleifend eget vehicula vel, suscipit non orci. Nunc ullamcorper pharetra nisi sit amet congue. Donec varius arcu at ligula hendrerit ut imperdiet velit gravida. Pellentesque ut magna in arcu fermentum suscipit. Sed ipsum sapien, ornare sit amet tristique et, dapibus eu odio. Integer neque risus, sagittis non tristique ac, tincidunt non nisi. Sed a diam et libero dignissim varius sit amet eget magna. Sed erat eros, faucibus vitae lobortis bibendum, facilisis ut tellus.

    Integer vitae vehicula mauris. Maecenas interdum mauris id enim tincidunt et gravida diam imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras eget orci nec massa hendrerit molestie. Nunc felis mauris, egestas ac elementum nec, facilisis a nisi. Pellentesque quis mattis orci. Nunc a enim lorem. Cras eu lectus vel leo dignissim viverra nec sed est. Phasellus sit amet nunc ante. Sed tristique fermentum ligula, sed eleifend felis condimentum sit amet. Quisque aliquam diam a purus sagittis non pulvinar ipsum sollicitudin. Aliquam vestibulum facilisis semper. Nullam adipiscing volutpat velit ac varius. Suspendisse potenti. Maecenas quis nulla tortor, et rutrum nulla. Morbi ut ullamcorper diam. Cras eget nisl a enim eleifend consequat. Cras vitae varius felis. Maecenas neque nisl, vehicula vitae dignissim aliquet, molestie quis tellus.







    Created By: Matthew Rugamas







    And here’s the CSS:


    body, html {
    position: relative;
    z-index: -100;
    font-family: Helvetica Neue, Arial, Sans-Serif;
    font-size: 13px;
    margin: 50px auto;
    color: #000;
    background: #1A82F7;
    background: -moz-linear-gradient(left, #2F2727, #1A82F7 5%, #2F2727, #1A82F7 95%, #2F2727);
    }

    h1 {
    text-shadow: -5px 5px 10px #666666;
    text-align: center;
    margin: 0 auto;
    }

    .roving {
    color: #1A82F7;
    }

    h2 {
    margin: 0 auto;
    }

    #wrap {
    position: relative;
    z-index: -99;
    border-radius: 15px 15px 15px 15px;
    width: 750px;
    margin: 0 auto;
    box-shadow: 0 0 5px 1px #2B2922;
    -webkit-box-shadow: 0 0 5px 1px #2B2922;
    background-color: rgb(43,43,43);
    }

    header {
    color: rgb(230,225,220);
    padding: 5px 10px;
    }

    #nav {
    margin: 5px;
    padding: 5px 10px;
    border: 1px dashed black;
    background: rgb(230,225,220);
    box-shadow: 0 0 5px 1px #000000;
    -webkit-box-shadow: 0 0 5px 1px #000000;
    }

    #nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }

    a.navlinks:link {
    color: black;
    text-decoration: none;
    }

    a.navlinks:visited {
    color: black;
    text-decoration: none;
    }

    .navlinks {
    position: relative;
    -moz-transition: top .3s;
    }

    .navlinks:hover {
    top: 1px;
    }

    #nav li {
    display: inline;
    margin: 0;
    padding: 0;
    }

    #main {
    position: relative;
    z-index: -2;
    float: left;
    width: 465px;
    margin: 5px;
    padding: 10px;
    border: 1px dashed black;
    box-shadow: 0 0 5px 1px #000000;
    -webkit-box-shadow: 0 0 5px 1px #000000;
    background: rgb(230,225,220);
    }

    #sidebar {
    position: relative;
    z-index: -1;
    float: right;
    margin: 5px;
    border: 1px dashed black;
    width: 220px;
    padding: 10px;
    background: rgb(230,225,220);
    box-shadow: 0 0 5px #000000;
    -webkit-box-shadow: 0 0 5px 1px #000000;
    }

    .sidelinks a { -moz-transition: padding .4s; }
    .sidelinks a:hover { padding-left: 6px; text-shadow: 1px 1px 5px black; }

    footer {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border: 1px dashed black;
    padding: 5px 10px;
    background: rgb(230,225,220);
    clear: both;
    }

    footer p { text-align: center; margin: 0; }

    #49290
    Catasphere
    Member
    #49291
     

    Remove thenavlinks class from these two links.

    #49295
    Catasphere
    Member

    @whiteInkDesign
    Thanks! I can’t believe I didn’t see that! What a noob mistake.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.