Cascading Style Sheets

IT Consultant: Drupal CMS web site developer, PHP developer, web site administrator

When
03/04/2014 - 02/06/2014
Organisation(s)
Role(s)
Subcontractor: Drupal CMS web site developer, web site administration
Tasks

Improvements to the Mind Health Connect site of Health Direct. Employed feature-based Git branch development in a multi-stage Drupal environment on Amazon Web Services, and Capistrano deployment automation. Custom PHP coding and Drupal Features code generation development.

Improvements to the National Health Services Directory site of Health Direct. Worked with a multi-stage Acquia Drupal Cloud environment. Developed a responsive home page feature incorporating embedded elements using contributed Drupal modules including Features, Panels, Views and Views Slideshow. Responsive CSS tuning and testing across multiple desktop/laptop, tablet and mobile devices and browsers.

Used Unified Modeling Language (UML) activity diagrams as flowcharts for deployment documentation.

Technocrat

Type of organisation
Company
Where
Sydney, Australia
When
3 Apr 2014 - 12 Jun 2014
Role(s)
Drupal CMS web developer

CSS: pure CSS gradient generation strategies

Of all the links provided below to stragies for creating pure CSS gradients, my top tip is Creating 3 Stage Pure CSS3 Gradients (Jan 2013), which strategy was adapted for the background of this Webel IT site.

CSS: horizontal and vertical centering that really works (yes, really)

Ah the joys that arrived with CSS and the banishment of the good old CENTER tag which, well, centered things.

I provide here some minimal examples live that show you exactly how horizontal
and vertical centering in CSS really work (including some variations and options).

I also provide some links at the bottom here with lengthy discussions (and arguments) about everything to do with horizontal and vertical alignment. I highly recommend the following article, which does a great job of explaining the difference between "default" block level and "default" inline display mode elements, although there are some markup problems with the HTML code representation: Horizontal and Vertical Centering Using CSS: A Beginner’s Guide by Jarod Taylor:

'There comes a time in every web designer's life, when you're trying to center an HTML element and it's failing miserably. You're ready to pull the plug on CSS, revert back to tables, and use deprecated tags and attributes like: <center>, align, and valign.'


Horizontal centering with CSS, the (relatively) easy bit

The most important thing to understand is that the CSS 'text-align' property applies to the (typically inline) children of a container block element, not to the block element itself, and certainly not to an inline element itself. You therefore can't center an image using a lonely inline IMG tag like this:

.CENTER { text-align: center;}

<img class="CENTER" src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/>

The reason this fails (aligns left) is that the IMG is by default an inline element and has no children to align, the CENTER class here has nothing to apply to, it does not apply to itself (the IMG).

Instead, we try next to wrap it in a centering DIV block container element, and we also include a simple border so we can see the containing DIV:

.BORDERED {
   border: 1px solid silver;
}

<div class="CENTER BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/>
</div>

It works fine, because the containing DIV takes up 100% of the available content area width (unlike a TABLE element, which 'will only take up as much width as it needs, similar to an inline element'):

'When a block-level element doesn't have a width declared, its default value is auto. If a block element has the width value of auto, it will take up 100% of the width of its parent element.'

Centering a block level element

One can center any element that is by default - or forced to be - a block display mode element without consideration of its container using automatic margins on each side of the element:

.BLOCK-CENTERED {
    display:block;
    margin-left: auto;
    margin-right: auto;
}

