Page 1 of 3

Just need a bit of feedback

Posted: Thu Mar 08, 2012 7:25 am
by Pavilion
Hello Everyone:

After making my first registration page (with the help of Celauran), I decided to do some formatting. And now I've a couple questions about css/html. The page is working without error. I am mostly interested in feed-back. 20 years of building classical databases taught me the value of clean code and proper processes. Since this is my first real attempt at an online application, I want to be intentional about learning to write code efficiently and with "best practices" in mind. Following are my css and html code blocks:

formats.css

Code: Select all

<style type="text/css">
	span.error
		{
			color: #F00;
		}
	body
		{
			width:100%;
			height:100%;
			margin:0;
			padding:0;
			background-image: url(/schedule/images/background.jpg);
			background-repeat:repeat;
		}
	div.header
		{
		margin: 0px 0px 0px 0px;
		padding: 15px 0px 0px 0px;
		text-align: center;
		color: #754f31;
		}
	div.borderbx
		{
			margin: 0px 30px 0px 30px;
			border-radius: 15px;
			box-shadow:
			inset 0 0 12px #754f31, /* Inset shadow */
			0 0 12px #f7f5e4, /* Outset shadow */
			inset -999px 0 0 transparent; /* The background color */
		}
	table
		{
			border-top-left-radius: 15px;
			border-bottom-right-radius: 15px;
			border-top-right-radius: 15px;
			border-bottom-left-radius: 15px;
			border: 3px solid transparent;
			border-color: #754f31;
			color:black;
			padding-top:25px;
			padding-bottom:25px;
			padding-right:50px;
			padding-left:50px;
			box-shadow:
			inset 0 0 12px #754f31, /* Inset shadow */
			0 0 12px #f7f5e4, /* Outset shadow */
			inset -999px 0 0 #fff; /* The background color */

		}
	input
		{
			background-color:white;
			width:200px
			
		}
</style>
html block from my register.php file. Celauran helped with the php portion and it is functioning wonderfully.

Code: Select all

<!DOCTYPE html>
<html>
<body>
<div class="header"><head>
<a><IMG SRC="/schedule/images/banner.jpg" ALT="" WIDTH=98% HEIGHT=120"></a>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Contact Form</title>
</head></div>
<form action="" method="post">
<div class="borderbx">
	<h1 style="text-align:left; padding-left:50px;"><i>Register Here .... </i></h1>
</div>
	<table align="left" style = "width=25%; margin-left: 30px;">
		<tr>
		<td align="right">
			<label for="fname">First Name</label><br />
			<label for="lname">Last Name</label><br />
			<label for="email">Email Address</label>
		</td>
		<td align="left">
			<input tabindex="1" type="text" name="fname" /><br />
            <input tabindex="2" type="text" name="lname" /><br />
            <input tabindex="3" type="email" name="email" />
		</td>
		<td align="right">
			<label for="password">Password</label><br />
			<label for="password2">Verify Password</label>
		</td>
		<td align="left">
			<input tabindex="4" type = "password" name="password" /><br />
			<input tabindex="5" type = "password" name="password2" /><br />
			<input style="font-weight:bold;" tabindex="6"type="submit" value="Submit" />
		</td>
		</tr>
		<tr>
		<td></td> <!-- This block was added simply as a spacer. Without this spacer, the error text in the next block throws the entire table out of alignment. This spacer allows error messages to align under the input boxes, rather than the labels. If they align under the labels they push the table border out to the left. -->
		<td align="right"> <!-- This block of code/script does the error reporting. Nothing is vislbe until there is an error. -->
            <?php if (isset($errors['fname'])): ?>
            <span class="error"><?php echo $errors['fname']; ?><br /></span>
            <?php endif; // See an explanation of this coding at devnetwork.net forums - topic "Field Validation Question": http://forums.devnetwork.net/viewtopic.php?p=672372#p672372?		
		
			<?php if (isset($errors['password'])): ?>
			<span class="error"><?php echo $errors['password'];?><br /></span>
			<?php endif; ?>
			
            <?php if (isset($errors['lname'])): ?>
            <span class="error"><?php echo $errors['lname']; ?><br /></span>
            <?php endif; ?>
			
			<?php if (isset($errors['password2'])): ?>
			<span class="error"><?php echo $errors['password2'];?><br /></span>
			<?php endif;?>
			
			<?php if (isset($errors['email'])): ?>
			<span class="error"><?php echo $errors['email'];?><br /></span>
			<?php endif; ?>
		</td></tr>
	</table>
