div css questions

[Snookerman]

That's because you're not using what I posted:

<div id="calc">

You have this:

<div class="calc">

Like I said, # for id and . for class.

[gpigate]

my apologies.... just made the old miss the ; semicolon mistake

ok so i have that working.

http://outdoorsindoors.net/DEV/GPAW/...ods/calc/calc1

Now the question is... I wnat to put in a <p> "class"? for the wording that will go over the images.

I have it attempted in the link above. here is what I put in the css/html

just an excerpt
            } #calc .calcname {
                background: url(calc1_name.jpg);
                position: relative;
                text-align: left;
                width: 249px;
                height: 31px;
            } #calc .calcname p{
                color: #000000; 
		font-size: 8pt; 
		font-family: Tahoma, Arial, Helvetica, sans-serif; 
		text-align: center;		

<div id="calc">
  <div id="cbody" class="cbody">
    <div id="calchead" class="calchead"></div>
    <div id="calcname" class="calcname"><p>John Doe</p></div>    
    <div id="calcemail" class="calcemail"></div>
    <div id="calcstartgp" class="calcstartgp"></div>
    <div id="calcstarttc" class="calcstarttc"></div>
    <div id="calcstartqp" class="calcstartqp"></div>                
    <div id="calcfoot" class="calcfoot"></div>    
  </div>
</div>

but it seems to bump the bg image of the calcname class.... and the text doesnt line up quite right. I think i have it declared correctly but not getting the results im expecting. (actually it bumps in FF but not in IE....

Again THANK YOU

[gpigate]

GOT IT!!!!!!!!!!!!

            } #calc .calcname p{
                color: #000000; 
				font-size: 8pt; 
				font-family: Tahoma, Arial, Helvetica, sans-serif; 
				text-align: center;	
				padding:10px;

added padding 10 and it put it in the right spot both in IE and FF.

now for the million dollar question. is this the right way to be going about all of this. is the approach solid?

[Snookerman]

<p> tags have some top margin. If you want to remove that you need to get rid of that:

p {
margin-top: 0;
}

or just <span> tags.

Just one question: do you want the name and email fields to be input fields?

Good luck!

[gpigate]

yes they will be input fields... eventually.

i tried this and i guess i will have to play with the padding/margins etc

            } #calc .calcname {
                background: url(calc1_name.jpg);
                position: relative;
                text-align: left;
                width: 249px;
                height: 31px;
            } #calc .calcname calcfield{
                color: #000000; 
				font-size: 8pt; 
				font-family: Tahoma, Arial, Helvetica, sans-serif; 
				text-align: center;	
				padding:10px;
				margin-top:0px;
				border:0px;

<div id="calc">
  <div id="cbody" class="cbody">
    <div id="calchead" class="calchead"></div>
    <div id="calcname" class="calcname"><input type="text" class="calcfield"></div>

[Snookerman]

Take a look at this tutorial:
http://css-tricks.com/video-screencasts/21-walkthrough-of-contact-form/
It's about making a contact form, but it has some good tips to using background images in forms and designing forms.

[gpigate]

            } #calc .calcname {
                background: url(calc1_name.jpg);
                position: relative;
                text-align: left;
                width: 249px;
                height: 31px;
            } #calc .calcname .calcfield{
                color: #000000; 
				margin:3px;
				height:20px;
				width:200px;
				background: transparent no-repeat;	
				border:none;
				padding: 7px 0 0 50px;
				font-size: 8pt; 
				font-family: Tahoma, Arial, Helvetica, sans-serif;

tried that and it seems to work fine only problem i see is that it doesnt look like a normal form... will users know to click in there and put in their info? anyway to highlight that?

will take a look at your link

[Snookerman]

In the tutorial I posted you will see how to change the background image/color when an input field is selected. If you want the focus to go directly to the form when the user comes to the page (like google) you can use JavaScript like so:

<html>
<head>
<title>Title</title>
<script type="text/javascript">
<!--
function focusform(){document.formname.inputname.focus();}
//-->
</script>
</head>
<body onLoad="focusform()">
<form name="formname">
	<input name="inputname">
</form>
</body>
</html>

Good luck!

[gpigate]

You are the MAN!!!!!!!!! assuming snookerman is not your alter ego

thanks a million for all the help.

[Snookerman]

Hehe, you're welcome, I'm glad to help!