Web Analytics Made Easy -
StatCounter How to use 2 class of css to 1 single <div></div> element? - CodingForum

Announcement

Collapse
No announcement yet.

How to use 2 class of css to 1 single <div></div> element?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to use 2 class of css to 1 single <div></div> element?

    As I mentioned in the title, I have try to apply 2 css class to a <div> element:
    <div class="bd" class="leftbd"> dddddddddd </div>
    But it seems like doesn't work!
    Can any one help me fix that?
    We are building the best Magento Mobile App Extension. Get free demo now!

  • #2
    You can't have two class attributes. To put two classes on one element, you use ONE class attribute and separate them with spaces.

    <div class="bd leftbd">

    Would do the job... Though "bd" is a bit vague and the presentational "left" reeks of presentational thinking instead of saying what things are.
    Walk the dark path, sleep with angels, call the past for help.
    https://cutcodedown.com
    https://medium.com/@deathshadow

    Comment


    • #3
      Thank you, but it still wouldn't work. Could you take a look at it?
      Click image for larger version

Name:	Screenshot_1.jpg
Views:	1
Size:	49.3 KB
ID:	2270510
      We are building the best Magento Mobile App Extension. Get free demo now!

      Comment


      • #4
        Hi there MikeTran,

        if you have a coding problem, then we require your actual code not an image of it.


        coothead
        ~ the original bald headed old fart ~

        Comment


        • #5
          It could be that your elements are too wide yet. Inline blocks usually have some whitespace at the right side that needs to be accounted for.
          Stop solving problems you don’t yet have!

          Comment


          • #6
            Hi there MikeTran,

            if you have a coding problem, then we require your actual code not an image of it.


            coothead
            Thank you, I'm a new guy here.
            We are building the best Magento Mobile App Extension. Get free demo now!

            Comment


            • #7
              Originally posted by VIPStephan View Post
              It could be that your elements are too wide yet. Inline blocks usually have some whitespace at the right side that needs to be accounted for.
              As you can see, the width of those 2 elements are 54% and 44%, so that makes total of 98%. Anyway, even if I change the width of the first element to 30%, it still there.
              We are building the best Magento Mobile App Extension. Get free demo now!

              Comment


              • #8
                Hi there MikeTran,

                so, are you going to give us your code or not?

                coothead
                ~ the original bald headed old fart ~

                Comment


                • #9
                  There are certain things -- like ACTUAL columns -- that inline-block inhales upon the proverbial equine of short stature to accomplish. Likewise, screwing around trying to make multiple percentage widths that add up to 100% or even a fraction of that is just asking for it to fail.

                  Float the left one, overflow:hidden and remove the width from the right one -- and lose the inline-block on both.

                  Also, don't do the OOCSS nonsense of making a class for every single little joe-blasted style. Say what things ARE -- even in your classes -- NOT what you want them to look like. In that way class="ib" is just as big a pile of rubbish as using <font>, <center> or bgcolor="" 1990's style. Don't just go slopping classes in there when you already have uniques/existing classes. It's ALWAYS more efficient to write more CSS than it is more HTML thanks to this thing called "caching models" -- much less the ability to reskin/restyle without having to change the markup... though if you know how to group like selectors and the selectors are small, sometimes it's even less code once you group like properties in the CSS.

                  Inline block is great for things where you want to "let the chips fall where they might", they are NOT a great choice for major columnar layout elements. To be frank, neither are percentage widths. As a rule of thumb when making columnar layouts, I make the narrower columns elastic (measured in EM) and let the remaining largest column take up as much space as is left. It's more reliable than percentages which NEVER add up like you think they are going to add up thanks to single whitespace adding roughly 0.4em, gecko (firefox) rounding things off like a schizophrenic crackhead compared to every other browser, etc, etc...

                  Oh and <span class="header1">?!? If it's a heading, USE THE PROPER DEPTH HEADING TAG.

                  Even your little screencap of your code shows a bevy of woes... likely stemming from a failure to understand how to use semantic markup... "semantic markup" being a sick euphemism for "using HTML properly" we use so as not to offend the authors, instructors, and career educators who refuse to extract their cranium from 1997's rectum. Sadly such people are far too common, make slews of lame excuses to forgive how badly they lead nubes astray with all the garbage they promote, and make life harder for people like myself trying to teach people what the specifications actually say, and for all their rose coloured glasses and singing kumbaya around the drum circle only discourage people like yourself starting out.
                  Last edited by deathshadow; Oct 5, 2016, 09:26 AM.
                  Walk the dark path, sleep with angels, call the past for help.
                  https://cutcodedown.com
                  https://medium.com/@deathshadow

                  Comment


                  • #10
                    Originally posted by coothead View Post
                    Hi there MikeTran,

                    so, are you going to give us your code or not?

                    coothead
                    Oh I'm sorry, please help me. Here are my code:
                    HTML:
                    <div class="body">
                    <div class="leftbd ib">
                    <img class="img1" src=" http://image.prntscr.com/image/cc522bee53bb4034b13d7215e3324a66.png"
                    </div>

                    <div class="ib rightbd">
                    <span class="header1">
                    Increase Productivity of IT security and Operations Teams
                    </span>
                    <img src="http://image.prntscr.com/image/1aefe45c347e420381f5c1a0493804cb.png">

                    </div>
                    </div>
                    CSS
                    .body{
                    background-color:blue;
                    padding-top:100px;
                    }
                    .ib{
                    display:inline-block;
                    }
                    .leftbd{
                    text-align:center;
                    width:54%;
                    }
                    .rightbd{
                    width:44%;
                    }
                    .img1{
                    vertical-align:-10px;
                    }
                    .header1{
                    display:block;
                    }
                    Last edited by MikeTran; Oct 6, 2016, 04:56 AM.
                    We are building the best Magento Mobile App Extension. Get free demo now!

                    Comment


                    • #11
                      Originally posted by deathshadow View Post
                      There are certain things -- like ACTUAL columns -- that inline-block inhales upon the proverbial equine of short stature to accomplish. Likewise, screwing around trying to make multiple percentage widths that add up to 100% or even a fraction of that is just asking for it to fail.

                      Float the left one, overflow:hidden and remove the width from the right one -- and lose the inline-block on both.

                      Also, don't do the OOCSS nonsense of making a class for every single little joe-blasted style. Say what things ARE -- even in your classes -- NOT what you want them to look like. In that way class="ib" is just as big a pile of rubbish as using <font>, <center> or bgcolor="" 1990's style. Don't just go slopping classes in there when you already have uniques/existing classes. It's ALWAYS more efficient to write more CSS than it is more HTML thanks to this thing called "caching models" -- much less the ability to reskin/restyle without having to change the markup... though if you know how to group like selectors and the selectors are small, sometimes it's even less code once you group like properties in the CSS.

                      Inline block is great for things where you want to "let the chips fall where they might", they are NOT a great choice for major columnar layout elements. To be frank, neither are percentage widths. As a rule of thumb when making columnar layouts, I make the narrower columns elastic (measured in EM) and let the remaining largest column take up as much space as is left. It's more reliable than percentages which NEVER add up like you think they are going to add up thanks to single whitespace adding roughly 0.4em, gecko (firefox) rounding things off like a schizophrenic crackhead compared to every other browser, etc, etc...

                      Oh and <span class="header1">?!? If it's a heading, USE THE PROPER DEPTH HEADING TAG.

                      Even your little screencap of your code shows a bevy of woes... likely stemming from a failure to understand how to use semantic markup... "semantic markup" being a sick euphemism for "using HTML properly" we use so as not to offend the authors, instructors, and career educators who refuse to extract their cranium from 1997's rectum. Sadly such people are far too common, make slews of lame excuses to forgive how badly they lead nubes astray with all the garbage they promote, and make life harder for people like myself trying to teach people what the specifications actually say, and for all their rose coloured glasses and singing kumbaya around the drum circle only discourage people like yourself starting out.
                      Well, I'm aware of that I am no expert at coding but I'm putting real effort trying to learn these things. Let's not be rude about it.
                      We are building the best Magento Mobile App Extension. Get free demo now!

                      Comment


                      • #12
                        Hi there MikeTran,

                        does this example help...

                        Code:
                        [color=navy]
                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                        
                        <meta charset="utf-8">
                        <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
                        
                        <title>untitled document</title>
                        
                        <link rel="stylesheet" href="screen.css" media="screen">
                        
                        <style media="screen">
                        body {
                            background-color: #f0f0f0;
                            font: 1em/1.5em arial,helvetica,sans-serif;
                         }
                        
                        h1 {
                            text-align: center; 
                         }
                          
                        .images {
                            padding: 2em;
                            background-color: #00f;
                            overflow: hidden;
                            box-shadow: inset 0 0 2em rgba(0,0,0,0.75);
                         }
                        
                        .images img:first-of-type {
                            float: left;
                            width: 54%;
                            height: auto;
                            margin-right: 1em;
                         }
                        
                        .images img:last-of-type {
                            display: block;
                            margin: auto;
                         }
                        
                        .images h2 {
                            font-size: 1em;
                            color: #fff;
                            text-align: center;
                         }
                        
                        @media screen and (max-width: 40em) {
                        
                        .images img:first-of-type {
                            float: none;
                            width: 100%
                          }
                         }
                        </style>
                        
                        </head>
                        <body> 
                        
                        <h1>Netwrix Auditor</h1>
                        
                        <div class="images">
                         <img src="http://image.prntscr.com/image/cc522bee53bb4034b13d7215e3324a66.png" width="640" height="450" alt="">
                        
                          <h2>Increase Productivity of IT security and Operations Teams</h2>
                        
                          <img src="http://image.prntscr.com/image/1aefe45c347e420381f5c1a0493804cb.png" width="32" height="39" alt="">
                        </div> 
                        
                        </body>
                        </html>[/color]

                        coothead
                        Last edited by coothead; Oct 6, 2016, 07:24 AM. Reason: tpynig eorrr
                        ~ the original bald headed old fart ~

                        Comment

                        Working...
                        X