nrkn > Image Slicing for fluid CSS designs > Adding and styling dummy content

Home
Image Slicing
Navigation Lists
Archive

Image Slicing for fluid CSS designs

Adding and styling dummy content

When we made the basic layout, the only content we had was a single paragraph of text consisting of the words "A paragraph of text".

The first piece of content we are going to deal with is the "nrkn" logo. At the moment, this is part of the background image for the top left slice. Why is this a problem? Take a look at our first illustration. It shows the current basic layout with CSS turned off. Although the nrkn logo appears in the graphical CSS version, it is missing from the CSS-less version. Why does this matter? It means that a piece of information on the page, in this case the name of my website, is missing for visitors who don't have CSS. One important visitor of this kind who you may be familiar with is Google!

So what do we do? We cut the nrkn logo out of the background image and save it as its own image, and we also save our top left image slice without the logo:

The new files are nrkn.png and mainTL.png.

Now we insert our new nrkn.png image into the HTML, above everything else:

            
  <body>
    <h1><img src="nrkn.png" alt="nrkn"></h1>
    <div class="mainT"><div class="mainTR"><div class="mainTL"></div></div></div>

We have marked the image up with the h1 element as it is a header, and it is the most important header on the page. We have given the image some alt text so that visitors who don't see images know what the text in the image says. Again, this includes Google, as well as the blind, who may be using a screen reader or other assistive technology to view the page.

Now we need to add some CSS so that the image is placed correctly over our top left slice:

            
h1 {
  position: absolute;
  top: 75px;
  left: 75px;
}

Now this is how our page looks so far to visitors without CSS:

This is how it looks to visitors with neither CSS nor images:

Now, let's flesh the page out with some actual content. We will add a level 2 header, a divider line, a level 3 header, a paragraph of text, and a numbered list, so that the resulting page looks like this:

To do this, we will replace this:

            
<div id="content">
  <p>
    A paragraph of text.
  </p>  
</div>

With this:

            
<div id="content">
  <h2>
    A really long title, this is a level 2 header as it is the 2nd most 
    important header on the page
  </h2>
  <div class="hr"><div><div><hr></div></div></div>
  <h3>
    This is our level 3 header, as it is the 3rd most important header on
    the page
  </h3>
  <p>
    If we had more than one section on this page, each of them would get
    a level 3 header, as each section is of equal importance.  If we had
    some sub-sections inside these sections that needed a header, they 
    would get a level 4 header, and so on and so forth.
  </p>
  <ol>
    <li><span>This is the first item in the list</span></li>
    <li><span>This is the second item in the list</span></li>
    <li><span>This is the third item in the list</span></li>
  </ol>
</div>

There's a lot that needs explaining here! The h2 is very long, the reason for this will become apparent later on. Then there is this frightfully complex looking line here:

            
<div class="hr"><div><div><hr></div></div></div>

This looks complex, but it's not really. You've already learnt the technique that this is using. This lets us make a divider that fades away at the ends and also fills to fit the available horizontal space:

These dividers are made up of three parts, this time scaled to 200% so that you can see them more clearly, and color coded so you can see how each part relates to the HTML above:

Here is the CSS we use:

            
.hr hr {
  display: none;
}
            
.hr {
  background: url( hrC.png );
  margin: 1em 0;
}

.hr div {
  background: url( hrR.png ) no-repeat right;
}

.hr div div {
  background: url( hrL.png ) no-repeat left;
  height: 14px;
}

This is the same technique that we learnt when we marked up the slices for the main overall layout; nesting some div elements inside each other and giving each one a different background. One of the main differences this time is that instead of explicity giving each of these div elements a class such as .hrC, .hrR and .hrL, we use CSS specificity to say ".hr gets this styling", "the div inside .hr gets this styling", and "the div within the div inside .hr gets this styling".

This reduces HTML that would have looked like this:

            
<div class="hrC"><div class="hrR"><div class="hrL"><hr></div></div></div>

Down to this:

            
<div class="hr"><div><div><hr></div></div></div>

You might also be wondering why we have an hr element in the middle of the div elements, but we set it to display: none; in the CSS. This is so that we still have a divider when there is no CSS, much like how we made allowances for browsers to display our nrkn logo earlier, but so that when CSS is available we don't double up on the divider by first making one ourselves with CSS backgrounds and then also displaying the standard HTML divider hr over the top of our own divider.

