Code With Design » CSS

Remove images and increase load times with CSS3

Caleb Jonasson — Wed, 05 May 2010 16:30:49 +0000

Recently when working on a clients site I found that there were a lot of images being used when a quick little CSS fix could have done the trick. The basic outline of the site involved a few transparencies and a lot of drop shadows. The drop shadows were placed on the container/wrap and the text had drop shadows that had been all done in Photoshop. (Some of the drop shadows were not consistent.)

After looking at the site I told the client that within three minutes I could remove all of the images being for text, drop shadows and opacity allowing his site to load faster.

The answer was what I had expected and the following code was quickly being thrown into the site.

The Code

For the drop shadows on divs:

.container{
     width:1080px;
     margin:0 auto;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     -moz-box-shadow: 0 2px 5px #666;
     -webkit-box-shadow: 0 2px 5px #666;
}

For the drop shadows on text:

h3{
	font-family: Times;
	letter-spacing: 1px;
	text-shadow: 2px 2px 2px #000;
}

For the opacity:

.sidebar ul{
	list-style-type:none;
	opacity: 0.9;
	width: 180px;
}

Get, install, and use light box

Caleb Jonasson — Sat, 03 Apr 2010 02:38:17 +0000

First and foremost, if you do not know what light box is, then I can only assume that you have been living in the dark ages. A lot of sites incorporate this technique to view full sized photos inside of the browser.

Secondly I am going to have to add that this article is about implementing light box. Not creating a light box like plug in.

The first thing that is required for us is to get light box. Where do you get light box. Well the Internet probably has some light box. lets go there.

This is the site that has what we need. If you would like to click that link, upload to the server you will be working on we can get started.

When working with lightbox you will need to include four lines of code into your header. Once added, your header will look like this.

The next part to using this script requires us to link to an image using it. This can be done by using a rel path.

1	First Image

Note: There are some things that can go wrong when working with lightbox. The first thing that you need to check is that everything is being properly linked to. There are files from the css that can cause lightbox to not function properly.

Also, if you do not see an image or lightbox appear then you may have to check the JavaScript within the body tag. You may have to modify the on load.

No related posts.

Creating a top button

Caleb Jonasson — Wed, 30 Dec 2009 08:30:23 +0000

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

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:

Top

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:

Contact

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:

Top

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 ‘

’ 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.

.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 ‘

’ because I had originally created it with the default h3 font style.

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

.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

.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

Top

That is all, you are done.

Modifying next and previous posts

Caleb Jonasson — Sun, 27 Dec 2009 09:01:25 +0000

For most standard WordPress themes you are stuck with a boring text on the bottom of the screen with a float left and right property. This simple float looks boring however it is a simple solution for going from page to page.

The below image is what my personal blog used to have for a page navigation. This was to simple for what I wanted which made me want to change it to fit the rest of the page style. The solution was a work through of the CSS requiring a little CSS3 to make the borders rounded.

The final result looks as follows:

The first thing we are going to need to do is open up the style.css and the index.php inside of the theme you are intending to modify.

WordPress Root -> wp-content -> themes -> theme_name

Once you have opened up the two files, refer to the index.php and scroll down past the post loops to get to your code that checks for posts and allows you to go forward and backwards in post history. The code should look as follows:

As you can see there is a float class above which is in our css file as:

.float-right {

float:right;

}

We could change the float class to have a background and a border but that would change everything that uses the float class. In order to change this we are going to have to create new classes and change the index code. For this I will be changing the index code to “post_new_entries” and “post_old_entries.”

The “index.php” will now look something like this:

The final thing to do in this modification is to create the classes inside of the “style.css” file. The first thing that is required for the modification is for us to make them float to their designated sides just like the previous floats from before.

.post_old_entries {
float:left;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
}

The rest of the code is fully customizable and up to you. There is always the option of adding hovers and link colors as well as paddings, backgrounds and borders. The code that is currently used for code with design is as follows:

