By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,996 Members | 884 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,996 IT Pros & Developers. It's quick & easy.

position menu left of main section

P: n/a
How do you position a navigation menu to the left of the main section?
My site has three div elements:

--------------------HTML---------------------
<body>
<div id="navigate">
<a href="./">Home</a>
<a href="bla/">Bla</a>
<a href="links.html">Links</a>
</div>

<div id="main">
<h1>Homepage</h1>
Welcome to my homepage!
</div>

<div id="footer">
</div>
</body>
--------------------HTML---------------------

(You can see the real homepage at http://jolowicz.com.)

These should be positioned as follows:

,------. ,---------------.
| nav | | |
| iga | | |
| te | | main |
`------' | |
| |
| |
| |
`---------------'
,--------------------------.
| footer |
`--------------------------'

My problem is that I don't know how to align the top of navigate and
main. The stylesheet below works well for Mozilla 1.7.5, but not for MS
IE. A friend says defining #navigate { [...] top: 1.4em; left: 0.8em; }
makes it look right in MS IE, but these dimensions don't actually align
on Mozilla. Another possible fix would be to position both navigate and
main absolutely, but then footer would be displayed below main (at the
top of the page).

By the way, is it OK to make navigate { position: absolute } without a
surrounding div which is { position: relative } ? Originally, main and
navigate were contained in a div corpus which was { position: relative
}, but this was reported to not work on MS IE :-( AFAIK, you need a
container which is { position: relative } as a reference for elements
with { position: absolute }.

---------------------CSS---------------------
/* Defines style for positioning */

body { padding: 0.5em }

#navigate {
position: absolute;
width: 8em; /* use the left margin in main */
}

#main {
margin-left: 10em; /* leave space for navigate */
}

#footer {
margin-top: 1em;
}

#navigate, #main, #footer { padding: 0.5em; }
#navigate a {
display: block;
margin-bottom: 0.3em;
}
---------------------CSS---------------------

--
,= ,-_-. =. Claudio Jolowicz
((_/)o o(\_)) http://www.jolowicz.com
`-'(. .)`-'
\_/
Jul 21 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Claudio Jolowicz wrote:
How do you position a navigation menu to the left of the main
section? My site has three div elements:


<snippage>

Have a look at this template from Ben Meadowcroft:

http://www.benmeadowcroft.com/webdev...ft-column.html

--
-bts
-This space intentionally left blank.
Jul 21 '05 #2

P: n/a
On Sun, 3 Apr 2005, Beauregard T. Shagnasty wrote:
Claudio Jolowicz wrote:
How do you position a navigation menu to the left of the main
section? My site has three div elements:
Have a look at this template from Ben Meadowcroft:

http://www.benmeadowcroft.com/webdev...ft-column.html


Thanks.

The template suggests to set top on #navigate (absolute position) and
margin-top on #main (static position) to the same size. I also needed to
remove the padding from body.

The resulting stylesheet works on Mozilla 1.7.5:

--------------------CSS--------------------
[...]
/* NEW: get rid of this */
/*body { padding: 0.5em }*/

#navigate {
position: absolute;
top: 1em;
left: 0.8em;
width: 8em; /* use the left padding space in main */
}

#main {
margin-top: 1em; /* NEW: match #navigate->top */
margin-left: 10em; /* leave space for navigate */
}
[...]
--------------------CSS--------------------

--
,= ,-_-. =. Claudio Jolowicz
((_/)o o(\_)) http://www.jolowicz.com
`-'(. .)`-'
\_/
Jul 21 '05 #3

P: n/a
On Sun, 3 Apr 2005 15:33:51 +0100, Claudio Jolowicz wrote:
On Sun, 3 Apr 2005, Beauregard T. Shagnasty wrote:
Claudio Jolowicz wrote:
How do you position a navigation menu to the left of the main
section? My site has three div elements:

Have a look at this template from Ben Meadowcroft:

http://www.benmeadowcroft.com/webdev...ft-column.html


Thanks.

The template suggests to set top on #navigate (absolute position) and
margin-top on #main (static position) to the same size. I also needed to
remove the padding from body.

The resulting stylesheet works on Mozilla 1.7.5:


Now that you have that working, try putting the #navigate after #main in
the HTML. It might still work, though the footer may cause problems.
If the look is still the same, then there is no downside, and your site
will probably work better for text browsers and search engines.

--
Greg Schmidt gr***@trawna.com
Trawna Publications http://www.trawna.com/
Jul 21 '05 #4

P: n/a
Greg Schmidt wrote:
Now that you have that working, try putting the #navigate after
#main in the HTML. It might still work, though the footer may
cause problems. If the look is still the same, then there is no
downside, and your site will probably work better for text browsers
and search engines.


Ben has a "3 Column & Footer" referenced there as well, which should
explain how to add a footer, in between the content and the menu HTML.
His templates seem to do well just about everywhere, and shows how to
linearize for text browsers and SE, as you mention. He does nice work.

--
-bts
-This space intentionally left blank.
Jul 21 '05 #5

P: n/a
On Sun, 03 Apr 2005 19:24:24 GMT, Beauregard T. Shagnasty wrote:
Greg Schmidt wrote:
Now that you have that working, try putting the #navigate after
#main in the HTML. It might still work, though the footer may
cause problems. If the look is still the same, then there is no
downside, and your site will probably work better for text browsers
and search engines.


Ben has a "3 Column & Footer" referenced there as well, which should
explain how to add a footer, in between the content and the menu HTML.
His templates seem to do well just about everywhere, and shows how to
linearize for text browsers and SE, as you mention. He does nice work.


Yeah, putting the footer between the content and the menu was the
compromise I've reached on some of my pages. I consider it a compromise
because it makes more sense to me, structurally, to have
content->menu->footer instead of content->footer->menu (although I guess
this depends on what is in the footer on a given page) but every other
method I tried involved a bigger compromise or else outright display
problems.

--
Greg Schmidt gr***@trawna.com
Trawna Publications http://www.trawna.com/
Jul 21 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.