Jquery Site Setup (Positioning) 1 of 4

Posted on Wednesday, April 30, 2014

This tutorial is
going to be split into 4 sections. The
goal of this tutorial is to create a simple web site that has a top bar with a
static Height, a left tool bar with a static width, and a variable
"display area" that will take up the remaining space on the page.

This tutorial will
go over organizing the <div> elements to get this desired look.

I am sure there are
many ways to accomplish this look, here is my take on it, If you have a better or different one please
post it or a link to it.

Top Area

Create an index.html
file on your web server

> vi index.html

And place the
following into it.

<html>

<head>

</head>

<body>

<divid="nav">

<divid="nav-top">

<h1>ThisistheTopArea</h1>

</div>

</div>

</body>

</html>

Here is the result
thus far.

Not much yet. The CSS needs to be added to set the styles
needed for the top.

Edit the index.html
to the following

<html>

<head>

<linkrel="stylesheet"href="css/main.css"type="text/css"/>

</head>

<body>

<divid="nav">

<divid="nav-top">

<h1>ThisistheTopArea</h1>

</div>

</div>

</body>

</html>

Now create the CSS
folder and open css/main.css for editing

> mkdir css

> vi css/main.css

And place the
following text in it

@importurl(nav.css);

This will import
another CSS file into this one and apply it.
I am doing this at this point because sometimes it's easier to organize
your CSS in multiple files.

Save this file and
open the nav.css file

> vi css/nav.css

And edit it to the
following

html, body {

margin: 0;

background-color:yellow;

}

#nav{

position:relative

background-color:blue;

width:100%;

}

#nav-top{

position:absolute;

top:0px;

left:0px;

height:200px;

width:100%;

background-color:#f58a22;

}

Going over this CSS
file

html, body {

margin: 0;

background-color:yellow;

}

Sets the background
of the html page to yellow and reduces its margin to 0. This is useful to see how the other elements
are positioned.

#nav{

position:relative

background-color:blue;

}

The div with the id
of #nav has a red background-color, I do this to provide a visual tool to aid
in the positioning of elements within it.
The position is set to relative, Relative allows you to move this
element around according to where it should be.
However in this example I do not move it at all.

The only reason it
is set to relative is for the next inner element which requires an outer
element that is anything but static

The div with the id
of #nav-top will have an absolute position.
In this case it will be set to be at the top and right of the outer
element #nav.

Its height is set to
200px and its width to 100% and its background to an orange color.

Reload the page to
see the results.

The Top area is now
set where I want it. Its height is a set
value that does not change and its width is always the width of the browser
window.

Left Side Area

Now for the Left
Side Area, this one gets a bit trickier.

First open the
index.html file for editing

> vi index.html

And place the
following into it.

<html>

<head>

<linkrel="stylesheet"href="css/main.css"type="text/css"/>

</head>

<body>

<divid="nav">

<divid="nav-top">

<h1>ThisistheTopArea</h1>

</div>

<divid="nav-left-outer">

<divid="nav-left">

<h1>SideArea<br/><br/>StaticWidth</h1>

</div>

</div>

</div>

</body>

</html>

Save this file and
open the nav.css file

> vi css/nav.css

And edit it to the
following

html, body {

margin: 0;

background-color:yellow;

}

#nav{

position:relative

background-color:blue;

height:100%;

}

#nav-top{

position:absolute;

top:0px;

right:0px;

height:200px;

width:100%;

background-color:#f58a22;

}

#nav-left-outer{

position:absolute;

top:0px;

left:0px;

width:200px;

height:100%;

background-color:red;

}

#nav-left{

position:absolute;

top:200px;

left:0px;

background-color:black;

color:white;

}

Save this and reload
the page.

This is what you
should see but not exactly the desired result.

Here is what is
occurring…

#nav-left-outer{

position:absolute;

top:0px;

left:0px;

width:200px;

height:100%;

background-color:#FF0000;

}

The element with id
"nav-left-outer" is used to help position where we want the
"nav-left" element to be. It
has a red background and its absolute position is set to the top left (of the
#nav element) its height is set to 100% so it resizes with the browser window
just fine. Its width is set to 200px. It
does have one problem, it overlays part of the Top Area (this will be fixed in
a moment)

#nav-left{

position:absolute;

top:200px;

left:0px;

background-color:#000000;

color:#FFFFFF;

}

The element with id
"nav-left" (what will be left tool bar area). Has an absolute position relative to its
outer element nav-left-outer. Its top is
200px from the top of nav-left-outer and set to butt up to the left (left:
0px).

If its size is not
set, it adjusts its own size to allow space for elements within it. In this
case <h1>SideArea<br/><br/>StaticWidth</h1>

Fixing the overlay

The nav-left-outer
element needs to remain the same size but be placed behind the nav-top
element. To do this you can set the
z-index http://www.w3schools.com/cssref/pr_pos_z-index.asp [2] has a detailed explanation of this, but in
summary elements with a higher number on their z-index will be in front of
those with a lower z-index number.

The html element's
default z-index is 0, for other elements, if z-index is not set, the element will
have the same z-index as their parent.

Edit the css again

