2
\$\begingroup\$

I am still a beginner in CSS and am trying to make a tiles/cards design. I have reached this code, and I want to know if my layout this way is good or if there are any improvements I need to make.

Is writing margin and padding auto is the right practice? How about using flexbox as am doing?

html{
  font-size: 12px;
  font-family: Arial, sans-serif;
}

body{
  margin: auto;
  padding: auto;
  /* What's the best practice to align content in the middle */
}

h1{
  background-color: red;
  text-align: center;
  height: 50px;
  vertical-align: /*What to put here to make it centered? */  ;
}

.flex{
  display: flex;
}

.item{
  width: 30%;
}
.item  h3{
    color: grey;
  }

  
   .item span{
    font-style: italic;
  }
<!DOCTYPE html>
<html>

  <head>
    
    <link rel="stylesheet/less" href="style.less" />
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div class="flex">
      <div class="item red">
        <h3>
        Project 1
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item green">
        <h3>
        Project 2
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item blue">
        <h3>
        Project 3
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item yellow">
        <h3>
        Project 4
        </h3>
        <span>Time: 10:30AM</span>
        </div>
      <div class="item navy">
        <h3>
        Project 5
        </h3>
        <span>Time: 10:30AM</span>
        </div>
    </div>
  </body>

</html>

Improve this question
\$\endgroup\$
3
\$\begingroup\$

I'm going to have to heavily disagree with Tolani Jaiye-Tikolo's answer. Using ID's isn't good CSS authoring generally (however this rule can be broken, like all rules.) This is because you create overly specific CSS that can only be used once.

Another point i'd like to make about their feedback: please only use tables for tabular data. Using them as structural elements is not the way to go. If you want to use the properties of a table element, use display: table;.

That said, onto some critique of your code. You asked what the best way to center align content is. There's several methods for achieving this, some very common ways are:

  • use text-align: center; on a parent container. This only affects inline or inline-block elements.

  • use margin: 0 auto; on a element. This only works on block type elements.

I noticed you're also looking to vertically align an element. This is a little more complex than horizontally aligning an element (But only slightly). I personally use the following two methods often:

  • Place display: table; on the parent/container element. Place display: table-cell; and vertical-align: middle; on the child element (the one you want to vertically center). The child element should sit in the middle of your parent vertically.
  • Other method is to make your element display: inline-block; and give it vertical-align: middle. It will center vertically according to its siblings.

There's other things you can improve on but unfortunately I'm at work so I can't provide examples and a more comprehensive answer, sorry!

Improve this answer
\$\endgroup\$
3
  • \$\begingroup\$ Thank you Agnus for your reply. I gave h1 display : inline-block, and set it vertical align, and it didn't work.. Also it exists inside the body tag, I can't put display: table on the body tag .. Also, I could make the text align = center without setting the h1 as inline or inline-block. \$\endgroup\$
    – Brittany Rutherford
    Dec 2 '16 at 1:30
  • \$\begingroup\$ I kinda agree with some of your points but CR is about using the best practices . Using Id for a specific element is best practice rather than having classes. As I said before aligning an element you have to utilise the css box model properties and for a beginner I suggested a somewhat simpler approach. Yes, why use table properties when you can have a table and give it all its full properties \$\endgroup\$
    – Tolani
    Dec 2 '16 at 6:55
  • \$\begingroup\$ Yes, most people tend to avoid using tables and use multiple divs with left, right , bottom properties set. The project and the timing looks like a tabular data to me \$\endgroup\$
    – Tolani
    Dec 2 '16 at 6:58
0
\$\begingroup\$

I haven't looked at your code in depth but few points you should look out for

  • Favour id instead of class . An id selector selects a specific element so it can only be referenced once in your css while class is used to select more elements. Don't quote me wrong you can use class but why use it when you want to select one element using CSS. You can read it up about it from CSS Syntax and Selectors

  • I would avoid using all selectors e.g h1{text-align: centre} except you want all your h1 tags to be centered and red. Use id or class to select that particular tag in CSS .

  • To align contents in CSS properly, you have to take advantage of the left, top, right and bottom properties in conjunction with the CSS box model- Margin, Border, Padding and Content . This could be a lot to take in, so I suggest taking baby steps . Due to the project/timing structure of your content, other reviewers may call me old school but I would rather take advantage of CSS tables rather than div's. This makes your code clear and simply. I have rewritten your code as below

table#centre{

    margin-left:auto; 
    margin-right:auto;
    text-align:center;
}

table {
    border-collapse: collapse;
   
}

tr:nth-child(even){background-color: #f2f2f2}

th, td {
    text-align: center;
    padding: 8px;
 
}

th {
    background-color: #4CAF50;
    color: white;
}
h2#plunker{
  margin-left:auto; 
  margin-right:auto;
  text-align:center;
  background-color: red;
  height: 50px;
 
}
<h2 id="plunker">Hello Plunker!</h2>

<table id="centre">
  
  <tr>
    <th>Project 1</th>
    <th>Project 2</th>
    <th>Project 2</th>
    <th>Project 3</th>
    <th>Project 4</th>
  </tr>
  <tr>
    <td>Time: 10:30AM</td>
    <td>Time: 10:30AM</td>
    <td>Time: 10:30AM</td>
    <td>Time: 10:30AM</td>
    <td>Time: 10:30AM</td>
  </tr>
  
</table>

Noticed I set margin-left and margin-right to auto then added a text-align property. Some browsers such as Mozilla and Opera will centre your table but Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well.

Another alternative to this approach is setting the width to 70% . In the real sense, the maximum width of a browser is 100% and setting the margin-left and margin-right to 15% will push the table to the middle thereby allocating the remaining width of 70% to it. You can read more about this here Center a table with css

table#center {
    width:70%; 
    margin-left:15%; 
    margin-right:15%;
  }
Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.