<div class="borderbx" style="margin-top: 25%; margin-left: 30px; margin-right: 50%">
<p style="text-align: center;"><?php echo $confirmation; ?></p></div>
</form>
</body>
</html>

Now for a few questions:
  1. Just before my error messages I inserted a placeholder <td></td>. Comments as to my reasoning are inserted along with the placeholder. Is there a more efficient way to handle this problem?

    Specifically... is there a way to put a row at the bottom of a table that spans the whole width of the table? The way I wrote this table code, the error messages were aligning with the first <td></td> block containing all input labels. Even if I only had one <td></td> block in the last row - it would not let content span the whole width of the table underneath all content <td></td> blocks in the preceding row.
  2. Also, I used margins around form elements to determine placement on the page. But have concerns that this will cause "floating" depending on the users browser, and the results may not be what I intend. So... would it be better practice to insert form content into a transparent table? This way it would be possible to keep content contained within <td></td> blocks and reduce the "floating elements" issue.
  3. As far as I can tell, my css coding is on track. But this is the first style/format file I've coded and I just want to make sure things were done properly.
  4. Lastly... does anyone know of a good resource on making better looking input command buttons? The typical "submit" command button does the job. But having other options would be nice.
Thanks again everyone - I really do appreciate the advice I get here.

Pavilion

Re: Just need a bit of feedback

Posted: Thu Mar 08, 2012 7:41 am
by Celauran
Start here

More to come later; I have to get to work.

Re: Just need a bit of feedback

Posted: Thu Mar 08, 2012 8:15 am
by Celauran
OK, so looking at it further:
  • Your <head> tag is inside your <body> tag. This is not valid.
  • Your <head> tag is inside a <div>. This is not valid.
  • Tables are for presenting tabular data, not for layout.
  • Avoid using inline styling.
  • There's a missing ?> on line 40
To answer your specific questions.
1. You could use colspan="2" though, as I mentioned above, you shouldn't be using tables for layout.
2. I don't see any use of floats in your CSS.
3. <style> tags don't belong in CSS, and I don't see where you've linked the stylesheet in your HTML. Looks good otherwise.
4. You can style submit buttons with CSS, just like any other element.

Re: Just need a bit of feedback

Posted: Thu Mar 08, 2012 9:46 am
by social_experiment
Celauran wrote:Tables are for presenting tabular data, not for layout.
This is very important; best to learn doing layouts without tables or you will handicap yourself.

A book that will help you with CSS is this one The Art and Science of CSS, also if you want a good introduction that goes a bit further look for this Apress Pro CSS Techniques

Re: Just need a bit of feedback

Posted: Thu Mar 08, 2012 11:14 am
by Pavilion
Celauran wrote:OK, so looking at it further:
  • Your <head> tag is inside your <body> tag. This is not valid.
  • Your <head> tag is inside a <div>. This is not valid.
OK ... I'm back to baby steps again. So... I'm going to go at your remarks one-at-a-time.

My <head> tag is now outside the body. It doesn't seem to make a difference to the look of the page. May I ask why it is important to have the <head> tag outside the body?

About the <head> tag being inside a <div>. The <div class="header"> css style is as follows:

Code: Select all

div.header
{
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
text-align: center;
color: #754f31;
}
When I don't enclose the <head> inside the <div class="header"> then the banner in my <head> looses all formatting. So... how do I format the <head> if I should stay away from inline styling?
<style> tags don't belong in CSS, and I don't see where you've linked the stylesheet in your HTML. Looks good otherwise.
The stylesheet is included at the beginning of the php file. The block of code with all references to other files follows:

Code: Select all

[syntax=php]<?php
// include database connection file, if connection doesn't work the include file will throw an error message
include '../schedule/db_files/db_connect.php';

// including PasswordHash file for purposes of hashing passwords.
require '../PasswordHash.php';

// include css styles format file
include '../schedule/formats/formats.css';
?>
[/syntax]

Celauran and Social_experiment - thank you for your advice on doing layouts with tables.

Social_experiment, I'll take a look at the two resources you've provided. And, although I don't understand how tables will "handicap" me, I've been around long enough to know the wisdom of listening to those with more experience. So... do either of you have any basic advice on formatting? As I mentioned earlier, my concern with placing elements by use of margins concerns me. "Margins" can differ from one browser to the next and I am concerned that different elements may end up on top of each other if "margins" are the only thing dictating their placement.

