Top and left nav

**Daz** · Apr 19, 2004 09:24

Following on from this thread http://www.sitepoint.com/forums/showthread.php?t=164493 I'm encountering a similar problem with a new site I'm working on. Basically the layout is top nav and left nav but I want my content to extend to 100%.

The top nav is again an unordered list, if I use display inline the top links wrap when I minimise the window, I want them to remain in place. To achieve this the only method I can find is to float them and use display block. This is ok up to a point as when I resize the window again the whole div jumps down to below the left nav. Here's the offending css and html

Code:

#wrapper {
 width: 100%;
}
#left {
 float: left;
 width: 116px;
}
#left ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border-right: 1px solid #2D5BB1;
}
#left li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border-bottom: 1px solid #2D5BB1;
}
#right {
 margin-left: 130px;
}
#topmenu ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#topmenu li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 display: inline;
}
.spacer {
 clear: both;
}

Code:

 
<body>
<div id="wrapper">
<div id="left">
 <img src="pics/image1.gif" width="116" height="95" alt="" /><br />
 <h2 class="menuhead"><span></span>Menu</h2>
 <ul>
  <li><a href="/curriculum/">Curriculum</a></li>
  <li><a href="/starting/">Starting at Ballykeigle</a></li>
  <li><a href="/timetable/">Timetable</a></li>
  <li><a href="/childprotection-policy/">Child Protection Policy</a></li>
  <li><a href="/admissions-policy/">Admissions Policy</a></li>
  <li><a href="/uniform/">Uniform</a></li>
 </ul>
</div>
<div id="right">
 <div id="topmenu">
 <ul>
  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
 </ul>
 </div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a dolor vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies id, porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. Duis cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit vel, pellentesque id, auctor at, massa. Donec in est sed sem adipiscing tempus. Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque odio velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
</div>
</div>
<div class="spacer">&nbsp;</div>

**doctornick** · Apr 19, 2004 10:10

How do,

If you read what is written at

http://www.w3.org/TR/REC-CSS2/text.h...ite-space-prop

about white-space then you can apply this to your list style to prevent it from wrapping.

Note that this only applies to elements with display: block; . So your list style should look like:

}
#topmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
white-space: nowrap;
}

Hope this helps =)

**Daz** · Apr 19, 2004 12:36

Makes sense but I tried and it didn't help

**Paul O'B** · Apr 19, 2004 13:50

Hi,

This is probably going to make things a bit too complicated but you could get around it by floating the right content first so that it won't drop below the left.

Something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#wrapper {
 width: 100%;
}
#left {
 float: left;
 width: 116px;
margin-left:-130px;
margin-right:-3px; 
display:inline;
position:relative;
}
#left ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border-right: 1px solid #2D5BB1;
}
#left li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border-bottom: 1px solid #2D5BB1;
}
#right {
margin-left: 130px;
height:1%;
position:relative;
}
#rightinner {float:right;width:99%}
#topmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
white-space: nowrap;
}
#topmenu li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 display: inline;
}
.spacer {
 clear: both;
}
</style>
</head>
<body>
<div id="wrapper"> 
  <div id="right"> 
	<div id="rightinner"> 
	  <div id="topmenu"> 
		<ul>
		  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
		  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
		  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
		  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
		</ul>
	  </div>
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. 
		Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum 
		et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a 
		dolor vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies 
		id, porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. 
		Duis cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit 
		vel, pellentesque id, auctor at, massa. Donec in est sed sem adipiscing 
		tempus. Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque 
		odio velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
	</div>
	<div id="left"> <img src="/pics/image1.gif" width="116" height="95" alt="" /><br />
	  <h2 class="menuhead"><span></span>Menu</h2>
	  <ul>
		<li><a href="/curriculum/">Curriculum</a></li>
		<li><a href="/starting/">Starting at Ballykeigle</a></li>
		<li><a href="/timetable/">Timetable</a></li>
		<li><a href="/childprotection-policy/">Child Protection Policy</a></li>
		<li><a href="/admissions-policy/">Admissions Policy</a></li>
		<li><a href="/uniform/">Uniform</a></li>
	  </ul>
	</div>
  </div>
</div>
<div class="spacer">&nbsp;</div>
</body>
</html>

Paul

**Daz** · Apr 19, 2004 14:15

Thanks Paul, do you reckon that's the only solution? It's too much of a compromise I think. Maybe I should just revert to dreaded tables, I'm beginning to think maybe they're not so bad after all!!

**Paul O'B** · Apr 20, 2004 02:29

Thanks Paul, do you reckon that's the only solution? It's too much of a compromise I think.

Well there are probably other ways around it. Do you need the left column floated? The easiest solution is to place the left column absolutely and then you don't get a floatdrop on the right content.

This only presents a problem if you want a full width footer but if you don't need that then its an easy solution.

Another way would be to place the top menu absolutely and fix it in place. Then you could just use a margin-top on your content to clear it.

Another way is to float your right content (first in the html) but that means you would need to give it a width.

The problem is that you want a fluid layout but you don't want a fluid layout lol. You want to fix the menu in place but you want the rest of the page to be fluid.

I don't see tables as an easier solution because they have their own problems and are just as hard (for me) to implement.

Do you have the page online (is it the same one as the other thread)? If I could see what your whole page looks like I could make a better suggestion

Paul

**Daz** · Apr 20, 2004 04:02