.post_old_entries {
float:left;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
margin-left:-31px;
padding:5px 15px;
background: #f2f2f2;
border: 1px solid #ddd;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
.post_old_entries a{
color:#666666;
}
.post_old_entries a:hover {
color:#333333;
}
.post_new_entries {
float:right;
font:bold 20px/20px Georgia, “Times New Roman”, Times, serif;
margin-right:-31px;
padding:5px 15px;
background: #f2f2f2;
border: 1px solid #ddd;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
}
.post_new_entries a {
color:#666666;
}
.post_new_entries a:hover {
color:#333333;
}

Best of luck with your WordPress modifications.

Easyworks a new PHP front end framework

Caleb Jonasson — Tue, 22 Dec 2009 17:01:23 +0000

Creating a framework was on the list of things to do and so when getting off a 7.5 hour shift I started working on the base of it. A few hours later and 7 episodes of Boston Legal later I found myself uploading it and running out the door to work another 7.5 hours. The frame work is very basic, it does link to site information, class files, function but it is not a true framework yet.
The framework is still in its V1.0 stage but it does have potential to be something. The idea behind this framework is simple site construction through a header navigation. It is supporting a validating login and register system but it does not yet have the back end coding to make it all happen. To get a copy of it for yourself you can download it here.

Creating a fixed header and Footer

Caleb Jonasson — Fri, 20 Nov 2009 21:39:30 +0000

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.

Code With Design Fixed Header

Header

Main Content

Footer

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.

Created by Caleb Jonasson

Caleb Jonasson

Going Through Website Creation Part 1: Layout

Caleb Jonasson — Fri, 13 Nov 2009 19:25:59 +0000

Starting Up An Old Project

A few months ago I posted an old project on the old blog. The project was entitled “Browser Friendly Feed Reader.” This project consisted of three simple pages. The first was the submitting form where users could enter their rss or xml feed. The contents of this feed could be output in the web browser to displaying it inside of the site framework that was created.

Process.php
Forum.php
View.php

The site was very simple but it was more built for the idea behind viewing a feed in the browser. Since then I wanted to create a more advanced version of the site that relied on a database and the ability to subscribe to the feeds. This is when I decided to restart to the old project and completely rework how everything is set from the ground up.

Working With The Framework

When starting to create a new project or just recreating one the first thing that you will need is a frame work. The frame work is a quick drawing of how you would like to have everything setup. Some people like to create theirs with programs such as In Design or Illustrator but I prefer to use a graphing set, a notepad and whatever pen is closest to me. I should be using pencil but I normally have a plan in my head prior to starting something.

Once you have the general idea of how things are going to work it is a good idea to draw out how you would like to store the key components of a site. I use a notepad throughout the whole process and it usually starts with me laying out something that looks like this.

Contents of index

Header (include not secure page)
Main image
Nav bar (include)

Sidebar (include)
Sidebar components (include single and double width items)
Navigation (include)

Main content (not included)
Post data

Footer (include)
Blocks of meta and links (include)
Bottom strip (include)

Order of Operations When Designing the Index

Once this has been worked up I then head into Adobe Dreamweaver to begin the process of changing my framework into an actual css ready site with all of the divs. This process takes a fair amount of time and the content usually created in this order. First note that Dreamweaver automatically creates the untitled.php page and the css page. At this point I only have the two items on my testing server. Back to showing you the order of operations.

Change the CSS page to create the proper widths for main content, sidebar, and post.
Change padding properties, select fonts, change margin properties.
Create the divs within the untitled document ie the divs in the header that hold link menus.
Add the div id and classes to the CSS file. (remember to work down the content as it appears within your page. Start with the header then go to sidebar, etc.)
Create and fill the pages with fake content and see if this is how you would like the pages to be displayed.
Go through and tweak anything that makes you unhappy.

Pulling Apart the Index.php Page

Now that you have created your base index page and you are somewhat happy with the content you can go ahead and begin to pull the page apart. This is where the layout of includes will come in handy. This process consists of cutting and pasting section of code into new php files. The naming of these files is up to you but I normally go with “pt_” as a prefix for “Part” which is a part of a page and “pg_” which stands for “Page” meaning that it is a whole page. An example of this is “pg_authors.php” or pg_feeds_addfeed.php” The next section of naming a page comes from the actual section that is within the page. On the friendly browser feed viewer project I started there are sections of pages that relate to feeds. If I wanted to create a page where users could subscribe to a feed I would name it “pg_feed_subscribe” this tells me what the php file is, its subject and what the page is for. Another type of file I often contain is the prefix “process_” This is a page that requires a form to post to or backend piece of date. The page naming is completely up to you I just wanted to share how I go about naming my webpages.

Now we will go through pulling the pages apart. Now that we have gone through a little lesson on proper page names it is now time to actually pull something apart. For this I will not be using the rss.skorg.org site but a new site with no content instead.

Here is the full index.php page that we will be working with.

Test

Header

Sidebar1 Content
The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content.
Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.

Main Content
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
H2 level heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.

Footer

Now we are going to pull this page apart and change some things so the include will work properly. The first thing we are going to want to do is change how the header information is setup. We want the content that can be thrown into one file to stay at the very top. The rest that we need for the page is going to be below that.

Test




Header

Take note of where this section of code is and what has changed. The title tags have been moved below the IE exceptions. This is so it is not included in the new “pt_head_req_top.php” file. Now we are going to cut the bottom part of the header code will have a separate required field for the transition tags. This is important so if you wanted to add class to the divs you could do it to everything based on one file change.

1
2
3

 include('pt_head_req_top.php'); ?>
Test
 include('pt_head_main.php'); ?>

Inside the two sections is where you want the head data that will change for each page. The following code is what pt_head_main.php consists of.





Header

Because we are now pulling sections of the page together with php the load times will be a little bit quicker and we have decreased the code of the index by an incredible amount. The index.php code now looks like this when we are done with it.

 include('pt_head_req_top.php'); ?>
Test

include('pt_head_main.php');
include('pt_sidebar_main.php');
?>
 Main Content 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.
H2 level heading 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
 include('pt_footer_main.php');?>

Now you should be able to create a site that is fully based off of your index. If you need to change things around like the css link based on different pages there is always PHP code for things like that.

Continue on to read part 2

By: Caleb Jonasson

Into to HTML: Creating A Basic Web Page

Caleb Jonasson — Mon, 12 Oct 2009 18:53:38 +0000

In order to create your own web page you should first open up a text editor such as notepad or notepad ++. First things first is to copy the following code into your text editor and save it as index.php. PHP is a server side programming language which is most commonly used across the web because of its simple integration with html. Actual PHP code requires a server but if there is html text inside of a PHP file a simple test on your computer will allow you to properly view the page.

Demo Website || featured on Code With Design

H1 tags

H2 tags

H3 tags

The h1 stands for header1 and these p tags are paragraph tags

Now we are going to step through the code so you know exactly what is going on and how the web browser reads the information. The top line of the code will let your browser know what standards it is to follow when reading the code.

The second line of code states that it is going to follow the w3 standards.

Now we are going to get into the more customizable areas of the website. This section of information is known as head information and is not displayed on the webpage itself. This information is once again read by the browser but you can tell the search engines what information to display along with the title of the page. There are many more things that you can do with this section of the text which I will be going over in another into to HTML article.

Demo Website || featured on Code With Design

The first bit of the code is very boring but now we can get more into the content of the page. As you can see there are greater and lesser then signs with content in between, these are called tags. When declaring information inside of a tag you need to have a starting tag and a closing tag. The closing tag is going to allow you to specify that it is closing and will always close the tag immediately before it. For every opening tag you need to have a closing tag or information will not be displayed properly.

H1 tags

H2 tags

H3 tags

Notice how these tag examples are within the body tags. This means that the following content will be displayed within the body of the web browser. When you look at the page you will notice that it breaks into sections. The main section is html which contains the sub sections of head and body.

You can start creating a site with just this information but it is a good idea to clarify the beginning information in the tags for the best results when trying to find bugs and errors.

Within the body of the page a lot of the information can be sorted into different sections. In order to seperate the content you will need to use something called div tags. A div tag can easily break apart seperate sections of the page and will help you style your page in the future.

Code With Design

Note that it is possible to contain divs inside of divs.

Caleb Jonasson

Javascript Hoirzontal Menu

Caleb Jonasson — Thu, 08 Oct 2009 08:31:53 +0000

In order to create a proper working javascript based horizontal menu you need to have all of the necessary files. These files consist of :

/SpryAssets/SpryMenuBarHorizontal.css
/SpryAssets/SpryMenuBar.js

index.php
main.css

The first section of code is going to be the SpryMenuBarHorizontal.css

@charset "UTF-8";
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #4b4b4b;
padding: 0.2em 0.4em;
color: #ffffff;
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #4b4b4b;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #333366;
color: #ccccff;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #4b4b4b;
}
}

