I just realized i posted this in the html forum when it should be in the css forum.

Hello all,

I am a beginner with css and have some questions. If you look at the following page you can follow along with what I am trying to do.
http://www.youngamericangrowers.com/...der_search.asp
I have also attached an image (i think) of what I want this page to look like. Last night I got frustrated with div tags and decided to layout it out with tables. This morning I woke up and felt ugly for doing that so now I am attempting to convert it back to div tags.
I have a couple of issues right now.

#1. IN the Search for Plant section at the top I cannot figure out how to get the green arrow button to align vertically in the middle. I have tried putting a padding-top on the image itself but the pushes the entire line down instead of just the image.

#2 I need the advanced search list and current price links to align all the way to the right. I have tried to put a div within the main div that has a float right property on it but it pushes it to the next line. I then tried adding a diplay: inline property but that had no effect.

#3 After looking at the image do you think it is a wise idea to do this plant list/search page with div's or should I consider going to tables. I would prefer to do div's if it is possible.

Below is the code for the search section. I realize there are probably some css faux pas but let me know I what I am doing wrong.

Thank you.

<div style="padding-top:5px; padding-bottom:5px; position:relative;"><div class="boldText1" style="display:inline; padding-right:8px;">Search for Plants</div><input type="text" size="25" maxlength="50" id="search" name="search"><img src="../../../../_inc/images/btnSearchEnter.gif" style="display:inline; padding-left:3px;" alt="Search"><span class="searchLink" style="display:inline; padding-left:20px;">Advanced Search | Current Price List</span></div>

Hey Sam,

Here's the answers to your questions:

# 1. Put the button in its own class and then put the line height for that class smaller


# 2. Change this:

<div style="padding-top: 8px;">Username</div>
<div><input id="Username" name="Username" size="17" maxlength="15" type="text"></div>
<div style="padding-top: 3px;">Password</div>
<div><input id="Password" name="Password" size="17" maxlength="15" type="text"></div>

to this:

<div style="padding-top: 8px;">Username</div>
<div><input id="Username" name="Username" size="15" maxlength="15" type="text"></div>
<div style="padding-top: 3px;">Password</div>
<div><input id="Password" name="Password" size="15" maxlength="15" type="text"></div>

# 3. Divs all the way. Much more flexible



Wow, I like your site. One suggestion is to use javascript to make the nav buttons go light when you hover over them.

I think your site looks nice.
And you should DEFINITELY use CSS and avoid tables. This is a good layout for using CSS.
I hope that PadawanGeek's suggestions will work for you.
The only other suggestion I would give is to put all of your styles in an external stylesheet. That will keep your HTML lighter and easier to work with. I noticed that you have a bunch of inline styles declared. That can cause some headaches later!

One suggestion is to use javascript to make the nav buttons go light when you hover over them.

I disagree, there is no reason for javascript rollovers when you can do it pretty easily with CSS only.

I agree with Angele - get rid of the in-line styles and put them in an external css with the rest of your styles.

I would also not make that left nav the way you've got it with divs and a bunch of separate lists. Make it 1 div with 1 list and you'll save yourself a lot of code.

For the plant listings, you might want to consider using a definition list to get the structure you now have in tables. It would look something like this:

(taken from CommunityMX article)
<dl>

<dt>CSS</dt>
<dd class="image"><img src="icon_css.gif" alt="" width="50" height="50" /></dd>
<dd>Articles and tutorials on visually formatting your pages using cascading style sheets.</dd>

<dt>HTML</dt>
<dd class="image"><img src="icon_html.gif" alt="" width="50" height="50" /></dd>
<dd>Articles and tutorials on marking up your page content correctly and effectively. </dd>

<dt>Accessibility</dt>
<dd class="image"><img src="icon_accessibility.gif" alt="" width="50" height="50" /></dd>
<dd>Articles and tutorials on creating pages that can be used by a variety of people on all sorts of devices. </dd>
</dl>

CSS would be something like this:

dl {
width: 250px;
font-size: 80%;
}
dt {
clear: left;
float: right;
width: 190px;
margin-top: 15px;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
dd {
clear: right;
margin: 0 0 0 60px;
color: #666666;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Originally Posted by LadynRed

I disagree, there is no reason for javascript rollovers when you can do it pretty easily with CSS only.

CSS is fine too, my point was to make them rollover buttons.

I really appreciate everyone taking the time to respond. I have found this site very helpful for learning with much less frustation than I otherwise might encounter.

I do adhere to style sheets but for development I find it easier to use inline for experimenting. When I get the desired look I then put it in a style sheet.

Padawan - I attempted your suggestion for the search button. I attempted to put a span around the image with a smaller height but it had no effect. I initially put the smaller height class within a div tag that had an attribute of display:inline but it pushed the search button to the next line. Don't know why. This brings up another question of mine. In the search section I have several different types of styles that need to be achieved. Is it ok to have multiple div's to acheive one horizontal line of ouput? Is it ok to use span tags if I can't get the desired result with div's? Padawan, also in your suggestion for #2 it looks like you directed your answer to the username and password fields which I think are ok when I wanted to know how to position the advanced search links and current price list to the right when the float:right property seemed to be failing me.

LadyNRed - thanks for having the foresight to answer the next question which was going to be how to deal with the layout for the picture with plant info. I am going to give it a try right now as well as take your suggestion for the left nav.

Any more suggestions for my first two problems are appreciated.

The whole 'vertical-align' thing just does NOT work the same way as it does in tables.

You've got the search form and the arrow sitting inside a div already, so using padding/margin on the image is probably the easiest way to put the arrow where you want it. I would also suggest giving that div an ID or class so that you can specifically reference the image inside it.

#2 - don't use a span, make it a paragraph with a class and float it right.