> vi css/nav.css

And edit it to the
following

html, body {

margin: 0;

background-color:yellow;

}

#nav{

position:relative

background-color:blue;

height:100%;

}

#nav-top{

position:absolute;

top:0px;

right:0px;

height:200px;

width:100%;

background-color:#f58a22;

z-index:1;

}

#nav-left-outer{

position:absolute;

top:0px;

left:0px;

width:200px;

height:100%;

background-color:#FF0000;

}

#nav-left{

position:absolute;

top:200px;

left:0px;

background-color:#000000;

color:#FFFFFF;

}

All that is changed
is the top elements z-index is set to 1, making it overlay the other elements.

Reload the page

This is getting
closer to the desired results.

Edit the css again
to change the red background to black in the nav-left-outer div

> vi css/nav.css

And edit it to the
following

html, body {

margin: 0;

background-color:yellow;

}

#nav{

position:relative

background-color:blue;

height:100%;

}

#nav-top{

position:absolute;

top:0px;

right:0px;

height:200px;

width:100%;

background-color:#f58a22;

z-index:1;

}

#nav-left-outer{

position:absolute;

top:0px;

left:0px;

width:200px;

height:100%;

background-color:black;

}

#nav-left{

position:absolute;

top:200px;

left:0px;

background-color:black;

color:white;

}

Reload the page
again

The Left Side Area
positioning is working.

Resizable Display Area

Now the Positioning Resizable
Display Area.

First open the
index.html file for editing

> vi index.html

And place the
following into it.

<html>

<head>

<linkrel="stylesheet"href="css/main.css"type="text/css"/>

</head>

<body>

<divid="nav">

<divid="nav-top">

<h1>ThisistheTopArea</h1>

</div>

<divid="nav-left-outer">

<divid="nav-left">

<h1>SideArea<br/><br/>StaticWidth</h1>

</div>

</div>

<divid="nav-display-area-outer">

<divid="nav-display-area">

<h1>ResizeableDisplayArea</h1>

</div>

</div>

</div>

</body>

</html>

Save this file and
open the nav.css file

> vi css/nav.css

And edit it to the
following

html, body {

margin: 0;

background-color:yellow;

}

#nav{

position:relative

background-color:blue;

height:100%;

}

#nav-top{

position:absolute;

top:0px;

right:0px;

height:200px;

width:100%;

background-color:#f58a22;

z-index:1;

}

#nav-left-outer{

position:absolute;

top:0px;

left:0px;

width:200px;

height:100%;

background-color:black;

}

#nav-left{

position:absolute;

top:200px;

left:0px;

background-color:black;

color:white;

}

#nav-display-area-outer{

position:absolute;

top:0px;

left:0px;

width:100%;

height:100%;

background-color:red

}

#nav-display-area{

position:absolute;

top:200px;

left:200px;

background-color:#80dd77;

}

Save this and reload
the page.

This is the
result. The z-index for a few of the
elements needs to be adjusted.

Edit nav.css again

> vi css/nav.css

Give the top area a
z-index of 2 and the left a z-index of 1, so they will overlay the display
area.

html, body {

margin: 0;

background-color:yellow;

}

#nav{

position:relative

background-color:blue;

height:100%;

}

#nav-top{

position:absolute;

top:0px;

right:0px;

height:200px;

width:100%;

background-color:#f58a22;

z-index:2;

}

#nav-left-outer{

position:absolute;

top:0px;

left:0px;

width:200px;

height:100%;

background-color:black;

z-index:1;

}

#nav-left{

position:absolute;

top:200px;

left:0px;

background-color:black;

color:white;

}

#nav-display-area-outer{

position:absolute;

top:0px;

left:0px;

width:100%;

height:100%;

background-color:red

}

#nav-display-area{

position:absolute;

top:200px;

left:200px;

background-color:#80dd77;

}

Save this and reload
the page.

Edit the css again
to change the red background to green

> vi css/nav.css

And edit it to the
following

html, body {

margin: 0;

background-color:yellow;

}

#nav{

position:relative

background-color:red;

height:100%;

}

#nav-top{

position:absolute;

top:0px;

right:0px;

height:200px;

width:100%;

background-color:#f58a22;

z-index:2;

}

#nav-left-outer{

position:absolute;

top:0px;

left:0px;

width:200px;

height:100%;

background-color:#000000;

z-index:1;

}

#nav-left{

position:absolute;

top:200px;

left:0px;

background-color:#000000;

color:#FFFFFF;

}

#nav-display-area-outer{

position:absolute;

top:0px;

left:0px;

width:100%;

height:100%;

background-color:#80dd77;

}

#nav-display-area{

position:absolute;

top:200px;

left:200px;

background-color:#80dd77;

}

Reload the page
again

jQuery to handle resize of Display Area

The last piece to fix is the actual size of the
nav-display-area. Instead of it just
being big enough I want it to be the size of the green section of the screen,
in other words I want its

Height = 100% - 200px

Width = 100% - 200px

Although there is a way to accomplish this with CSS (it's
not yet at a place I feel safe using it across all browsers) So for the time being you need some JavaScript,
and I will be using jQuery.