div css questions

[gpigate]

ok last thing i promise..... it wsant doing this a second ago.

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

in firefox all is fine... i havent got the form focus jscript to work yet... however in IE.. I am getting a yellow box over the email field. wtf?

[Snookerman]

I looked at it in IE8, IE7 and IE6 and they all look just fine.

[gpigate]

yeah i found that my IE7 browser had google auto fill turned on. Once I turned it off the yellow went away.

so i renamed the field from c1email to c1eml and turned it back on. no yellow box... WOHOOOOOOOOOOOOOOO

[gpigate]

aight snooker.... lets complicate things.

i have the top part working well. now for the magic.

http://outdoorsindoors.net/DEV/GPAW/gpa_examp.jpg

Take a look where it shows the semester stuff below the middle bar. Those will all be fields on a row.

using css and div... is there any reason to cut those up into individual fields and place them... or could i have 1 image with all the fields on it... moving the text fields where I need to using the css.

I will have a button down there allowing for more semester classes to be inserted. This will be stored in the db and then looped out for however many classes they have.

whatcha think?

[Snookerman]

Are those going to be input fields as well? And by image do you mean the background image?

[gpigate]

yes they are going to be input fields and yeah i mean a background image like this one.



that way I can just loop a div... showing the bg image.. then placing the values that were input and then saved as well as the calculated fields

the calculated fields will not be input fields... just display.

[gpigate]

im sure there is a better way to do this... but this is what I am doing right now and it gives me the bars..

} #calc .cbody .classbar0{
	position: absolute;
	width: 780px;	
	height: 27px;
	top:190px;				
	background: url(det_bar.jpg);
} #calc .cbody .classbar1{
	position: absolute;
	width: 780px;	
	height: 27px;
	top:217px;				
	background: url(det_bar.jpg);
} #calc .cbody .classbar2{
	position: absolute;
	width: 780px;	
	height: 27px;
	top:244px;				
	background: url(det_bar.jpg);
} #calc .cbody .classbar3{
	position: absolute;
	width: 780px;	
	height: 27px;
	top:271px;				
	background: url(det_bar.jpg);
php for it

  <div id="cbody" class="cbody">
    <div id="calchead" class="calchead"></div>
    <div id="calcname" class="calcname"><input type="text" class="calcfield" name="c1name"></div>    
    <div id="calcemail" class="calcemail"><input type="text" class="calcfield" name="c1eml"></div>
    <img src="themes/CCS/calc_bar.jpg" class="bar"/>
    <img src="themes/CCS/class_bar.jpg" class="classtitle"/>  
    <?php for ($i=0;$i<3;$i++){ ?>  
    <div class="classbar<?php echo $i;?>"></div>
    <?php }?>
    <div id="calcstartgp" class="calcstartgp"><input type="text" class="calcfield" name="c1startgp"></div>
    <div id="calcstarttc" class="calcstarttc"><input type="text" class="calcfield" name="c1starttc"></div>
    <div id="calcstartqp" class="calcstartqp"><input type="text" class="calcfield" name="c1startqp"></div>                
    <div id="calcfoot" class="calcfoot"></div>    
  </div>

so it loops through 3 times.... incrementing the style class by 1 each time and they are predefinied.

i would much rather not have to add a numeric to the style and have them predefined but more rather have the class static and have their position relative to the one that was just displayed. does that make sense?

[gpigate]

ok i thought i was doing good but then hit a snag.....

} #calc .cbody {
	background: #d9e2ff;
	margin: 5px 0px 0px 9px;
	width: 780px;
	height: 500px;
	position: relative;
} #calc .cbody .bar{
	position: absolute;
	top:140px;		
} #calc .cbody .classtitle{
	position: absolute;
	top:150px;											  	
} #calc .cbody .classbar0{
	position: absolute;
	width: 780px;	
	height: 27px;
	top:190px;				
	background: url(det_bar.jpg);
} #calc .cbody .classbar0 .cname{
	color: #000000; 
	margin:3px;
	height:20px;
	width:220px;
	background: transparent no-repeat;	
	border:none;
	padding: 0px 0 0 35px;
	font-size: 8pt; 
	font-family: Tahoma, Arial, Helvetica, sans-serif;	
} #calc .cbody .classbar0 .cgrade{
	color: #000000; 
	margin:3px;
	height:20px;
	width:190px;
	background: transparent no-repeat;	
	border:none;
	padding: 0px 0 0 125px;
	font-size: 8pt; 
	font-family: Tahoma, Arial, Helvetica, sans-serif;
} #calc .cbody .classbar0 .ccredit{
	color: #000000; 
	margin:3px;
	height:20px;
	width:190px;
	background: transparent no-repeat;	
	border:none;
	padding: 0px 0 0 5px;
	font-size: 8pt; 
	font-family: Tahoma, Arial, Helvetica, sans-serif;	
} #calc .cbody .classbar0 .cqpts{
	color: #000000; 
	margin:3px;
	height:20px;
	width:60px;
	background: transparent no-repeat;	
	border:dashed;
	padding: 0 0 0 0;
	font-size: 8pt; 
	font-family: Tahoma, Arial, Helvetica, sans-serif;		

<div id="calc">
  <div id="cbody" class="cbody">
    <div id="calchead" class="calchead"></div>
    <div id="calcname" class="calcname"><input type="text" class="calcfield" name="c1name"></div>    
    <div id="calcemail" class="calcemail"><input type="text" class="calcfield" name="c1eml"></div>
    <img src="themes/CCS/calc_bar.jpg" class="bar"/>
    <img src="themes/CCS/class_bar.jpg" class="classtitle"/>  
    <?php for ($i=0;$i<1;$i++){ ?>  
    <div class="classbar<?php echo $i;?>"><input type="text" name="classname" class="cname" value="name">
    									  <input type="text" name="cgrade" class="cgrade" value="grade">
                                          <input type="text" name="ccredit" class="ccredit" value="credit">
                                          <input type="text" name="qualpts" class="cqpts" value="quality">
                                          <input type="text" name="cgradepts" value="gpionts">
                                          <input type="text" name="cclasslevel" value="level">
                                          </div>
    <?php }?>
    <div id="calcstartgp" class="calcstartgp"><input type="text" class="calcfield" name="c1startgp"></div>
    <div id="calcstarttc" class="calcstarttc"><input type="text" class="calcfield" name="c1starttc"></div>
    <div id="calcstartqp" class="calcstartqp"><input type="text" class="calcfield" name="c1startqp"></div>                
    <div id="calcfoot" class="calcfoot"></div>    
  </div>
</div>

take a look at this link
http://outdoorsindoors.net/DEV/GPAW/...ods/calc/calc1

you can see that the name of the class, grade and credit points are all doing fine. I put the quality points with a dashed border to show what its doing. That is as far left as I can get it for some reason. probably something simple that I am missing....

also on structure/approach. I would think there would be a better way to get those rows to position based on each other instead of having to give a row1, row2, row3... rowx class definition.

thoughts?

[Snookerman]

I forgot to mention this before, I would really recommend Wufoo for your form. It's really great, it will help you make awesome forms in no time. Take a look at this tutorial to see how powerful it is:
http://css-tricks.com/video-screencasts/28-using-wufoo-for-web-forms/

Good luck!

[gpigate]

checked out wufoo... very cool and maybe I will use it for some other things but it would not work here. I need to capture data from the form, store in the database, manipulate, calculate and display back to the user on this form.

from what i understood about wufoo... it would store the information on their server and you have to log in to retrieve it.

I understand I have been bugging you all day. if you are tired of looking at this just let me know.