Thanks again - Pavilion

Re: Just need a bit of feedback

Posted: Thu Mar 08, 2012 12:00 pm
by Celauran
Pavilion wrote:When I don't enclose the <head> inside the <div class="header"> then the banner in my <head> looses all formatting. So... how do I format the <head> if I should stay away from inline styling?
Everything you want displayed goes inside the body.
Pavilion wrote:The stylesheet is included at the beginning of the php file.
While I suppose that will work, that's not the standard way of doing things. What you really want is to link it inside your document's head like so:

Code: Select all

<link rel="stylesheet" type="text/css" href="/path/to/file.css" />
Pavilion wrote:Social_experiment, I'll take a look at the two resources you've provided. And, although I don't understand how tables will "handicap" me, I've been around long enough to know the wisdom of listening to those with more experience. So... do either of you have any basic advice on formatting? As I mentioned earlier, my concern with placing elements by use of margins concerns me. "Margins" can differ from one browser to the next and I am concerned that different elements may end up on top of each other if "margins" are the only thing dictating their placement.
You want to get into the habit of using semantic markup. Familiarize yourself with the elements available and use what makes most sense. Use divs to create logical groupings, not to replace table cells (common mistake when moving away from table-based layouts).

Here is how I would do the layout:
formats.css

Code: Select all

.error
{
    color: #F00;
}
body
{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    /** Commented out because I don't have this image. **/
    /* background-image: url(/schedule/images/background.jpg); */
    background-repeat:repeat;
}
div.header
{
    margin: 0px 0px 0px 0px;
    padding: 15px 0px 0px 0px;
    text-align: center;
    color: #754f31;
}

.borderbx
{
    margin: 0px 30px 0px 30px;
    border-radius: 15px;
    box-shadow:
        inset 0 0 12px #754f31, /* Inset shadow */
        0 0 12px #f7f5e4, /* Outset shadow */
        inset -999px 0 0 transparent; /* The background color */
}

p.borderbx
{
    margin-top: 30px;
    padding: 10px 20px;
}

#registrationForm,
table
{
    border-radius: 15px;
    border: 3px solid transparent;
    border-color: #754f31;
    color:black;
    padding: 25px 50px;
    box-shadow:
        inset 0 0 12px #754f31, /* Inset shadow */
        0 0 12px #f7f5e4, /* Outset shadow */
        inset -999px 0 0 #fff; /* The background color */

}
input
{
    background-color:white;
    width:200px

}

h1
{
    font-style: italic;
    padding-left: 50px;
}

#registrationForm
{
    margin: 0 auto;
    width: 750px;
}

#regFormLeft,
#regFormRight
{
    width: 350px;
}

#regFormLeft
{
    float: left;
}

#regFormRight
{
    margin-left: 360px;
}

#regFormLeft label,
#regFormRight label
{
    float: left;
    padding-right: 10px;
    text-align: right;
    width: 100px;
}

input[type=submit]
{
    font-weight: bold;
    margin-left: 110px;
}

ul.error
{
    list-style: none;
}
register.php (note the dummy variables):

Code: Select all

<?php $confirmation = "Lorem ipsum dolor sit amet..."; ?>
<?php $errors['fname'] = "Chicken"; ?>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Contact Form</title>
        <link rel="stylesheet" type="text/css" href="formats.css" />
    </head>
    <body>
        <!-- Commenting this out since I don't have the image
        <div class="header">
            <a><img src="/schedule/images/banner.jpg" alt="" /></a>
        </div>
        -->
        <div class="borderbx">
            <h1>Register Here ....</h1>
        </div>
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
            <fieldset id="registrationForm">
                <div id="regFormLeft">
                    <label>First Name</label>
                    <input tabindex="1" type="text" name="fname" /><br />
                    <label>Last Name</label>
                    <input tabindex="2" type="text" name="lname" /><br />
                    <label>Email Address</label>
                    <input tabindex="3" type="email" name="email" />
                </div>
                <div id="regFormRight">
                    <label>Password</label>
                    <input tabindex="4" type="password" name="password" /><br />
                    <label>Verify Password</label>
                    <input tabindex="5" type="password" name="password2" /><br />
                    <input tabindex="6" type="submit" value="Submit" />
                </div>
                <?php if (!empty($errors)): ?>
                <p class="error">The following errors were detected:</p>
                <ul class="error">
                    <?php if (isset($errors['fname'])): ?>
                        <li><?php echo $errors['fname']; ?></li>
                    <?php endif; ?>

                    <?php if (isset($errors['password'])):
                        ?>
                        <li><?php echo $errors['password']; ?></li>
                    <?php endif; ?>

                    <?php if (isset($errors['lname'])): ?>
                        <li><?php echo $errors['lname']; ?></li>
                    <?php endif; ?>

                    <?php if (isset($errors['password2'])): ?>
                        <li><?php echo $errors['password2']; ?></li>
                    <?php endif; ?>

                    <?php if (isset($errors['email'])): ?>
                        <li><?php echo $errors['email']; ?></li>
                    <?php endif; ?>
                </ul>
                <?php endif; ?>
            </fieldset>
        </form>
        <?php if (isset($confirmation)): ?>
        <p class="borderbx"><?php echo $confirmation; ?></p>
        <?php endif; ?>
    </body>
