include "_i/1.h" ?>
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>
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....
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.
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.
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>
We need some padding so that our text is not right up against the edge of this box.
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.
Choose some colors for text, and background colors that work with your banner image. Make typographic choices.
Hand this in on Moodle.
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".
include "_i/3.h" ?>