Mick Redman: layout

Showing posts with label layout. Show all posts

Thursday, 21 March 2019

Yii views and layouts

Within Yii we have the concept of views and layouts. This can get a little confusing for 2 reasons:

They both reside within the views directory
The higher level is the layout, which lies within a sub directory if views i.e views/layouts

That aside once you strip the garbage found in most tutorial the concept is straight forward.
Let's take a layout as our starting position. In this case views/layouts/main.php
This contains 3 elements which are particular to Yii.

The declaration of a variable from config/web.php to set the language
The declaration of a variable which resides in the view for the title tag
The all important echo of the $content variable which displays the contents of the view

<!DOCTYPE html>
<html lang="<?php echo Yii::$app->language ?>">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo $this->title ?></title>
</head>
<body>
<?php echo $content; ?>
</body>
</html>

Now let's look at the views/site/index.php
This view passes the title variable which is used in the <title> tag. of the layout above. "Hello world!" is displayed where $content is echo'd from the layout above.
<?php
$this->title = 'My Yii Application';
?>
Hello world!

Thursday, 26 April 2018

CSS Grid Layout accordion

This example highlights an important difference required by CSS Grid Layout to function properly. I've put it in red to make it obvious. If this line used the auto width setting, then as the accordion-content items expanded, they would mess up the layout. By using fractions (fr), we force the columns to retain their widths.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS Grid Layout accordion</title>
<style>
body {
font-family: sans-serif;
}

#container {
max-width: 46em;
margin: 0 auto;
}

.grid {
display: grid;
}

.two-columns {
grid-template-columns: 1fr 1fr;
}

.accordion-link {
width: 100%;
display: block;
}

.accordion-content {
overflow: hidden;
display: none;
}

@media (max-width: 640px) {
.grid {
grid-template-columns: auto;
}
}
</style>
</head>

<body>
<div id="container">
<div class="grid two-columns">
<div id="column1">
<a href="#" class="accordion-link">Link 1</a>
<div class="accordion-content">
Possumus noster ex excepteur firmissimum, voluptate dolore quid non quem e constias in illum doctrina, quid praetermissum offendit eram voluptate.
</div>

<a href="#" class="accordion-link">Link 2</a>
<div class="accordion-content">
Quibusdam sunt aliqua commodo culpa, quo ne illum culpa minim, noster commodo officia, id te culpa aliquip.
</div>
</div>

<div id="column2">
<a href="#" class="accordion-link">Link 3</a>
<div class="accordion-content">
Ad ipsum eiusmod. Consequat non legam excepteur, ut duis constias. Sint quibusdam ne anim enim.
</div>

<a href="#" class="accordion-link">Link 4</a>
<div class="accordion-content">
Se appellat an laboris nam nostrud ad eram nescius.Ubi aliqua officia quo eiusmod malis admodum occaecat ne te ingeniis transferrem, quo minim esse qui quibusdam, sed incurreret praetermissum, commodo te senserit ea aute imitarentur laboris quis officia,
litteris sint expetendis.
</div>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName('accordion-link');

for (var i = 0; i < acc.length; i++) {
acc[i].addEventListener('click', function() {
this.classList.toggle('active');
var accordioncontent = this.nextElementSibling;
if (accordioncontent.style.display === 'block') {
accordioncontent.style.display = 'none';
} else {
accordioncontent.style.display = 'block';
}
});
}
</script>
</body>

</html>

Wednesday, 25 April 2018

CSS Grid Layout responsive navigation

It's possible there is a better way of doing this. There are so many ways to do things using CSS Grid Layout. Anyway, here goes.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CSS Grid Layout navigation</title>
<style>
body {
font-family: sans-serif;
}

#container {
max-width: 46em;
margin: 0 auto;
}

.grid {
display: grid;
}

.single {
grid-template-columns: auto;
}

.five-columns {
grid-template-columns: auto auto auto auto auto;
}

#menu {
display: none;
}

nav {
display: block;
width: 100.05%;
}