</html>

Re: Just need a bit of feedback

Posted: Thu Mar 08, 2012 12:44 pm
by Pavilion
Celauran - Thank you for all your feedback. You've given me a lot to chew on. After I've had a few days to process, research, rewrite - I'll be back.. Unless of course questions come up... then I'll be back earlier. :D

Pavilion

Re: Just need a bit of feedback

Posted: Thu Mar 08, 2012 4:01 pm
by social_experiment
Pavilion wrote:So... how do I format the <head> if I should stay away from inline styling?
As Celauran points out; content goes in the body; the <head> section is the head of the document containing the meta information, links for styling, js.
Pavilion wrote:"Margins" can differ from one browser to the next and I am concerned that different elements may end up on top of each other if "margins" are the only thing dictating their placement.
Once you have the basics down, search for information about fluid layouts and positioning using css; there are css properties like float; position; top; left; to mention a few which help with positioning of elements on the page

Re: Just need a bit of feedback

Posted: Fri Mar 09, 2012 7:34 am
by Pavilion
Hello Celauran and Social_Experiment:

OK Celauran, I've had a chance to test your version - and now the conversation can begin. :D

Because I'm doing this in "baby steps", for now I would like to focus only on formatting of input elements and error messages (what is my table).

First - pictures are worth a thousand words. So... following are two screenshots. That way we can all see the difference in results between our two versions.

Pavilion's Version
InputElements_P2.jpg
Celauran's Version
InputElements_C.jpg

Now ... this is where my classical database background comes in. My preference - and it is a pretty strong preference - is that input elements be arranged in a uniform way.

If you'll notice my screen shot, the left-hand margin of every single input label lines up. The right-hand margins of input elements line up in their respective table columns.

In addition - I just simply like the background of the table and how it stands out from the surrounding page.

Both of these formatting procedures make it easier for the user to find what they are suppose to do, and to proceed through the input elements.

Now... how can I get this same type of formatting using procedures that you used Celauran? I really do want to learn to do this right, but I am accustom to uniformity in my formatting. My users like and I think it looks cleaner.

Thank you again for your advice - it is appreciated. I am sure there is a way to get the uniformity I am looking for and am willing to work through it with you.

Pavilion

Re: Just need a bit of feedback

Posted: Fri Mar 09, 2012 8:18 am
by Celauran
Something is definitely very wrong. It looks like your stylesheets aren't being parsed or something. I don't have all the images, but here's how it looks for me.

Re: Just need a bit of feedback

Posted: Fri Mar 09, 2012 12:35 pm
by Pavilion
Celauran wrote:Something is definitely very wrong. It looks like your stylesheets aren't being parsed or something. I don't have all the images, but here's how it looks for me.
Celauran - Thank you for the visual. I went back through the css file and found my errors. My screen is looking the way your screen does now.

I do want to come back to the images, as I've some questions about "best practice" there as well. But... as I mentioned before, I have to take this in baby steps. And right now my focus is on understanding your style sheet. So.. now onto the questions, all of which are contained in comments below:

Code: Select all

