Creating a top button

by: Caleb Jonasson - December 30th, 2009   Filed under: CSS, Web Development Add Comment

Introduction

Buttons that stick to the sides of the browser are becoming more and more popular. Most of it started with a companies feedback button which turned into people using them for their own convenience. In this article I am going to go over the CSS code for making it stick to the side.

The first thing that is required is an anchor. We can add this to the top of the page and it will be located just below the first div (or above your header) You can really locate this where ever you would like your readers eyes to be. Some people prefer the title of the first blog post.)

Once the code has been placed it should look like this:

1
2
3

<body>
<a name="top" id="top"></a>
<div class="header">

Anchors

Now that we have placed our anchor there is something you need to know if unfamiliar. In order to link to an anchor all you need to do is add a ‘name’ and an ‘id.’ When linking to an anchor you will be required to have an ‘href’ like so:

1

<a href="#top">Top</a>

Notice how the ‘href’ is simple a pound sign followed by the name of the anchor. If you would like a contact button the you can do something similar to the following anchor:

1

<h3><a href="http://codewithdesign.com/contact.php#contact">Contact</a>

Depending on where the anchor for contact is the user can be linked to a page and moved directly to the contact form. This just allows you to skip information and the only reason this is used as an example is because I wanted you to know exactly how you can use anchors across page.

Styling the page

Now that we have our two anchors we will get into the portion of styling that will make this button stick to the side. The first thing we are going to be doing is enclosing the link in a div. The results of this will look as such:

1

<div class="sidelinks-container"><h3><a href="#top">Top</a></h3></div>

The placement of this code is completely irrelevant since we will be adding a position property to it. I threw it directly under my anchor to keep it all together if changes are eventually needed.

Now we need to begin the actual styling of the div. This will require two separate styling, one for the div itself and the other will be for the ‘<h3>’ tag.

The first thing that we will be adding to our style will be the positioning and size of the box. As noted earlier the position and how the container acts with the sides of the browser is key. Because it is important we will start by adding the following lines of code to the div.

1
2
3
4
5
6
7
8

.sidelinks-container {
position:fixed;
left:0px;
width:50px;
height:100px;
bottom:40px;
overflow:hidden;
}

As we go through the code you will notice that everything is standard. The position is fixed so even though the div is outside of the container it is still properly displayed on the screen. The left property forces the box to the left side of the screen. The width and height are required properties. If the width was not set it would expand across the screen and overlap the content. The height it required so the box does not collapse on the contents that are within. The final important property is the ‘bottom’ style, this will force the box to position itself a certain distance from the bottom of the browser. In our case it will be ’40px’ away.

The next important piece of code will change the h3 properties. When it comes down to it you can actually just add class to the link or throw it in a span but I chose to stick with ‘<h3>’ because I had originally created it with the default h3 font style.

The code for the next chunk of CSS will look as follows:

1
2
3
4
5
6
7

.sidelinks-container h3{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
padding:0px;
font:32px Verdana, Arial, Helvetica, sans-serif;
line-height:50px;
}

Live demo

By going through the code we will notice that everything is font styling with an added little text rotation that works with IE. Now that we have most of the CSS and the HTML we can throw it all together and see how well it works out.

Below there will be a copy of the html used in this example along with the CSS. By clicking the image you can see a demo version of this page in action. Simply scroll down and click the fixed div on the left.

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.sidelinks-container h3{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
padding:0px;
font:32px Verdana, Arial, Helvetica, sans-serif;
line-height:50px;
}
.sidelinks-container {
position:fixed;
left:0px;
width:50px;
height:100px;
padding:0px;
bottom:40px;
background: #444;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
overflow:hidden;
 
}

The HTML

1
2
3

<body>
<a name="top" id="top"></a>
<div><h3><a href="#top">Top</a></h3></div>

That is all, you are done.

Tags: , , , ,

Creating a fixed header and Footer

by: Caleb Jonasson - November 20th, 2009   Filed under: CSS, Web Development 1 Comment

If you are looking for a fixed header of fixed footer you have come to the right place. In this tutorial I will be going over the basic page setup for sections of content, the header bar, footer bar, CSS and HTML.

The CSS code for a header is quite simple depending on how you would like it to interact with the rest of the page.

#header {
top:0px;
right:20px;
left:20px;
position:fixed;
background: #eee;
border:1px solid #ccc;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0px;
padding: opx;
font:18px “Plantagenet Cherokee”;
letter-spacing:2px;
}

The above CSS contains the header div and the H1 tag. There are four very important things that are required when having a fixed header. First: It must have the position set to fixed. The other three are all about positioning and linking it to the top and sides. With the above code we set the sides to link 20px from the browser and the top to link directly.

Another important part of the CSS is having the page contents forced below what the header is covering. This will allow us to see div that is underneath. That chunk of CSS looks like this.

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-top:40px;
}

The HTML looks something like this.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Code With Design Fixed Header</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”header”>
<h1>Header</h1>
<!– end #header –></div>
<div id=”container”>
<div id=”mainContent”>
<h1> Main Content </h1>
</div>
<div id=”footer”>
<p>Footer</p>
</div>
</div>
</body>
</html>

Generally the header is kept withing the container to keep it aligned with the rest of the page however we wanted it to break out of the rest of the page and thus we moved it up, out and away.

The rest of this article will cover the footer which is very similar except for a few things. The footers CSS is going to be fixed to the bottom and not the top which is unlike the header. We will also need to pull it out of the HTML so it can fill up and be safe across browsers.

So first we will take note of the css which goes something like this:

#footer {
padding: 0 10px;
background:#EEE;
bottom:0px;
right:0px;
left:0px;
position:fixed;
}
#footer p {
margin: 0;
padding: 10px 0;
}

Once again we bring in the four important properties; bottom, left, right, and position. You will also need to change the body tag in the CSS so the footer does not overlap the content you would like the readers to see. This CSS is going to look like this:

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-bottom:50px;
}

And now finally we will look at the HTML to see the footer break out of the container similar to what the header did.

<!– end #container –></div>
<div id=”footer”>
<p>Created by Caleb Jonasson</p>
</div>

Caleb Jonasson

Tags: , , , , ,