Code With Design » html

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.

Learning HTML in one short night

Caleb Jonasson — Thu, 04 Mar 2010 02:43:29 +0000

Introduction

Open up your text editor because it is time to learn HTML in one night. If you are unfamiliar with HTML you should know that it is first and foremost a scripting language. Your server is going to send this file to the person’s computer. This person’s web browser; be it “Chrome”, ”Safari”, ”Opera”, ”Firefox” or “Internet Explorer” is then going to read the information and display it on screen.

This is an in depth look at HTML and how it is structured. In a future article I will include CSS with some CSS3.

HTML stands for hyper text markup language and is written in a standard text editor. (notepad for Windows, text edit for Macintosh) We are going to go ahead and start the tutorial now.

Please make sure that you have a folder, web browser and text editor open on your screen.

Building our first page

Open up your text editor; type in the following code and then save the file as “index.html” Be sure to write the extension. If it saves as “index.html.txt” then open up the folder that the file resides in, write click it go to “properties” on Window or “get info” on a Mac and remove the “.txt” extension.

The code above doesn’t contain anything special which is why you don’t see anything. In order to add content we are going to add a little more code to demonstrate some content on the screen but first we need to understand what was just added.

The first part of the above code tells the browser that inside is the HTML, in fact everything is until it reaches the closing statement or the bottom of the page. The head tags as you can see “” tell the browser where the head information is. This information usually contains the title of the page, some meta data, style tags or links to css files and a little javascrip.

The tags below this are the body tags. Inside of here is where we will be putting all of the page contents which you will see shortly.

The next step is to add a line of code to your website. It is going to be at the very top and will have the type of charset, some meta data and the doctype. For now you do not need to know what it means but know that it is good practice and allows your code to be read properly.

Now that we have the basic structure of the page setup we can go ahead and add a title. Like everything else it is set in tags and requires no formatting.

1
2
3


Code With Design

Note: The naming of the title is important. It will allow search engines and bots to easily find your content and increase your page rank. Make sure it covers what the page is about but don’t make it to long. Search engines don’t like that.

Testing your page

In order to test your page you just need to find the index.html file’s location on your hard disk and double click it. The page will open up in your default browser. If it does not you are going to need to associate a browser with that type of file. You can also open up your web browser and set the URL to the location of the file on your hard disk.

When it comes to testing to see if you have valid code it is as simple as using the W3C validation service offered here. You can test a page by using the URL, copying and pasting or uploading the file directly.

The body of the page

The next step in our quest for knowledge is getting text onto the screen. In order to accomplish this there are some ways to go about doing so. First there is just plain text which I would advise not doing do to styling complications later on. The next type of text is “paragraph” text. This text is displayed in

tags and is formatted to have spaces on the top of the first line and the bottom of the bottom line. The third main kind of text is heading tags, once again name these accordingly because it will help your pages chances of getting higher in the search engine.

This will be shown at an h1 level

Here is som basic fill text that is only used to display what is needed.

Difference in size

As you can tell there is a difference in size between the heading 1 and heading 2 tags. This difference can be changed later on using page styles.

The bit of code we are going to use is called a div. Div tags can be found throughout websites and are the main structure of formatting. Div tags can be of type class or id and are used with css to change how a website appears on screen. The following is the basic structure of how a div tag works.


Article title
Content goes here.

Note: The div tag can be formatted with CSS to change the location of this content on the screen along with colors, and size. Also, div tags are often associated with classes over id.

Menus and links

Menus in HTML are commonly created using unordered lists and list items. These tags like as follows

unordered list and

List item

. When written these tags are nested meaning that the list item tags inside of the unordered list.


Menu item 1
Menu item 2

It isn’t going to be much of a menu if we cannot click the item and find ourselves on another page. In order to do this we are going to need to add the following code.

1 2	Code With Design Linking internally


codewithdesign.com
Search engine

Initially the menu is going to look very bad but there is hope for it yet. The menu is styled this way as a default. Once you add css to the web page it will begin to look better.

Header rules are not as common as they once were do to the increase in proper CSS they were quickly replaced with borders on div tags. If you are looking for a heading rule then you can add the simple code below.

Note: There is not content inside of this header ruling for a reason. All that is required are the two tags and a line will be created.

Tables

Note: It is best practice to not use tables at all unless you are puling the information form a database. If you choose to make your website layout using tables note that it isn’t considered common practice, it will increase load times, they are messier to work with and all around a bad idea.

Tables are created using the

tags and consist of nested tags inside. The basic table will look something like this.