The second file, SpryMenuBar.js looks like this.

    var Spry;
    if(!Spry)
    {
    Spry = {};
    }
    if(!Spry.Widget)
    {
    Spry.Widget = {};
    }
    Spry.Widget.MenuBar = function(element, opts)
    {
    this.init(element, opts);
    };
 
    Spry.Widget.MenuBar.prototype.init = function(element, opts)
    {
    this.element = this.getElement(element);
 
    this.currMenu = null;
 
    var isie = (typeof document.all != ‘undefined’ &amp;&amp; typeof window.opera == ‘undefined’ &amp;&amp; navigator.vendor != ‘KDE’);
    if(typeof document.getElementById == ‘undefined’ || (navigator.vendor == ‘Apple Computer, Inc.’ &amp;&amp; typeof window.XMLHttpRequest == ‘undefined’) || (isie &amp;&amp; typeof document.uniqueID == ‘undefined’))
    {
    return;
    }
    if(opts)
    {
    for(var k in opts)
    {
    var rollover = new Image;
    rollover.src = opts[k];
    }
    }
 
    if(this.element)
    {
    this.currMenu = this.element;
    var items = this.element.getElementsByTagName(‘li’);
    for(var i=0; i 0)
    {
    layers[0].parentNode.removeChild(layers[0]);
    }
    };
 
    Spry.Widget.MenuBar.prototype.clearMenus = function(root)
    {
    var menus = root.getElementsByTagName(‘ul’);
    for(var i=0; i 0 ? submenus[0] : null);
 
    var hasSubMenu = false;
    if(menu)
    {
    this.addClassName(link, “MenuBarItemSubmenu”);
    hasSubMenu = true;
    }
 
    if(!isie)
    {
 
    listitem.contains = function(testNode)
    {
    if(testNode == null)
    {
    return false;
    }
    if(testNode == this)
    {
    return true;
    }
    else
    {
    return this.contains(testNode.parentNode);
    }
    };
    }
 
    var self = this;
 
    this.addEventListener(listitem, ‘mouseover’, function(e)
    {
    if(self.bubbledTextEvent())
    {
 
    return;
    }
    clearTimeout(closetime);
    if(self.currMenu == listitem)
    {
    self.currMenu = null;
    }
 
    self.addClassName(link, hasSubMenu ? “MenuBarItemSubmenuHover” : “MenuBarItemHover”);
    if(menu &amp;&amp; !self.hasClassName(menu, “MenuBarSubmenuVisible”))
    {
    opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
    }
    }, false);
 
    this.addEventListener(listitem, ‘mouseout’, function(e)
    {
    if(self.bubbledTextEvent())
    {
 
    return;
    }
 
    var related = (typeof e.relatedTarget != ‘undefined’ ? e.relatedTarget : e.toElement);
    if(!listitem.contains(related))
    {
    clearTimeout(opentime);
    self.currMenu = listitem;
 
    self.removeClassName(link, hasSubMenu ? “MenuBarItemSubmenuHover” : “MenuBarItemHover”);
    if(menu)
    {
    closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
    }
    }
    }, false);
    };

Now you need your index.php. This is where the menu content will be.





Untitled Document




 

 


Header
 


simple


Smart


Tutorials

Photoshop
Illustrator
Flash
Dreamweaver






 Main Content 


Footer

The last file that we need is the main.css file.

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.oneColElsCtrHdr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColElsCtrHdr #header {
background: #4b4b4b;
color: #ffffff;
padding: 0 10px 0 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColElsCtrHdr #mainContent {
padding: 0 20px;
background: #FFFFFF;
margin-top: 50px;
}
.oneColElsCtrHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}

