Just need a bit of feedback
Moderator: General Moderators
Re: Just need a bit of feedback
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'?
Re: Just need a bit of feedback
I just tried it on both axis.... works perfectly.Celauran wrote:I do.
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
Re: Just need a bit of feedback
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
Now the beginning of my html body has the following <div> notation:
The goal here (at least in my mind) is to have a separate html file with:
Or does that snippet only allow current html to "read" the linked file, rather than display it?
Thanks again - Pavilion
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;
}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 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.
Code: Select all
<link rel="stylesheet" type="text/css" href="../schedule/formats/formats.css"/>Thanks again - Pavilion
Re: Just need a bit of feedback
To include a header file, use a PHP include.
Re: Just need a bit of feedback
Back to formatting:
I've added a menu bar - one that I've played with on another test project. The menu.html follows:
The menu items are not valid - I just inserted them for future use. The only menu item that works right now is:
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: After Menu is added: Following is script for register.php form
And lastly ... here's the format.css script
Any suggestions as to what is going wrong with input controls and labels after adding the menu are welcome.
Thanks Much: Pavilion
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>Code: Select all
<li><a class="first" href="http://#####/#####/register.php" title="home">Register Here</a></li>Before Menu is added: After Menu is added: 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>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;
}Thanks Much: Pavilion
Re: Just need a bit of feedback
I cannot duplicate. Tested in Firefox 11 and Chrome 17.
Re: Just need a bit of feedback
That's odd - I'm using Firefox 11.0Celauran wrote:I cannot duplicate. Tested in Firefox 11 and Chrome 17.
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.
Re: Just need a bit of feedback
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.
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.
Pavilion
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;
}Pavilion
Re: Just need a bit of feedback
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:
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).
My problems are as follows:
Any insight or advice is truly appreciated.
Thanks Much:
Pavilion
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>My problems are as follows:
- 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.
- In addition, the left-hand side of the grid bars (for both hour and min) push too far to the left.
Any insight or advice is truly appreciated.
Thanks Much:
Pavilion