LI issue
Posted: Sun Aug 13, 2006 4:31 pm
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:
and here is my CSS:
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:
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???
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>»</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>
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;
}
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>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???