#registrationForm, /* I affirm this block is the reference point for the following php block. "<fieldset id="registrationForm">" Does the # sign refer to an "id" vs a "class"? If so, what is the difference between an "id" and a "class" of formatting styles?*/
table
{
    border-radius: 15px;
    border: 3px solid transparent;
    border-color: #754f31;
    color:black;
    padding: 25px 50px;
    box-shadow:
        inset 0 0 12px #754f31, /* Inset shadow */
        0 0 12px #f7f5e4, /* Outset shadow */
        inset -999px 0 0 #fff; /* The background color */

}
input  /* Is this block also included in "#registrationForm" */
{
    background-color:white;
    width:200px

}

h1 /* Is this block also included in "#registrationForm" */
{
    font-style: italic;
    padding-left: 50px;
}

#registrationForm  /* Is this the beginning of a new "id" block (vs class block)? */
{
    margin: 0 auto;
    width: 750px;
}
Thanks Much:

Pavilion

Re: Just need a bit of feedback

Posted: Fri Mar 09, 2012 12:43 pm
by Celauran
Pavilion wrote:

Code: Select all

#registrationForm, /* I affirm this block is the reference point for the following php block. "<fieldset id="registrationForm">" Does the # sign refer to an "id" vs a "class"? If so, what is the difference between an "id" and a "class" of formatting styles?*/
The # does indeed refer to an ID. The chief difference between the two is that an ID refers to a specific element whereas many elements can have the same class. ID also has higher specificity than class.
Pavilion wrote:

Code: Select all

input  /* Is this block also included in "#registrationForm" */
No. Much like PHP, CSS 'blocks' are enclosed in braces.
Pavilion wrote:

Code: Select all

#registrationForm  /* Is this the beginning of a new "id" block (vs class block)? */
That's not quite how these blocks work. The comma-separated list of elements preceding the opening brace are all affected by the code contained within the braces. You'll notice that the first #registrationForm block also affects all table elements. This second block affects only the element with ID registrationForm.

Re: Just need a bit of feedback

Posted: Fri Mar 09, 2012 12:52 pm
by Pavilion
OK ... so...

Code: Select all

#registrationForm,
table
{
    border-radius: 15px;
    border: 3px solid transparent;
    border-color: #754f31;
    color:black;
    padding: 25px 50px;
    box-shadow:
        inset 0 0 12px #754f31, /* Inset shadow */
        0 0 12px #f7f5e4, /* Outset shadow */
        inset -999px 0 0 #fff; /* The background color */

}
#registrationForm, (with a comma at the end of the syntax line) ONLY includes the "table {}" definitions? And these definitions apply to elements within the table itself?

#registrationForm (without a comma) defines the TABLE - but not the elements within the table?

Re: Just need a bit of feedback

Posted: Fri Mar 09, 2012 1:03 pm
by Celauran
"#registrationForm, table { CSS rules here }" basically means "the following rules apply to the element with ID registrationForm, and to all elements of type table" whereas "#registrationForm { CSS rules }" means "the following rules apply to the element with ID registrationForm".

Re: Just need a bit of feedback

Posted: Sun Mar 11, 2012 8:30 pm
by Pavilion
Celauran wrote:"#registrationForm, table { CSS rules here }" basically means "the following rules apply to the element with ID registrationForm, and to all elements of type table"
So.....

Code: Select all

input  /* Is this block also included in "#registrationForm" */
{
    background-color:white;
    width:200px

}

h1 /* Is this block also included in "#registrationForm" */
{
    font-style: italic;
    padding-left: 50px;
}
If either input or h1 elements are within the #registrationForm, table, then all rules for "#registrationForm, table also apply to input and h1?

On the other hand, if input or h1 are outside "#registrationForm, table, then none of the "#registrationForm, table rules apply?
___________________________________________________

On to another portion of your css file

Code: Select all

div.header
{
    margin: 0px 0px 0px 0px;
    padding: 15px 0px 0px 0px;
    text-align: center;
    color: #754f31;
}

.borderbx
{
    margin: 0px 30px 0px 30px;
    border-radius: 15px;
    box-shadow:
        inset 0 0 12px #754f31, /* Inset shadow */
        0 0 12px #f7f5e4, /* Outset shadow */
        inset -999px 0 0 transparent; /* The background color */
}

p.borderbx
{
    margin-top: 30px;
    padding: 10px 20px;
}
  1. p.borderbx seems to adhere to the same rules as .borderbx, so... I'm assuming they are related?
  2. What does the period before borderbx mean?
  3. And how is it related to the period within p.borderbx mean.... and what does the p mean?
Clauran - I know these questions are very basic... so... I really do appreciate your patience.

Pavilion