GEOG5870/1M: Web-based GIS A course on web-based mapping

CSS is the mechanism by which web pages are consistently styled. Essentially, a style-sheet is created that handles the look and feel of your webpage. We will look at a couple of examples here.

We will use this file (that you played with in Unit 2) to play around with CSS.

Currently, the "style" is set to 100% for the width and the height.

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</body>

You can change this to assume a fixed pixel size (instead of a percentage of the browser's size):

<body onload="initialize()">
<div id="map_canvas" style="width:800px; height:600px;"></div>
</body>

Have a look at the map now - you should find that it does not fill the entire screen and is positioned to the top left. Let's add a title:

<body onload="initialize()">
<h1>Here is a map!</h1>
<div id="map_canvas" style="width:800px; height:600px;"></div>
</body>

Centering your elements

You will notice that the 2 elements of the page, the h1 and div, are both aligned to the left of the page. In most websites, it has become common practice to have the contents inside of a div that is centered on the page, rather than having it left-aligned. To do so, let’s create a div container for all the elements of the page to go in, and make sure that the container is centered to the page:

<body onload="initialize()">
<!-- container that is centred on the page for site content --> <div style="width:800px; margin:auto;"></div>
<h1>Here is a map!</h1>
<div id="map_canvas" style="width:800px; height:600px;"></div>
<div>Hello! This is a map of Sydney in Australia</div>
</body>

By setting the container div style to "margin:auto;", it ensures that the div is centered to the page with the assigned pixel size (width:800px). Your resulting map should look something like this:

Text

Column Map Scenario

In this scenario, we want to maximise the size of the map and create a small panel to the left of the map. To do so, create a sidepanel div container before the map div. Let’s assume that we want our sidepanel to occupy 250 pixels, and the map to occupy the remainder space allowed by the browser window. First, create the side panel div, with some content in it (in this case, some title text):

<body onload="initialize()">
<!-- side panel div container --> <div style="position:absolute; width:230px; height:100%; overflow:auto;">
<h1>Here is a map!</h1>
</div>
</body>

Let's see what each of the style parameters mean:

Notice that although we want the width to be 250 pixels, it is set at 230 pixels. Why is that? Also notice that there is a stylesheet parameter for "padding-left" and "padding-right", each set at 10 pixels. The padding allows you to have some white space within the div to allow any text that you put in it, to have some breathing room, and not be placed flush against the left margin of the div. But combined, it takes up 20 pixels, and therefore, you must substract those 20 pixels from the total width (ie: 250 pixels - 30 pixels = 230 pixels).

Now we needs to modify the map div slightly to ensure that it works well with the sidepanel div:

<body onload="initialize()">
<!-- side panel div container --> <div style="position:absolute; width:230px; height:100%; overflow:auto;">
<h1>Here is a map!</h1>
</div>
<div id="map_canvas" style="height:100%; margin-left:250px;"></div>
<div>Hello! This is a map of Sydney in Australia</div>
</body>

And finally

Putting it all together should produce a side panel on the left, with a map on the right that occupies the remainder space for the browser window.

Text