div Archives - Complete, Concrete, Concise https://complete-concrete-concise.com/tag/div/ Practical Information Without The Bloat Mon, 30 Apr 2018 04:45:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 A Page <div>ided https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/a-page-divided/ Mon, 30 Apr 2018 04:45:00 +0000 https://complete-concrete-concise.com/?p=3653 A worked example using <div> for sectioning content and 'margin:auto' for centering.

The post A Page <div>ided appeared first on Complete, Concrete, Concise.

]]> The previous exercise was an attempt to structure and (roughly) centre webpage content.
In this example we use div for sectioning the content on the page and margin:auto to centre it.

Contents

  1. An Example Using divs
  2. div Source Code
  3. Notes
  4. span Challenges

An Example Using divs

You can see how the page I styled and structured using divs looks here.

div Source Code

<!DOCTYPE HTML>
<html>
  <head>
    <title>A  Page &lt;Div&gt;ided</title>
    <meta charset="utf-8"  />

    <style>

      .main {
        font-family: sans-serif;
        box-sizing: border-box;
        width: 600px;
        margin: auto;
      }

      .header, .footer {
        text-align: center;
        padding: 16px 0;
      }

      .header {
        background-color: blue;
        color: white;
      }

      #title {
        font-size: 32px;
      }

      #subtitle {
        font-size: 24px;
      }

      .content {
        font-size: 16px;
        text-align: justify;
      }

      .footer {
        color: blue;
        font-size: 24px;
        background-color: yellow;
      }

    </style>

  </head>
  <body>

    <div class="main">
      <div class="header">
        <p id="title">A Page &lt;Div&gt;ided</p>
        <p id="subtitle">
          Handling HTML one &lt;div&gt; at a time
        </p>
      </div>

      <div class="content">
        <p>
          Quam stultum est aetatem disponere ne crastini
          quidem dominum! o quanta dementia est spes
          longas inchoantium: emam, aedificabo, credam,
          exigam, honores geram, tum deinde lassam et
          plenam senectutem in otium referam.
        </p>
        <p>Omnia, mihi crede, etiam
          felicibus dubia sunt; nihil sibi quisquam de
          futuro debet promittere; id quoque quod
          tenetur per manus exit et ipsam quam premimus
          horam casus incidit. Volvitur tempus rata
          quidem lege, sed per obscurum: quid autem ad
          me an naturae certum sit quod mihi incertumest?
        </p>
        <ol>
          <li>Stat quidem terminusnobis ubi illum
            inexorabilis fatorum necessitas fixit, sed
            nemo scit nostrumquam prope versetur a
            termino; sic itaque formemus animum tamquam
            ad extremaventum sit.
          </li>
          <li>Nihil differamus; cotidie cum vita paria
            faciamus.
          </li>
          <li>Maximum vitae vitium est quod inperfecta
            semper est, quod [in] aliquid ex illa
            differtur.
          </li>
          </li>Qui cotidie vitae suae summam manum
            inposuit non indiget tempore;ex hac autem
            indigentia timor nascitur et cupiditas futuri
            exedens animum. Nihil est miserius dubitatione
            venientium quorsus evadant; quantum sit illud
            quod restat aut quale sollicita mens
            inexplicabili formidine agitatur.
          </li>
        </ol>
      </div>

      <div class="footer">
        <p>Copyright 2018</p>
      </div>

    </div>

  </body>
</html>

Notes

  1. Most of the content is the same as the previous example.
  2. The webpage is sectioned into 4 parts:
    1. a main div] which is used to contain and centre everything else on the page.
    2. A header div which contains heading content that is common across all pages.
    3. A content div which contains the page content.
    4. A footer div which contains common content that would be common across all pages.
  3. While classes were used for the main. header, content, and footer sections, IDs would have been a better option. Since there should only be one of each on the page.
  4. The content is justified.
  5. Common styling for the .header and .footer were gathered together. Individual .header and .footer styling were applied later. This could also have been done using addition classes. There are always many ways to do things, but the general guideline should be to try and minimize:
    1. the number of duplications – if you find yourself creating lots of classes with the same styling information, perhaps you should consider gathering the styling information together. You could extract it into a common class, or into a common wrapper.
    2. the number of specific styling classes you apply to each HTML element. While you can have a long chain of styling classes for an HTML element you should ensure that it is necessary.

    The general goal is to make your pages easier to create and easy to maintain. Always ask yourself, “How much code would I have to change if all the styling is changed?” It is always a balance and something that comes with experience.

span Challenges

