In the screenshot that is linked, you'll notice that the vertical
alignment of the two dropdown menus and two input buttons is
incorrect. They are at the right side.
I've applied a tag style to the select tag. This isn't working. And
there is a class style on the input buttons. Which is not working
either.
Float right works for horizontal alignment and that is how I've got
the forms at right set up. It's the vertical alignment that is keeping
me up at night.
Jeremy
On Wed, Apr 30, 2008 at 12:23 PM, Andrew Doades <[EMAIL PROTECTED]> wrote:
> Not entirely sure what you are asking here?
>
> When I look at your screen print, it looks ok in IE.
> I think something like float:right;
> is what you want??
>
>
>
> Andrew
>
> [EMAIL PROTECTED] wrote:
> > Thank you, Andrew! I'll definitely try this out.
> >
> > Another area of concern is with the right-side form elements. They are
> > not aligning properly and nothing I've tried has worked.
> >
> > Any advice in solving this issue as well would be appreciated.
> >
> > Jeremy
> >
> >
> >
> >
> > On Wed, Apr 30, 2008 at 12:05 PM, Andrew Doades <[EMAIL PROTECTED]> wrote:
> >
> >
> > > Not being a big knowledge man of css but I would have thought you would
> > > need, <ul> and <li> in there?
> > > <ul>
> > > <li><a href="index.php">Home</a></li>
> > > <li>a href="complete.php">Browse All Titles</a></li>
> > > </ul>
> > >
> > > and in your css have something like
> > > #nav ul {
> > > margin-left: 2em;
> > > padding-left: 0;
> > > color: #000000;
> > > }
> > >
> > > Andrew
> > >
> > > [EMAIL PROTECTED] wrote:
> > >
> > >
> > > >
> > > > I'm new to CSS. But I need to position four form elements in a very
> > > > thin nav bar. Here is my HTML code:
> > > >
> > > > <div id="nav">
> > > > <div id="nav_left">
> > > > <a href="index.php">Home</a> |<a href="complete.php">
> > > > Browse All Titles</a> | <a href="author.php">About Author</a></div>
> > > > <div id="bookmark"><table width="307" border="0"
> > > > cellspacing="0" cellpadding="0">
> > > > <tr>
> > > > <td width="64" valign="middle">Browse by</td>
> > > > <td width="113" valign="middle"><form action="" method="get">
> > > > Title
> > > > <select name="var" size="1">
> > > >
> > > > <option value="A">A</option>
> > > >
> > > > <option value="B">B</option>
> > > >
> > > > <option value="C">C</option>
> > > >
> > > > <option value="E">E</option>
> > > >
> > > > <option value="F">F</option>
> > > >
> > > > <option value="G">G</option>
> > > >
> > > > <option value="H">H</option>
> > > >
> > > > <option value="I">I</option>
> > > >
> > > > <option value="J">J</option>
> > > >
> > > > <option value="K">K</option>
> > > >
> > > > <option value="L">L</option>
> > > >
> > > > <option value="M">M</option>
> > > >
> > > > <option value="N">N</option>
> > > >
> > > > <option value="O">O</option>
> > > >
> > > > <option value="P">P</option>
> > > >
> > > > <option value="Q">Q</option>
> > > >
> > > > <option value="R">R</option>
> > > >
> > > > <option value="S">S</option>
> > > >
> > > > <option value="T">T</option>
> > > >
> > > > <option value="U">U</option>
> > > >
> > > > <option value="V">V</option>
> > > >
> > > > <option value="W">W</option>
> > > >
> > > > <option value="X">X</option>
> > > >
> > > > <option value="Y">Y</option>
> > > >
> > > > <option value="Z">Z</option>
> > > >
> > > > <option value="1">1</option>
> > > >
> > > > <option value="2">2</option>
> > > >
> > > > <option value="3">3</option>
> > > >
> > > > <option value="4">4</option>
> > > >
> > > > <option value="5">5</option>
> > > >
> > > > <option value="6">6</option>
> > > >
> > > > <option value="7">7</option>
> > > >
> > > > <option value="8">8</option>
> > > >
> > > > <option value="9">9</option>
> > > >
> > > > <option value="0">0</option>
> > > >
> > > > </select><input type="image" class="inputbutton"
> > > > src="img/input.jpg" alt="" width="15" height="15">
> > > > </form></td><td width="123" valign="middle"><form action=""
> > > > method="get">Decade <select name="var" size="1">
> > > >
> > > > <option value="1950">1950s</option>
> > > >
> > > > <option value="1960">1960s</option>
> > > >
> > > > <option value="1970">1970s</option>
> > > >
> > > > <option value="1980">1980s</option>
> > > >
> > > > <option value="1990">1990s</option>
> > > >
> > > > <option value="2000">2000s</option>
> > > > </select><input type="image" class="inputbutton"
> > > > src="img/input.jpg" alt="" width="15" height="15">
> > > > </form></td>
> > > > </tr>
> > > > </table>
> > > >
> > > > </div>
> > > > </div>
> > > >
> > > >
> > > > And here are the applicable styles:
> > > >
> > > >
> > > > #nav {
> > > > background-image: url(../img/navback.jpg);
> > > > background-repeat: no-repeat;
> > > > background-position: left top;
> > > > border: thin solid #7a8251;
> > > > height: 25px;
> > > > width: 771px;
> > > > }
> > > > #nav_left {
> > > > width: 400px;
> > > > float: left;
> > > > text-align: left;
> > > > padding-top: 5px;
> > > > padding-right: 5px;
> > > > padding-bottom: 7px;
> > > > padding-left: 5px;
> > > > }
> > > > #bookmark {
> > > > width: 300px;
> > > > float: right;
> > > > text-align: right;
> > > > display: inline;
> > > > padding-top: 5px;
> > > > padding-right: 3px;
> > > > padding-bottom: 5px;
> > > > }
> > > > .inputbutton {
> > > > margin-right: 3px;
> > > > margin-left: 3px;
> > > > }
> > > > select {
> > > > display: inline-table;
> > > > font-size: 75%;
> > > > padding: 0px;
> > > > }
> > > >
> > > >
> > > > But, the form elements are sitting low and not aligning as needed. The
> > > > input buttons are sitting too high.
> > > >
> > > > There is a screenshot at http://www.graiai.com/snap.jpg
> > > >
> > > > This is taken in Firefox on a Mac. On IE 7, the dropdowns sit even
> lower.
> > > >
> > > > I don't know what to do! Any ideas?
> > > >
> > > > Jeremy
> > > > ______________________________________________________________________
> > > > css-discuss [EMAIL PROTECTED]
> > > > http://www.css-discuss.org/mailman/listinfo/css-d
> > > > List wiki/FAQ -- http://css-discuss.incutio.com/
> > > > List policies -- http://css-discuss.org/policies.html
> > > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> > > >
> > > >
> > > >
> > > >
> > > >
> > >
> > ______________________________________________________________________
> > css-discuss [EMAIL PROTECTED]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
> >
> >
>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