We can force a SPAN to have block display and can then center it within the content area. (In the examples below, the DIVs are by default 'block' display mode anyway, but it doesn't hurt to have it in the CSS above.)

<span class="BLOCK-CENTERED BORDERED">SPAN forced block: Centered, but as wide as the content area anyway (but text left).</span>
<div class="BORDERED">DIV: Will inherit horizontal alignment from its parent container, and stays left (and text left).</div>
<div class="BLOCK-CENTERED BORDERED">DIV: Centered, but as wide as the content area anyway (but text left).</div>

But you won't see any difference for these SPANs or DIVs, because - being all block elements now - they are by default 100% wide anyway. Look at the borders !

SPAN forced block: Centered, but as wide as the content area anyway (but text left)

DIV: Will inherit horizontal alignment from its parent container, and stays left (and text left).
DIV: Centered, but as wide as the content area anyway (but text left).

The text within that SPAN and those DIVs is NOT centered, because it has inherited a left alignment; the block-forced SPAN and DIVs _are_ centered, but because they are 100% wide anyway it makes no difference.

To see a difference, we have to force them all to be less than 100% of the content area width:

.HALF-WIDTH { width:50%;}

<span class="BLOCK-CENTERED BORDERED HALF-WIDTH">SPAN: half width, and centered (but text left).</span>
<div class="BORDERED HALF-WIDTH">DIV: half width, and will inherit horizontal alignment from its parent and stays left (and text left).</div>
<div class="BLOCK-CENTERED BORDERED HALF-WIDTH">DIV: half width, and centered (but text left).</div>

SPAN: half width, and centered (but text left).

DIV: half width, and will inherit horizontal alignment from its parent and stays left (and text left).
DIV: half width, and centered (but text left).

Again, the text alignment within the block level elements is not of interest here, we are examining only the alignment of the block level outer elements shown by the borders ! We could easily align the text within them each by including the CENTER class from above, which will then apply to the contained text:

<span class="BLOCK-CENTERED BORDERED HALF-WIDTH CENTER">SPAN: half width, and centered (and text centered).</span>
<div class="BORDERED HALF-WIDTH  CENTER">DIV: half width, and will inherit horizontal alignment from its parent and stays left (but text centered).</div>
<div class="BLOCK-CENTERED BORDERED HALF-WIDTH  CENTER">DIV: half width, and centered (and text centered).</div>

SPAN: half width, and centered (and text centered).

DIV: half width, and will inherit horizontal alignment from its parent and stays left (but text centered).
DIV: half width, and centered (and text centered).

Centering an IMG without a DIV container by forcing it to be a centered block element

The same automatic margin trick can be applied to an IMG forced to be a block element, without even specifying a width for it:

<img class="BLOCK-CENTERED BORDERED" src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/>

The reason this works is that IMG has "intrinsic dimensions", it does not even need a width declaration, it will - unlike other block elements - not automatically expand to 100% of the width of its parent !

Vertical centering of multiple images

Fine, we can handle horizontal centering of text and images. Now what if we have 2 images of different heights and we have to consider vertical centering as well:

<div class="CENTER BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/><img src="http://www.webel.com.au/sites/default/files/images/demo/test-einstein.jpg"/>
</div>

Note also that because this is being done in Drupal™, I have taken special care to use no newline between the 2 <img> elements, because the Drupal line-break text filter will (if enabled) turn that line-break into a <BR/>, thus:

<div class="CENTER BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/>
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-einstein.jpg"/>
</div>


Above, the Drupal line-break text filter (input filter) has inserted a <BR/> and separated the images so they are now on top of each other, instead of beside each other.

Ok, back to the side-by-side images. In order to align them vertically using DIVs, we might naively think we need to "make the container align them", just as we did with horizontal alignment of its child images, like this:

.MIDDLE {vertical-align: middle;}

<div class="CENTER MIDDLE BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/><img src="http://www.webel.com.au/sites/default/files/images/demo/test-einstein.jpg"/>
</div>

It fails ! So why if the container DIV works fine for horizontal centering does it fail here for vertical alignment of its child elements ?

As Jarod Taylor says:

'Unlike horizontal centering, vertical centering can be a nightmare. There [are] a few different methods of vertically centering content in HTML, but all methods have their pros, cons, and browser inconsistencies.'

The first thing to understand is that:

Outside a good-ol' TR tag within a TABLE, the 'vertical-align' does not align the child elements within a "container" element it is applied to, it aligns the element that it is applied to relative to the baseline of its parent !

Further, except for the special case of block elements with the special display type 'table-cell', it is really intended for use with inline elements, it instructs them how to "align themselves" vertically within their (usually block display type) parent. From Vertical Centering With CSS:

'Poor vertical align still gets a bad rap ...

I think this is because most coders would expect vertical-align to align an element vertically in its container. Instead it vertically aligns an element in relation to the line-height. '

..

'The basic usage is like this:

img {
   vertical-align: middle;
} 

Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does “sit inline” mean exactly? That is where vertical-align comes in.

The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage.

The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you. '

The CSS table/row/cell-like DIV vertical centering approach: flexible but complex

Let's look first at the approach you will probably see "recommended" most often, the table-like DIV strategy. CSS offers at least three table-like display modes: 'table', 'table-row', and 'table-cell', which we can encapsulate as CSS classes thus:

/* Special table forms, not supported by IE6, IE7 (but only tiny usage) */
 
.TABLE {
    display: table;
}
 
.ROW {
    display: table-row;
}
 
.CELL {
    display: table-cell;
    padding: 5px;
}

The markup is quite like TABLE/TR/TD. The use of a 'display: table-row;' DIV here is optional, but the use of the outermost 'display: table;' DIV is NOT optional, otherwise the 'display; table-cell;' DIVs will have no vertical alignment reference (no sensible baseline):

<div class="TABLE CENTER BORDERED">
<div class="CELL MIDDLE BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/></div>
<div class="CELL MIDDLE BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-einstein.jpg"/></div>
</div>

But there is still a problem, it is all left-aligned. That is because the outermost 'display: table;' DIV now acts like a TABLE and does not expand to take up 100% of the content area !

We might be tempted to simply add in a 100% width specifier for the container table DIV; after all, that seemed to work with horizontal centering of a single image above within a DIV, where the DIV by default took a width of 100%:

.WIDE {
    width: 100%;
}

<div class="TABLE CENTER WIDE BORDERED">
<div class="CELL CENTER MIDDLE BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/></div>
<div class="CELL CENTER MIDDLE BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-einstein.jpg"/></div>
</div>

Oops, not so good. It has now distributed the "table" cells across the 100% width "table" DIV and the images are completely separated.

So instead we use the automatic margin trick, which preserves the table-like DIV's width:

.WIDE-AUTO {
    margin-left: auto;
    margin-right: auto;
}

<div class="TABLE CENTER WIDE-AUTO BORDERED">
<div class="CELL CENTER MIDDLE BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/></div>
<div class="CELL CENTER MIDDLE BORDERED">
<img src="http://www.webel.com.au/sites/default/files/images/demo/test-einstein.jpg"/></div>
</div>

Phew ! All that just to vertically and horizontally center 2 images with "modern" CSS table-like DIV layout methods. But while the table-like DIV display/layout methods are very flexible (can handle many more cases than I am exploring here), for the simpler case of vertically (and horizontally) centering 2 images we can make it much easier, if we understand that (from Vertical Centering With CSS):

'There are a few ways to center vertically. In terms of block level elements, the methods are quirky. Inline elements are much simpler to center'

The whole effort with the 'display: table;' and 'display: table-cell;' approach above is because DIV is by default (otherwise) a block element. We can actually use vertical-align on inline elements like IMG directly, we don't even need a 'display: table-cell;' containing DIV.

Simpler: apply vertical-align directly to inline elements (like IMG) inside a DIV container

First lets look at it with a TABLE-like container DIV, but we'll leave out the middle-man, those table-cell-like DIVs that were wrapping the images:

<div class="TABLE CENTER WIDE-AUTO BORDERED">
<img class="CENTER MIDDLE BORDERED" src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/><img class="CENTER MIDDLE BORDERED" src="http://www.webel.com.au/sites/default/files/images/demo/test-einstein.jpg"/>
</div>

The containing table-like DIV needs the automatic margins, because otherwise it will not center properly horizontally within the content area, because being now "table-like" it will only take up as much space as its "table" needs (see the border).

Note once again that, because I am using Drupal, I have to take care above not to put a newline between the end of one IMG and the next IMG, otherwise Drupal text filters will insert a <BR/>; this is not a problem with the 'display: table-cell;' DIV approach.

We can make it more compact still; simply let a containing DIV take up maximum width, let it center the 2 images horizontally, and let the 2 images "vertically align themselves" within the container:

<div class="CENTER BORDERED">
<img class="MIDDLE" src="http://www.webel.com.au/sites/default/files/images/demo/test-aurora.jpg"/><img class="MIDDLE" src="http://www.webel.com.au/sites/default/files/images/demo/test-einstein.jpg"/>
</div>

And it works with no reference to CSS table-like display modes anywhere.

So there you have it; the most compact horizontal and vertical centering form for 2 images possible. This is not the most flexible approach, sometimes the table-like DIV containers (TABLE/ROW/CELL) approach is needed, but often that approach is incorrectly shown as the "correct" way to use 'vertical-align', merely because people don't understand that vertical-align is basically intended for use with inline elements, and functions very differently from text-align (which aligns child elements within block elements). They sound similar, but work very differently !

Finally, the usually superb W3Schools CSS reference is (currently) a complete let-down when it comes to vertical-align. Although it gives an example using an IMG, it says nothing about the consequences for block vs inline elements, and if you took it literally 'The vertical-align property sets the vertical alignment of an element' you would be left very confused when applying it to other element types.

Make sure you also examine: CSS: on using DIVs for TABLE style formatting

CSS: on using DIVs for TABLE style formatting

From Web Development Case Study: Upgrading Tables to Divs by Michael Rohde:

'It's hard to imagine that some web developers are still using table tags for web page layouts. But there are still some out there that do.'

Yes, it's extremely naughty to use TABLE for layout (as opposed to for tabular data, for which it is still highly recommended and well suited), but the reason a lot of people still use TABLE/TR/TD for layout is that it's quite easy - even if it uses a few more markup characters - and as the above article proves getting DIVs to act like TABLE, TR, TD takes quite a bit of CSS massaging.

And if you are dealing with a system like Drupal™, where the HTML filters for most input formats strip 'style' attributes "for security reasons" you have to resort to external CSS files completely to get DIVs to act like tables.

One way to address this is to create some special CSS declarations that serve only to emphasise a special formatting role:

.CENTER { text-align: center; }
 
.MIDDLE {vertical-align: middle; }
 
/* Special table forms, not supported by IE6, IE7 (only have tiny usage in 2014) */
 
.TABLE { display: table; }
 
.ROW { display: table-row; }
 
.CELL { display: table-cell; padding: 5px; }
 
.WIDE { width:100%; }
 
.WIDE-AUTO {
    margin-left: auto;
    margin-right: auto;
}
 
/* Some extra examples, not used here but handy */
 
.FLOAT-RIGHT { float:right; }
 
.FLOAT-LEFT { float:left; }
 
.CLEAR { clear: both; }
 
.INLINE { display:inline; }
 
.BLOCK { display:block; }

I find that CAPITALIZING them makes it clear that they are really only standins for layout control, as opposed to style classes with any deeper meaning or context.

You can then create, for example, tables with cell of linked images centered both across the page and vertically within cells thus:

<div class="CENTER TABLE WIDE-AUTO">
<div class="ROW">
<div class="CELL MIDDLE">
<a href="http://drupal.org"><img src="https://drupal.org/files/druplicon.small_.png"/></a></div>
<div class="CELL MIDDLE"><a href="https://association.drupal.org/"><img src="https://association.drupal.org/files/Drupal_Association_individual_thumbnail.png"/></a></div>
</div>
</div>

Which displays as:

One can in many cases skip the table-row DIV:

<div class="CENTER TABLE WIDE-AUTO">
<div class="CELL MIDDLE">
<a href="http://drupal.org"><img src="https://drupal.org/files/druplicon.small_.png"/></a></div>
<div class="CELL MIDDLE"><a href="https://association.drupal.org/"><img src="https://association.drupal.org/files/Drupal_Association_individual_thumbnail.png"/></a></div>
</div>

Which displays as:

It may save a few characters and be more "correct", but honestly having a <div class="ROW"> is hardly easier than using a TR. I provide lots of links to longer discussions (and arguments about it) below.


Make sure you also examine the very detailed examples under: CSS: horizontal and vertical centering that really works (yes, really)

Cascading Style Sheets (CSS)

Webel IT has used CSS since 1998 in combination with all other web development platforms, including Drupal™ CMS theming and styling.

From Wikipedia: Cascading Style Sheets:

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.

CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).

CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. ..

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998), and they also operate a free CSS validation service ..

Consultant: Drupal CMS web site development and PHP scripting for systems engineering resources web site for international training organisation

When
04/09/2009 - 01/06/2010
Organisation(s)
Role(s)
IT Consultant, Drupal CMS and PHP web developer
Tasks

Large web site redevelopment project. Migrated old file-based web site to a new rich metadata-driven Drupal CMS web site, with 1000s of web pages of systems engineering and software engineering resources.

Developed dozens of custom PHP style templates for fine control over serving of custom Drupal page types.

Developed 100s of custom Drupal query views for presentation of linked metadata. Developed custom query views with filters for searches for documents, organisations, definitions, and people.

Cascading Style Sheet (CSS) styling of all aspects of the site, including the site container and formatting of query views.

MySQL database administration. Developed low-level SQL queries to automate administration tasks and data migration.

Developed substantial PHP scripts, employing fully object-oriented PHP technology, against Drupal's PHP node APIs to automate migration of data, and for administration tasks. Developed a PHP script for generation of a "static" offline version of the site directly from the online version.

Content processing: incorporated hundreds of systems engineering document into the developed Drupal CMS system, extracting document metadata, identifying engineering keywords, and creating linked relationships to other documents, authors, organisations, publishers, and journals.

