I am trying to create a Contact Us page with a 3 column layount. I want to put the textarea into the second (maincontent) column. When I select preview everything looks good however as soon as I test in any of the browsers, verything is adjusted to the extreme left (in the first column). I know it's probably something stupid on my part, but will someone take a look at my code for the error?
Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Contact Us</title>
<meta http-equiv="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)" />
<meta name="created" content="Thu, 24 Jun 2010 09:16:38 GMT" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" media="screen" href="css/main_styles.css" />
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="header">
<h1>Frank and Kolb, Russia</h1>
<p class="description">Two German colonies on the Volga River</p>
</div>
<div id="navbar">
<a href="index.html">Home</a>
<a href="#">Frank</a>
<a href="#">Kolb</a>
<a href="http://www.ahsgr.org" target="_blank">AHSGR</a>
<a href="#">Site Map</a>
<a href="#">Search</a>
<a href="contact_us">Contact Us</a>
</div>
<div id="header2">
<h2>contact us</h2>
</div>
<div id="leftcolumn">
</div>
<div id="maincontent">
<p>Please use the following form to leave a comment, ask a question, or report broken links.</p>
<!-- Start of FORM -->
<form action="http://www.frank-kolb-russia.org/cgi-bin/formmail/formmail.pl" method="POST">
<input type="hidden" name="recipient" value="fkr@frank-kolb-russia.org">
<br />
<p>Name:<br />
<input name="name" size="30" maxlength="30"></p>
<p>Email Address:<br />
<input name="email" size="30" maxlength="30"></p>
<p>Subject:<br />
<input name="subject" size="30" maxlength="30"></p>
<p>Comment:<br />
<textarea wrap="physical" name="comments" cols="60" rows="10"></textarea></p>
<p><input type="submit" value="send mail" name="submit">
<input type="reset" value="clear" name="reset"></p>
</p>
</form>
<!-- End of FORM -->
</div>
<div id="rightcolumn">
</div>
<div id="footer">
<p>2010 - Kelly Horst<br />
Created using CoffeeCup Software</p>
</div>
</div>
</div>
</body>
</html>
Kelly Horst
Registered User
85 posts
Janys Hyde
Ambassador
6,076 posts
Got an url for us...
This takes me nowhere
frank-kolb-russia.org
or is this the one?
http://www.ahsgr.org/
I only ask so that we can see the css you have set up which might need tweaking a bit.
This takes me nowhere
frank-kolb-russia.org
or is this the one?
http://www.ahsgr.org/
I only ask so that we can see the css you have set up which might need tweaking a bit.
Kelly Horst
Registered User
85 posts
Janys,
I don't have the files uploaded yet for the website (www.frank-kolb-russia.org). But here is my css file. I tried following one of the Theme Layouts for the contact page as far as the css style but that didn't work either (again it's probably just me), so instead I just put the put the font-size & font-family on my css file and used the inline format for setting up the input and textarea sizes.
Main Styles
html {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 18px;
color:#004b6f;
background-color: #004000;
}
blockquote { font-size: 12px; }
h2 { color: #004b6f; }
a { color: #800080; }
p { margin: 0 0 18px; }
span { color: #BE4707; }
#container { width: 1024px; margin: 0 auto; margin-top: 25px; }
#wrapper { float: left; width: 100%; background-image: url('../images/leaves.jpg'); }
#header {
background: #C9C9C9 url('../images/my_headerback.gif') right top no-repeat;
border-bottom: 2px solid #ddd;
}
#header h1 { color: #004b6f; font-size: 24px; margin: 0 0 3px; padding: 20px 18px 0; }
#header p { color: #004b6f; font-size: 11px; font-weight: bold; margin-left: 20px; }
#header2 { color: #004b6f; font-size: 14px; text-align: center; }
#navbar {
color: #800080;
font-size: 13px;
line-height: 16px;
text-align: center;
letter-spacing: 3px;
margin-bottom: 15px;
padding-bottom: 15px;
height: 16px;
}
#navbar a:hover {
color: #008080;
text-decoration: none;
}
#leftcolumn {
float: left;
width: 185px;
margin-left: 20px;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-right: 5px;
}
.menuitem a:link {
color: #800080;
text-decoration: none;
}
.menuitem a:visited {
color: #8080C0;
text-decoration: none;
}
.menuitem a:hover, a:active {
color: #008080;
text-decoration: none;
}
#rightcolumn {
float: left;
width: 194px;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-top: 40px;
}
#maincontent{
float: left;
width: 600px;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-right: 15px;
}
#footer {
width: 100%;
clear: both;
color: #800080;
height: 100px;
font-size: 11px;
font-weight: bold;
line-height: 18px;
margin: 0 0 5px 20px;
padding-top: 150px;
text-align: left;
letter-spacing: 3px;
}
#footer a:hover {
color: #008080;
text-decoration: none;
}
#footer p {
color: #004b6f;
padding: 5px 0 0 0;
}
/* Form Sytles */
textarea {
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Thanks for taking a look at this.
I don't have the files uploaded yet for the website (www.frank-kolb-russia.org). But here is my css file. I tried following one of the Theme Layouts for the contact page as far as the css style but that didn't work either (again it's probably just me), so instead I just put the put the font-size & font-family on my css file and used the inline format for setting up the input and textarea sizes.
Main Styles
html {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 18px;
color:#004b6f;
background-color: #004000;
}
blockquote { font-size: 12px; }
h2 { color: #004b6f; }
a { color: #800080; }
p { margin: 0 0 18px; }
span { color: #BE4707; }
#container { width: 1024px; margin: 0 auto; margin-top: 25px; }
#wrapper { float: left; width: 100%; background-image: url('../images/leaves.jpg'); }
#header {
background: #C9C9C9 url('../images/my_headerback.gif') right top no-repeat;
border-bottom: 2px solid #ddd;
}
#header h1 { color: #004b6f; font-size: 24px; margin: 0 0 3px; padding: 20px 18px 0; }
#header p { color: #004b6f; font-size: 11px; font-weight: bold; margin-left: 20px; }
#header2 { color: #004b6f; font-size: 14px; text-align: center; }
#navbar {
color: #800080;
font-size: 13px;
line-height: 16px;
text-align: center;
letter-spacing: 3px;
margin-bottom: 15px;
padding-bottom: 15px;
height: 16px;
}
#navbar a:hover {
color: #008080;
text-decoration: none;
}
#leftcolumn {
float: left;
width: 185px;
margin-left: 20px;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-right: 5px;
}
.menuitem a:link {
color: #800080;
text-decoration: none;
}
.menuitem a:visited {
color: #8080C0;
text-decoration: none;
}
.menuitem a:hover, a:active {
color: #008080;
text-decoration: none;
}
#rightcolumn {
float: left;
width: 194px;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-top: 40px;
}
#maincontent{
float: left;
width: 600px;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-right: 15px;
}
#footer {
width: 100%;
clear: both;
color: #800080;
height: 100px;
font-size: 11px;
font-weight: bold;
line-height: 18px;
margin: 0 0 5px 20px;
padding-top: 150px;
text-align: left;
letter-spacing: 3px;
}
#footer a:hover {
color: #008080;
text-decoration: none;
}
#footer p {
color: #004b6f;
padding: 5px 0 0 0;
}
/* Form Sytles */
textarea {
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Thanks for taking a look at this.
Janys Hyde
Ambassador
6,076 posts
Just by way of an example, try taking one of these paragraphs
and instead of having that line break there, add in a few no break spaces instead
They should put it all on the same line at least.
The only problem is that the columns will be uneven because of the length of the different words.
What you haven't done is declared a position for the main content div.
Try something like this
The relative position will place it in relation to the wrapper. The 210px is the width of your left column plus the margin and padding. Then do the same for right column but make that "float" is a right, not left. You should probably put your text and boxes in the main content area together otherwise alignment will become an issue.
<p>Subject:<br />
<input name="subject" size="30" maxlength="30"></p>
<input name="subject" size="30" maxlength="30"></p>
and instead of having that line break there, add in a few no break spaces instead
They should put it all on the same line at least.
The only problem is that the columns will be uneven because of the length of the different words.
What you haven't done is declared a position for the main content div.
Try something like this
#maincontent{
position:relative;
left:210px;
float: left;
width: 600px;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-right: 15px;
}
position:relative;
left:210px;
float: left;
width: 600px;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-right: 15px;
}
The relative position will place it in relation to the wrapper. The 210px is the width of your left column plus the margin and padding. Then do the same for right column but make that "float" is a right, not left. You should probably put your text and boxes in the main content area together otherwise alignment will become an issue.
Kelly Horst
Registered User
85 posts
For the text and boxes I didn't mean to imply that the text would be in the left colmn and the boxes in the main content. They are all in the main content area. I purposefully used the line break because I like the way it looks more so than if they were on the same line.
I understand using the 'position: relative;', however if I put 'left: 210px;' it adjusts the maintcontent data over an additional 210px. When I preview it, it shows the data moved over but when I test in the browser it does if fact line up correctly in the main content area. However as a consequence all the other pages are then adjusted by 210px.
I suppose I could have a second css file just for the contact page with this workaround but that still doesn't explain why it isn't aligning correctly and I'm concerned that it may cause me more problems at a later date.
I understand using the 'position: relative;', however if I put 'left: 210px;' it adjusts the maintcontent data over an additional 210px. When I preview it, it shows the data moved over but when I test in the browser it does if fact line up correctly in the main content area. However as a consequence all the other pages are then adjusted by 210px.
I suppose I could have a second css file just for the contact page with this workaround but that still doesn't explain why it isn't aligning correctly and I'm concerned that it may cause me more problems at a later date.
Kelly Horst
Registered User
85 posts
I think I fixed the problem. I just added the element #contactform to my css and did away with the left, maincontent, and right columns.
#contactform {
position: relative;
float: left;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-left: 210px;
}
#contactform {
position: relative;
float: left;
font-size: 15px;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding-left: 210px;
}
Janys Hyde
Ambassador
6,076 posts
Ok. The main thing is that you got it sorted of course.
The Philosopher
Registered User
2,038 posts
Remember if you need to position is more specifically you can use the CSS:
margin-left (right, bottom, top): as well.
margin-left (right, bottom, top): as well.
The philosopher has not done philosophy until he has acted upon the mere conviction of his idea; for proof of the theory is in the act, not the idea.
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
My Web Development Company: http://www.innovatewebdevelopment.com (Created with Coffee Cup Software).
My Personal Website: http://www.EricSEnglish.com
Kelly Horst
Registered User
85 posts
I'm still learning this stuff and I know that I keep getting the margin and padding mixed up.
Janys Hyde
Ambassador
6,076 posts
If you just remember that the margin is outside and the padding is inside.
Just think of a box containing your content, so any padding you add will push your content further away from the confines of the box, whereas if you add margins, they will push your box away from any other boxes around it. What you must always be careful about is remembering that all the pixels that get used up for padding and margins have an effect on the total width of your page... they must be taken into account when you decide on what width to make the various "containers" for your content.
Just think of a box containing your content, so any padding you add will push your content further away from the confines of the box, whereas if you add margins, they will push your box away from any other boxes around it. What you must always be careful about is remembering that all the pixels that get used up for padding and margins have an effect on the total width of your page... they must be taken into account when you decide on what width to make the various "containers" for your content.
Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.
