Web Design Forum: Eskymo - Viewing Profile - Web Design Forum

I managed to find this snippet of code on http://www.w3schools.com here:

http://www.w3schools...ryjs_selectmenu

Implemented it and it works just fine - just had to add action="" to the form tag to get the page to validate.

Renaissance-Design, on 03 February 2012 - 04:14 PM, said:

you're so right - thanks for the reminder... I would've spotted that on validation though. Will go change that over. Cheers!

Don't know if this is overkill, but I've added left and right ids to my list elements like so:

<div id="navigation-area">
	<ul id="nav">
		<li id="lt"><a href="http://www.google.com">About</a></li>
		<li id="rt"><a href="http://www.google.com">Locations</a></li>
		<li id="lt"><a href="http://www.google.com">Products</a></li>
		<li id="rt"><a href="http://www.google.com">Development</a></li>
		<li id="nav-wide"><a href="http://www.google.com">Community Involvement</a></li>
		<li id="lt"><a href="http://www.google.com">Partnering</a></li>
		<li id="rt"><a href="http://www.google.com">Careers</a></li>
		<li id="lt"><a href="http://www.google.com">Media Centre</a></li>
		<li id="rt" class="last"><a href="http://www.google.com">Contact</a></li>
	</ul>
	<div class="clearboth"></div>
</div> <!-- END navigation-area -->

and this is my new css for teh small screen displays:

#navigation-area {
    width: 91%;
	margin: 0 auto;
	padding: 20px 0px 0px 0px;
	text-align:center;
}
#nav li {
	list-style-type: none;
	padding: 5px 0px;
	margin: 0px 0px 3px 0px;
	font-weight:bold;
	font-size: 0.75em; /* 12px/16px */
	color: #ffffff;
	background:#141D5A;
	width: 49.5%;
}
#nav li#nav-wide {width: 100%; padding: 5px 0px; float: left;}
#nav li#lt {float: left;}
#nav li#rt {float: right;}
#nav li.last {padding: 5px 0px;}
#nav li a:link, #nav li a:visited { color: #ffffff; text-decoration: none; }

And that work a treat. but it all looks a bit wide in landscape mode, so might have to do another media query for that and make it three columns... maybe that's overkill too.

Renaissance-Design, on 03 February 2012 - 03:18 PM, said:

Oh I see what you're getting at - done it, but now struggling with the widths and margins in between the lists and getting them all the line up on both left and right edges.

Renaissance-Design, on 03 February 2012 - 03:15 PM, said:

what do you mean by that? don't understand?