Page 1 of 1

LI issue

Posted: Sun Aug 13, 2006 4:31 pm
by alex.barylski
Edit: I remember what Astions said about setting width on inlined elements...but setting the LI's as float makes it lok ugly (probably fied with padding) but also, when the first element is width to 100% it pushes the other AGAIN onto a new line...

I'm using a DIV and UL to emulate a table and TD's:

Code: Select all

<form action="scripts/signin.php" method="post">
  <div id="user_menu">
    <ul>
      <li>
        <div style="position: absolute; top: 4px; left: 4px; height: 23px">
          This is a test
        </div>
      </li>
      <li><label for="email">Login</label></li>
      <li><input class="input_text" type="text" size="15" name="email" id="email" value="email@domain.com" /></li>
      <li><span>&raquo;</span></li>
      <li><input class="input_text" type="password" size="8" name="pass" value="test" /></li>
      <li><input type="submit" value="Go" /></li>
      <li><a class="ad_link" href="?page=resetpwd">Lost your password?</a></li>
    </ul>
  </div>
</form>
and here is my CSS:

Code: Select all

#user_menu {
	width: 100%;
	height: 23px;

	font-size: 9pt; 
	background-image: url('../images/layout/user_menu_bkgnd.png');
}

#user_menu input {
	position: relative;
	top: 1px;
}

#user_menu ul {
	margin: 0px;
	padding: 0px;

	text-align: right;
	white-space: nowrap;
}
#user_menu li {
	padding-top: 2px;

	display: inline;
	list-style-type: none;
}
The problem I am having now, is...the second DIV which is inside the first LI I want to be left aligned, while the others are right aligned...

I want the above to emulate this exactly:

Code: Select all

<table width="100%">
  <td width="100%">First column</td>
  <td><input></td>
  <td><input></td>
  <td><input></td>
</table>
The problem is, the inlined CSS for the first LI i have for the DIV works, but when resized, the content from the other LI's overlaps the first, which isn't desired...

And if I use float and inline techniques, when resized the content from all the other LI's (excluding the first) break onto a new line???

Anyone have any ideas of how to fix this and acheivee desired result???

Posted: Sun Aug 13, 2006 7:01 pm
by RobertGonzalez
To keep things from changing size when the window is resized you need to specify a fixed measurement. At least that is the only way I know to do it. Typically, I will set a fixed width on the element I want to stay the fixed size, and make everything else relative to that element so everything else will resize, but the one thing I want to stay consistent stays consistent.

Posted: Sun Aug 13, 2006 7:35 pm
by blackbeard
On the inner div tag, try text-align: right;

Posted: Mon Aug 14, 2006 1:59 am
by matthijs
Still struggling with the same menu? Maybe we should break it down and start from scratch. As I understand it, you want a:
- topbar which is 100% wide
- in the topbar some text on the left side
- in the topbar a navigation list to the right
Correct?

Now I would do something like this: start with a header block. 100% wide. Inside that block, you have a textblock with almost 50% width floated to the left and another block (again almost 50%) floated to the right. Inside the right block you have the form elements. Something like this:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
* {margin:0;padding:0;}
#header {width:100%;background:yellow;}
#header h3 {width:45%;float:left; }
#header #user_menu {width:50%;float:right;}
#user_menu ul {list-style-type:none;}
#user_menu ul li {float:left;}

-->
</style>
</head>
<body>
<div id="header">

<h3>This is a test</h3>

<form action="scripts/signin.php" method="post" id="user_menu">

    <ul>

      <li><label for="email">Login</label></li>
      <li><input class="input_text" type="text" size="15" name="email" id="email" value="email@domain.com" /></li>
      <li><span>&raquo;</span></li>
      <li><input class="input_text" type="password" size="8" name="pass" value="test" /></li>
      <li><input type="submit" value="Go" /></li>
      <li><a class="ad_link" href="?page=resetpwd">Lost your password?</a></li>
    </ul>
 
</form>
</div>
</body>
</html>
Now this is the basics. Works in FF and IE6. Now you can fill in the details of all the elements inside the 2 main blocks. As long as you make sure not to influence the parent blocks, you'll keep the basic layout fine. So don't give the ul inside the form a width, certainly not bigger then the form. Really, try to keep your code as clean as possible. Only add one tiny thing at a time. Often problems with positioning and floats have to do with elements and children and parents of those having too many widths, margins, paddings etc.

In this case, I would just style the h3 a bit (or whatever element you choose. could also be a div with a p) and the label and input elements. Hope this helps.