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 also made a video of this tutorial check it out at
http://youtu.be/k8afzwwhk6Q
The other tutorials can be found here
2nd http://www.whiteboardcoder.com/2014/05/jquery-site-setup-positioning-2-of-4.html
3rd http://www.whiteboardcoder.com/2014/05/jquery-site-setup-positioning-3-of-4.html
4th http://www.whiteboardcoder.com/2014/05/jquery-site-setup-positioning-4-of-4.html
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>
<div id="nav">
<div id="nav-top">
<h1>This is the Top Area</h1>
</div>
</div>
</body>
</html>
|
Here is the result
thus far.
Edit the index.html
to the following
<html>
<head>
<link rel="stylesheet" href="css/main.css"
type="text/css"/>
</head>
<body>
<div id="nav">
<div id="nav-top">
<h1>This is the Top Area</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
@import url(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
Another sites that
goes into more detail on this is http://www.w3schools.com/css/css_positioning.asp [1]
#nav-top{
position:absolute;
top:0px;
left:0px;
height:200px;
width:100%;
background-color:#f58a22;
}
|
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>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>
<div id="nav">
<div id="nav-top">
<h1>This is the Top Area</h1>
</div>
<div id="nav-left-outer">
<div id="nav-left">
<h1>Side Area<br/><br/>Static Width</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>Side Area<br/><br/>Static Width</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>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>
<div id="nav">
<div id="nav-top">
<h1>This is the Top Area</h1>
</div>
<div id="nav-left-outer">
<div id="nav-left">
<h1>Side Area<br/><br/>Static Width</h1>
</div>
</div>
<div id="nav-display-area-outer">
<div id="nav-display-area">
<h1>Resizeable Display Area</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.
First edit the CSS so the size of the nav-display-area is
obvious
Edit the CSS again
to change the red background to green
> vi css/nav.css
|
And edit it the
nav-display-area section to the following
#nav-display-area{
position:absolute;
top:200px;
left:200px;
background-color:#80dd77;
border:solid 5px red;
}
|
Reload the page
again
Now it should be easily seen how small the div is.
Edit index.html to add jQuery and a local javascript to it.
> vi index.html
|
<html>
<head>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
</head>
<body>
<div id="nav">
<div id="nav-top">
<h1>This is the Top Area</h1>
</div>
<div id="nav-left-outer">
<div id="nav-left">
<h1>Side Area<br/><br/>Static Width</h1>
</div>
</div>
<div id="nav-display-area-outer">
<div id="nav-display-area">
<h1>Resizeable Display Area</h1>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
|
The first script uses a google hosted library, you can go to
https://developers.google.com/speed/libraries/devguide
[3]
Instead of
downloading and hosting jQuery from your server you can let google do it for
you. This takes a step out for you and
speeds up your users experience overall.
Now open and edit
js/main.js
> mkdir js
> vi js/main.js
|
And place the
following in it
(function (window, undefined) {
$(window).load(function () {
setSizes()
})
function setSizes() {
$("#nav-display-area").height(
$(window).height() - $("#nav-top").height() - 10)
}
})(this)
|
Reload the page
The Height of the
display area is now correct (well in fact it is 10 pixels too short for the
moment just so you can more easily see the border)
edit js/main.js
> vi js/main.js
|
And update it to
(function (window, undefined) {
$(window).load(function () {
setSizes()
})
function setSizes() {
$("#nav-display-area").height(
$(window).height() - $("#nav-top").height()
- 10)
.width($(window).width() -
$("#nav-left-outer").width() - 10)
}
})(this)
|
Reload the page
Now it’s the correct
size.
However it has an
issue, if you change the size of the browser window the display area will not
auto resize itself, for that we need some more JavaScript which I will go over
in the next tutorial.
Here is an example
of resizing the browser window and the results.
The basic positions
of the main div elements are now complete the next tutorial will go over properly
resizing the elements when the window resizes.
The next tutorial can be found at
http://www.whiteboardcoder.com/2014/05/jquery-site-setup-positioning-2-of-4.html
References
[1] W3C
School CSS positioning
Accessed
03/2014
[2] W3C
School z-index
Accessed
03/2014
[3] Google
hosted Libraries
Accessed
03/2014
No comments:
Post a Comment