Administration of the Drupal site, including implementation of fine-grained access controls for different user levels.

Developed an engineering glossary system with filtered search facilities.

Advised on use and integration of LDAP directory technology for managing existing legacy customer and client login data.

Developed educational screencasts demonstrating the sites features, including video and audio editing and voiceovers.

CSS side-by-side

DO NOT EVER place a block-level element (no matter how deeply) inside an inline-level element (unless you want to waste lots of your own time diagnosing strange CSS results) ! The behavior is ill-defined, and mostly the outer inline-level element will behave something like a block element. This includes placing fancy CSS menus (which may have block-level elements buried deep inside the lists) inside an inline DIV next another inline DIV. Use float instead, or if desperate, go back to table layouts.

DIVs with {display:inline;} work fine if their contents do not have block-level display, and will display side-by-side as expected:

I am 'inline' and red
I am 'inline' and green

However, as soon as there is any content inside a DIVs with {display:block;} the inline behaviour is destroyed:

I am 'inline' and red
I am a blue 'block' inside the "inline" red parent
I am 'inline' and green

In such cases consider using{float:left;} :

I am {float:left} and red
I am a blue 'block' inside the "floated" red parent
I am {float:left} and green

And make sure you use {clear:both} afterwards !

Cascading Style Sheet (CSS) reference

This Webel reference zone has Cascading Style Sheet (CSS) tips and links.
Syndicate content
randomness