Making the top menu adjustable

[Water]

Hi,I've got a test website here:http://cannygood.vacau.com/testside2.phpIt mostly seems to work as planned so far however when I make the window smaller the navigation buttons overlap each other and become unreadable.Is there anyway I can make them like the text box so that they fit into the window or even, just stay like the banner and keep their old size?

[thescientist]

you can define a width for the container element that the menu is in. i.e.

#navvy{  width: 500px; //or whatever width works}

[Water]

Hi, thanks, sorry, really really long time since I posted, only just getting back into messing with websites now though, was distracted.So I've tried the bit of code you said but the trouble is it seems to have decentralised the menu. Anyway to concile the width and centre?

[cousineaug]

Is there anyway I can make them like the text box so that they fit into the window or even, just stay like the banner and keep their old size?

You say fit-in-the-window. That can mean several things.1- you can enclose the "navvy" in a DIV of fixed width like the scientist suggests. This means that on a narrow browser, the navigation will disappear off the page like the header picture.2- if you prefer to have the menu wrap to two lines, you can do that by assigning the elements a combination of height-margin-padding that is compatible. try adding a line height to "navvy li a". Because you are displaying inline you lose the ability to add BLOCK level attributes. However, a line height of 40 or 50 px will allow your menu to wrap over 2 lines without overlap. Remember to check in all major browsers.also-always validate your code. I see a close UL but no open UL....that will lead to problems....Guy

[Water]

I've tried various ways of putting line height or height into the css but none will stick :sWhere should it go?

[dsonesuk]

The minimum screen res width to allow for is 1024px, in most cases a web page minimum width will be 960px; to allow for scrollbars, and default margins on body element.so with this in mind

#navvy{   width: 960px; 	 margin: 0 auto; }

ORyou could use min-width:960px; but note ie6 does not support this

#navvy{   min-width: 960px; 	 }

it may be a better option to use a outer container usually referred to as a 'wrapper' and use this styling, as by using this only on the navigation, some elements will slide out of view on the left, instead of stopping as the left edge of an element reaches left of screen. whereas by using this on the wrapper container it would prevent this on all the main container elements .

[Water]

Thanks dsone, that works, keeps it the same size all the time.I think having it cascading could be better, going to try and figure that out, but that worls.

[cousineaug]

Thanks dsone, that works, keeps it the same size all the time.I think having it cascading could be better, going to try and figure that out, but that worls.

I have come to the conclusion that people don't read :-)I believe you would like the menu items to wrap on a narrow screen. I suggested the other day to add a line height to "navvy li a" but I guess you did not see that point. Here are the few first lines of your CSS.

