Forum Moderators: not2easy
I'm building a site for a local hospital, using HTML4.01 Strict and CSS for style and layout. I've implemented a left sidebar menu but I have two problems with it:
1) I want all the menu 'buttons' (really just stylised <A>'s) to be the same height, but this means n the buttons with a single line of text that the text sits at the top of the button - how can I get the text to appear in the center? (i.e. centered vertically)
2) the menu only fills the window. If the main body text is long enough that it needs to scroll then it reaches below the bottom of the menu and wraps around it. How can I make the menu height equal 100% of the page (rather than 100% of the window)?
<snip>
Thanks for your help,
GrahamS
[edited by: Nick_W at 8:39 am (utc) on Mar. 8, 2003]
[edit reason] no urls please [/edit]
I suppose the best thing I could come up with (without resorting to container divs: which ruin your hover effect)
is to make padding: 10px 0px; (or whatever you want for a reasonable border around your text) and to remove your height specifier.
This creates slightly varying sized "buttons", but I can't really think of much else right now ;)
Also, about your other question: how to extend the navigation. I guess you're using a div for the navigation, right?
Well, you can always "fake" that the menu extends.
For the navigation div, set z-index to, say, 60. Create a new div, and give it the following styles:
position: absolute;
bottom: 0px;
left: 0px;
z-index: 55;
height: 100%;
width: (same as width of nav div);
Apply background too, if applicable. This will cause a div, with the same color and width, to reside behind your navigation div at all times.
Is the navigation floated left then? Maybe you can position it instead, and apply a right padding to the page?
Basically my CSS looks like...
div.sitebody {
padding-top: 30px;
}
#sitemenu {
float: left;
padding-top: 30px;
color: #ffffff;
background-color: #0800ce;
margin-right: 10px;
text-align: center;
width: 124px;
height: 100%;
}
#sitemenu div.menuborder {
border-top: 1px solid #000070;
border-bottom: 1px solid #0000f0;
}
#sitemenu a {
color: #efefff;
background-color: transparent;
font-family: Verdana, Arial, sans-serif;
font-size: 70%;
font-weight: bold;
display: block;
text-decoration: none;
border-top: 1px solid #0000f0;
border-left: 1px solid #0000f0;
border-bottom: 1px solid #000070;
border-right: 1px solid #000070;
padding: 2px 5px 2px 5px;
margin: 0px;
height: 30px;
}
#sitemenu a:hover {
color: white;
background-color: #0000a6;
text-decoration: none;
}
and the HTML looks something like this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" media="all" href="menu_example.css" type="text/css">
</head><body>
<div id="sitemenu">
<div class="menuborder">
<a href="404.html">Welcome</a>
<a href="404.html">Information for Patients</a>
<a href="404.html">Visiting Friends and Family</a>
<a href="404.html">Maps and Directions</a>
<a href="404.html">Meet the Doctors</a>
<a href="404.html">About the Hospital</a>
<a href="404.html">Contact Us</a>
</div>
</div>
<div class="sitebody">
<h1>Welcome</h1>
<p>blah</p>
</div>
</body>
</html>
So the problems are that the menu items that appear on one line are not centered within the anchor (which is displayed as a block). but the more important problem is that if there is a lot of text in the sitebody (e.g. extend 'blah' to be a lot more text) then the menu doesn't go all the way down.
SethCall: Yeah, I got as far as the padding as well. A reasonable solution but I'd prefer the menu buttons to be the same height as possible - and I'd prefer not to specify the menu font size as an absolute value since i'd like it to respond to changes in text size properly.
DrDoc: setting height to 100% means it is only as tall as the window. But that's not good if the sitebody goes off the bottom of the window - I want the menu to be as big as the site body and at least as tall as the window.
Thanks for your help,
GrahamS
Again, try positioning the #sitemenu and #sitebody divs (absolute positioning)
Add a new div (call it whatever you want) and give it the styles in my previous post. :)
re: the 2 column layout
a tip here would be to make your whole page have the blue background, then make your content section have a white background with a margin-left to clear the menu and padding as required.
Suzy
SuzyUK: yeah.. that could be a solution, but it makes it harder to put any kind of nice background in the menu bar (the real version of this has a nice 'rolled edge' effect on the right side) and again it requires the menu to be a set width.
Seth: Using images means users wouldn't be able to increase the size of the text on the menu. Plus it would mean using Javscript for the rollovers.
Perhaps I just need to accept some compromise here. The reason I'm trying so hard to allow users to choose font size is its a hospital website and it needs to be as accessible as possible. I also intend to offer multiple stylesheets (big text, high contrast and all that).
Thanks again
GrahamS
