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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12

Thread: stripped

  1. #1
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times

    stripped

    so lastnight i got my hands on a pretty cool navbar for my practice site. ive been playing around with the css and have managed to strip alot of stuff off it and still have it work. this is all still pretty new to me so if someone could have a look and tell me what all the different tags i have removed are for that would be awesome and would probably save me hours of work haha.

    first is the original, while i was playing around with it last night i removed individual peices and they are all noted. the second css is the stripped, x-rated version

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

    body{
    font-family:Arial;
    font-size:14px;
    text-shadow:0 1px 1px rgba(255,255,255,0.4);color:#262626;
    margin:0;
    padding:0;
    background:#141414;
    }

    .wrapper{
    width:100%;
    height:40px;
    background:#464646;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
    background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));
    border-top:2px solid #939393;
    position:relative;
    margin-bottom:30px;
    }


    /* removed and still worked */
    .title{
    position:absolute;
    right:20px;
    top:10px;
    font-size:18px;
    text-transform:uppercase;
    }


    /* removed and still worked */
    .fl{
    float:left;
    }


    .container{
    width:960px
    ;margin:0 auto;
    }


    .menu{
    height:40px;
    border-left:1px solid rgba(0,0,0,0.3);
    border-right:1px solid rgba(255,255,255,0.3);
    float:left; /* removed and still worked */
    }

    a{
    text-decoration:
    none;
    color:#363636;
    text-transform:uppercase;
    font-size:15px;
    font-weight:bold;
    }

    ul{
    margin:0;
    padding:0;
    }

    ul.menu li{
    list-style:none; /* is list style the same as text-decoration */
    float:left;
    height:40px;
    text-align:center;
    background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1) ));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
    }

    ul li a{
    display:block;
    padding:0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align:center;
    line-height:40px;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
    background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));

    /* huh */
    -webkit-transition-property:background;
    -webkit-transition-duration:700ms;
    -moz-transition-property:background;
    -moz-transition-duration:700ms;
    }

    /* removed and still worked */
    ul li a:hover{
    background:transparent none;
    }

    ul[rel=sam1] li a{background:#606060;} /* seems to be the color of the buttons when not hovered above might leave blank */

    /* removed this and nothing changed */
    ul[rel=sam1] li a:hover{background:transparent none;}

    /* removed and nothing changed */
    ul li.active a{
    background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1) ));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
    }

    /* removed and nothing changed */
    ul.vertical{
    margin:0 20px 0 0;
    width:250px;
    border:1px solid #323232;
    -webkit-border-top-right-radius:8px;
    -moz-border-radius-topright:8px;
    -webkit-border-bottom-right-radius:8px;
    -moz-border-radius-bottomright:8px;}

    /*removed and nothing changed */
    ul.vertical li{
    list-style:none;
    position:relative;
    background:-webkit-gradient(radial,50% 100%,0,50% 100%,140,from(rgba(31,169,244,1)),to(rgba(0,28,78, 1)));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}

    /*removed and nothing changed*/
    ul.vertical li span{
    position:absolute;
    left:20px;top:50px;
    color:#151515;
    text-shadow:0 1px 1px rgba(255,255,255,0.2);}

    /* removed and nothing changed bar doesnt even have a curved edge */
    ul.vertical li:first-child a,ul.vertical li:first-child{
    -webkit-border-top-right-radius:8px;
    -moz-border-radius-topright:8px;
    }

    /*removed nothing changed */
    ul.vertical li:last-child a,ul.vertical li:last-child{
    -webkit-border-bottom-right-radius:8px;
    -moz-border-radius-bottomright:8px;}

    /* removed nothing changed */
    ul.vertical li a{
    background:-webkit-gradient(linear,left top,left bottom,from(rgba(117,117,117,1)),to(rgba(68,68,68, 1)));
    background:-moz-linear-gradient(top,rgba(117,117,117,1),rgba(68,68,68,1)) ;
    text-align:left;
    border-bottom:1px solid #323232;
    border-top:1px solid #868686;
    border-right:1px solid #5a5a5a;
    color:#151515;
    -webkit-transition-property:background;
    -webkit-transition-duration:700ms;
    -moz-transition-property:background;
    -moz-transition-duration:700ms;}

    ul.vertical li a:hover{background:transparent none;}

    ul.vertical[rel=ver1] li a{background:#606060;}

    ul.vertical[rel=ver1] li a:hover{background:transparent none;}


    stripped...

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

    body{
    font-family:Arial;
    font-size:14px;
    text-shadow:0 1px 1px rgba(255,255,255,0.4);color:#262626;
    margin:0;
    padding:0;
    background:#141414;
    }

    .wrapper{
    width:100%;
    height:40px;
    background:#464646;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
    background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));
    border-top:2px solid #939393;
    position:relative;
    margin-bottom:30px;
    }





    .container{
    width:960px
    ;margin:0 auto;
    }


    .menu{
    height:40px;
    border-left:1px solid rgba(0,0,0,0.3);
    border-right:1px solid rgba(255,255,255,0.3);
    float:left; /* removed and still worked */
    }

    a{
    text-decoration:
    none;
    color:#363636;
    text-transform:uppercase;
    font-size:15px;
    font-weight:bold;
    }

    ul{
    margin:0;
    padding:0;
    }

    ul.menu li{
    list-style:none; /* is list style the same as text-decoration */
    float:left;
    height:40px;
    text-align:center;
    background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1) ));
    background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);
    }

    ul li a{
    display:block;
    padding:0 20px;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-right: 1px solid rgba(0,0,0,0.1);
    text-align:center;
    line-height:40px;
    background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));
    background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));

    /* huh */
    -webkit-transition-property:background;
    -webkit-transition-duration:700ms;
    -moz-transition-property:background;
    -moz-transition-duration:700ms;
    }

    /* removed and still worked */
    ul li a:hover{
    background:transparent none;
    }


    ul[rel=sam1] li a{background:#606060;} /* seems to be the color of the buttons when not hovered above might leave blank */


    /* removed this and nothing changed */
    ul[rel=sam1] li a:hover{background:transparent none;}




    ul.vertical li a:hover{background:transparent none;}

    ul.vertical[rel=ver1] li a{background:#606060;}

    ul.vertical[rel=ver1] li a:hover{background:transparent none;}

    thanks guys

  2.  

  3. #2
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    oh nd if someone could advise me on the issue of the links not centering on the screen and also making each link the same size that would be great

  4. #3
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    i watched a tut on creating buttons before and there was a part that was pretty long about putting an image like a home button on the button, he did it with a twitter bird. but it all looked pretty complicated so i skipped over it, is it really that hard or was it just a bad tutorial? come to think of it i didnt get the button to wwork after haha

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    It isn't that hard to do. In fact, you can use an icon font to do it. I did that on this site (it only shows on mobile, so shrink your browser really narrow to see the menu) and it worked out pretty well. I used the ::first-letter pseudo-element and applied an icon font. Way easier than using an image, IMHO.

    Regarding your code above, could you wrap that in CODE tags so I don't go cross-eyed try to read through it? I'd love to help, but my brain starts crying a few lines in.

    EDIT: I made the icon font using icomoon.io
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    i will once i figure out how to wrap it haha???

    thanks dude

  7. #6
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    ok so ive been fiddling around with this trying to make a button. why is it that the height of the tab is controlled by the line-height tag in the "ul li a {}" and not the ".menu" part? when i changed the height in the menu part all id did was add a longer border line

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    When you adjust the line-height, you're pushing the a element outside the bounds of the ul and the li. Since overflow isn't set on either, they show the content as normal. When you adjust the height of ul.menu, you're only adjusting that height. In other words, you're making a larger container, but not expanding the contents to fill it. If you want to adjust the height, you'll have to adjust it in ul.menu, ul.menu li, and ul li a.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    thats what i ended up doing, nice one i must have learned something haha.
    i can adjust the width aswell no problem as im only making a button but when its a complete navbar how do i set it so that all tabs are the same width?

  10. #9
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    Remember my post before about setting styles once that target all of the elements that are the same? Same concept here. Find the selector (there's already one in that CSS) that targets all of the list items and add the width there.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  11. #10
    Senior Member
    Join Date
    Jan 2014
    Posts
    392
    Member #
    38172
    Liked
    4 times
    it was the container width that was restricting it.

    why is it that i have to put position to relative and move left to get it to center on the page? its set to auto and its off by 140px.

    and last but not least, i want to but a border radius on it, but not each actual tab. say the tabs are all in a row i want border radius on the left of the very left button etc... i gogled this and tried some random stuff i made up but didnt work


Page 1 of 2 1 2 LastLast

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 12:50 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com