Resnodesigns

Getting Started with CSS pt2

Coding the Header

<!-- This is a HTML comment-->
 
Untitled Document
<div id="container"><!-- Main Box -->
<div id="headr"><!--Header Box, for logos -->
<h1>My Site Name</h1>
<!-- Our Website Name --></div>
<!-- End of Header Box--></div>

If your following along with your own copy, we just laid the groundwork for the site. We told the browser where the CSS file is and started the ground work for the top of our site.

What does “div” do?

The div tag, is simply a hook for the browser to look in the css file. In our example above, it sees

/*This is a css comment */
#container {width:1024px;}
#header { padding-bottom:10px; border:2px solid #000;}
h1 {font-size:20px; color:#C00; text-align:center;}

photo credit: sonicwalker
This is telling the browser, make a box that is 1024px wide. This number is based on screen dimensions. I added some padding, this makes makes space between the header and the other items on the page. Without it, the pages will touch each other. In terms of search engine optimization, and best coding practices, H1 means top importance on a page. I adjusted the size, by default H1 is very large. I added some color and aligned it.

From here its just a few more boxes (divs) and CSS to control them. The navigation introduces some new things.

Coding the Body

<div id="navigation"><!-- Starting the Navigation-->
<ul>
	<li><a href="home.html">Home</a></li>
	<li><a href="about me">About Me</a></li>
	<li><a href="randomlink.html">Link</a></li>
	<li><a href="lastone.html">Last One</a></li>
</ul>
</div>
<!-- End of Navigation -->
<div id="content"><!-- Start of Page Content -->
<h2>This the headline</h2>
This is the content for our website. Awesome right?</div>
<!-- End of Page Content -->

As usual, the div tages are present, placing all our things into neat boxes. But we want some neat hoverover effects for our links. Best practices say, navigation should be a list of links. We use CSS to manipulate the list a bit to get the look we want. The content box, has the stuff everyone is visiting your awesome site.

CSS Code

/*This is a css comment */
#navigation { width:120px; float:left; border:2px solid #609;} /*Sets the CSS box for navigation */
#navigation ul { list-style:none; margin:20px; padding:0; }
#navigation li a{ display:block; padding:5px; background-color:#C63; color:#0FF; text-decoration:none;}
#navigation li a:hover { background-color:#066; color:#fff;}
 
#content {  float:right; width:850px; border:2px solid #F00; padding:10px;}/*Sets the Content box*/

This batch of CSS code introduces a few more things about CSS and controlling things. The first item is the navigation box as usual. Next, you notice the use of ul, li and a. These additions are extra controls on the to elements on the page. It is telling the browser within the navigation box there are elements that I want to focus on. It first grabs the ul and removes the bullets and adds some padding. Next, the navigation li a, attaches to items that are links, and adds a background color and removes the underline. Lastly, we add a neato hoverover effect by using :hover, this changes the text color and background when you move your over it.

Lastly, we get the content box, and float it right. This places this box on the right side. You can float things left and right.

Lastly, we make the footer area.

Coding the Header

<!-- This is a HTML comment-->
 
Untitled Document
<div id="container"><!-- Main Box -->
<div id="header"><!--Header Box, for logos -->
<h1>My Site Name</h1>
<!-- Our Website Name --></div>
<!-- End of Header Box--></div>

If your following along with your own copy, we just laid the groundwork for the site. We told the browser where the CSS file is and started the ground work for the top of our site.

What does “div” do?

The div tag, is simply a hook for the browser to look in the css file. In our example above, it sees

/*This is a css comment */
#container {width:1024px;}
#header { padding-bottom:10px; border:2px solid #000;}
h1 {font-size:20px; color:#C00; text-align:center;}

This is telling the browser, make a box that is 1024px wide. This number is based on screen dimensions. I added some padding, this makes makes space between the header and the other items on the page. Without it, the pages will touch each other. In terms of search engine optimization, and best coding practices, H1 means top importance on a page. I adjusted the size, by default H1 is very large. I added some color and aligned it.

From here its just a few more boxes (divs) and CSS to control them. The navigation introduces some new things.

Coding the Body

<div id="navigation"><!-- Starting the Navigation-->
<ul>
	<li><a href="home.html">Home</a></li>
	<li><a href="about me">About Me</a></li>
	<li><a href="randomlink.html">Link</a></li>
	<li><a href="lastone.html">Last One</a></li>
</ul>
</div>
<!-- End of Navigation -->
<div id="content"><!-- Start of Page Content -->
<h2>This the headline</h2>
This is the content for our website. Awesome right?</div>
<!-- End of Page Content -->

As usual, the div tages are present, placing all our things into neat boxes. But we want some neat hoverover effects for our links. Best practices say, navigation should be a list of links. We use CSS to manipulate the list a bit to get the look we want. The content box, has the stuff everyone is visiting your awesome site.

CSS Code

/*This is a css comment */
#navigation { width:120px; float:left; border:2px solid #609;} /*Sets the CSS box for navigation */
#navigation ul { list-style:none; margin:20px; padding:0; }
#navigation li a{ display:block; padding:5px; background-color:#C63; color:#0FF; text-decoration:none;}
#navigation li a:hover { background-color:#066; color:#fff;}
 
#content {  float:right; width:850px; border:2px solid #F00; padding:10px;}/*Sets the Content box*/

This batch of CSS code introduces a few more things about CSS and controlling things. The first item is the navigation box as usual. Next, you notice the use of ul, li and a. These additions are extra controls on the to elements on the page. It is telling the browser within the navigation box there are elements that I want to focus on. It first grabs the ul and removes the bullets and adds some padding. Next, the navigation li a, attaches to items that are links, and adds a background color and removes the underline. Lastly, we add a neato hoverover effect by using :hover, this changes the text color and background when you move your over it.

Lastly, we get the content box, and float it right. This places this box on the right side. You can float things left and right.

Lastly, we make the footer area.

Getting started with CSS (Cascading Style Sheets)

CSS, cascading style sheets is a file that can turn a boring page into one that can revile even the prettiest websites.  With the right CSS coding, two versions of the same website will look totally different. Once this is completed I will include a zip file with [...] Continue Reading…

Simple Login Script

After creating a database named users, a table named users and two fields username and password, you can begin making this login script.

The basic form
Create a page named index.php, and inside that page add the following code.

Username
[...] Continue Reading…

101 Uses for Twitter

This is a post I got from Digital Capitalism and have posted it here according to the rules of the original poster.

The rules for this post are the following:

1. Please post this on your blog in its entirety
2. Bold or underline your uses for Twitter
3. Add the tag twitter101 [...] Continue Reading…

Custom Wordpress Sidebar

In order to customize your Wordpress sidebar or other pieces of your site, you will need basic html and PHP knowledge. These few tips will help customize or change your theme to make it fit what you want. There are two methods I will mention in this post.

[...] Continue Reading…

What you See is not Always What You Get

photo credit: estherase
WYSIWYG
Mother always said, “You cant judge a book by its cover”.  The same applies to websites.  “What you see is what you get” editors can lay a website out to your liking.. most of the time, there is a greater problem which remains hidden away.  WYSIWYG [...] Continue Reading…

My 1st “CSS Naked Day”

Today is CSS Naked Day, and I thought I would participate by removing my CSS files and allowing it all to hang out.

From  Chris Shiflett.
You might be wondering what happened to my design. As with years past (2007, 2008), I’m participating in CSS Naked Day to show my support [...] Continue Reading…

You’re Too Slow to View This Site

photo credit: iirraa

With increasing numbers of people moving to highspeed connections is it safe to assume everyone has the fast connection speeds? I believe, NO. 25% of Americans still use dial-up to access the internet, creating a site that the 25% can not access would cut those visitors [...] Continue Reading…

The Right Way to Reset CSS

photo credit: Vanderlin

The problem is each browser sees margins, and padding differently.  Some browsers add a space between your page and the window.  This will make your page sit away from where you want it.  In order to make everyone see it the same you do a reset.
Bad [...] Continue Reading…

Site Updates and Changes

photo credit: John Carleton

As you may have noticed, or might not.  I am making some improvements to my blog, layout, and some other top secret things.

I created a all new uber awesome layout that will be pure awesomeness. I know what your thinking, how can anything be so [...] Continue Reading…