Forum Moderators: not2easy
my little block of CSS
I think there is some confusion in your wording. CSS is a styling language. Lines of CSS code are placed either in a style attribute within an HTML tag (called inline styles), within <style></style> tags in the <head> of your document (called internal styles), or in an external .css file that is linked to the document via the <link> tag (called external styles). The lines of CSS code do not actually produce content on the page (except in very rare and not widely supported exceptions), but instead instruct the browser on HOW it should render the content in the HTML source code.
When you say "little block of CSS," and say that you would like to place it somewhere on your page, what exactly is it that you are referring to?
cEM
1. Do you mean inside the text input, or outside the text input?
2. Do you mean content that is in the HTML code, or not in the HTML code?
3. Can you give a small description of exactly what it is you are trying to do?
cEM
I have some text input form fields on a page and I just want to make a sort of "help box" for each one. (A little box that gives tips for filling in the text input field)
I'm just trying to figure out the correct CSS to make the help box show up directly under the text input field and with the same width as the text input field.
correct CSS to make the help box show up directly under the text input field and with the same width as the text input field
The keys here would be (a)making sure the help box comes after the text box in the HTML, but within the same container, (b)giving both elements an explicit (and equal) width in the CSS, then (c) floating the hint box to the right so it sits underneath the input box. Try the following code and see if it's what you had in mind...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<style type="text/css">
.box{
width:200px;
text-align:right;
clear:right;
}
.text_input{
width: 100px;
border: 1px solid #123;
}
.hint {
float:right; /*brings hint box underneath input box*/
width:100px;
border:1px solid #123;
background:#789;
text-align:left;
margin-top:0px; /*removes the gap*/
}
</style>
</head>
<body>
<div class="box">
<label>First Name: <input type="text" class="text_input" name="first_name" value="your first name" />
<p class="hint">Hint: Check your driver's license if you're not sure how to spell your first name!</p>
</div>
<div class="box">
<label>Age: <input type="text" class="text_input" name="first_name" value="your age" />
<p class="hint">Hint: This is a number, like "21," and not a word, like "fish."</p>
</div>
</body>
</html>
Be sure to add a clear:right property to whatever follows this block of code (each .box div has it so they will stack) or funky things will happen.
cEM
here's the important parts of my code:
------
<style type="text/css">
<!--
.row{
padding: 15px 0 15px 0;
clear:both;
display:block;
border-bottom: 1px solid silver;
}
.field{
display: inline;
clear: right;
text-align:right;
}
.hint{
display: block;
float:right;
margin-top:0px; /*removes the gap*/
background-color: #E2F6EA;
color: #000;
font-size: 9px;
font-weight: normal;
padding: 5px;
text-align: left;
}
-->
</style>
<body>
<div class="row">
<div class="field">
<label>Phone</label>
<input type="text" name="phone" size="15">
<div class="hint">Please include the area code</div>
</div>
<div class="field">
<label>Fax</label>
<input type="text" name="fax" size="15">
<div class="hint">Please include the area code</div>
</div>
</div>
</body>
---------
it makes the hint show up right beneath each row-line (bottom border of .row)
I'm using FF and IE6 and have no problem with the code, which makes me wonder why it works on mine and not yours.
Is your IE current with all of the critical updates?
Are you copying & pasting all of createErrorMsg's code, including the DOC TYPE? If you are just copying the coding part and pasting it into your document then things could go strange.
