Page 1 of 1

Inline Form

Posted: Fri Jun 28, 2013 1:15 am
by wrichards8
Can someone help me out? I have a horizontal navigation bar using the HTML5 <header> and <nav> tags. The navigation links only take up 25% of the bar that's created and I want to put a search form at the end. I have this code so far
header nav					{
											border: #FFFFFF thin solid;
										}
header nav ul				{							
											list-style: none;
											padding: 0;
											margin: 0;
											background: #000000;
										}
header nav li				{	
											padding-top: 3px;
											padding-bottom: 3px;
											padding-right: 3px;
											display: inline-block;
											color: #FFFFFF;
										}
header nav li a				{
											padding-left: 2px;
											padding-right: 2px;
											border: #FFFFFF medium solid;
											color: #FFFF00;
										}
header nav li a:active	{
											color: #FFFF00;
										}
header nav li a:hover	{
											color: #00FF00;
										}
form#search					{
											display: inline;
										}
form#search label 		{
											color: #FFFFFF;
										}
The problem is that my form appears underneath the nav bar, even though it is declared within the <nav> tag in my index.php, when in fact I want it at the end of it (to make best use of screen real estate)

Re: Inline Form

Posted: Fri Jun 28, 2013 5:33 pm
by wrichards8
I have worked it out now

Re: Inline Form

Posted: Sat Jun 29, 2013 1:08 am
by Helx
wrichards8 wrote:I have worked it out now
I would've helped you, but I just didn't know how to do it :oops:
Could you please share how you got it working?

Re: Inline Form

Posted: Sat Jun 29, 2013 1:43 am
by wrichards8
Yes, after playing around for a couple of days I thought "hang on, isn't <ul> a block level element" so I defined
nav ul { display: inline-block;}