CSS/HTML positioning issue

IT-Guy · 07-12-2010 2:07am #1

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; <---:mad:
}

#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;
}

ron_darrell · 07-12-2010 9:55am

You'll need to post the image so we can see what the end result is supposed to look like.

IT-Guy · 07-12-2010 11:44am

Image attached, thanks!

matt-dublin · 07-12-2010 4:00pm

sorry, but maybe im misreading this but: "In our club we have just
about as much fun as it is possible to have with a
goat"

<li>Goat wrestling (naked) (in mud)</li>

u students concern me......

Liam Byrne · 07-12-2010 11:45pm

#navigation {
width: 10em;
position:fixed;
top: 250px;
left: 0px;
float:left;
display:inline;
}

IT-Guy · 08-12-2010 12:35pm

@ Matt: not my idea for the website! Our lecturer has a quirky sense of humour but it's allowed!

@Liam: Cheers for the edit, will try that out. Any suggestions for preventing the main content from going behind the banner without positioning it?. It works fine when I give it a top and a left margin but to me that's positioning it?

Liam Byrne · 08-12-2010 2:07pm

IT-Guy wrote: »

@Liam: Cheers for the edit, will try that out. Any suggestions for preventing the main content from going behind the banner without positioning it?. It works fine when I give it a top and a left margin but to me that's positioning it?

Set the #main div to "float:left;display:inline" as well.

Then, when you don't want the next item to "float" (e.g. a footer) put in <br style="clear:both"/>

Oh - and take off the positioning on the header so that any following content (the navigation and the main content) appear on the page in their natural position after the header.

en.r4cart · 08-12-2010 4:54pm

Why don't you use some tools to help you.
I am using quanta plus in ubuntu system. It is very useful.
You can have many tools in windows system, such as dreamware. But it costs bloody to me.

lil_lisa · 08-12-2010 7:10pm

I don't think he needs tools, he's just doing a simple CSS/HTML site. What's Dreamware?

CptSternn · 13-12-2010 3:08pm

Is there a right/wrong way to do it? I mean, using CSS and HTML you could duplicate the site in at least a half dozen ways.

CSS/HTML positioning issue

Comments