After all that, you deserve a coffee! Once you've got it, I'll briefly recap where we were up to. We're adding some content to our page, and I've covered our level 2 header and our divider line so far. If you scroll back to the new HTML we've added for our new content, you'll see that we then have a level 3 header, then a paragraph of text, and then a numbered list (the ol element, an "Ordered List"). You may be asking why the content of each li is also wrapped in a span element. The reason for this is that we want to set the numbers to be a different color to the text in the list, like so:

The number is a different color to this text

So now we'll add the CSS that does this, as well as CSS to style the headers, the paragraph, and the list:

            
ol {
  color: #5ac90f;
  font-weight: bold;
  margin-left: 1.5em;
}

ol span {
  color: #b95207;
  font-weight: normal;
}

li {
  margin-top: 0.5em;
} 
            
h1, h2, h3, h4, h5, h6 {
  color: #5ac90f;
  font-family: "Arial Rounded MT Bold", sans-serif;
  font-weight: normal;
  margin-bottom: 1em;
}

h2 {
  text-align: center;
}

p {
  margin: 1em 0;
}

Then, we'll update an existing CSS rule. The new CSS is shown in red, the existing CSS in black:

            
#content {
  color: #b95207;
  margin-left: 70px;
  margin-right: 70px;
  padding-left: 1em;
  padding-right: 1em;
}

Our HTML and CSS is shown below, or you can view the page so far, or you can download a zip file containing all of the files that make up the basic layout with dummy content added (ZIP, 54KB).

            
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Basic Fluid CSS Layout with Dummy Content</title>
    <script type="text/javascript"></script>
    <style type="text/css">
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 100%;
}
    
.mainT {
  background: url( mainT.png );
}

.mainTR {
  background: url( mainTR.png ) no-repeat right;
}

.mainTL {
  background: url( mainTL.png ) no-repeat left;
  height: 220px;
}

.mainC {
  background: url( mainC.png );
}

.mainR {
  background: url( mainR.png ) repeat-y right;
}

.mainL {
  background: url( mainL.png ) repeat-y left;
}

#content {
  color: #b95207;
  margin-left: 70px;
  margin-right: 70px;
  padding-left: 1em;
  padding-right: 1em;
}
    
.mainB {
  background: url( mainB.png );
}

.mainBR {
  background: url( mainBR.png ) no-repeat right;
}

.mainBL {
  background: url( mainBL.png ) no-repeat left;
  height: 220px;
}

h1 {
  position: absolute;
  top: 75px;
  left: 75px;
}

.hr hr {
  display: none;
}

.hr {
  background: url( hrC.png );
  margin: 1em 0;
}

.hr div {
  background: url( hrR.png ) no-repeat right;
}

.hr div div {
  background: url( hrL.png ) no-repeat left;
  height: 14px;
}

ol {
  color: #5ac90f;
  font-weight: bold;
  margin-left: 1.5em;
}

ol span {
  color: #b95207;
  font-weight: normal;
}

li {
  margin-top: 0.5em;
} 
            
h1, h2, h3, h4, h5, h6 {
  color: #5ac90f;
  font-family: "Arial Rounded MT Bold", sans-serif;
  font-weight: normal;
  margin-bottom: 1em;
}

h2 {
  text-align: center;
}

p {
  margin: 1em 0;
}
    </style>
  </head>
  <body>
    <h1><img src="nrkn.png" alt="nrkn"></h1>
    <div class="mainT"><div class="mainTR"><div class="mainTL"></div></div></div>
    <div class="mainC"><div class="mainR"><div class="mainL">
      <div id="content">
        <h2>
          A really long title, this is a level 2 header as it is the 2nd most 
          important header on the page
        </h2>
        <div class="hr"><div><div><hr></div></div></div>
        <h3>
          This is our level 3 header, as it is the 3rd most important header on
          the page
        </h3>
        <p>
          If we had more than one section on this page, each of them would get
          a level 3 header, as each section is of equal importance.  If we had
          some sub-sections inside these sections that needed a header, they 
          would get a level 4 header, and so on and so forth.
        </p>
        <ol>
          <li><span>This is the first item in the list</span></li>
          <li><span>This is the second item in the list</span></li>
          <li><span>This is the third item in the list</span></li>
        </ol>
      </div>  
    </div></div></div>
    <div class="mainB"><div class="mainBR"><div class="mainBL"></div></div></div>
  </body>
</html>