Back our Angular 4 Book on Kickstarter.

Can I create an HTML Background with an inline Image?

I'm working on a site for some clients, and one of their complaints was that the left nav bar was not extending the full height of the page. The nav div was set to expand to its content, which meant it stopped when it ran out of content. On some pages it looked fine, on others the nav bar ended too early. As a programmer, I don't often deal with design issues like this, so I pulled in the project's designer and we put our heads together to find a solution.

First, the problem was very generically like this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin : 0px;
}
.nav{
background-color : #0000FF;
width : 200px;
height : 50%;
color : #ffffff;
}
.nav a {
color : #ffffff;
}
</style>
</head>
<body>
<div class="nav">
Some info in the nav bar<br/>
<A href="">Some Link</A>
</div>
</body>
</html>

Our code was much more complicated, using Flexbox for complicated layouts, but this is simple enough example to demonstrate the problem. We were not able to use a simple height:100% in CSS because some parent containers used Flexbox styling and did not stretch the full height of the page.

My designer friend recommended tiling a background image. We can change the CSS for the body tag to something like this:


body {
margin : 0px;
background: top left url(blue1x200.png) repeat-y;
}

The blue1x200.png is an image with just the color blue in it which has a height of 1 pixel and a width of 200 pixels. The repeat-y clarification tells the browser to repeat this image on the y axis, meaning up and down.

This solved our issue, so whatever was happening to the page nav or the page content it would not prevent the left 200 pixels on the page from showing up the same color as the background.

Using the url attribute to the background CSS will force the page to spawn another HTTP request to load the image. My designer had a trick for that too. He converted the image to a Base64 string representation and replaced the URL:


background: top left url('data:image/png;base64,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') repeat-y;

The encoded image looks like a lot of gobblygook, but the browser treats it as an image without having to make a new request to load something from the server. Check out the code.

You can use a site like this to convert your image toBase64.

If you've been doing Web Development for a long time, this sort of technique is probably not new to you, however I had never seen someone encode the images and include it in-line before. It's a cool technique.

How do I right align a div inside a div?

I was working with a client to create a specific layout on the page and I wanted to align a div inside another div. But, I couldn't use text-align because I didn't want to right align the text elements in the inner div. How do you do it?

First, create the outer div and inner div:


<div class="outerDiv">
<div class="innerDiv">
This is Text in the inner div<br/>
Some other Text
</div>
</div>

A simple div is inside another div, and the inner div has some text. The outer div's only purpose is a wrapper for positioning purposes. Both the outerDiv and innerDiv have CSS Styles attached.

This is the CSS for the outerDiv:


.outerDiv {
display: flex;
float : right;
}

It enables the outerDiv to use flexbox styling and floats the content to the right. Flexbox is an advanced way to position CSS elements.

The innerDiv doesn't need any special CSS styling to make this work, but let's give it a background color:


.innerDiv{
background: #e6e6e6;
}

Play with the code here.

The implementation is really simple once you figure it out; but sometimes getting there is a stumble.

Aligning Left Text, Center Text, and Right Text with CSS

I was building out an application for a client who wanted pagination on some tabled data. I needed to create a pagination bar that included a previous button on the left, a next button on the right, and a message in the center. In the old days I could implement something like this using tables, however I wanted to see if there was a CSS way to get the same layout. I found two separate, but great, implementations of this. This blog post will explain both of them.

Aligning Text with Float

My first attempt to implement this was to use the CSS float property. The float means that text moves out of its normal place in the container, usually moving to the left or right of the container. I could float some text to the right, some text to the left and keep some in the middle. Here is the CSS Style for left aligned text:


.leftAligned {
float : left;
}

This puts left aligned text to the left side of the div to contain our pagination header. Right aligned text is similar:


.rightAligned{
float : right;
text-align : right;
}

The float argument is specified as right so the rightAligned block will move to the right of the container. I also specified a text-align property to move the text all the way over to the right within the rightAligned container.

Finally, we need centered text:


.centeredText {
margin: 0 auto;
text-align : center;
}

This margin property is used to make sure that the centeredText can align right up against the right and left segments.

Use these in HTML:


<div>
<div class="leftAligned">Previous/div>

<div class="rightAligned">Next</div>
<div class="centeredText">Displaying 10-20 of 50</div>
</div>

Reviewing the code, you need to put the left and right aligned divs first, and the centered text last. This bugged a bit of my OCD, but worked almost perfectly.

Play with the code here. The Plunker sample uses some Angular code to simulate the forward and next navigation for sample purposes.

As the user was paginating through the data the previous and next links might disappear. When that happened the centered text would change spots. This wouldn't do. We could fix that by adding explicit widths to each div, which worked for the sample application. However my real world app was having problems with that, I believe due to other CSS conflicts. So, I went searching for a second way to accomplish this layout.

Aligning Text with CSS Tables

My second approach to was to use CSS Tables. You can use the display property in CSS to specify table, or table row or table cell.

First, create a table:


.table {
display:table;
width : 100%;
}

The table CSS style specifies the display type as table and width of 100%. This parallels the HTML table tag.

Next, create a table row:


.tr {
display:table-row;
width : 100%;
}

The table row specifies the display type as table-row. This parallels the HTML tr tag.

Now, the left-aligned text:


.leftAligned {
display:table-cell;
width : 25%;
}

The left aligned text specifies table-cell as the display type. The width is given as 25%. Next, the right aligned cell:


