<li> menu <li> with <form> in it wraps.. how to stop this?

leatherback

Hi All,

For a new site that I am building, I am struggeling to make a css top menu work.

The basic parts work:

<div id="header-menu">    

      <ul><li><a href="http://localhost/cookseasonal/current/">Home</a></li>||<li><a href="http://localhost/cookseasonal/current/users.php">Users</a></li>||<li><span class="current">My Kitchen</span></li><li>

  <ul class="lgn">
  <form action="/cookseasonal/current/my/index.php" method="post">
  <li>
    <input type="text" class="formel_1" name="username">
  </li><li>
    <input type="password" class="formel_1" name="access">
  </li><li>
    <input type="hidden" name="one" value="1"><input type ="submit" class="formel_1" value="login">

  </li>
  </form></ul></li></ul>        

    </div>

met css

div#header-menu ul.lgn li input,ul.lgn form
	{
	display: inline;
	width: 70px;
	border: solid 1px;
	}

#header-menu li, #header-menu2 li
	{
	padding: 	0.1em;
	list-style:	none;	
	display: 	inline;
	margin: 	0.1em;
	}

However, the form keeps flipping to the next line. I tried removing the separate ,ul> for the form, but that does not work.

Anybody some suggestions how to make the form behave?

Cheers!

[edit] I have placed the page online with the error in it on www.cookseasonal.com/my/index.php [/edit]

bpat1434

The <ul> is a block-level element I believe. So it acts just like a <p> or <div> element. It wants to have it's own "line" to be on. In order to override this you need to tell the <ul class="lgn"> to be displayed: inline; 🙂 Once that's done, it will be on the same line as the rest of the links.

Here's a screenshot of what it looks like (attached). Also, I gave you the inline-css which makes it work 😉

leatherback

Hi Bpat,

That looks excellent but.. It does not seem to work for me. I edited the css for the menu, but in firefox (V2) and IE I still have the wrapping form. Do you think you could pop me the code that you used?

Cheers,

Jelle.

PS: What is the editor you are using? Looks useful..

bpat1434

You need to edit the #header-menu ul, #header-menu2 ul element to add the "display:inline;padding-left:0;" 😉

EDIT The editor I use isn't really an editor. It's an extension called Firebug. You can browse the source, edit the source, and execute JS on any page. It needs to be disabled on certain sites (or optimized for them) but it works real well. I also use the Web Developer Toolbar to help point out where things are and how large they are. Two fantastic extensions that you probably should use when developing a site.

<--- Woo hoo!!! 6565 posts 🙂 (why that's interesting, I don't know....)

leatherback

Hi BPat,

I appreciate the help. Unfortunately, what you tell me, to change the ul's to inline / padding-left0 does not do anything here.

The screenshot you showed.. Do you think you could send me the code so I can have a look and see where my code is off?

Cheers,

Jelle

bpat1434

That is all the code I did. I didn't download anything, change anything or whatever. All i did was add remove the padding-left and make the <ul> elements display inline. Can you post your CSS and HTML here? It seems your page is now gone 🙁