Try it out by clicking here.

Creating a Single Page login – Design View

Caleb Jonasson — Sun, 04 Oct 2009 23:03:58 +0000

There are many ways to go about creating a single page login. There are also many different styles that you can use when creating these logins. Before you start it is a good idea to have a good idea of what you are creating, this way you can always use it as a template in case things start to go wrong.

The design I would like to create is going to consist of the title of the site, a quick description and the forum to login with. For this tutorial I will be creating the login so it will look similar to WordPress’ login screen except it will be off center and there will be no header. These types of login pages are great if the login information is in its own folder or you have a site that requires users to login prior to seeing any of the information.

The first step to creating a login that looks good knowing where the content will be placed. Because I plan on having my content in the middle area of the screen I am going to have to rely on percent based margin properties. After I get all of the padding and margin properties sorted out It will then be time to create a functional and easily useable text.

Login || Code With Design

By using the code above you will create the base structure for the design. It contains all of the div tags required to line this all up later with the CSS file. Now all we need to do is create a functioning form that users can enter their password and username.

Code With Design

Username:

Password:

Lost your password?

If you read over the information above you will notice that the information in the tables has been moved around with the tables and not with the CSS sheet. Whatever method you use is up to you, Normally its safer to go with the CSS method but at the time of creating this login I wanted to keep the CSS clean for creating more login pages.