@media (max-width: 640px) {
.grid {
grid-template-columns: auto;
}
.five-columns a {
display: block;
}
}
</style>
</head>

<body onload="handleresize()">
<div id="container">
<header class="grid single">This is a banner</header>
<a href="#" class="grid single" id="menu" onclick="toggleMenu()">Menu</a>
<nav class="grid five-columns">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Portfolio</a>
<a href="#">Contact</a>
</nav>
<main class="grid single">
<p>Quis fabulas ita quorum dolore. Fore ab nostrud ubi quem aut esse nam appellat, arbitror o litteris, quo quamquam iis laboris. Se elit cernantur, veniam tractavissent arbitror culpa singulis.Tempor id laboris. Minim occaecat ita culpa export, arbitror
ex eram, export ita constias hic sint ex eram admodum et praesentibus in labore ad probant a minim nam id laboris efflorescere, multos incididunt do exercitation do laborum culpa illum nescius enim. Non elit aliqua quis expetendis. Consequat legam
nulla cernantur malis nam e elit irure aut constias, de magna constias mentitum an senserit ea commodo, eu aliqua esse tempor appellat, senserit multos offendit, quo fugiat est duis, commodo aute irure vidisse nisi.</p>
</main>
<footer class="grid single">This is the footer</footer>
</div>
<script>
window.addEventListener("resize", handleresize);

function handleresize() {
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var nav = document.getElementsByTagName('nav')[0];
var menu = document.getElementById('menu');
if (width < 640) {
nav.style.display = 'none';
menu.style.display = 'block';
} else {
nav.setAttribute('style', 'visibility:visible');
menu.style.display = 'none';
}
}

function toggleMenu() {
var nav = document.getElementsByTagName('nav')[0];
if (nav.style.display === 'block') {
nav.style.display = 'none';
} else {
nav.style.display = 'block';
}
}
</script>
</body>

</html>

Wednesday, 11 April 2018

CSS Grid Layout by example

In this blog entry, I am going to be using the CSS Grid Layout system available as standard, through the W3C.
There are many blog and vlogs about this, so why bother?
I would like to deliver a simple an consistent approach to all CSS Grid Layout challenges.
Before we make our first grid, I'm going to put a couple of things in place:

A CSS class called ".grid" thus : .grid { display: grid; grid-gap: 0.5em; } This enable us to create multiple grids in a row and differentiate between each element, thus: <div class="grid"></div>
A CSS class called ".grid-element" thus : .grid-element { background: #555; color: white; padding: 1em; margin: 0.5em 0; } This enable us to create multiple grid elements which can be clearly seen thus: <div class="grid-element">.grid-element</div>

Monday, 4 July 2011

SIMPLE LAYOUT #38

This example makes use of the Google Font API, spacing shades of grey. It's not a bad starting position.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Design Template 38</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento&v1' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald&v1' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.9em/1.5em 'Quattrocento', arial, serif;
width:60em;
margin:auto;
background:#EEEEEE;
color:#333333;
}
h1, nav
{
font-family:'Oswald', arial, serif;
}
section
{
width:37em;
margin:0 0 0 4em;
}
header, section, aside
{
float:left;
}
aside, footer
{
clear:both;
}
nav
{
float:right;
text-align:center;
margin:0 0 2em 0;
}
aside
{
width:19em;
}
img
{
margin:0 0 0 0;
}
p
{
text-align:justify;
margin-bottom:1em;
}
h1
{
color:#0693E2;
font-size:4em;
text-transform:lowercase;
margin:0.75em 0 0 0;
}
h1 .last-letter
{
color:#AAAAAA;
}
nav a
{
display:block;
float:left;
width:6em;
text-decoration:none;
padding:4.4em 0 0 0;
color:#333333;
}
nav a:hover
{
color:#FFFFFF;
background:#94D5F8;
}
footer
{
padding:1em 0 0 0;
}
</style>
</head>
<body>
<header><h1>Header <span class="last-letter">1</span></h1></header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<aside>
<img src="images/bigl.png" />
</aside>
<section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<footer><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>