body{background-color:#FFFFCC;}#banner{margin:auto;width:70%;image-align: center;}#navvy{/* width: 1000px; */margin: 0 auto;}#navvy li {line-height: 200%background-position: center;list-style: none;	display:inline;}#navvy li a {padding:12px;line-height:	50px;	/* make line height so as to allow wrapping on narrow screens*/background:#3062ff;margin-right:2px;color:white;	text-decoration:none}

I took out the width 1000 on 'navvy' and added a line height of 50px on '#navvy li a'Now the menu goes to 2 lines on a narrower screen . . . QED

[dsonesuk]

The only problem with that is the buttons will break up to smaller sections for individual words.another option is to use block for anchor, add margin at bottom ( about 5px) so buttons will lie directly below each over, without breaking up. after tidy up your code so it validates, add using relative position,which i have used before to centre fluid width menus, i came up with this.css

body{background-color:#FFFFCC;}#wrapper{text-align:center;}#banner{margin:auto;width:70%;text-align: center;}#navvy{clear:both; float:left; width:100%; overflow:hidden;margin:22px 0;}#navvy ul{position:relative; left:50%;float:left; list-style-type:none; padding:0; margin:0 auto;}  #navvy li {list-style: none;	float:left; position:relative; right:50%;}#navvy li a {padding:12px;background:#3062ff;margin:3px;color:white;	text-decoration:none;width:auto;display:block;}#navvy li a.active{background:grey;color:#FFFF00;text-decoration: underline;font-weight:bold;}#navvy li a:hover {background:orange;color:black;}#content{margin:auto;width:70%;background-color:#b0e0e6;text-align: left;font-size:12pt;font-weight:bold;clear:both;}p.serif{font-family:Georgia,serif;border-style:solid;border-width:medium;}

html or php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Test Site</title><link rel="stylesheet" type="text/css" href="csstest.css"> </head> <body> <div id="wrapper"> <img src="logo.jpg" alt=""> <div id="navvy">  <ul>			<li><a href="testside2.php" class="active">PAGE 1</a></li>			<li><a href="tester2.php">PAGE 2</a></li>			<li><a href="http://www.wikipedia.org">WIKI</a></li>			<li><a href="http://www.wikipedia.org">WIKI2</a></li>			<li><a href="http://www.wikipedia.org">WIKI3</a></li>			<li><a href="http://www.wikipedia.org">WIKI4</a></li>			<li><a href="mailto:c.tallentire@gmail.com">CONTACT</a></li>			<li><a href="http://cannygood.vacau.com">BACK TO HOME</a></li>		</ul>	  </div><div id="content">  <p>What follows is gibberish so as to bulk up the page, fetched via wikipedia's random page button.. Eric T. Washington is the Chief Judge of the District of Columbia Court of Appeals, the highest appellate court for the District of Columbia.Chief Judge Eric T. Washington, born in December 1953[1], was appointed to the D.C. Court of Appeals in 1999 by President Bill Clinton. The District of Columbia Judicial Nominations Commission designated Chief Judge Washington to serve a four-year term as Chief Judge of the District of Columbia Court of Appeals beginning on August 6, 2005.Chief Judge Washington was born and raised in New Jersey. He graduated in 1976 from Tufts University and received his law degree from the Columbia University School of Law in 1979.In 1979, Chief Judge Washington began his legal career with the law firm of Fulbright & Jaworski in Houston, Texas, where he engaged in a general labor and employment practice prior to relocating to Washington, D.C. to serve as Legislative Director and Counsel to U.S. Congressman Michael A. Andrews of Texas. He subsequently rejoined Fulbright & Jaworski in Washington, D.C. prior to serving as Special Counsel to the Corporation Counsel (now Attorney General for the District of Columbia) and later as Principal Deputy Corporation Counsel between 1987 and 1989. From January 1990 to May 1995, Chief Judge Washington was a partner in the law firm of Hogan & Hartson, which concluded with his 1995 appointment to the Superior Court of the District of Columbia. As an Associate Judge in the Superior Court, he presided over various criminal trials as well as cases from the Drug Court, Domestic Violence Unit, tax and probate matters on certification from other judges, and cases involving children who were victims of abuse and neglect.Chief Judge Washington previously served as co-chair of the Strategic Planning Leadership Council for the District of Columbia Courts and as a member of the Standing Committee on Fairness and Access to the Courts, as well as the Access to Justice Commission.Chief Judge Washington has been active in many professional, civic and charitable organizations. He has served on several committees of the D.C. Bar, including the Criminal Justice Act/Counsel for Child Abuse and Neglect Committee, the Standing Committee on the Federal Judiciary, and the Bar’s Nominating Committee. He also served as a member of the Steering Committee for the D.C. Affairs Sections of the Bar.Chief Judge Washington presently serves on the Board of Directors for the Boys and Girls Clubs of Greater Washington and the Board of Directors for the Boys and Girls Clubs Foundation. He formerly served on the Board of Directors for the Einstein Institute for Science, Health and the Courts and currently serves as chair of the Board of Directors of the Advanced Science and Technology Adjudication Standards, Credential and Accreditation Board.</p></div></div></body></html>

[Water]

I have come to the conclusion that people don't read :-)I believe you would like the menu items to wrap on a narrow screen. I suggested the other day to add a line height to "navvy li a" but I guess you did not see that point. Here are the few first lines of your CSS.

I saw, just couldn't figure it out!Thanks for this, will have a play with what you posted.

[cousineaug]

I saw, just couldn't figure it out!Thanks for this, will have a play with what you posted.

ok no problem....as for the words breaking up, if you stay with the current layout, you have at least two choices: 1 you can write BACK TO HOME as

BACK TO HOME

so the entire "link" wraps when it needs to or 2 you can use the white space propertysee www.w3schools.com/CSS/pr_text_white-space.aspNow as a personal preference, floating elements as dsonesuk has worked out for you is more elegant.For an example of this in action, see my newly redesigned website.adjust the screen width on that page. then compare it to our other site where the menu is fixed.cheers....Guy