Page 2 of 3
Re: Just need a bit of feedback
Posted: Sun Mar 11, 2012 8:42 pm
by Celauran
Pavilion wrote: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?
Not quite. Generally speaking, rules apply only to the element(s) for which they are defined. There are some cases where rules cascade down to children (nested items) but I don't have a list handy.
Pavilion wrote: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;
}
- p.borderbx seems to adhere to the same rules as .borderbx, so... I'm assuming they are related?
- What does the period before borderbx mean?
- And how is it related to the period within p.borderbx mean.... and what does the p mean?
The dot denotes a class. So p alone means the rules are to apply to all paragraph (<p>) elements. .borderbx rules will apply to any element with the class borderbx. As I'm sure you've now surmised, p.borderbx rules apply to any paragraph elements with the class borderbx. In the case presented above, I wanted some rules to apply only to paragraphs with the borderbx class so that the class could be applied directly to the paragraph rather than wrapping it in a div, and to avoid having to declare another class and needlessly duplicating a lot of code.
Re: Just need a bit of feedback
Posted: Mon Mar 12, 2012 9:04 pm
by Pavilion
Thanks Celauran -
Your answers have been very helpful. I've played with the different css formats and playing with them has helped to visualize the different elements and rules. The final php and css files in my project reflect all your changes. For now, I'm gong to let the formatting questions still muddling about in my head rest. Sometimes it's best to actually work with things to understand them better. So... I'll go forward with learning how to build a log-in page and learn more as I go. I do have one question though. Following is a screen shot from my register.php file:
You'll see in the screenshot that <fieldset></fieldset> is highlighted in purple. Generally when I double-click on a beginning tag, then both the begin and end tags are highlighted. This is not happening with the
Code: Select all
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">...........</form>
tab block.
Did I get something wrong with the syntax when I used it in my own file?
Thanks Much - Pavilion
P.S. Here's the code in my file
Code: Select all
<!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="../schedule/formats/formats.css"/>
</head>
<body>
<div class="header">
<a><img src="/schedule/images/banner.jpg" ALT="" WIDTH=98% HEIGHT=120" /></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: Tue Mar 13, 2012 5:31 am
by Celauran
I don't see anything wrong. Notepad++ is just being weird, I guess.
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 5:43 am
by social_experiment
Just an observation about this: it picks up the php code sections in the html, if you were to remove the <?php $_SERVER['PHP_SELF']; ?> from the action atrribute it will behave like the other elements do.
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 5:51 am
by Celauran
Though if you were to do that, you'd need to hardcode the action for it to remain valid HTML.
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 5:57 am
by social_experiment
true, i'm actually only hinting at it in terms of the issue pavilion is experiencing with notepad++ and the highlighting, pavilion shouldn't modify anything to satisfy notepad++'s quirks
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 6:30 am
by Pavilion
OK - thanks to both of you. It had occurred to me, that might be the issue. Just wanted to make sure nothing was "off" with the code itself.
I do have one other formatting question before going back to building a login page. I've read about using a very narrow background image with "repeat" to fill in the whole page. I understand this loads faster and if your page needs to scroll this works better than just one screen sized image. But... I can never make the "repeat" work. Whenever I try to do something like this my background has lines between the repeated images. Following is a screen shot:
This is the css code I'm using for my body:
Code: Select all
body
{
width:100%;
height:100%;
margin:0;
padding:0;
background-image: url(/schedule/images/background.jpg);
background-repeat:repeat;
}
What am I doing wrong?
Thanks much - Pavilion
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 6:40 am
by Celauran
You need to specify which axis it is to repeat on.
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 7:09 am
by Pavilion
Celauran wrote:You need to specify which axis it is to repeat on.
Celauran - I changed the above line - just as you suggested.
Here is my result:
I'm off to work for the day. But will check in later this afternoon.
Thank you so much for all your advice - Pavilion
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 7:21 am
by Celauran
Post a link to your background image, please. Just the image.
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 8:03 pm
by Pavilion
Celauran:
Here is my image:

- background.jpg (10.38 KiB) Viewed 4915 times
Hope... this is what you are looking for.
Pavilion
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 8:14 pm
by Celauran
That black line across the bottom is problematic.
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 8:18 pm
by Pavilion
Celauran wrote:That black line across the bottom is problematic.
Yes - you are right it is. That black line does not show up in my photo editor. It only shows up in situations like this - or on my website. So... I've no idea how to get rid of it. I'm working in my photo editor right now (it's nothing fancy). But... one should think there would be some kind of option that I can set to take away any border.
Beyond that line though - the image is still not repeating with the syntax currently in use. The image just shows at the top of the page - and that's it. Again, the current syntax is as follows:
Code: Select all
body
{
width:100%;
height:100%;
margin:0;
padding:0;
background-image: url(/schedule/images/background.jpg);
background-repeat:repeat-x;
}
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 8:24 pm
by Celauran
Like I mentioned earlier, you need to specify the axis to follow. Background images tend to be vertically oriented, so you'd use repeat-x. Since yours is horizontally oriented, you'd want repeat-y. I was able to edit out the black bar at the bottom of the image, but that didn't solve the problem. The background still wasn't smooth.
Re: Just need a bit of feedback
Posted: Tue Mar 13, 2012 8:26 pm
by Pavilion
Are most background images vertically oriented?
If so ... how do they accommodate for scrolling downwards?