Row 1 col 1
Row 1 col 2


Row 2 col 1
Row 2 col 2

This table was made using cell spacing and a border just to let you see how it is all aligned. Like I have previously stated these are not a good idea unless displaying data and even then there are better ways then tables.

Forms

These are html components that can be used to send information to other pages on the site. These components range in abilities and are often used to pass a username and password to a site. The general way that it is written is as follows:

1
2
3

Going through the top line it is obvious that we are going to need to add components within the form tags. The forms id and name should be changed to your choosing are commonly named the same. (ie: name=”form1″ id=”form1″) The action of the form is where you want the information to be posted. This usually means that it will be sent to PHP page.

Components for forms

Components are usually enclosed in label tags which means that you can add generic text that will be grouped with the item itself.

text area

Using the above format you can create items such as:

file input field “file”
hidden field to pass data without a field appearing on screen “hidden”
A submit button used to post the form “submit”

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.

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

Into to HTML: Creating A Basic Web Page

Caleb Jonasson — Mon, 16 Nov 2009 19:54:49 +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 codewithdesign.com

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 codewithdesign.com

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.

The Empty Headed Blog

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

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

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

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

Demo Website || featured on Code With Design

H1 tags

H2 tags

H3 tags

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.

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

Intro to HTML: CSS Creating a Style Sheet

Caleb Jonasson — Wed, 30 Sep 2009 19:05:45 +0000

CSS stands for cascading style sheet, this is the document that will contain all of the information required to make your site look more appealing to the people reading it. Some of the things that CSS files can do are as follows: give areas of the page or the page a background, change the font and font color, and manage placement of div tags. Take note that the page created in this example is going to be very ugly and its sole purpose is to give you a better understanding as to how CSS works.

For the following we are going to use this as a layout and I would recommend that you use it as a base structure that you can build your site upon for the duration of this article.

Untitled Document

Code With Design

navigation

navigation links coming in another tutorial.

Header 1

Paragraph text.

Code With Design

On this page we are going to work with styling the div tags. If you look at the code you will notice that the tags aren’t just a simple open and closing tag. These look differently because the div tags are named. This is important because the style.css file needs to know what to do with the separate content.

You are also going to notice that in the head of the file there is a link to the style sheet. If you where to put your pages into a separate folder you would have to change the link because it is relative. You can also call on it through a URL.

If you need to push the link back use ../ before style.css

Now that we have gone over how to properly link to a style sheet it is time to take a look at what an actual style sheet. The beginning of a style sheet will contain some simple code then will start to stylize the body. All of the content within the style.css sheet will be named as divs and other parts of content such as p for paragraph or hover for content with a mouse over. The attributes that go with these separate sections are placed within curly bracers.

@charset “utf-8″;
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #ffffff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 900px;
background: #FFFFFF;
margin: 0 auto;
text-align: left;
}
#header {
background: #ffffff;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
}
#sidebar1 {
float: right;
width: 200px;
background: #ffffff;
padding: 15px 10px;
}
#mainContent {
margin: 0 250px 0 0;
padding: 0 20px;
}
#footer {
padding: 0 10px 0 20px;
background:#ffffff;
}
#footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Because I intend on linking an image to this page I want to make sure that the image will not have a border when I mouse over it. So in this demo I will first add an image that is linkable to the index.php page. The code looks like this.

Place the code into the main content div of your page and preview the page before changing the CSS so you know what the browser will want to do automatically. Now that you can see the large blue lines around the image you can place this code into the style.css page. As long as the code is not placed inside of another attribute it will work, it is a good idea to keep the separate styles close together based on where they come on the page so you may want header first then content followed by sidebar then footer.

#mainContent img{
float:left;
border: 0px;
text-decoration:none;
}

Because the CSS entered above has a hash sign followed by the content section and a space with “img” typed after; the following effects will only apply themselves to images inside of the main content. If you would like all of the images to display no border then you would have to enter the following code.

img {
border: 0px;
}

This is a very important technique when styling a page and it comes in handy quite often. If I wanted the paragraph to be indented 20 pixels and the header to only be indented 10 pixels I would use a very similar method.

#mainContent h1,h2,h3{
padding-left: 10px;

}

#mainContent p {
padding-left:20px;
}

In order to give the page some boarders we could use the simple code.

#container {
border: 1px solid #444444;
}

Now you should have a simple understanding as to how CSS files can effect your document and one of the great things about them is that you can easily style all of the pages on your website by just linking back to the style sheet. This way if you need to change the look of something all you need to do is update the style.css file.