Html form syntax alignment

HTML & CSS
1

I’m simply frustrated by my code. How do I get the “(Non-Members use 1111)” text aligned to the Member Number input field. Right now it’s way up high and on the right. I just want to get the fields aligned vertically. I’ve just been looking at it too long.

https://chea-elks.org/donations/index2b.htm

2

The code is not exacty well formulated. There is no relationship between the fields and the text to their right. I would suggest starting over and creating a more logically coded page. The “placeholder” attribute may help eliminate the need for some of the text in the right column. Otherwise, working with what you have, try placing the text close beneath the “member number” field rather than to the right.

If you can give us an image of your ideal layout, we can help guide you along.

3

Thank you ronpat. The placeholder is a good idea, but won’t work for Member number which is only 6 characters. So I tried underneath which looks fine in Dreamweaver but not so much in production:

         <label>
           <br /><br />
      <font face="Arial">
          <label> Member Number: <span style="color:red;">*</span>
            <input type="text" maxlength="6" name="MemberNumber" value=""><br> (Non members use 1111)
          </label>
4

<font face="Arial">
You would be better using CSS for setting the font, and there should always be a fallback for those whose local machine doesn’t have the Arial font installed (which is just about anyone who isn’t on a Windows PC.

2 Likes
5

Which version of Dreamweaver are you using, please? One of the older, stand-alone purchased versions, or the current subscription based version? And, are you using “design view” to lay out your pages?

6

Standalone Version 12. I use design view but it displays it properly but then looks screwy when I install.

7

I don’t know about Dreamweaver v12 (CS6), but design view in previous versions was unreliable because of it’s built on an old rendering engine. (Basically, Dw is not a browser, especially not a modern browser.) My “default” assumption is that relying on design view to supply valid, cross-browser compliant code for modern browsers is doomed to fail. I think you are seeing that for yourself.

My earlier suggestion still stands… give us an image or drawing showing how you would like your page to look and annotate it with comments, if necessary, about how it should behave and we should be able to guide you through the process of setting up a new layout using “code view” instead of “design view”.

It is probable that the finished product will differ from the initial design based on HTML and CSS best practices, but that will be your call.

3 Likes
8

You can - and should - also run your page through the HTML checker https://validator.w3.org
There are a few errors there which may cause your page to render differently in different browsers.

2 Likes
9

OMG 25 errors! OK, I’ll go through the code and fix it all

4 Likes
10

Yep. Learning that quickly. My biggest problem was my cache needed to be flushed as most of the site is WordPress (Godaddy adds a Flush Cache in there menu for Managed WordPress sites) that fixed the display for now.

Thanks guys.

3 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.