Forum Moderators: not2easy
I have been trying for a good two days, and find myself retrying the same things over and over. Time to call in some help..
I am building a website, with a header menu. Nothing special there:
<div id="header-menu">
<ul>
<li><a href="LINK/">Home</a></li>
<li><a href="ANOTHERLINK">Seasonality</a></li>
<li>
<ul class="lgn">
<form action="/search/index.php" method="post">
<li>
<input type="text" class="formel_1">
</li><li>
<input type="password" class="formel_1">
</li><li>
<input type ="submit" class="formel_1" value="login">
</li>
</form>
</ul>
</li>
</ul>
</div> the css:
/*list items in menu */
#header-menu ul,#header-menu2 ul
{
margin: 0px;
}
ul.lgn li input,ul.lgn form
{
display: inline;
width: 70px;
}
ul.lgn form
{
margin: 0px;
}
#header-menu li, #header-menu2 li
{
padding: 0.1em;
list-style:none;
display: inline;
margin: 0.1em;
}
/* Links in menu */
div#header-menu a , div#header-menu2 a, .current {
display: inline-block;
text-decoration: none;
width: auto;
padding: 0.1em 0.9em;
}
This works fine for the normal menu links. However, the login form wraps to the next line, although there is plenty of space for it to stay inline.
I am pretty sure this is a standard problem, however, I have been unable to find a solution.
Who can help me out please?
This problem occurs in FF and IE;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" encoding="UTF-8">
Jelle.
do you mind me asking why you put the form in the list? Presumably the list and links are the navigation and the form a login form of some sort and you want them to sit one next to the other.
Personally I would code it as follow:
<div id="header-menu">
<ul>
<li><a href="LINK/">Home</a></li>
<li><a href="ANOTHERLINK">Seasonality</a></li>
</ul>
<form action="/search/index.php" method="post">
<p><input type="text" class="formel_1"> <input type="password" class="formel_1"> <input type ="submit" class="formel_1" value="login">
</p>
</form>
<p class="clear"></p>
</div>
and have in my css something that resembles this:
#header-menu ul, #header-menu form{ width:49.5%; float left; }
#header-menu li{ display:inline; }
.clear{ clear:both; height:1px; margin:0; overflow:hidden; }
BTW, I am pretty sure for strict doctype you need <label> for your form elements. I also think that the form tag cannot be put inside an li tag because it's a block element
class="formel_1"
I believe le_gber is correct in regards to the <form> element. You'll probably need to move that to the beginning of that div.
Ehm.. i em.. Put it in the list to make it stay in line with the rest. I was getting pretty much annoyed with it, and I ended up trying whatever I could think of. Just been having a nighmare getting the whole layout css-based yet cross platform and cross browser while avoiding hacks. (Must admit I ended up with one hack for IE6 though :()
Will give this a try tonight and let you know how it goes.
J
I also think that the form tag cannot be put inside an li tag because it's a block element
just a fyi.. the form can go in a li, an <li> element can contain "flow" elements which are both block and inline
[edited by: SuzyUK at 3:50 pm (utc) on Feb. 20, 2008]
the form can be a child of the <li> but not the <ul> as you have it, only <li> elements can be children of <ul>
example of right place..
...<li>
<form action="/search/index.php" method="post"><ul class="lgn">
<li><inputs....></li>
</ul></form>
</li>......
but anyways even putting it in the right place, if you do want to keep it in the list format (it makes for quite a nice display when CSS is off ;)).. another answer would be for you to float the <li>'s instead of having them as inline, this keeps them as blocks and allows the form to resize to fit in it (not wrap to the next row), it also means you can make your links display:block; too so you get wider rollover areas..
Sample CSS:
#header-menu ul {
margin: 0;
padding: 0;
list-style: none;
}#header-menu li {
margin: 0.1em;
padding: 0.1em;
float: left;
}#header-menu li a {
display: block;
padding: 0.1em 0.9em;
text-decoration: none;
}#header-menu li form {
margin: 0;
padding: 0;
}#header-menu li input {width: 70px;}
Suzy: I tried floating the lists, but that caused my menubar to collapse, resulting in more changes than I care to look at at the moment :D