Tuesday, 28 June 2011

SIMPLE LAYOUT #37

This example makes use of borders and spacing. It's not a bad starting position.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Design Template 37</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Quattrocento&v1' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.96em/1.5em Sans-serif;
width:60em;
margin:auto;
color:#333333;
}
header, nav, section, footer, aside
{
margin:0.5em;
border:0.5em solid #EEEEEE;
}
header, nav, section, footer
{
padding:0.5em;
}
header, section
{
width:36.5em;
}
header, section
{
float:left;
}
nav, aside
{
float:right;
}
section, footer
{
clear:both;
}
nav
{
text-align:center;
width:18em;
height:3em;
padding-top:2em;
background:#94D5F8 url(images/bluefade.png) repeat-x;
}
aside
{
width:19em;
}
img
{
margin:0 0 -0.35em 0;
}
p
{
text-align:justify;
margin-bottom:0.5em;
}
h1
{
color:#0693E2;
font:4em 'Quattrocento', arial, serif;
text-transform:lowercase;
}
h1 .last-letter
{
color:#AAAAAA;
}
nav a
{
margin:0.5em;
text-decoration:none;
color:#FFFFFF;
}
nav a:hover
{
text-decoration:underline;
}
</style>
</head>
<body>
<br />
<header><h1>Header <span class="last-letter">1</span></h1></header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<aside>
<img src="http://lorempixum.com/291/300/technics" />
</aside>
<footer><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>

Tuesday, 7 June 2011

SIMPLE LAYOUT #36

This latest layout makes use of a seamless, tiled paper texture. Hope you like it.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design template 36</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli:light,regular' rel='stylesheet' type='text/css'>
<style>
*
{
background:url(images/sedona.jpg);
}
body
{
margin:auto;
width:60em;
font:1em/1.5em 'Muli', arial, serif;;
color:#E5D6C3;
}
.floatLeft, aside, article, footer
{
margin:0.5em;
}
.floatLeft, aside
{
width:29em;
float:left;
}
section, footer
{
clear:both;
}
section#titleImages
{
float:right;
margin:-7.5em 0.5em 0 0;
}
article
{
width:19em;
float:left;
}
h1, h2, h3, h4
{
font-family:'Playfair Display', arial, serif;
color:white;
}
h1
{
font-size:7em;
margin:0.5em 0 0.25em 0.05em;

}
h2
{
font-size:2em;
margin:1.5em 0 0em 0.25em;
}
h3, h4
{
font-size:1.6em;
margin:0.5em 0 0.25em 0em;
}
p
{
text-align:justify;
}
</style>
</head>
<body>
<header>
<h1>Header 1</h1>
<h2>Strapline for you</h2>
</header>
<section id="titleImages">
<img src="http://lorempixum.com/150/150/food" />
<img src="http://lorempixum.com/150/150/technics" />
<img src="http://lorempixum.com/150/150/people" />
</section>

<section class="floatLeft">
<header>
<h3>Section header</h3>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<aside>
<header>
<h3>Aside header</h3>
</header>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>
<section>
<article>
<img src="http://lorempixum.com/300/300/food" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
<article>
<img src="http://lorempixum.com/300/300/technics" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
<article>
<img src="http://lorempixum.com/300/300/people" />
<figure>
<h4>Article header</h4>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</figure>
</article>
</section>
<footer>This is my footer which goes on quite a long time.</footer>
</body>
</html>

Friday, 3 June 2011

Simple layout #35

