Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
  1. Home
  2. Web Development
  3. How can I combine this CSS code ?

How can I combine this CSS code ?

Scheduled Pinned Locked Moved Web Development
questioncssarchitecture
16 Posts 5 Posters 0 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Mohammad Dayyan

    I'm so sorry for my English. I'm new. I'd like to reduce above css code. For example we can write

    background: #746c5e url('image/body.jpg') repeat-y center;

    instead of

    background-image: url('image/body.jpg');
    background-repeat: repeat-y;
    background-position: center;

    Do you understand what I mean ?

    P Offline
    P Offline
    Paul Conrad
    wrote on last edited by
    #5

    Well, what is wrong with the original?

    background-image: url('image/body.jpg');
    background-repeat: repeat-y;
    background-position: center;

    "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

    M 1 Reply Last reply
    0
    • P Paul Conrad

      Well, what is wrong with the original?

      background-image: url('image/body.jpg');
      background-repeat: repeat-y;
      background-position: center;

      "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

      M Offline
      M Offline
      Mohammad Dayyan
      wrote on last edited by
      #6

      I want to reduce this code like that : Can you ?

      css_class1{
      background-color: #988F81;
      border-top-width: 1px;
      border-left-width: 1px;
      border-top-style: solid;
      border-left-style: solid;
      border-top-color: #F6F5F2;
      border-left-color: #F6F5F2;
      border-right-width: 1px;
      border-bottom-width: 1px;
      border-right-style: solid;
      border-bottom-style: solid;
      border-right-color: #333333;
      border-bottom-color: #333333;
      color: #000000;
      }

      J P 2 Replies Last reply
      0
      • M Mohammad Dayyan

        I want to reduce this code like that : Can you ?

        css_class1{
        background-color: #988F81;
        border-top-width: 1px;
        border-left-width: 1px;
        border-top-style: solid;
        border-left-style: solid;
        border-top-color: #F6F5F2;
        border-left-color: #F6F5F2;
        border-right-width: 1px;
        border-bottom-width: 1px;
        border-right-style: solid;
        border-bottom-style: solid;
        border-right-color: #333333;
        border-bottom-color: #333333;
        color: #000000;
        }

        J Offline
        J Offline
        Johnny
        wrote on last edited by
        #7

        W3Schools

        1 Reply Last reply
        0
        • M Mohammad Dayyan

          I want to reduce this code like that : Can you ?

          css_class1{
          background-color: #988F81;
          border-top-width: 1px;
          border-left-width: 1px;
          border-top-style: solid;
          border-left-style: solid;
          border-top-color: #F6F5F2;
          border-left-color: #F6F5F2;
          border-right-width: 1px;
          border-bottom-width: 1px;
          border-right-style: solid;
          border-bottom-style: solid;
          border-right-color: #333333;
          border-bottom-color: #333333;
          color: #000000;
          }

          P Offline
          P Offline
          Paul Conrad
          wrote on last edited by
          #8

          Mohammad Dayyan wrote:

          Can you ?

          Sure, but can you? No point in me doing it for you (no financial reward for me) when you should be the one learning how to do it ;P

          "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

          M 1 Reply Last reply
          0
          • P Paul Conrad

            Mohammad Dayyan wrote:

            Can you ?

            Sure, but can you? No point in me doing it for you (no financial reward for me) when you should be the one learning how to do it ;P

            "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

            M Offline
            M Offline
            Mohammad Dayyan
            wrote on last edited by
            #9

            Hey Paul . Actually I can't. I'm in hurry and if you can Please do it. :-O

            P 1 Reply Last reply
            0
            • M Mohammad Dayyan

              Hey Paul . Actually I can't. I'm in hurry and if you can Please do it. :-O

              P Offline
              P Offline
              Paul Conrad
              wrote on last edited by
              #10

              Mohammad Dayyan wrote:

              I'm in hurry

              Missing the part where that's my problem :|

              Mohammad Dayyan wrote:

              Please do it

              Ummmmm........no ;P

              "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

              M 1 Reply Last reply
              0
              • P Paul Conrad

                Mohammad Dayyan wrote:

                I'm in hurry

                Missing the part where that's my problem :|

                Mohammad Dayyan wrote:

                Please do it

                Ummmmm........no ;P

                "The clue train passed his station without stopping." - John Simmons / outlaw programmer "Real programmers just throw a bunch of 1s and 0s at the computer to see what sticks" - Pete O'Hanlon

                M Offline
                M Offline
                Mohammad Dayyan
                wrote on last edited by
                #11

                :laugh: However thanks my friend

                S 1 Reply Last reply
                0
                • G Guffa

                  What do you mean when you say that you want to "combine" the code? Usually you combine something with something else, so what do you want to combine it with?

                  Despite everything, the person most likely to be fooling you next is yourself.

                  M Offline
                  M Offline
                  Mohammad Dayyan
                  wrote on last edited by
                  #12

                  I'm so sorry for my English. I'm new. I'd like to reduce above css code. For example we can write

                  background: #746c5e url('image/body.jpg') repeat-y center;

                  instead of

                  background-image: url('image/body.jpg');
                  background-repeat: repeat-y;
                  background-position: center;

                  Do you understand what I mean ? I want to reduce this code like that :

                  css_class1{
                  background-color: #988F81;
                  border-top-width: 1px;
                  border-left-width: 1px;
                  border-top-style: solid;
                  border-left-style: solid;
                  border-top-color: #F6F5F2;
                  border-left-color: #F6F5F2;
                  border-right-width: 1px;
                  border-bottom-width: 1px;
                  border-right-style: solid;
                  border-bottom-style: solid;
                  border-right-color: #333333;
                  border-bottom-color: #333333;
                  color: #000000;
                  }

                  G 1 Reply Last reply
                  0
                  • M Mohammad Dayyan

                    I'm so sorry for my English. I'm new. I'd like to reduce above css code. For example we can write

                    background: #746c5e url('image/body.jpg') repeat-y center;

                    instead of

                    background-image: url('image/body.jpg');
                    background-repeat: repeat-y;
                    background-position: center;

                    Do you understand what I mean ? I want to reduce this code like that :

                    css_class1{
                    background-color: #988F81;
                    border-top-width: 1px;
                    border-left-width: 1px;
                    border-top-style: solid;
                    border-left-style: solid;
                    border-top-color: #F6F5F2;
                    border-left-color: #F6F5F2;
                    border-right-width: 1px;
                    border-bottom-width: 1px;
                    border-right-style: solid;
                    border-bottom-style: solid;
                    border-right-color: #333333;
                    border-bottom-color: #333333;
                    color: #000000;
                    }

                    G Offline
                    G Offline
                    Guffa
                    wrote on last edited by
                    #13

                    I see. Like this:

                    css_class1{
                    background-color: #988F81;
                    border-top: 1px solid #F6F5F2;
                    border-left: 1px solid #F6F5F2;
                    border-right: 1px solid #333333;
                    border-bottom: 1px solid #333333;
                    color: #000000;
                    }

                    or like this:

                    css_class1{
                    background-color: #988F81;
                    border: 1px solid;
                    border-color: #F6F5F2 #333333 #333333 #F6F5F2;
                    color: #000000;
                    }

                    Despite everything, the person most likely to be fooling you next is yourself.

                    M 1 Reply Last reply
                    0
                    • M Mohammad Dayyan

                      :laugh: However thanks my friend

                      S Offline
                      S Offline
                      stevio
                      wrote on last edited by
                      #14

                      What you need to be doing is looking at the code, and seeing what you're duplicating. Pull out the common elements, and then see what you have left. Try something like: .css_class1{ background-color: #988F81; color: #000000; border: solid 1px #F6F5F2; border-right-color: #333333; border-bottom-color #333333; } There's further improvements that can be made, but that's a start. In fact, since you seem to be trying to get a 3d effect on the edges of the border, you could try replacing it with "border-style: inset", or "border style: outset", which probably won't display identically to your first sample, but is a standard style with shorter markup. eg: .css_class1{ background-color: #988F81; color: #000000; border-style: outset; }

                      M 1 Reply Last reply
                      0
                      • S stevio

                        What you need to be doing is looking at the code, and seeing what you're duplicating. Pull out the common elements, and then see what you have left. Try something like: .css_class1{ background-color: #988F81; color: #000000; border: solid 1px #F6F5F2; border-right-color: #333333; border-bottom-color #333333; } There's further improvements that can be made, but that's a start. In fact, since you seem to be trying to get a 3d effect on the edges of the border, you could try replacing it with "border-style: inset", or "border style: outset", which probably won't display identically to your first sample, but is a standard style with shorter markup. eg: .css_class1{ background-color: #988F81; color: #000000; border-style: outset; }

                        M Offline
                        M Offline
                        Mohammad Dayyan
                        wrote on last edited by
                        #15

                        Than you very much

                        1 Reply Last reply
                        0
                        • G Guffa

                          I see. Like this:

                          css_class1{
                          background-color: #988F81;
                          border-top: 1px solid #F6F5F2;
                          border-left: 1px solid #F6F5F2;
                          border-right: 1px solid #333333;
                          border-bottom: 1px solid #333333;
                          color: #000000;
                          }

                          or like this:

                          css_class1{
                          background-color: #988F81;
                          border: 1px solid;
                          border-color: #F6F5F2 #333333 #333333 #F6F5F2;
                          color: #000000;
                          }

                          Despite everything, the person most likely to be fooling you next is yourself.

                          M Offline
                          M Offline
                          Mohammad Dayyan
                          wrote on last edited by
                          #16

                          Thank you Guffa

                          1 Reply Last reply
                          0
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • World
                          • Users
                          • Groups