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

    Hi all. Do you know how we can combine this CSS code :

    body {
    background-color: #615a49;
    color: #F4F5EF;
    text-align: center;
    margin: 0 auto;
    min-height: 100%;
    height: 100%;
    line-height: 17px;
    font-family: Tahoma;
    font-size: 12px;
    font-weight: normal;
    }
    .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
    #3

    Be more clear as to what you are trying to achieve.

    "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

      Be more clear as to what you are trying to achieve.

      "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
      #4

      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 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 ?

        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