The template is very similar to a previous one. I've just changed the colours, fonts, etc. This does give an entirely different impression and can therefore act as an inspiration for doing other things with the design.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 35</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssgrids/grids-min.css" />
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<style>
body
{
margin:auto; /* center in viewport */
width: 960px;
background:#333333;
}
body, nav a
{
color:#999999;
}
nav
{
text-align:center;
}
nav a
{
float:right;
display:block;
text-decoration:none;
padding:0.25em 0 0.5em 0;
margin:0 0.2em 0 0;
background:#444444;
}
nav a:hover
{
background:orange;
color:white;
}
h1
{
font:6em/1em 'Anton', arial, serif;
color:orange;
}
h2
{
font:2em 'Anton', arial, serif;
color:#A66C00;
}
section p, footer p, img, hgroup
{
margin:0.5em 1em 1em 1em;
}
#glass
{
width:28em;
}
p, a
{
font:normal 0.9em/1.5em Sans-serif;
}
.j
{
text-align:justify;
}
</style>
</head>
<body class="yui3-g">
<section class="yui3-u-1-2"></section>
<nav class="yui3-u-1-2">
<a href="#" class="yui3-u-1-5">home</a>
<a href="#" class="yui3-u-1-5">services</a>
<a href="#" class="yui3-u-1-5">portfolio</a>
<a href="#" class="yui3-u-1-5">contact</a>
</nav>
<header class="yui3-u-1">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
</header>
<section id="glassHolder" class="yui3-u-1-2">
<img src="http://lorempixum.com/400/300/food" id="glass" />
</section>
<section class="yui3-u-1-2 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<section class="yui3-u-1-3 j">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</section>
<footer class="yui3-u-1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></footer>
</body>
</html>

Thursday, 2 June 2011

Simple layout #34

In this example I have applied a couple of corners to the background. I have then added text colours which would contrast with both foreground and background colours.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two corners</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Ultra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Maven+Pro' rel='stylesheet' type='text/css'>
<style>
body
{
color:#777777;
}
#topLeft, #bottomRight
{
position:absolute;
width:100%;
height:100%;
}
#topLeft
{
background:url(images/topLeftGrey.png) no-repeat left top;
z-index:-10;
}
#bottomRight
{
background:url(images/bottomRightGrey.png) no-repeat right bottom;
z-index:-9;
}
section#mainContent
{
padding:0.5em 0 0 2em;
}
h1
{
font:3em/2em 'Ultra', arial, serif;
color:orange;
}
p
{
text-align:justify;
font:1em/1.5em 'Maven Pro', arial, serif;
}
article
{
float:left;
width:58.5%;
}
aside
{
text-align:center;
}
aside img
{
width:14em;
}
</style>
</head>
<body>
<section id="topLeft"></section>
<section id="bottomRight"></section>
<section id="mainContent">
<h1>It's all in the detail</h1>
<article>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</article>
<aside>
<img src="images/blueGreen.png" />
</aside>
</section>
</body>
</html>

Monday, 16 May 2011

Another radial gradient background

Here is another example of using a radial gradient for a background, just because it looks nice.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Radial Gradient Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
height:100%;
}
html, body
{
font-family:Sans-serif;
}
#background
{
position:absolute;
z-index:-1;
background:#FF0000;
/* url(images/check.gif); */
width:100%;
height:100%;
}
.contentHolder
{
margin:0 auto;
width:800px;
padding:10px;
}
#topPart, #middlePart, #bottomPart
{
display:block;
color:#FFFFFF;
}
#topPart
{
height:200px;
}
#middlePart
{
height:400px;
}
#bottomPart
{
min-height:200px;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="gradient" />
<div id="topPart">
<div class="contentHolder">
<h1>Hello</h1>
</div>
</div>
<div id="middlePart">
<div class="contentHolder">
<h1>The stuff which really matters</h1>
</div>
</div>
<div id="bottomPart">
<div class="contentHolder">
<h1>Goodbye</h1>
</div>
</div>
</body>
</html>

More use of radial gradients

Another very simple example of how to use radial gradients. In this case, to add lighting to your headers and footers.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fading Background</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#topHalf
{
height:50%;
background:#D4E4DF;
}
#bottomHalf
{
height:50%;
clear:both;
background:#B6CAC3;
}
#topContent, #bottomContent
{
margin:0 auto;
width:800px;
min-height:100%;
}
#topContent
{
background:url(images/fadingbgtop.png) no-repeat center top;
}
#bottomContent
{
background:url(images/fadingbgbottom.png) no-repeat center bottom;
}
</style>
</head>
<body>
<div id="topHalf">
<div id="topContent">
<h1>This is a sticky header example</h1>
</div>
</div>
<div id="bottomHalf">
<div id="bottomContent">
<h1>This is a sticky footer example</h1>
</div>
</div>
</body>
</html>

Use of grey and blue

In this very simple layout, I have applied a radial gradient to a plain background, added an arty black and white photo, and used a nice font for the title in blue. It hints at effective design technique.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Resize Background Image</title>
<style type="text/css">
html, body
{
margin:0;
font-family:Sans-serif;
}

#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
background:#000000;
}

