Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Articles Tagged ‘css’

Create a cool CSS-based tab-menu

Tuesday, April 10th, 2018 by Servage
We received a lot of great feedback for our CSS-based dropdown menu, so I thought it would be time for another little tutorial. This time showing how to create a nice-looking tab-menu, based purely on HTML and CSS. See a live tabmenu example here. First, we want to have the menu code created in HTML. I find that the most appropriate way of doing this, is by creating the menu as a list. Thereby non-supporting browsers will still show the menu as a list, which somewhat resembles a menu. Everyone else will see the cool tab-menu :-) <ul class="tabmenu"> <li><a href="">Overview</a></li> <li class="active"><a href="">About</a></li> <li><a href="">Products</a></li> ...

Servage Web Development Course Part 4: Tables

Friday, March 2nd, 2018 by Servage
blogimageToday we will take a look at tables. Tables are in general comparable with tables in for example Word or Excel, and should be used the same way in HTML. That basically means that tables are a way to represent tabular data. They are not meant to be abused for other purposes, such as for example layouts. It has been "normal" for many years to use tables for page structure, which has distorted the use of tables. The correct way of doing layout is by use of div containers and CSS positioning (like described in a previous part of this course). Tables are for data. The table HTML structure The <table> tag has three sub-elements, which could ...

Servage Web Development Course Part 3: Layout and page structure

Friday, February 23rd, 2018 by Servage
blogimageEvery website looks a little different, but somehow they all still contain similar elements. Like a menu, a content area, a top banner (called header) and a bottom (called footer). These can be arranged and displayed in varuous ways, but mostly they are all there - somehow. In HTML there is the <div> tag which is suited to define and seperate such areas from each other. Combined with CSS styling, these <div> containers, as they are often called, can even be positioned to match the layout you want on your website. So let's have a look at a sample <div> container structure (part3a.html of the project files): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

Servage Web Development Course Part 2: Content formatting

Friday, February 16th, 2018 by Servage
In this part you will learn how to format (style) web pages' main content, such as text, paragraphs, lists, images and links. The formatting will be done with CSS, which was introduced in the first part of the Servage Web Development Course. Just to recap: HTML (Hypertext Markup Language) is the language used for the content of your website. CSS (Cascaded Style Sheet) is the language used to describe the design of your content. It is important to remember that we strictly separate those two elements from each other. One of the main advantages of this, is that you can not only have different people working on content and design separately from each other, you can also ...

Introduction to the Servage Web Development Course

Saturday, February 10th, 2018 by Servage
Hello and welcome to the Servage Web Development Course. Over the next weeks we will take you through a series of tutorials that will show you how to develop your own web site and application from scratch. The course if designed for anyone that has no or little prior knowledge about website development. After this course you will have a good overview over the main technologies used - namely HTML, CSS, PHP and MySQL. The course itself will take you through these areas by building a little Blog-application step by step, that will feature creation, modification, display and design of content. So, if you are not yet an expert on creating webpages, please continue reading :-) The beginning Every ...

Is your website standard compliant?

Monday, January 15th, 2018 by Servage
vcss-bluevalid-xhtml11-bluevalid-html401-blueEveryone who ever tried creating a website probably knows that annoying experience of HTML pages not being displayed the same way in every browser. Especially Internet Explorer, but also older versions of other browsers, are having a hard time showing your site the way you intended it to look. The reason for this is browsers interpreting HTML code and CSS styles differently. In many cases this has lead developers to create workarounds, including the use of invalid HTML or CSS, to trick the browsers into displaying the content in a similar way. These issues ...

Looking at Bootstrap 4

Sunday, December 3rd, 2017 by Servage
Bootstrap4The development of the latest version of Bootstrap entered a beta stage this summer. Going from alpha to beta introduced some major changes, and now that Bootstrap 4 is in beta, there should no longer be many breaking changes. This gives us a good chance to look into the future and see what new is included in the latest version of most popular front-end CSS framework. The New Grid While the grid in Bootstrap is still divided into 12 columns, it now uses Flexbox by default. A new grid tier “xl” has also been added. This means you should use tiers one level higher than previously. For instance, col-md-4 in Bootstrap 3 is ...

What are progressive web apps

Thursday, November 2nd, 2017 by Servage
web-appThe term progressive web app (PWA) is a hot trend right now. It all started back in 2015 and quickly became popular due to the advantages it offers over traditional mobile applications. But what is a progressive web application? How does it differ from a typical mobile or web application? Let’s find out what the term PWA actually means and what makes an application a progressive web application. The Definition of Progressive In one sentence, a progressive web application is a website that looks and works like a mobile application. Modern HTML5 and CSS3 features allow developers to replicate many of the features native applications can do: storing data locally, using animations to ...

What is object-oriented CSS?

Thursday, September 21st, 2017 by Servage
css3Object-oriented programming is a common practice in many programming languages. It helps you with the DRY principle (don’t repeat yourself) by allowing you to repeatedly use code from a single code base. How would applying the paradigm work with something other than a programming language, like CSS? Let’s find out how CSS can be written in the same way and what are the benefits of doing so. The Two Principles of OOCSS Object-oriented CSS (OOCSS) is built upon two main principles. Firstly, content should be separated from containers. If content and its container are not tied to each other too closely, it allows you to reuse the containers for different types of content ...

Getting started with Gulp

Thursday, September 14th, 2017 by Servage
gulpGulp is a task runner for JavaScript that can automate away repetitive tasks so you can focus on coding instead. Gulp is an extremely versatile tool that can automate tasks from transpiling SCSS to live reloading with Browsersync. Let’s have a look at some of the most useful tasks you can automate with Gulp and a quick look at how to set it up. Transpiling SCSS Using a CSS preprocessor like Sass is quite common these days, especially when working with front-end frameworks because of how well it integrates with them. Sometimes it can be quite confusing to set up an automated transpiler that converts SCSS to CSS. Gulp makes this possible with ...