You were also asked how would you create the following span styles:

Underline a mistake in red?
Create a space for people to in?

It could be done with these classes:

.red-underline {
  border-bottom: 2px solid red;
}

.four-char-space {
  border-bottom: 2px solid black;
  width: 64px;
  display: inline-block;

}

The red underline should be obvious – simply apply a red border to the bottom of the span.
The space for 4 characters is probably not so obvious:

  1. The width is set to 64px based on the assumption that the font size is 16px (I could have set it explicitly just to be sure). Perhaps it should have been made 96px to have additional padding on either side.
  2. The display is set to inline-block because inline elements ignore any applied width or height values.
  3. The width has to be set because you can’t insert a bunch of spaces. Remember that HTML automatically collapses all white space into a single whitespace character.

The post A Page <div>ided appeared first on Complete, Concrete, Concise.

]]> Sectioning Using HTML and Auto Centering Content https://complete-concrete-concise.com/tutorials/webdev/front-end-basics/sectioning-using-html-and-auto-centering-content/ Sat, 28 Apr 2018 04:52:11 +0000 https://complete-concrete-concise.com/?p=3643 We saw that you can style the <body> tag to contain your content. In this tutorial, we'll see a better way.

The post Sectioning Using HTML and Auto Centering Content appeared first on Complete, Concrete, Concise.

]]> In the previous exercise, you saw that it is possible to structure the width and position of content using the body element.
The body is rarely styled, except for possibly a background. HTML has a number of invisible HTML elements that are used for structuring your content.

The HTML elements you have seen can be best described as content elements because they either marked up specific content – like paragraphs, lists, headings, or hyperlinks – or they add semantic meaning to the content – strong, em, i, or mark. But they don’t group together related items – all elements are pretty much independent of each other.
HTML provides a number of elements that allow styling without semantic meaning or grouping together related items.

Contents

  1. span
  2. div
  3. Centering Blocks Using margin: auto;
  4. Summary
  5. Playing Around
  6. References

span

The span element behaves very much like strong, em, i, ormark: it is inline and it can be applied to a bunch of text:

<p>This is some <strong>strong text</strong></p>
<p>This is some <i>italic text</i></p>
<p>This is some <span>span text</span></p>

Since the span element has no styling applied, the text it encloses will use whatever style is applied to the p tag.
More importantly, the span element has no semantic meaning. Any styles you apply to a span are decorative – User Agents (browsers) will not infer anything special about that text.
All the colour coding used in these pages is done using span.
Consider:

.html-tag {
  background-color: #FCFCFC;
  border: 1px solid black;
  border-radius: 5px;
  padding: 0 3px;
}

.css-property {
  font-size: 18px;
  font-weight: bold;
  font-family: monospace;
  color: blue;
  margin: 0 3px;
}

When applied to the following text:1

<p>The paragraph is a common HTML element, it is
  written <span class="html-tag">&lt;p&gt;</span>.
</p>

<p>The eagle eyed will notice I use the CSS property
  <span class="css-property">border-radius</span>
  without having introduced it before.
</p>

Results in the following output:

The paragraph is a common HTML element, it is written <p>.
The eagle eyed will notice I use the CSS property border-radius without having introduced it before.

By default it is an inline element, although you can change this with the display property. You might change it to inline-block if you need to set its width or height. There is no need to change it to block because that is what div is for.

div

The div element is similar the span element, except that it is a block display element. Like the span element, it has no semantic meaning. It is widely used for grouping things together.2
Consider the HTML code used to display the output results above:

<div class="output">
  <p>The paragraph is a common HTML element, it is
    written <span class="html-tag">&lt;p&gt;</span>.
  </p>

  <p>The eagle eyed will notice I use the CSS property
    <span class="css-property">border-radius</span>
    without having introduced it before.
  </p>
</div>

The styled paragraphs are contained inside a div block styled with the .output class.
Having a div as the first element inside the body is a very common programming pattern:

<body>
  <div class="main">
    A whole bunch of html
  </div>
</body>

It should be obvious how this can be applied to the previous coding exercise – instead of styling the body element, you would style the .main class.
Before HTML5, many websites had the following basic structure (actually, many websites still use this basic structure):

<body>
  <div class="main">

    <div class="header">
      This section contains the common information
      found at the top of the every webpage.

      Stuff like the site name and logo.
    </div>

    <div class="navigation">
      This is the navigation bar. Sometimes is may
      be included in the "header", other times it
      is on its own.

      If the navigation is common to all pages, then
      it should go inside the "header".
    </div>

    <div class="content">
      There are, typically, a lot of <div>s in this
      section and quite a lot of complicated structuring
      code.
    </div>

    <div class="footer">
      This section contains the common information
      found at the bottom of the every webpage.

      Stuff like the copyright, privacy, contact,
      legal terms, small print, etc.
  </div>
