Usi ng DI V
Using DIV to Format Pages
Classic formatting Goal Logo and Copyright Left and Right Columns Adjust Widths Float Adjiust Height Populate Body Centering Final HTML Final Style Sheet Final Result
Copyright 2010 by Steven H. Comstock
Using DIV
Classic Formatting
p This paper assumes you have some background in HTML or XHTML Such as might be obtained from attending our course "You and z/OS and The World Wide Web"
p In that course, we discuss how to use X/HTML tables or frames to format pages and create areas or columns in order to break away from the classic vertical string of data
p In Spring of 2010 I came across a web page that had this kind of appearance, and when I viewed the page source I saw there were no tables nor frames The columnar effect was created using DIV elements and style sheets!
p I immediately started to study this HTML and the standards for HTML, CSS2, and related information on the web, until I understood enough to try and codify how to use this technique in general And thus this paper ...
Copyright 2010 by Steven H. Comstock
Using DIV
Goal
p Suppose you want to create a web page with this basic layout:
Logo / title area
Sidebar Area Main Body Area
Copyright / notice area
Think of this as being composed of four boxes, then ... 7 Title box 7 Sidebar box 7 Main body box 7 Copyright box
Copyright 2010 by Steven H. Comstock 3 Using DIV
Goal, continued
p To make it more concrete, suppose we are after this:
Copyright 2010 by Steven H. Comstock
Using DIV
Logo and Copyright
p To begin, we start with some basic HTML:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title> Welcome To The Trainer's Friend </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="language" content="en" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <link href="DIV_style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="maincontainer"> <img src="TTFLogo2.gif" alt="Cannot display logo"> </div> <div id="footer" > © 2010 Steven H. Comstock - All rights reserved<br/><br/> </div> </body> </html>
Aside from the standard HTML header stuff, we start with just 7 The header (our logo in an img tag) 7 The footer (the copyright notice just as text) Both in div tags 7 Remember: div tags are used to group elements together 7 Here we have the top box and the bottom box defined
Copyright 2010 by Steven H. Comstock
Using DIV
Logo and Copyright, 2
p Now for the style sheet, DIV_style.css:
body { margin: 1px; padding: 1px; background: white; color: black; border: red solid 1px; font-family: "Arial", sans-serif; } div { border: solid 1px; margin: 1px; } #maincontainer{ border-color: blue; }
#footer{ margin: 10px 0px; font-size: 10px; text-align: center; border-color: green; background: #EEEEEE; height: 20px; }
Notes Tip: provide a border around each element, so they display visibly in a browser, to see what you're doing (see and ) Tip: provide a different color for each border, to distinguish the impact of various elements (see , and ) 7 We can remove the borders later if we like
Copyright 2010 by Steven H. Comstock
Using DIV
Logo and Copyright, 3
p The result, in your browser, looks something like this:
Well, it's a start p Next we need to populate the body, so ...
Copyright 2010 by Steven H. Comstock
Using DIV
Left and Right Columns
p Our next attempt, it would seem, would be to define boxes for the sidebar area and the main body area; maybe:
<div id="maincontainer"> <div id="logoholder"> <img src="TTFLogo2.gif" alt="Cannot display logo"> </div> <div id="leftcolumn"> <p> Links to other pages </p> <p> Further information </p> </div> <div id="rightcolumn"> <h1>Topics List</h1> </div> </div>
So we've added the leftcolumn group (div statement) and rightcolumn group (another div statement) 7 These are the remaining two boxes in our original layout, of course We've re-structured maincontainer to contain the title box (logoholder), the leftcolumn box, and the rightcolumn box 7 Leaving footer at the bottom outside the maincontainer box Then, of course, we need to add some style, something that describes the characteristics of logoholder, leftcolumn and rightcolumn
Copyright 2010 by Steven H. Comstock
Using DIV
Left and Right Columns, 2
p Our stylesheet might now look like this:
body { margin: 0; padding: 0em; font-size: 12px; line-height: 18px; background: white; color: black; border: red solid 1px; font-family: "Arial", sans-serif; } div { border: solid 1px; margin: 1px; } #maincontainer{ border-color: blue; } #logoholder{} #leftcolumn { margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; border-color: fuchsia; } #rightcolumn{ margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; border: red solid 1px; } #footer{ margin: 5px 1px 5px 1px; font-size: 10px; text-align: center; border-color: green; background: #EEEEEE; height: 20px; }
Copyright 2010 by Steven H. Comstock
Using DIV
Left and Right Columns, 3
Changes We added logoholder, but have not yet decided on what characteristics to set leftcolumn and rightcolumn both have 5 pixel margins all the way around (we thought this would give a nice look, after some experimenting) 7 And these two elements were assigned border colors Giving us ...
Copyright 2010 by Steven H. Comstock
10
Using DIV
Adjust Widths
p Hmmphh! Not exactly what we wanted!
p The main problem (of several) is that the right hand column box is below the left hand column box So, for our first attempt to fix it, let's restrict the width of the left hand column box, and the left margin of the right hand column box Some experiments yield:
#leftcolumn { margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; width: 200px; border-color: fuchsia; } #rightcolumn{ margin-left: 210px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; border: red solid 1px; }
Copyright 2010 by Steven H. Comstock
11
Using DIV
Adjust Widths, 2
p And these changes yield:
Well, at least the boxes are offset: but how to get rightcolumn box next to the leftcolumn box? 7 The answer is: float
Copyright 2010 by Steven H. Comstock
12
Using DIV
Float
p Again, a change to the style sheet allows us to change the rendering without changing the actual HTML page In the style for leftcolumn, we simply add float: left and we get
#leftcolumn { margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; width: 200px; float: left; border-color: fuchsia; }
p Now, save the change and refresh the browser ...
Copyright 2010 by Steven H. Comstock
13
Using DIV
Float, 2
p Well what's going on here? Our lefthand column box is longer than our containing box! 7 The good news is that the right hand column box is now adjacent to the left hand column box 7 Next: enlarge the containing box ...
Copyright 2010 by Steven H. Comstock
14
Using DIV
Adjust Height
p The place to adjust the height is in our maincontainer block This takes some experimenting, and we ended up with a height of 400 pixels for our needs, so our style sheet is modified as:
#maincontainer{ height: 400px; border-color: blue; }
p I don't like hard coding values like that, but it seems to be the only way to make this process work the way we want
Copyright 2010 by Steven H. Comstock
15
Using DIV
Adjust Height, 2
p And this adjustment gives us:
p That's the ticket! Now we need to go back to our HTML and add more text, maybe like this ...
Copyright 2010 by Steven H. Comstock
16
Using DIV
Populate Body
p Now we're ready to add text into the body of our page, so maybe the maincontainer element now looks like this:
<div id="maincontainer"> <div id="logoholder"> <img src="TTFLogo2.gif" alt="Cannot display logo"> </div> <div id="leftcolumn"> <p> Links to other pages <ul> <li>Topic list</li> <li>Detailed course list</li> <li>Remote Contact Training</li> <li>Roadshows</li> <li>Software for sale</li> </ul> </p> <br /> <p> Further information <ul> <li>Company History</li> <li>Bios</li> <li>References</li> <li>Contact us</li> </ul> </p> </div> <div id="rightcolumn"> <h1>Topics List</h1> <p>Clicking on a topic will send you to the list of related courses, the curriculum for that topic. If there are related technical papers available, those will also have links from the curriculum page. <p> <ul> <li>Web, HTML, XHTML, and related topics</li> <li>Mainframe courses: TSO, ISPF, Dialog Manager, REXX, CLIST</li> <li>Mainframe courses: JCL, Utilities, DFSORT</li> <li>Mainframe courses: Assembler programming</li> </ul> </p> </div> </div>
Copyright 2010 by Steven H. Comstock
17
Using DIV
Populate Body, 2
p This time, with no change in the style sheet, we get:
Very close to our goal! Just two things wrong: 7 The logo is not centered 7 The "Topics List" header is not centered in its box 7 And we could probably take off the extraneous borders now
Copyright 2010 by Steven H. Comstock
18
Using DIV
Centering
p Back to the style sheet Center the logo by setting the logoholder element in 34% and with a width of 33% (so 33% on the right will be empty) Center the Topics List header by adding a class of center to the H1 tag and then adding a style tag for the center class
p The following pages show the final HTML, the final style sheet, and the result in our browser ...
Copyright 2010 by Steven H. Comstock
19
Using DIV
Final HTML - p.1.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title> Welcome To The Trainer's Friend Website </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="language" content="en" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="DIV_style.css" rel="stylesheet" type="text/css" /> </head>
Copyright 2010 by Steven H. Comstock
20
Using DIV
Final HTML - p.2.
<body> <div id="maincontainer"> <div id="logoholder"> <img src="TTFLogo2.gif" alt="Cannot display logo"> </div> <div id="leftcolumn"> <p> Links to other pages <ul> <li>Topic list</li> <li>Detailed course list</li> <li>Remote Contact Training</li> <li>Roadshows</li> <li>Software for sale</li> </ul> </p> <br /> <p> Further information <ul> <li>Company History</li> <li>Bios</li> <li>References</li> <li>Contact us</li> </ul> </p> </div> <div id="rightcolumn"> <h1 class="center">Topics List</h1> <p>Clicking on a topic will send you to the list of related courses, the curriculum for that topic. If there are related technical papers available, those will also have links from the curriculum page. <p> <ul> <li>Web, HTML, XHTML, and related topics</li> <li>Mainframe courses: TSO, ISPF, Dialog Manager, REXX, CLIST</li> <li>Mainframe courses: JCL, Utilities, DFSORT</li> <li>Mainframe courses: Assembler programming</li> </ul> </div> </div> <div id="footer" > © 2010 Steven H. Comstock - All rights reserved<br/><br/> </div> </body> </html>
Copyright 2010 by Steven H. Comstock 21 Using DIV
Final Style Sheet, p.1.
body { margin: 0; padding: 0em; font-size: 12px; line-height: 18px; background: white; color: black; /* border: red solid 1px; */ font-family: "Arial", sans-serif; } div { /* border: solid 1px; */ margin: 1px; } #maincontainer{ height: 400px; /* border-color: blue; */ } .center {text-align: center;} #logoholder{ width: 34%; margin-left: 33%; }
Copyright 2010 by Steven H. Comstock
22
Using DIV
Final Style Sheet, p.2.
#leftcolumn { margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; width: 200px; float: left; /* border-color: fuchsia; */ } #rightcolumn{ margin-left: 210px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px; border: red solid 1px; padding: 2px; } #footer{ margin: 5px 1px 5px 1px; font-size: 10px; text-align: center; border-color: green; background: #EEEEEE; height: 20px; }
Note: the padding in rightcolumn was added for aesthetic purposes
Copyright 2010 by Steven H. Comstock
23
Using DIV
Final Result
p And we end up where we were trying to go:
p After this, adding links to other pages is easy Note that you probably want most pages to look like this, so that links to other pages display pages with the same links in the lefthand column on every page 7 Server Side Includes might make that easier - but that's another topic for another paper!
Copyright 2010 by Steven H. Comstock 24 Using DIV
