1) When the user enlarges the font, the 1 pixel separator in the nav does
not extend to fill the vertical height of the nav bar.
2) The text input field and submit button (an image) are not vertically
aligned as per the graphic I provided.
Perhaps this (very draft, only tested to work in FFox) version might be closer to what you're after:
- it specifies side borders on the UL, and negative margins on LI so that the borders collapse
- all nav links are a fixed width, so that if they wrap to the next line, they look more uniform (is this what you mean by extending the separator vertically?)
- the right form is now positioned absolutely, so that it can remain in the center
- the nav has a 17em margin on the right, so that the form and the nav don't overlap.
-------------------------------------------------------------------------
<html>
<head>
<style>
body{margin:0;padding:0}
#navcontainer { background-color:#CD4130; color:White; float:left;position:relative;width:100%; font-family:arial, helvetica, sans-serif;}
#navcontainer ul { float:left;margin:0 17em 0 0;border-left:2px solid white;border-right:2px solid white;padding:0}
#navcontainer ul li { display:inline; }
#navcontainer ul li a { padding:0.2em 0;color:White;float:left;border:1px solid #fff; margin:-1px;width:6em;text-align:center}
#navcontainer ul li a:hover {background-color:#D65945;}
#navcontainer input {margin:0.2em;border:1px solid black}
#navcontainer form {display:inline;margin:-0.75em 0 0 0; top:50%;right:0;position:absolute}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="" id="current">Home</a></li>
<li><a href=""> <li><a href="" Us</a></li>
<li><a href="" Books</a></li>
<li><a href="" Feeds</a></li>
</ul>
<form><input type="text"><input type="submit"></form>
</div>
</body>
</html>
-------------------------------------------------------------------------
On 10/7/05, Ian Fenn <[EMAIL PROTECTED]> wrote:
Adam wrote:
> If you could provide some pages of your previous attempts, that would make
life easier for some of us, so we can see what you've tried so far, and what
is not a desired outcome.
Thanks for your help, Adam.
I've made a number of attempts. What I'm looking for really is examples of a
similar design which might have solved the issues I described.
> here's a basic one i did in invalid html
That's similar to one attempt I made.
The undesirable outcomes are:
1) When the user enlarges the font, the 1 pixel separator in the nav does
not extend to fill the vertical height of the nav bar.
2) The text input field and submit button (an image) are not vertically
aligned as per the graphic I provided.
I hope this helps.
All the best,
--
Ian
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