</body>

Using colourful visual styling, it looks something like this:

<body>

<div class=“main;”>
This acts as the outer container for all of the content.

<div class=“header;”>
This section contains the common information found at the top of the every webpage.
Stuff like the site name and logo.
</div>
<div class=“navigation;”>
This is the navigation bar. Sometimes is may be included in the “header”, other times it is on its own.
If the navigation is common to all pages, then it should go inside the “header”.
</div>
<div class=“content;”>
There are, typically, a lot of <div>s in this section and quite a lot of complicated structuring code.
</div>
<div class=“footer;”>
This section contains the common information found at the bottom of the every webpage.
Stuff like the copyright, privacy, contact, legal terms, small print, etc.
</div>

</div>

</div>

By default it is a block element, although you can change this with the display property. With dynamic pages (using JavaScript), you might toggle the property between none and block to hide / reveal content. There is no need to change it to inline or inline-block because that is what span is for.

Centering Blocks Using margin: auto;

The easiest way to centre a block element is:

  • give it a width and
  • set the margin to auto.

This will cause the User Agent (browser) to calculate appropriate margins for the HTML element.
In general, the rules governing auto work like this:

  1. For inline items, the calculated auto margin is always 0px.
  2. For block items, the calculated top and bottom auto margin is always 0px.
  3. For block items with a box-sizing value of content-box with a specified width: if the total width of the content + padding + border is less than the width of the container it is in, then equal left and right margins will be applied. Otherwise the margins will be 0px.
  4. For block items with a box-sizing value of border-box with a specified width: if the total width of the element is less than the width of the container it is in, then equal left and right margins will be applied. Otherwise the margins will be 0px.

It is most commonly written as:

.centre {
  margin: auto;
}

Some consider it better to use the 2 parameter version (the order is top and bottom, left and right):

.centre {
  margin: 0 auto;
}

You can also use it in the 4 parameter version (the order is top, right, bottom, left):

.centre {
  margin: 0 auto 0 auto;
}

You can always apply top and bottom margins – if you like.
If a margin value is 0, it does not need the px suffix. This is true for all measurement units because: zero means zero.
Applying any of the above styles to a 200px by 200px div element (also styled with a green background), results in:

Vertical centering is more difficult because HTML elements automatically expand vertically to accommodate content. So, technically, there is no vertical centre of a block element. In future tutorials, we will look at vertically centering content.

Summary

  1. span is an inline HTML element you can use to style content without giving the content any semantic meaning.
  2. div is a block HTML element that is used to group together other elements. It has no semantic meaning.
  3. When laying out your HTML document, you should use a divide and conquer approach.
  4. Many HTML documents are divided into header, navigation, content, and footer sections.
  5. Applying the margin: auto style to a block element will cause it to be horizontally centred inside whatever container it is located – provided it is smaller than the container.

Playing Around

The best way to learn is to play around with what you have learned.
Take the webpage you wrote in the previous exercise and revise it so it uses div elements to structure and contain the content. Also apply the margin: auto style to the main container to centre the content. You should notice that when you resize the browser window, the document content remains centred (of course, if you make your browser window smaller than the content width it won’t remain centred).
Knowing about the span element, create a few custom styles and apply it to parts of your document. Experiment with different font size, weights, style, colours, borders, etc.
How would you create the following styles:

Underline a mistake in red?

Create a space for people to in?

References

  1. You may have noticed I wrote &lt;p&gt; as the content inside the span. This is because in HTML, the angle brackets <> are used to identify HTML tags. This means that any time one appears, it is considered to be part of an HTML tag. It can never appear as text or content. To get around this limitation, there are a number of special HTML codes that can be used replace them.All HTML codes begin with an ampersand (&) and end with a semicolon (;). In between them is a short mnemonic. In this case lt and gt standing for less than and greater than.There are lots of codes, although most people only use a handful with &lt; and &gt; being the most common since they are they only way you can get the angle brackets to display in your content.You can see the whole list here. Note, the font used for the table is absurdly small.Another common code is & for ampersand (&).↩
  2. Don’t be shy about using the div element. As you will see, it is essential to divide and conquer!↩

The post Sectioning Using HTML and Auto Centering Content appeared first on Complete, Concrete, Concise.

]]>