Just need a bit of feedback

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Just need a bit of feedback

Post 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;
}
  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?
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.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post 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:
php.jpg
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>
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Just need a bit of feedback

Post by Celauran »

I don't see anything wrong. Notepad++ is just being weird, I guess.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Just need a bit of feedback

Post 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.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Just need a bit of feedback

Post by Celauran »

Though if you were to do that, you'd need to hardcode the action for it to remain valid HTML.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: Just need a bit of feedback

Post 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
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post 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:
repeat.jpg
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
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Just need a bit of feedback

Post by Celauran »

You need to specify which axis it is to repeat on.

Code: Select all

background-repeat: repeat-x;
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post by Pavilion »

Celauran wrote:You need to specify which axis it is to repeat on.

Code: Select all

background-repeat: repeat-x;
Celauran - I changed the above line - just as you suggested.

Here is my result:
result.jpg
I'm off to work for the day. But will check in later this afternoon.

Thank you so much for all your advice - Pavilion
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Just need a bit of feedback

Post by Celauran »

Post a link to your background image, please. Just the image.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post by Pavilion »

Celauran:

Here is my image:
background.jpg
background.jpg (10.38 KiB) Viewed 4916 times
Hope... this is what you are looking for.

Pavilion
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Just need a bit of feedback

Post by Celauran »

That black line across the bottom is problematic.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post 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;
}
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Just need a bit of feedback

Post 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.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post by Pavilion »

Are most background images vertically oriented?

If so ... how do they accommodate for scrolling downwards?
Last edited by Pavilion on Tue Mar 13, 2012 8:28 pm, edited 1 time in total.
Post Reply