#layout Archives - Lena Design

The CSS display property is the most important CSS property to control the layout.

The display property defines if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Examples of the block-level elements:

<div>

<p>

<form>

An inline-level element does not start on a new line and only takes up as much width as necessary.

Examples of the inline-level elements:

<span>

<a>

<img>

Display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.

The HTML <script> element uses display: none; as default.

As I mentioned before, each element has a default display value. However, you can override this. Changing an inline element to a block element, or vice versa can be useful for making the page look a specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="https://lenadesign.org/html/" target="_blank">HTML</a></li>
  <li><a href="https://lenadesign.org/css/" target="_blank">CSS</a></li>
  <li><a href="https://lenadesign.org/javascript/" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Output:

The following example displays <span> elements as block elements:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span>

</body>
</html>

Output:

The following example displays <a> elements as block elements:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<a href="https://lenadesign.org/html/" target="_blank">HTML</a>
<a href="https://lenadesign.org/css/" target="_blank">CSS</a>
<a href="https://lenadesign.org/javascript/" target="_blank">JavaScript</a>

</body>
</html>

Output:

HTML CSS JavaScript

Enjoy coding!

Read also:

CSS Float Tutorial

CSS Opacity / Transparency

CSS Shadows

A website layout is very important to give your website a better look. Professional website layout can be achieved using a combination of HTML, CSS, and JavaScript but you can create at home a layout using HTML tags.

Today I will create a simple layout for a website using HTML and its attributes and we will move a bit further and start learning CSS to style our webpage and make our page looks good.

To understand the HTML layout, we should know first, which information the webpage layout should contain.

Websites display contents in columns (like in newspaper):

Where:

<header> Defines a header for a document or section. Typically contain the site logo or banner.

<nav> The section which is dedicated to links, or navigation. For example the menu of the page.

<main> Defines the main content of the webpage.

<article> Element defines a self-contained composition on the webpage.

<div> Defines a division or a section on the webpage.

<section> Definies section on the webpage.

<aside> It holds additional information.

<footer> Defines a footer for a website or section, and is always on the bottom of the webpage.

HTML Layout example:

<!DOCTYPE html>
<html>
<head>
   <title>The title of your website</title>
   <meta name="description" content="You can add description of your website here.">
   <meta name="author" content="author">
</head>
<body>
   <!-- HEADER SECTION -->
   <header>
   Your website logo or banner.
   </header>

   <!-- NAVIGATION BAR -->
   <nav>
    <a href="#">Main page</a>
    <a href="#">You can add link here</a>
    <a href="#">You can add link here</a>
   </nav>

   <!-- MAIN BODY -->
   <main>
    <!-- ARTICLE -->
   <article>
      <h1>Article Title</h1>

   <section>
      <h2>Section A</h2>
    You can add main text or informations here.
      <aside>Additional information.</aside>
   </section>

   <section>
      <h2>Section B</h2>
    You can add more contents here.
   </section>
   </article>

   <!-- DIVISIONS -->
   <div id="div-container">
     <div>Block 1</div>
     <div>Block 2</div>
   </div>
   </main>

   <!-- FOOTER SECTION -->
   <footer>
    FOOTER
   </footer>
</body>
</html>

Once we have done with basic HTML layout (inserted the upper code into HTML/text editor), we will receive this:

Previously, I planned to show you how to create columns using only HTML (table tag), however, I know now, and also from my experience, the <table> element was not designed to be a layout tool.

The HTML <table> element should represent tabular data. Using this element in your layout can later bring a mess in your code and not always this element displays properly in the browser.

To avoid errors in our code, I added to the HTML document CSS code to create 3 columns.

As you can see below, I used the internal method to insert code CSS to the file (by using an <style> element in the <head> section, which you can see on the top part of the code.

<!DOCTYPE html>
<html>
<head>
  <style>
    #main {
      display: flex;
    }
    #first-col {
      width: 30%;
      background: #2a9d8f;
    }
    #second-col {
      width: 40%;
      background: #e76f51;
    }
    #third-col {
      width: 30%;
      background: #e9c46a;
    }
    @media all and (max-width: 800px) {
      #main {
        display: block;
      }
      #first-col, #second-col, #third-col {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <!-- HEADER SECTION -->
  <header>
    Your website logo or banner.  </header>

   <!-- NAVIGATION BAR -->
  <nav>
    <a href="#">Main Page</a>
    <a href="#">You can add link here.</a>
    <a href="#">You can add link here.</a>
  </nav>

  <div id="main">
    <!-- LEFT SIDEBAR -->
    <div id="first-col">
      LEFT
    </div>

    <!-- CENTER MAIN -->
    <main id="second-col">
      <h1>Main</h1>
      <p>You can add main text or informations here</p>
    </main>

    <!-- RIGHT SIDEBAR -->
    <div id="third-col">
      RIGHT
    </div>
  </div>

  <!-- FOOTER SECTION -->
  <footer>
    Footer.
  </footer>
</body>
</html>

And it displays in the browser now like this:

Your website logo or banner.

LEFT

Main

You can add main text or informations here.

RIGHT

Enjoy coding!