.rightAligned {
display:table-cell;
text-align : right;
width : 25%;
}

The right aligned table cell specifies table-cell as the display. It also right aligns the text with the text-align property and specifies the cell width as 25%.

Finally, create the centered text:


.centeredText {
display:table-cell;
text-align : center;
width : 50%;
}

The centered text also has a table-cell type. It also specifies the text-align to center the text; and the width is 50%. The three table cells have a combined width of 100%.

Finally, we need to create the table in the HTML. We'll use divs as the controllers. First, create the table div:


<div class="table">
</div>

Inside of that, put a table row:


<div class="tr">
</div>

Now put the main content inside the table row:

Previous
Displaying 11-20 of 50
Next

Play with the Code Here. As with the previous sample, this uses some AngularJS magic to make the forward and next buttons work.

Final Thoughts

I was surprised at how hard it was to find resources to explain how to do this, so hopefully this helps someone. Both approaches work well, depending what you're doing. The limitation of the second approach--which is specifying table widths--is that if you have text that is expanding or contracting to unknown widths you may have odd layouts as the text grows beyond their containers. But, I'm sure that can be worked around if you run into the problem.

Sign up for DotComIt's Monthly Technical Newsletter

Make a two column layout in Bootstrap

Multi-column layouts are a common requirement when building building HTML web sites or applications. In the old days, we would just use an HTML table and be done with it. But, these days using CSS for layout is the preferred approach. Using HTML tables for layout is considered a bad idea. Bootstrap provides an easy way to create a two column layout.

Create the two column layout: The Old Way

If I were using HTML tables to create a two column layout, I'd do something like this:


<table style="width:100%">
<tr>
<td>Label</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Some Other Label</td>
<td><input type="text" placeaholder="second text" /></td>
</tr>
</table>

This is an HTML table with two rows, and two cells in each row. This is simple, but the HTML can get complex if you are nesting tables to get specific layouts. When I started building HTML sites; this was the defacto standard for complex layouts.

Play with this sample!

Nowdays, CSS is considered superior for layout purposes than using lots of nested tables, and Bootstrap is a great framework to help you do that.

Import Bootstrap

The first step is to import the Bootstrap library into your HTML page. Bootstrap is primarily a CSS library, but also has a JavaScript portion. For the purposes of this article, we just need the CSS:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

Now all of the Bootstrap CSS is available to our application.

The Bootstrap Grid System

Bootstrap includes styles for a grid system consisting of rows and up to 12 columns. These are the associated styles:

  • row
  • Col-md-1
  • Col-md-2
  • Col-md-3
  • Col-md-4
  • Col-md-5
  • Col-md-6
  • Col-md-7
  • Col-md-8
  • Col-md-9
  • Col-md-10
  • Col-md-11
  • Col-md-12

The first style, row, is used to dictate a row in the grid. Inside the row; you would use some combination of the column styles to dictate the length of your cell; across a 12 column row. The col-md-1 style would span across a single column. The col-md-6 style would span across 6 columns. The col-md-12 style would spread across 12 columns, or a whole row. When putting together layouts with this approach, I like to make sure the total number of cells matches 12 for each row.

Create the two column layout: With Bootstrap

Bootstrap styles can be used to create a similar layout to the one created earlier, with a table. First, create the Bootstrap row:


<div id="row">
</div>

Inside the row, we can create two separate columns. For the purposes of this article, both will use col-md-6, meaning each column will span 6 cells, totaling 12 cells:


<div class="col-md-6">
Label
</div>
<div class="col-md-6">
<input type="text" />
</div>

The reason for making sure that the total number of columns used is equal to 12 is so that the next row will be placed under the first row; instead of next to it.

We can use the same approach for the second row:


<div id="row">
<div class="col-md-6">
Some Other Label
</div>
<div class="col-md-6">
<input type="text" placeaholder="second text" />
</div>
</div>

Play with the code here

Final Thoughts

The Bootstrap Grid system can be very powerful, especially when dealing with nested layout elements.

How do I display hidden text in my table on rollover using CSS?

I was building out an app for a client and they had some wireframes that showed a list of users. The wireframes had a bunch of user data; but the client wanted some of the data hidden until the user rolled over the table row. How do I do that? CSS is the answer.

First, create a CSS class:


#tableWithHiddenData{

}

Now, create a style for hidden data:


#tableWithHiddenData .rollOverText{
display:none;
}

The display CSS element is used to control layout. By giving it the value of none; the information will, essentially, be hidden.

Next, we'll need some CSS to display the hidden text on hover:


#tableWithHiddenData tr:hover .rollOverText{
display:block;
}

These are the three CSS elements that are needed, now lets create the table. Since, for my use case, I was displaying user data, our table will contain two columns. One for a user's name and one for the username. The a will always be displayed and a username that is only displayed on rollover:


<table id="tableWithHiddenData">
<tr>
<th>Name</th>
<th>UserName</th>
</tr>
<tr>
<td>Jeffry Houser</td>
<td><div class="rollOverText">jhouser</div></td>
</tr>
<tr>
<td>Someone Else</td>
<td><div class="rollOverText">someUser41</div></td>
</tr>
<tr>
<td>A Third User</td>
<td><div class="rollOverText">LuckyThird</div></td>
</tr>
</table>

Try this out on Plunkr.

Sign up for DotComIt's Monthly Technical Newsletter

All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.