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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts

    Cool Enhance CSS - merge two #

    Hello, I have two divs which use the same code:
    <div id="menu-nav">
    and
    <div id="menu-nav-sec">

    Their codes are:
    Code:
    #menu-nav ul ul a{color:#fff;background:#000;font-size:13px;font-weight:700;text-decoration:none;text-align:left;border-bottom:1px solid #212121;height:auto;line-height:18px;padding:8px 5px 8px 13px;width:160px;text-align:left;}
    #menu-nav li:hover > a,#menu-nav ul ul :hover > a{background:#591b3b;cursor:pointer;z-index:96;}
    .menu-header ul li a{color:#fff;padding:10px 0;}
    .menu-header .current-menu-item a{color:#eee;background:#591b3b;height:22px;}
    #menu-nav .menu-header,div.menu{text-transform:none;font-weight:700;padding-left:54px;height:31px;}
    #menu-nav .menu-header ul,div.menu ul{list-style:none;margin:0!important;}
    #menu-nav .menu-header li,div.menu li{float:left;position:relative;margin:0!important;}
    #menu-nav li a{display:block;text-decoration:none;padding:9px 13px 0;}
    :first-child+html #menu-nav li a{display:block;text-decoration:none;padding:3px 13px;padding-top:5px;}
    #menu-nav ul ul{display:none;position:absolute;top:31px;left:0;float:left;box-shadow:0 3px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);-webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);z-index:99999;}
    #menu-nav ul ul ul{left:100%;top:0;}
    #menu-nav ul li:hover > ul{display:block;}
    
    /* New Code */
    
    #menu-nav-sec ul ul a { color:#fff; background:black; font-size:13px; font-weight:bold; text-decoration:none; text-align:left; border-bottom:1px solid #212121; height:auto; line-height:18px; padding:8px 5px 8px 13px; width:160px; text-align:left; }
    #menu-nav-sec li:hover > a,#menu-nav-sec ul ul :hover > a { background:#591b3b; cursor:pointer; z-index:96; }
    .menu-header ul li a { color:#fff; padding:10px 0; }
    .menu-header .current-menu-item a { color:#eee; background:#591b3b; height:22px; }
    #menu-nav-sec .menu-header,div.menu { text-transform:none; font-weight:bold; padding-left:54px; height:31px;}
    #menu-nav-sec .menu-header ul,div.menu ul { list-style:none; margin:0!important; }
    #menu-nav-sec .menu-header li,div.menu li { float:left; position:relative; margin:0!important; }
    #menu-nav-sec li a { display:block; text-decoration:none; padding:9px 13px 0; }
    :first-child+html #menu-nav-sec li a { display:block; text-decoration:none; padding:3px 13px; padding-top:5px; }
    #menu-nav-sec ul ul { display:none; position:absolute; top:31px; left:0; float:left; box-shadow:0 3px 3px rgba(0,0,0,0.2); -moz-box-shadow:0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2); z-index:99999; }
    #menu-nav-sec ul ul ul { left:100%; top:0; }
    #menu-nav-sec ul li:hover > ul { display:block; }
    
    /* End New Code */
    How can I merge the two codes and save many lines of code?

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    You can do declaration 1, declaration 2, etc... so...
    #menu-nav ul ul a{color:#fff;background:#000; ... }
    ...
    #menu-nav-sec ul ul a { color:#fff; background:black; ...}
    becomes

    Code:
    #menu-nav ul ul a, #menu-nav-sec ul ul a {color:#fff;background:#000; ... }
    #menu-nav li:hover > a, #menu-nav ul ul :hover > a, #menu-nav-sec li:hover > a, #menu-nav-sec ul ul :hover > a {background:#591b3b; ... }
    and so on
    in fact, in the red and blue, you were doing it already
    Last edited by alykins; 08-27-2012 at 08:38 PM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    utnalove (08-27-2012)

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Thanks. And this has already a comma.... how will it become?
    Code:
    #menu-nav .menu-header ul,div.menu ul{list-style:none;margin:0!important;}

  • #4
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Thanks much!! It worked well

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    div.menu ul {...}
    targets all ul's that are children of div's with class menu applied.
    The first one (#menu-nav .menu-header ul) is an odd declaration to me... I don't usually do a lot of CSS so I have forgotten the specificity hierarchy... someone who uses it more frequently can probably elaborate more.
    Nonetheless nothing will change, you simply have two different declarations. Every new declaration is marked by a comma. So you could do
    Code:
    #menu-nav .menu-header ul,div.menu ul, #apple, .banana, #horse ul {...}
    so long as you keep appending commas.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    utnalove (08-27-2012)

  • #6
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Thanks. I didn't know that this is the purpose of commas.
    I am now thinking aboud enhancing this css, make it simpler and smaller, leaving the same visible style.

    I have no idea how and what, but somebody told me to use SCSS... not sure even if I can, I am on a shared hosting and I can't install anything in the server. Maybe there are some other ways to enhance it.. hmm...

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    SCSS? I think that whole SASS thing is pretty useless and it definitely doesn’t make your CSS simpler and more compact (compared to doing it yourself). In fact, you basically need to learn a new scripting language while it is converting the code into regular CSS anyway (and without you having real control over it, too). The only thing that could be a little useful is that it might save you some time writing CSS but I even doubt that, and with the right program you don’t even need that.

  • Users who have thanked VIPStephan for this post:

    utnalove (08-28-2012)

  • #8
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Thanks VIPStephan, so hiring some front end developer, who knows CSS well would be better, right?

  • #9
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    well what do you develop? I do back end coding, but that doesn't mean I can't do client side- it just means I don't like/prefer to do so. Coding is coding, and when it comes to coding HTML/CSS is some of the easiest. The hardest thing about CSS is understanding the inheritance and getting used to how it all interacts... CSS just takes a lot of practice

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #10
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    382
    Thanks
    150
    Thanked 2 Times in 2 Posts
    alikins, do you have some website where I can contact you?

  • #11
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,722
    Thanks
    41
    Thanked 191 Times in 190 Posts
    You can PM me; however, I am not free-lancing ATM. Feel free to PM for other Q's though if you'd like. I do know that in the web projects and market place section you can post Reqs for developers.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    utnalove (08-28-2012)


  •  

    Posting Permissions

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