@font-face
{
font-family: 'zancleeYe/FSRegular';
src: url('fonts/zancle_eyefs-webfont.eot');
src: local('☺'), url('fonts/zancle_eyefs-webfont.woff') format('woff'), url('fonts/zancle_eyefs-webfont.ttf') format('truetype'), url('fonts/zancle_eyefs-webfont.svg#webfontDT7UNJnV') format('svg');
font-weight: normal;
font-style: normal;
}

#mainContent
{
margin:0 auto;
width:920px;
padding:10px;
}
h1, #footer
{
font-family: 'zancleeYe/FSRegular';
color:#B0E0E6;
}
h1
{
font-size:4em;
}
p
{
text-align:justify;
color:#FFFFFF;
font-size:0.8em;
}

#leftHand, #rightHand
{
position:relative;
float:left;
margin-right:10px;
padding:10px;
border:1px solid #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(scripts/PIE.htc);
}
#leftHand
{
width:360px;
min-height:374px;
}
#rightHand
{
background:url(images/japan.jpg) no-repeat;
width:480px;
height:374px;
}
#footer
{
clear:left;
padding-top:10px;
}
</style>

</head>
<body>
<img id="background" src="images/chalkBack.png" alt="chalkBack" />
<br /><br />
<div id="mainContent">
<h1>hello world!</h1>
<div id="leftHand">
<p>Lorem ipsum scripta apeirian perfecto cum ad. Patrioque cotidieque ex nam. Feugiat fastidii vis ne, te instructior voluptatibus mei, pro esse temporibus et. Cu pro possit tractatos, ea dictas eirmod erroribus ius, no nec putant facilisi euripidis. Dolore fierent vis in, pri cu prompta inciderint, vix maiorum ponderum recusabo et.</p>
<p>Ut est augue deseruisse, vix cu eripuit dignissim, duo quando aperiam lobortis ut. Intellegam delicatissimi in eos, ius labore placerat maluisset an. Ad corrumpit ullamcorper per, munere gloriatur mei an. Vix ei nonumy ubique fabulas, eros salutatus vis cu, eum regione voluptaria dissentias at.</p>
<p>Inani quaeque nam ne, cu usu simul maiestatis. At nostro posidonium usu. Puto scaevola philosophia ius ex. Sed eu dicam vulputate, epicuri nominavi officiis mei at. No doctus labores pro.</p>
<p>Eu est tale quot. An munere definitionem pri. Ei nonummy blandit petentium est, no mei sale dolores appetere. Error iriure cu eam, ne soleat bonorum dolores sea. Eos id oratio vulputate reformidans.</p>
</div>
<div id="rightHand">
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

Mobile friendly liquid layout #7

