here is the website so far.
for some reason my form boxes in the top right are different sizes, along with the login button, on various browsers. I would’ve thought the height and width controls were the same across browsers?
Hi,
Don’t use position:relative to move things around because it’s not really meant for structural elements. In most sites you would hardly ever need to move things with relative positioning. A relatively placed element is only moved visually but not physically which means that the space it originally occupied is always preserved. It’s as if it was never moved except that it looks as though its somewhere else.
Instead use margins or use floats when you want things horizontal.
You can make your form line up by floating it and not having to exactly place any elements at all.
This is just rough but I’ve restyled the header to show what I mean and I don’t think you need an image for the submit either.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>Face to Face Tutoring - Coming Soon!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="f2f2.css" rel="stylesheet" type="text/css"/>
<style>
/*
css for f2f
*/
html,body {
margin:0;
padding:0;
}
body{
[B] background:url(http://www.facetofacetutoring.com/site_images/header_grad.gif) repeat-x;
}[/B]
#wrapper {
[B] width:1000px;[/B]
margin:0 auto;
}
/****** HEADER *****/
#header {
[B] width: 1000px;
overflow:hidden;[/B]
}
#title {
[B] position:relative;
margin:50px 0 0 0;
float:left;
width:613px;[/B]
}
[B]#title img{margin-left:-100px;}
#title p{margin:0}
#title p.motto {
font-family:Times;
color:#838383;
font-size: 12pt;
text-align:right;
padding:0 15px 0 0;
margin:0 0 1em;
}
/***** Login Boxes ******/
#login {[/B] [B]
display:block;
width:250px;
float:right;
margin:30px 60px 20px 10px;
diplay:inline;
}
#login .button {
position: relative;
margin-top: 5px;
}
#login div{
clear:both;
overflow:hidden;
width:100%;
}
#login label{
float:left;
width:137px;
text-align:right;
font-family:arial;
color:#5582ff;
font-size:8pt;
text-align: right;
padding:10px 0 0;
}
#login input {
float:right;
font-family:arial;
}
.box {
margin-top: 5px;
border:1px solid #d1deff;
font-family: sans-serif;
width:100px;
height: 21px;
text-align: left;
}
form.login .button input {
border: 2px solid #8ea5e0;
font-family: sans-serif;
color: white;
font-weight: bold;
background-color: #c9d7ff;
padding:2px 5px;
overflow:visible;
}
.signuptxt {
font-family:arial;
color:#5582ff;
font-size:8pt;
position: relative;
clear:both;
text-align:right;
}[/B]
/****** NAVIGATION ********/
#nav {
position:relative;
width: 100%;
[B] clear:both;[/B]
}
#nav ul {
}
#nav li {
float:left;
height:34px;
list-style:none;
}
#nav li a {
float: left;
display: block;
}
#nav li.front_cap {
background-image:url(http://www.facetofacetutoring.com/site_images/nav/front_cap.png);
background-repeat:no-repeat;
display:block;
width:73px;
}
#nav a.home {
background:url(http://www.facetofacetutoring.com/site_images/nav/home.png);
height:34px;
width:107px;
text-indent:-9999px;
}
#nav a.home:hover, #nav a.home:focus {
background:url(http://www.facetofacetutoring.com/site_images/nav/home_hover.png);
}
#nav a.how {
background:url(http://www.facetofacetutoring.com/site_images/nav/how.png);
height:34px;
width:163px;
text-indent:-9999px;
}
#nav a.how:hover, #nav a.how:focus {
background:url(http://www.facetofacetutoring.com/site_images/nav/how_hover.png);
}
#nav a.test {
background-image:url(http://www.facetofacetutoring.com/site_images/nav/test.png);
height:34px;
width:161px;
text-indent:-9999px;
}
#nav a.test:hover, #nav a.test:focus {
background:url(http://www.facetofacetutoring.com/site_images/nav/test_hover.png);
}
#nav a.meet {
background:url(http://www.facetofacetutoring.com/site_images/nav/meet.png);
height:34px;
width:179px;
text-indent:-9999px;
}
#nav a.meet:hover, #nav a.meet:focus {
background:url(http://www.facetofacetutoring.com/site_images/nav/meet_hover.png);
}
#nav a.contact {
background:url(http://www.facetofacetutoring.com/site_images/nav/contact.png);
height:34px;
width:143px;
text-indent:-9999px;
}
#nav a.contact:hover, #nav a.contact:focus {
background:url(http://www.facetofacetutoring.com/site_images/nav/contact_hover.png);
}
#nav li.end_cap {
background-image:url(http://www.facetofacetutoring.com/site_images/nav/end_cap.png);
background-repeat:no-repeat;
display:block;
width:79px;
}
/***** PageTitle *****/
#pagetitle {
margin-left:auto;
margin-right:auto;
width:770px;
padding-bottom: 5px;
text-align: center;
}
#pagetitle p {
font-family: Arial;
font-size: 20px;
color: #2b459a;
margin-top: 50px;
}
/***** Content *****/
#content {
width:950px;
margin-left:auto;
margin-right:auto;
}
/***** Center *****/
#center {
margin-left:auto;
margin-right:auto;
margin: 0 225px 0 225px;
text-align:center;
font-family: Arial;
}
#center .pic {
border-style: solid;
border-width: 4px;
border-color: navy;
width: 381px;
height: 300px;
margin-left:auto;
margin-right:auto;
}
#center p.signup {
}
#middle p.signtext {
}
/***** Left *****/
#left {
float:left;
}
#board {
width:226px;
}
#board p.top {
background-image:url(http://www.facetofacetutoring.com/site_images/top_board.gif);
background-repeat:no-repeat;
float: left;
width:226px;
height:222px;
margin: 0;
padding: 0;
text-align: center;
}
/*
#board p.mid{
background-image: url(http://www.facetofacetutoring.com/site_images/middle_board.gif);
background-repeat: repeat-y;
width:226px;
float: left;
margin: 0;
padding: 0;
}
*/
#board p.bottom {
background-image: url(http://www.facetofacetutoring.com/site_images/bottom_board.gif);
background-repeat: no-repeat;
float:left;
width: 226px;
height:221px;
margin: 0;
padding: 0;
}
#chalk {
font-family: EraserDust;
color:#FFF;
list-style:none;
position: relative;
top:-400px;
overflow: hidden;
left:-7px;
}
#chalk .subject {
list-style-type: circle;
}
/***** right *****/
#right {
float:right;
width:225px;
font-family: Arial;
text-align: justify;
}
/***** FOOTER *****/
#footer {
background-image:url(http://www.facetofacetutoring.com/site_images/footer_grad.gif);
background-position:bottom;
height:132px;
clear: left;
text-align: center;
font-family: Arial;
font-size: 10px;
text-align:center;
}
#footer_fixed {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#sitemap {
position: relative;
bottom: -70px;
list-style-type: none;
margin:0;
padding: 0;
}
#sitemap li {
display: inline;
line-height: 15pt;
}
#footer .info {
text-align: center;
position: relative;
bottom: -75px;
}
</style>
</head>
<body>
<div id="wrapper">
[B] <div id="header">[/B]
<div id="title">
<p><a href="index.html"><img src="http://www.facetofacetutoring.com/site_images/title.png" border="0" alt="Face to Face Tutoring"/></a></p>
<p class="motto">This is the line to put a motto or something clever</p>
</div>
<!-- End title-->
<div id="login">
<form class="login" method="post" action=" ">
<div>
<label class="label" for="username">username</label>
<input class="box" type ="text" name="username" id="username" size="" maxlength=""/>
</div>
<div>
<label class="label" for="password">password</label>
<input class="box" type ="password" name="password" id="password" size="" maxlength=""/>
</div>
<div class="button">
<input type ="submit" value="Log in"/>
</div>
</form>
<p class="signuptxt">Don't have an account? Sign up today!</p>
</div>
<!-- End Login -->
<div id="navigation">
<ul id="nav">
<li class="front_cap"></li>
<li><a class="home" href="index.html">Home</a></li>
<li><a class="how" href="how.html"><span>How it Works</span></a></li>
<li><a class="test" href="test.html"><span>Testimonials</span></a></li>
<li><a class="meet" href="meet.html"><span>Meet the Tutors</span></a></li>
<li><a class="contact" href="contact.html"><span>Contact Us</span></a></li>
<li class="end_cap"></li>
</ul>
</div>
<!-- End of navigation-->
[B] </div>[/B]
<!-- End Header -->
<div id="pagetitle">
<p>Face to Face Tutoring is a new and innovative way to learn and educate children today in a busy and highly technical world through the use of video chat. </p>
</div>
<!-- End pagetitle-->
<div id ="content">
<div id="left">
<div id="board">
<p class="top"></p>
<p class="mid"></p>
<p class="bottom"></p>
<ul id="chalk">
<li>Subjects we Tutor in</li>
<li class="subject">Algebra</li>
<li class="subject">English</li>
<li class="subject">History</li>
<li class="subject">Social Studies</li>
<li>From grades 3-8</li>
<li>Convenient and Easy Video Chat Learning</li>
<li>All you need is an Internet connection and webcam</li>
</ul>
</div>
<!--End of Board-->
</div>
<!--End left-->
<div id="right">
<p>This is all the content that will go no the right side of the page in column 3
This is all the content that will go no the right side of the page in column 3
This is all the content that will go no the right side of the page in column 3
This is all the content that will go no the right side of the page in column 3
This is all the content that will go no the right side of the page in column 3
This is all the content that will go no the right side of the page in column 3
This is all the content that will go no the right side of the page in column</p>
</div>
<!--End right-->
<div id="center">
<p class="pic"><img src="http://www.facetofacetutoring.com/images/girl.jpg" alt="Picture of girl learning" /></p>
<p class="signup"><a href="#"><img src="http://www.facetofacetutoring.com/site_images/signup.gif" border="0" alt="Sign Up Button" /></a></p>
<p class="signtext">Sign up and now and start learning today. <br />
Need more information, check out our <a href="how.html">How it Works</a><br />
page or our <a href="contact.html">Contact</a> page for questions.</p>
</div>
<!-- End center-->
</div>
<!-- End Content-->
</div>
<!-- End Wrapper -->
<div id="footer">
<div id="footer_fixed">
<ul id="sitemap">
<li><a href="index.html">Home</a> | </li>
<li><a href="how.html">How it Works</a> | </li>
<li><a href="test.html">Testimonials</a> | </li>
<li><a href="meet.html">Meet the Tutors</a> | <a href="contact.html">Contact Us</a> | </li>
<li><a href="contact.html">Interested in Becoming a Tutor?</a> | </li>
<li><a href="contact.html"> Legal Terms and Conditions</a></li>
</ul>
<p class="info">Face to Face Tutoring, LLC 2010 All Rights Reserved Akron, Ohio</p>
</div>
</div>
<!-- End Footer -->
</body>
</html>
Have to rush now but back later if any questions 
Paul, I do not understand why you put an overflow:hidden on the header?
When I took it off the whole header shifted down probably around 50 or so pixels, but not sure why it did.
Main concern is part of my title image I would like to overflow, you can tell the left part of that graphic is cut off.
Thanks, I think I’ll just use an image for my button…
Here is the button as of now:
<div class=“button”>
<input type =“submit” value=“Log in”/>
</div>
If I end up using an image(i.e. btnSubmit.gif) do I use HTML or CSS to place the image?
Okay, the boxes dont really change, it’s more of the log in button. It’s different sizes in different browsers.
It’s looking pretty consistent across IE8, Opera and Chrome, not sure what you are seeing that is different. Form controls do vary from one browser to another in their default presentation, as do many other elements. The key to successful web design is to know when it doesn’t matter that it looks fractionally different in one browser to another!
One more thing.
How do I get those two form boxes to right align, keeping the labels left aligned?
It looks a bit unprofessional when you can’t line up your form boxes.
OK, so it’s different sizes. Does that really matter?
The general advice with form controls is to let browsers use their natural style as much as possible. If you want the submit button to be exactly the same in every browser, you’ll need to do it as an image.
There’s always more than one way to do something but if you can do it with less elements then that’s all the better. Only add elements when you really need them or if it makes sense to use them for structure.
You had the gradient on the header which you had at 100% width and then you had an inner header set to 1000px width. I merely removed the header element and put the image on the body to save an element.
Your wrapper was set to 100% but had no images applied and was therefore a wasted element so instead I used it to hold the layout together instead of having to do margin:auto for every element. If you need the footer full width it can sit outside the wrapper.
Of course you may have extra other requirements so you can still change things around to suit.
Try to look at a page logically and divide it into sections as most pages do have defined areas rather than trying to place every single little thing individually.
The simpler you can make it the easier it is to manage
Ah I see you moved the top gradient into the body and took the footer out of the wrapper for the bottom gradient to repeat.
That was a bit tricky, because I wanted to keept the content a fixed width but wanted the bkg gradient to repeat.
Thanks!
That was mainly to clear the floats but you can remove it and use another float clearing mechanism instead.
e.g.
#header{width:100%}
#header:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Well not exactly everything but when you need horizontal alignment of separate blocks then yes floats are a good tool. They are not without their bugs of course and there is a lot to know about them but they are one of the most powerful tools in css.
Some say that floats have been abused too much but this is not really true. They were designed to float blocks of content next to each other as well as letting content wrap around images etc. Use them wisely but don’t avoid them.
So from looking at my CSS you have come to concluded that I can do everything using floats?
You would use relative positioning to move something when you want it to be somewhere else but at the same time don’t want to disrupt the flow of the document in anyway.
It’s usually used for subtle overlapping effects where you want everything else to stay as it was. On the other hand when you move an element with margins then everything else (non-positioned) gets out of the way and you get no overlap. Usually this is what you want because you have to do nothing to maintain the layout and you can add content, resize text and everything behaves. The most important thing is allowing a page to flow and for content to follow content easily and without having to do anything special.
If you move an element with relative positioning by say top:200px then the next element in the page will not start after the relative elements new position but after the relative elements original position. That in all likelihood means that thing will overlap.
When moving something with relative positioning its like tearing it out of the page and then glueing it somewhere else. You leave a great big hole in the page where you ripped it out.
Relative position is often added to elements but without co-ordinates in order to creat a stacking context for absolutely placed children and also so that z-index can take effect. As no co-ordinates have been used there is no impact on the layouot.
Hope that helps :
Wow Paul thanks a lot I’ll take a look at it and try it out.
This is my first time ever using CSS to build a website, thanks for the patience!
So when should I ever use relative positioning? I’m sure there are articles about to use this too.
The formatting of a form button can be done without an image, just by using css. That’s the way I do it myself, the only form control that I’m not able to do that with on is a “browse for file” form field, AFAIK that’s just down to the css spec.