fzgrums
07 Dec 2010, 08:47 AM
A relative newb to HTML and CSS, been studying them at college and have an exam tomorrow in them, eek! Anyway in preparation for the exam our lecturer gave us a sample question. It was an image of a website he'd written himself and he wanted us to write out the HTML and CSS code on paper.
The site itself looks straight forward enough until it comes to positioning the main content in the css. The layout is supposed to be two column liquid with a fixed navigation menu on the left, a fixed image/banner at the top and the main content in a liquid column. Here's the catch, there is no positioning on the main content, i.e. the content should go into the space to the right of the navigation menu and under the banner due to it's position in the document flow, not by positioning it in the css.
The only way I could get it to work was by padding the html and body so as to position the content in the right place, otherwise the content was going behind the banner. Even though it works, I think it's an ugly hack to get the positioning right and I'm sure there's a better way of doing it. Any advice welcome, html and css below. Thanks!
---------------------------------------------------------------------
HTML
---------------------------------------------------------------------
<body>
<div id="banner">
<img src="banner.jpg" alt="image of yada yada..."/>
</div>
<div id="navigation">
<a href="rules.html">Club Rules</a>
<a href="history.html">Club History</a>
<a href="sandwiches.html">Club Sandwiches</a>
</div>
<div id="main">
<h1>
Welcome
</h1>
<p>
Welcome to the <span class="italic">
UCC Bushkashi Club</span>. In our club we have just
about as much fun as it is possible to have with a
goat
</p>
<h2>
Club Officers
</h2>
<table>
<tr>
<th>
President:
</th>
<td>
Genghis Khan
</td>
</tr>
<tr>
<th>
Treasurer:
</th>
<td>
Borat Sagdiyev
</td>
</tr>
</table>
<h2>
Forthcoming Events
</h2>
<ul>
<li>Charity events:
<ol>
<li>Goat wrestling (naked) (in mud)</li>
<li>Karaoke (mounted) (on horses)</li>
</ol>
</li>
<li>Social events:
<ul>
<li>Bar-B-Q after every match!</li>
</ul>
</li>
<li>
Visit to the Asian Steppes (transport not provided)
</li>
</ul>
</div>
</body>
--------------------------------------------------------------------------
CSS
--------------------------------------------------------------------------
html, body
{
margin: 0;
padding: 6.5em 0em 0em 7em; <---
}
#banner
{
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
}
#navigation
{
position: fixed;
width: 10em;
top: 250px;
left: 0px;
}
a
{
display: block;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding-right: 1em;
padding-bottom: .25em;
}
#main
{
width: 50%;
}
.italic
{
font-style: italic;
}
td, th
{
border: solid 1px;
padding: .5em;
}
table
{
border-collapse: collapse;
}
The site itself looks straight forward enough until it comes to positioning the main content in the css. The layout is supposed to be two column liquid with a fixed navigation menu on the left, a fixed image/banner at the top and the main content in a liquid column. Here's the catch, there is no positioning on the main content, i.e. the content should go into the space to the right of the navigation menu and under the banner due to it's position in the document flow, not by positioning it in the css.
The only way I could get it to work was by padding the html and body so as to position the content in the right place, otherwise the content was going behind the banner. Even though it works, I think it's an ugly hack to get the positioning right and I'm sure there's a better way of doing it. Any advice welcome, html and css below. Thanks!
---------------------------------------------------------------------
HTML
---------------------------------------------------------------------
<body>
<div id="banner">
<img src="banner.jpg" alt="image of yada yada..."/>
</div>
<div id="navigation">
<a href="rules.html">Club Rules</a>
<a href="history.html">Club History</a>
<a href="sandwiches.html">Club Sandwiches</a>
</div>
<div id="main">
<h1>
Welcome
</h1>
<p>
Welcome to the <span class="italic">
UCC Bushkashi Club</span>. In our club we have just
about as much fun as it is possible to have with a
goat
</p>
<h2>
Club Officers
</h2>
<table>
<tr>
<th>
President:
</th>
<td>
Genghis Khan
</td>
</tr>
<tr>
<th>
Treasurer:
</th>
<td>
Borat Sagdiyev
</td>
</tr>
</table>
<h2>
Forthcoming Events
</h2>
<ul>
<li>Charity events:
<ol>
<li>Goat wrestling (naked) (in mud)</li>
<li>Karaoke (mounted) (on horses)</li>
</ol>
</li>
<li>Social events:
<ul>
<li>Bar-B-Q after every match!</li>
</ul>
</li>
<li>
Visit to the Asian Steppes (transport not provided)
</li>
</ul>
</div>
</body>
--------------------------------------------------------------------------
CSS
--------------------------------------------------------------------------
html, body
{
margin: 0;
padding: 6.5em 0em 0em 7em; <---
}
#banner
{
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
}
#navigation
{
position: fixed;
width: 10em;
top: 250px;
left: 0px;
}
a
{
display: block;
border-right: 1px solid black;
border-bottom: 1px solid black;
padding-right: 1em;
padding-bottom: .25em;
}
#main
{
width: 50%;
}
.italic
{
font-style: italic;
}
td, th
{
border: solid 1px;
padding: .5em;
}
table
{
border-collapse: collapse;
}