This example combines a tiled background texture, with a radial gradient over the top. This provides the effect of lighting.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Mobile friendly liquid layout #7</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<style>
body
{
font-family:Sans-serif;
width:100%;
background:url(images/patch.gif);
}
body, a, a:active, a:hover, a:link, a:visited
{
color:#FFFFFF;
}
header, #text, footer, nav a
{
padding:1em;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
float:left;
width:33%;
min-width:26em;
}
#text
{
overflow:hidden;
line-height:1.5em;
}
footer
{
clear:left;
}
h1
{
font-weight:900;
font-size:4em;
text-transform:uppercase;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
</style>
</head>
<body>
<img id="background" src="images/radialGradientBackground.png" alt="windFarm" />
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Headline 1</h1>
<h1>Headline 2</h1>
<h2>Sub-Header</h2>
</header>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="http://www.effectivewebdesigns.co.uk/demo/mobile-friendly-liquid-layout-5.html#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
<footer>Footer</footer>
</body>
</html>

Thursday, 17 March 2011

Mobile friendly liquid layout #6

Another take on Mobile friendly liquid layout #5.

See demo.

<!DOCTYPE html>

<head>

<title>Mobile friendly liquid layout #5</title>

<!--[if IE]>

<![endif]-->

body

{

font-family:Sans-serif;

background:#FFFFFF;

width:100%;

color:#525252;

}

header, #text, footer, #tasters

{

padding:1em;

}

header, footer

{

height:8em;

}

header

{

float:right;

width:33%;

min-width:26em;

}

#text

{

overflow:hidden;

line-height:1.5em;

}

footer

{

clear:left;

}

h1, h2, h3

{

font-weight:900;

text-transform:uppercase;

color:#FFBC40;

}

{

font-size:4em;

}

{

font-size:2em;

}

#tasters article

{

display:block;

float:left;

width:20%;

}

</style>

</head>

<body>

<h1>Headline 1</h1>

<h1>Headline 2</h1>

<h2>Sub-Header</h2>

</header>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>

<li>Aliquam tincidunt mauris eu risus.</li>

</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

</article>

<article><h3>services</h3><p>Introductory text about services</p><p><a href="#">more...</a></p></article>

<article><h3>portfolio</h3><p>Introductory text about portfolio</p><p><a href="#">more...</a></p></article>

<article><h3>contact</h3><p>Introductory text about contact</p><p><a href="#">more...</a></p></article>

</section>

<footer>Footer</footer>

</body>

</html>

Tuesday, 15 March 2011

Mobile friendly liquid layout #5

Haven't done one of these in a while so here goes.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mobile friendly liquid layout #5</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#000000;
width:100%;
color:#FFFFFF;
}
header, #text, footer, nav a
{
padding:1em;
}
nav
{
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
float:left;
width:33%;
min-width:26em;
}
#text
{
overflow:hidden;
line-height:1.5em;
}
footer
{
clear:left;
}
h1
{
font-weight:900;
font-size:4em;
text-transform:uppercase;
}
h1:nth-child(2), h3
{
color:#FFBC40;
}
</style>
</head>
<body>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<header>
<h1>Headline 1</h1>
<h1>Headline 2</h1>
<h2>Sub-Header</h2>
</header>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
<footer>Footer</footer>
</body>
</html>

Tuesday, 15 February 2011

Mobile friendly liquid layout #4

Needs no introduction.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 24</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<style type="text/css">
body
{
font-family:Sans-serif;
background:#F2F2F2;
}
body, #picture img
{
width:100%;
}
header, #picture, #text, footer, nav a
{
padding:1em;
}
nav
{
background:#000000;
height:3em;
}
nav a
{
display:block;
width:3em;
text-decoration:none;
float:right;
text-align:center;
color:#FFFFFF;
}
nav a:hover
{
background:#0000FF;
}
header, footer
{
height:8em;
}
header
{
clear:right;
}
#content
{
min-height:8em;

}
#content, #picture, #text
{
background:#FFFFFF;
}
#picture
{
float:left;
width:33%;
min-height:8em;
text-align:center;
}
#text
{
overflow:hidden;
}
footer
{
clear:left;
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<a href="#">home</a>
<a href="#">services</a>
<a href="#">portfolio</a>
<a href="#">contact</a>
</nav>
<section id="content">
<article id="picture">
<img src="http://farm3.static.flickr.com/2079/2215968391_ebc1b2941b.jpg" alt="Pretty picture" />
</article>
<aside id="text">
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
</aside>
</section>
<footer>Footer</footer>
</body>
</html>