HW - Container layers

bannernavigation screenshot
In this assignment, you'll position a navigation bar (division) on top of a division with a banner image. We'll use absolute positioning to place the navigation bar precisely along the bottom of the banner.

This file bannernavigation.html already contains a centered, flexible container (#content) layer, and this basic organization of <div>-isions:

 

<div id='content'><!-- the flexible, 600-800 px wide container -->

<div id='banner'>
<div id='navbar'> Here's where our link text will be. </div>
</div><!-- end of 'banner' -->

<div id='maincontent'>
<p>We need a few paragraphs of text here</p>
</div><!-- end of 'maincontent' -->

</div>

The flow

We say that the banner and maincontent divisions are in the flow: Since they...

the browser will render them one right after the other.

 

Now, make the following modifications to this page....

#banner layer

Make this layer position: relative so that we can position the #navbar box at its bottom edge.

Create a banner image of your own and make it the background-image of this #banner layer. (Cite the source of your image!) Your image should be a bit more than 800 pixels so that it fills the width of the #content container at all widths.

Set #banner's height to show as much of your image as you like.

#navbar layer

Set this to position: absolute . Set bottom and left to zero pexels to make this layer lines up along the bottom of the #navbar.

How to do padding of the content of this layer? Watch what happens if you try and set width: 100% and padding to something non-zero.

#searchbox layer

Now, put another division inside the #banner box with a search box inside of it. Use absolute positioning to position this in the top-right corner of the #banner box.

<div id="searchbox">
<form action='http://www.goshen.edu/search/dualsearch.php'>
<input type='hidden' name='searchopt' value='gcweb' />
<input type='text' size='25' name='words' id='words' />
</form>
</div>

#maincontent layer

We need some padding so that our text is not right up against the edge of this box.

 

links

Set a default link style (to look good for links in the #maintext box) by setting colors and any other options for a:link , a:visited , etc.

Now use the context-sensitive CSS selectors (below) to set a different style for links when they're inside a #navbar division.

Fiddle with the design....

Choose some colors for text, and background colors that work with your banner image. Make typographic choices.

Hand this in on Moodle.

Context-sensitive CSS selectors

The links in the #navbar can be made to look distinct without affecting links in other parts of your document with this new kind of selector:

#navbar a{
  padding-left: 15px; padding-right:15px; 
  padding-top:10px; padding-bottom:10px; 
  text-decoration:none;
}
#navbar a:link{color:#aa5522;}
#navbar a:visited{color:#737268;}
#navbar a:hover{color: #551111; background-image:url(whiter.png);}

The space between #navbar and a means: "This only applies to a tags that are enclosed in a #navbar division".