Paul the page isn't online but I've just uploaded the work in progress to here

http://www.acquiweb.com/clients/ballykeigle/index.asp

For accessibility reasons I want the main menu to appear before the content which is why left should appear before right. You are right, I do want a fixed width so far as the menu is concerned but ideally I want the content below that to be fluid!

Bearing in mind that this site is for my daughter's school (a freebie!) it's important that the layout is as rigid as possible. I don't see them having the latest version of Moz or IE.

**Paul O'B** · Apr 20, 2004 04:20

Hi Daz,

Well the simplest solution is just to absolutely place the top nav as follows.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ballykeigle Primary School</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style>
/* Type CSS rules here and they will be applied
to pages from 'editcss'
immediately as long as you keep this window open. */
/**** LINK-tag style sheet screen.css ****/
body {
 margin: 0px;
 padding: 0px;
 background-color: #ffffff;
 font-family: verdana, arial, sans-serif;
 font-size: 82%;
 color: #000000;
}
p, li, td, address {
 font-family: verdana, arial, sans-serif;
 font-size: 1.0em;
 font-style: normal;
 color: #000000;
}
#wrapper {
 width: 100%;
}
#left {
 float: left;
 width: 116px;
}
.menuhead, .menuhead span {
 width : 116px; 
 height : 24px;
 background-image : url(../pics/menu.gif);
 background-repeat : no-repeat;
}
.menuhead span { margin-bottom: -24px; }
/* This code needs to appear only once in a style-sheet */
h2 span 
{
 display : block;
 position : relative;
 z-index : 1;
}
#left h2 {
 margin: 0;
 padding: 0;
 color: #ffffff;
 font-size: 1.0em;
}
#left ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border-right: 1px solid #2D5BB1;
}
#left li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 border-bottom: 1px solid #2D5BB1;
}
#left li a {
 padding: 0.3em;
 display: block;
 font-size: 0.8em;
}
#left li a:link {
 color: #2D5BB1;
 text-decoration: none;
}
#left li a:visited {
 color: #000;
 text-decoration: none;
}
#left li a:hover {
 background-color: #eee;
 color: #000;
 text-decoration: underline;
}
#right {
 margin-left: 130px;
 margin-top:40px;
}
#topmenu {
 position:absolute;
 left:150px;
 top:0;
 width: 630px;
 
}
#topmenu ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#topmenu li {
 margin: 0;
 padding: 0;
 list-style-type: none;
 display: inline;
}
.spacer {
 clear: both;
}
 

</style>
</head>
<body>
<div id="wrapper"> 
  <div id="left"> <img src="pics/image1.gif" width="116" height="95" alt="" /><br />
	<h2 class="menuhead"><span></span>Menu</h2>
	<ul>
	  <li><a href="/curriculum/">Curriculum</a></li>
	  <li><a href="/starting/">Starting at Ballykeigle</a></li>
	  <li><a href="/timetable/">Timetable</a></li>
	  <li><a href="/childprotection-policy/">Child Protection Policy</a></li>
	  <li><a href="/admissions-policy/">Admissions Policy</a></li>
	  <li><a href="/uniform/">Uniform</a></li>
	</ul>
  </div>
  <div id="right"> 
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. 
	  Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum 
	  et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a dolor 
	  vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies id, 
	  porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. Duis 
	  cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit vel, 
	  pellentesque id, auctor at, massa. Donec in est sed sem adipiscing tempus. 
	  Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque odio 
	  velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. 
	  Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum 
	  et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a dolor 
	  vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies id, 
	  porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. Duis 
	  cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit vel, 
	  pellentesque id, auctor at, massa. Donec in est sed sem adipiscing tempus. 
	  Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque odio 
	  velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis at lorem. 
	  Pellentesque gravida. In eros mauris, fermentum pharetra, semper in, rutrum 
	  et, ante. Quisque suscipit. Pellentesque volutpat leo ac magna. Duis a dolor 
	  vitae nulla varius eleifend. Sed odio nisl, hendrerit nec, ultricies id, 
	  porta eget, orci. Quisque tristique tristique eros. Vivamus vel nisl. Duis 
	  cursus. Integer porttitor. Donec turpis. Quisque libero pede, blandit vel, 
	  pellentesque id, auctor at, massa. Donec in est sed sem adipiscing tempus. 
	  Aliquam ac turpis. Nulla nisl. Nulla cursus. In elementum. Quisque odio 
	  velit, pharetra a, nonummy quis, fringilla nec, sapien.</p>
  </div>
</div>
<div class="spacer">&nbsp;</div>
<div id="footer"></div>
 <div id="topmenu">
 <ul>
  <li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li><li><img src="pics/home.gif" width="133" height="23" alt="Return to the homepage" /></li>
 </ul>
 </div>
</body>
</html>

Hardly any changes necessary with this method (changes are marked in bold and you can adjust the positions to fit).

Paul

**Paul O'B** · Apr 20, 2004 04:23

Originally Posted by daz

For accessibility reasons I want the main menu to appear before the content which is why left should appear before right

General opinion is that content should come first for better accessibility as the screen reader will have to read the nav on every page it visits.

However the problem can be easily solved by adding skip nav and skip to content links etc and then it doesn't really matter. (Apart from the fact that search engines like content first but thats a different issue

)

Paul

User Tag List

Thread: Top and left nav

Thread Tools

Display

Top and left nav

Bookmarks

Bookmarks

Posting Permissions