@charset “utf-8″;
body {
font: 100% Plantagenet Cherokee;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
body a {
text-decoration:none;
color:#333333;
}
body a:hover {
text-decoration:none;
color:#666666;
}
.oneColElsCtr #container {
width: 100%;
margin: 0 auto;
text-align: left;
}
.oneColElsCtr #mainContent {
padding: 3px 20px;
margin-top:20%;
margin-left:20%;
margin-bottom: 10%;
width:400px;
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.oneColElsCtr #mainContent h1 {
background: #ffffff; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}
.oneColElsCtr #mainContent input {
font-family: “Plantagenet Cherokee”;
background: #e4edfe;
border: 2px #333 solid;
}

Now we are going to go through the CSS file that was entered above. The body is pretty standard here and doesn’t have a whole lot to do with the placement of the login container. The placement of the login container is built up within the one column elastic container main content. If you look at the code you will see that there is padding so the information is not touching the outside of the div. There is also a lot of margins created here and as mentioned above its measurement is percent based. This will help the login div stay within the central areas of the page. There is also a set width, this is so the div doesn’t extend all the way to the right.

.oneColElsCtr #mainContent {
padding: 3px 20px;
margin-top:20%;
margin-left:20%;
margin-bottom: 10%;
width:400px;
background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
}

The next thing on the page that you will notice is how the content is wrapped in a round border. This is because of the following code. It is a simple way to make the content rounded inside of your browser. It is also possible to make a border with this style method, however the look of this login is flat so a boarder is not going to be needed.

background: #e4edfe; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;

The third and final thing that you will notice is how the login box contains the same font as the rest of the page and the button does not look like a normal forum button. This is because of the following code in the CSS file.

.oneColElsCtr #mainContent input {
font-family: “Plantagenet Cherokee”;
background: #e4edfe;
border: 2px #333 solid;
}

It forces the input properties within the MainContent to have a background that matches that of the rest of the page and also creates square borders around the button and input text lines.

Here are the final results

Caleb Jonasson