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 »

They certainly don't need to be, but many I have worked with are.

Is this close?
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:They certainly don't need to be, but many I have worked with are.

Is this close?

that's exactly the effect I was looking for. Your image is square (as far as I can tell). Do you repeat on both axis'?
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 do.
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:I do.
I just tried it on both axis.... works perfectly.

Thank you so much ... that had been driving me crazy... such a simple thing. :)

Well - I'm going to do some playing with login php. I'm sure I'll be back with questions. Talk to you then...

And again ... thank you - Pavilion
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post by Pavilion »

OK - I'm back sooner than I thought I would be. In preparation for multiple pages on the site I'm building, it only makes sense to have a header file (with image and menus) that can be inserted into my html page.

So... I've just figured out how to get my header image into css

Code: Select all

div.header
{
    margin: 5px 0px 0px 0px;
	height: 150px;
    padding: 10px 0px 0px 0px;
	background: url(/schedule/images/banner.jpg) center;
	background-size:98% 125px;
	background-repeat:no-repeat;
    text-align: center;
    color: #754f31;
}
Now the beginning of my html body has the following <div> notation:

Code: Select all

<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"></div>
.....
The goal here (at least in my mind) is to have a separate html file with:
  • The banner image
  • A menu bar (I've already experimented with this. I've found acceptable html code and css to properly put in a menu.
But... how do I insert a separate html file as the header? Do I use something like this snippet of code?

Code: Select all

<link rel="stylesheet" type="text/css" href="../schedule/formats/formats.css"/>
Or does that snippet only allow current html to "read" the linked file, rather than display it?

Thanks again - 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 »

To include a header file, use a PHP include.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post by Pavilion »

Back to formatting:

I've added a menu bar - one that I've played with on another test project. The menu.html follows:

Code: Select all

<style type="text/css">
	* {margin: 0; padding: 0;}
	#menu {width: 100%; height: 30px; border: 2px solid #754f31;}
	#menu ul {visibility: hidden; position: absolute; top: 100%; left: 0;}
	#menu li {list-style: none; z-index: 1;}
	#menu li {float: left; padding-right: 3px; position: relative;}
	#menu li li a {width: 110%;}
	#menu li li {float: none; padding-top: 1px; width: 110%;}
	#menu li:hover ul {visibility: visible; z-index: 1;}
	#menu a, #menu li:hover li a, #menu li span {display: block; font: bold 12px/30px Arial, sans-serif; text-decoration: none; padding: 0 13px; color: #363426;}
	#menu, #menu li li, #menu a, #menu li:hover li:hover a {background-color: #c2bdb0;}
	#menu li span {cursor: default;}
	#menu li a.first, #menu li a.first:hover, #menu li:hover li a, #menu li:hover a, #menu li:hover span {border-bottom: 2px solid #754f31; border-right: 2px solid #754f31; background-color: #f7f5e4;}
</style>

	<ul id="menu">
        <li><a class="first" href="http://#####/#####/register.php" title="home">Register Here</a></li>
		<li><span>My Stuff</span>
			<ul>
			<li><a href="http://#####/#####/blocktime.php">Block Time</a></li>
			<li><a href="http://#####/#####/requesttime.php">Request Time</a></li>
			<li><a href="http://#####/#####/profile.php">Profile</a></li>
			</ul>
		</li>
		<li><span>Time For Meeting</span>
			<ul>
			<li><a href="http://#####/#####/about.php">About</a></li>
			<li><a href="http://#####/#####/help.php">Help</a></li>
			</ul>
		</li>
	</ul>
The menu items are not valid - I just inserted them for future use. The only menu item that works right now is:

Code: Select all

<li><a class="first" href="http://#####/#####/register.php" title="home">Register Here</a></li>
Now for the problem - after inserting this menu into my register.php something goes wrong with my input boxes and labels. Following is are screen shots showing the difference:

Before Menu is added:
BeforeMenu.jpg
After Menu is added:
AfterMenu.jpg
Following is script for register.php form

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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/include/formats.css"/>
    </head>
    <body>
	<div class="shadow"><div class="header"></div></div>
	<div class="shadow">
	<?php
	include '../schedule/include/menu.html';
	?>
	</div>
	<h1>Register Here ....</h1>
        <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
			<span><fieldset id="standardForm">
                <div id="standFormLeft">
                    <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="standFormRight">
                    <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></span>
        </form>
        <?php if (isset($confirmation)): ?>
        <p class="borderbx"><?php echo $confirmation; ?></p>
        <?php endif; ?>
    </body>
</html>
And lastly ... here's the format.css script

Code: Select all

.error
{
    color: #F00;
}
body
{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    background-image: url(/schedule/images/background.jpg);
    background-repeat:repeat;
}
div.shadow
{
	margin: 12px;
	-moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	-webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
	box-shadow: 5px 5px 5px rgba(68,68,68,0.6);
}
div.header
{
    margin: 5px 0px 0px 0px;
	height: 110px;
    padding: 10px 0px 0px 0px;
	background: url(/schedule/images/banner.jpg) center; /*  This banner image is just a standard .jpg file. Dimensions are 1500px * 100px  */
	background-size:100% 100%;
	background-repeat:no-repeat;
    text-align: center;
    color: #754f31;
}

.borderbx
{
    margin: 0px 36px 8px 36px;
	width: 75%;
    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; /* Why not set the margin inline. Setting it here dictates a global 30px margin for p.borderbx, making it unusable on other pages where I may want a smaller margin (or larger margin). STILL NEED TO ASK THIS QUESTION */
    padding: 10px 20px;
}

#standardForm,
table
{
    border-radius: 15px;
    border: 3px solid transparent;
    border-color: #754f31;
    color:black;
    padding: 20px 20px;
    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: 170px;
}

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

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

#standFormLeft,
#standFormRight
{
    width: 350px;
}

#standFormLeft
{
    float: left;
}

#standFormRight
{
    margin-left: 360px;
}

#standFormLeft label,
#standFormRight label
{
    float: left;
    padding-right: 10px;
    text-align: right;
    width: 150px;
}

input[type=submit]
{
    font-weight: bold;
	float: center;
}

ul.error
{
    list-style: none;
}
Any suggestions as to what is going wrong with input controls and labels after adding the menu are welcome.

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 »

I cannot duplicate. Tested in Firefox 11 and Chrome 17.
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:I cannot duplicate. Tested in Firefox 11 and Chrome 17.
That's odd - I'm using Firefox 11.0

On the whole - looking at the way the labels and input controls are mis-aligning... what css formatting elements need adjusting?

Celauran - I just tested something. I moved the menu block down in the script and inserted AFTER <form></form> block.

The result was the same. It's almost as if the <fieldset id="standardForm"> block does not like to much on the page. If I completely take out either the menu block or the <div class="header"> block then the input controls and labels do what they are suppose to.
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post by Pavilion »

I figured it out. Following are the changes I made to the css file:

input now floats to the right, with an 8px left margin.

Code: Select all

input 
{
    background-color:white;
    width: 170px;
	float: right;
	margin-left: 8px;
}
After putting a solid border around #standFormLeft and #standFormRight, I was able to see how the inputs and labels were pushing against each other. So... I simply floated the inputs right with a left-margin and things fell into place. :D

Pavilion
Pavilion
Forum Contributor
Posts: 301
Joined: Thu Feb 23, 2012 6:51 am

Re: Just need a bit of feedback

Post by Pavilion »

Well - after a LOT of learning - I find myself back at CSS.

In short, I've managed to install some jQuery plugins successfully. They are working together. The plugins are DatePicker and Trent Richardson's TimePicker. Now to my problem with CSS.

Trent Richardson's Timepicker comes with some required CSS - it follows:

Code: Select all

<style type="text/css">

/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left;}
.ui-timepicker-div dl dt { height: 20px; margin-bottom: -25px;}
.ui-timepicker-div dl dd { margin: 10px 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label {background: none; border: solid; margin: 0 padding:0; }
</style>
The last line (I believe) is where my problem lies - .ui-tpicker-grid-label {background: none; border: solid; margin: 0 padding:0; }. Please note: I made the border solid so I could confirm that this line applies to the problem at hand. Below is a screen shot of the TimePicker (as it appears on my page).
Screen Shot - Timepicker.jpg
My problems are as follows:
  1. You will notice that the grid bar, underneath the Min slider, pushes itself outside of the Timepicker element. The border of the grid bar is solid because I changed the above setting.
  2. In addition, the left-hand side of the grid bars (for both hour and min) push too far to the left.
My gut says these bars are picking up CSS settings from my own files. The rounded corners are specific to my own CSS files. Here's the problem, the rounded corners and other settings I have in my own files work great for the rest of my site, but I don't need the rounded corners and resulting padding for these TimePicker elements. I've tried working with the margin and padding settings in the TimePicker CSS - but for some reason changing the padding &/or margins in TimePicker CSS does NOT over ride the CSS files I've developed.

Any insight or advice is truly appreciated.

Thanks Much:

Pavilion
Post Reply