For many, the designs and implementations behind the face of a website are baffling to look at. Indeed, even for somebody with experience of HTML and CSS, it can still be quite a grueling process to get used to. A key asset in manipulating a website to look just as you need is using commands like margins, and display types. Display types are a massive part of the design process and helps keep everything exactly where you need it to be.
This, in turn, allows for much more creative designs for your website, allowing you to move things around to the part of the page it can be most effective. However, like just about every other element out there in coding, even the slightest mistake can cause you many hours of stress.
There are various different forms of the display command that you can put into action. They all allow varying looks to your page and where things will end up, and knowing what each of them does is very important to getting the look and feel you are after.
display: inline (inline-flex, inline-block, inline-table)
Inline does exactly what you might imagine it would. It effectively keeps everything on the flow of one line, rather than pushing it down to the next line. For example, this piece of code: li {display: inline}, will create a list which will stay on the same line as each other rather than take it to the next line for each part of the list. Traditionally, lists run stacked on top of each other rather than across the page, but this helps you keep everything on one line.
It also keeps any other elements directly in line with the list – things like bold text or text that has an emboldened box around it. You can still add margins and other elements to this type of display, but it will only move horizontally.
You could also include an inline-block command. This creates a changeable height and width parameter, as well as the ability to use margins. This makes it especially useful for creating interesting graphics using just the web features given to you, rather than graphics or other elements.
display: block
Block display creates a standalone box away from other parts of the design. It will fit the entire width given creating a box, with a line break both between and before. This allows you to create a padding and margin for the box. A common example of a block usage would be a heading on a webpage.
Typically, it will sit with a significant amount of space between it and anything else. Sometimes, it may have a clear graphical highlight added.
display: none
This total removes the element from the page entirely. It’s not available to click on, and won’t be visible to any of the viewers of the page. This can be useful for switching out parts of the website you aren’t sure about, but don’t want to remove entirely at present. It will still load in the code, so if you display:none a large element, you site will still have a high load time.
display: table (table-caption, table-cell, table-column, table-footer, table-header, table-row)
This creates a table layout, and you can use a wide variety of different results like the table option. Tables allow you to have a lot more control on the positioning and overall style of a part of your website, allowing you to quickly and easily create professional looking layouts and tables without having to undergo anything too arduous.
It effectively forces things which aren’t tables to act like one. This might be quite a rare use of the display feature but it’s still there just in case you need it.
Over the next few weeks, we will go into other aspects of web development, including various CSS3 and HTML elements. Remember, the Design Web can help you with your web design and development. We not only build sites, we can also teach you how to develop sites yourself with one-on-one personal training on location or via teleconference.
