div css questions

[gpigate]

ok I have been coding html, php etc for quite some time now.... but always with tables. :mad:

I am now forcing myself to learn divs styles etc. So I have been playing around quite a bit and I am having a hard time understanding something.

Does anyone know of a good css reference showing the relationships between operators. ie when an ID vs class is used what the difference between the . # etc are?

I have this page here http://outdoorsindoors.net/DEV/GPAW/index.php?page=mods/calc/calc1

Just focus from where the gpa calc wizard header is down to the footer. ignore the site header and footer.

html code

<div class="calc">
<div id="cbody" class="cbody">
<div id="calchead" class="calchead"></div>
<div id="calcname" class="calcname"></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>

styles its using

.calc {background:#FFFFFF; margin: 0;}
.calc #cbody{background:#d9e2ff; margin:5px 0px 0px 9px; width:780px; height:500px; }
.calc #calchead{
background:url(calc1_header.jpg);
text-align:left;
width:780px;
height:47px;}
.calc #calcfoot{
background:url(calc1_foot.jpg);
text-align:left;
width:780px;
height:48px;
vertical-align:bottom;
position:relative;
top:300px;}

.calc #calcname{
background:url(calc1_name.jpg);
position:relative;
text-align:left;
width:249px;
height:31px;}
.calc #calcemail{
background:url(calc1_email.jpg);
position:relative;
text-align:left;
width:249px;
height:31px;}
.calc #calcstartgp{
background:url(calc1_start_gp.jpg);
position:absolute;
top: 400px;
right: 350px;
text-align:left;
width:264px;
height:26px;}
.calc #calcstarttc{
background:url(calc1_start_tc.jpg);
position:absolute;
top: 425px;
right: 350px;
text-align:left;
width:264px;
height:26px;}
.calc #calcstartqp{
background:url(calc1_start_qp.jpg);
position:absolute;
top: 450px;
right: 350px;
text-align:left;
width:264px;
height:26px;}

feel free to blast away as I am very new to this and having some trouble. I was under the impression that if I had a div with child divs then the relativity or relationship was to the parent div, nto to the page. If you notice the last 3 css entries the position numbers are higher than I would have expected. I had to put them as that to get them in the relative right location.

Moving forward this will be a calculator. I will use php to generate numbers that will display over the images for items such as name etc etc. Will I be able to create div elements and have them center or position by px relative to the name div?


any and all help is GREATLY appreciated.

Greg

[Snookerman]

Id's should only be used once per page and are targeted in the css with the number period (#) in front of the value. An element can only have on id value.

Classes can be used several times in a page for different elements and are targeted in the css with a period (.) in front of the value. An element can have multiple class values and they are separated with spaces.

When you give any element absolute positioning, it will position absolutely in the closest parent element that has been positioned itself. If there is no parent element that has a position, it will position itself in the body.

Here is a tutorial that talks about positioning a bit:
http://nettuts.com/html-css-techniques/solving-5-common-css-headaches/ (http://nettuts.com/html-css-techniques/solving-5-common-css-headaches/)

I know there is a better one somewhere but I can't find it right now, I'll post it later when I do. If you have any other questions, or probably follow-ups, just ask.

Here it is: http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/ (http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/)
You will find a lot of useful info there.

Good luck!

[gpigate]

so an id can have multiple classes and in this case the calc definition should be

#calc

and then have

#calc .otherclasses

also if calcbody is the parent, the rest should be children of the calcbody. calcbody should have a position so the rest would be relative to it?

if calc is the container and the calcbody is the id then the header footer etc are classes of calcbody what would be the syntax?

#calc

#calc .calcbody

#calc .calcbody calcheader

?????????/

thanks for the info that was really helpful... just trying to put it all together now.

Greg

[Snookerman]

Now you confused me, could you please try to explain your question again?

[gpigate]

im trying to set up a container called calc, then a calc header, body, and footer with children of those 3 areas

calc

calc header

calc body
calcname
calcemail

calc footer

but no matter what i try any time I set it up like that, it doesnt work, everything dissapears.

[Snookerman]

What code are you using? Is it the one from your first post, because that one doesn't disappear. Can you please post the html and css code you have so we can take a look?

[gpigate]

same code. last night i tried this. based on the above and my little bit of reading it seemed that i needed to swap my . and #'s


#calc {background:#FFFFFF; margin: 0;}
#calc .cbody{background:#d9e2ff; margin:5px 0px 0px 9px; width:780px; height:500px; }
#calc .calchead{
background:url(calc1_header.jpg);
text-align:left;
width:780px;
height:47px;}
#calc .calcfoot{
background:url(calc1_foot.jpg);
text-align:left;
width:780px;
height:48px;
vertical-align:bottom;
position:relative;
top:300px;}

#calc .calcname{
background:url(calc1_name.jpg);
position:relative;
text-align:left;
width:249px;
height:31px;}
#calc .calcemail{
background:url(calc1_email.jpg);
position:relative;
text-align:left;
width:249px;
height:31px;}
#calc .calcstartgp{
background:url(calc1_start_gp.jpg);
position:absolute;
top: 400px;
right: 350px;
text-align:left;
width:264px;
height:26px;}
#calc .calcstarttc{
background:url(calc1_start_tc.jpg);
position:absolute;
top: 425px;
right: 350px;
text-align:left;
width:264px;
height:26px;}
#calc .calcstartqp{
background:url(calc1_start_qp.jpg);
position:absolute;
top: 450px;
right: 350px;
text-align:left;
width:264px;
height:26px;}

same html

does what im trying to do make sense ? is it a good and standard way of going about things with css?

[Snookerman]

Could you please post a screenshot or sketch or something to show how you want this to look?

Just one note, in your css, id values should have the number sign in front of them (#) and class values should have a dot (.) in front of them. Since calc is a class value, it should be .calc not #calc.

[Snookerman]

You can try this, but since I'm not sure of how you want it to look I don't know where to place everything, but it might get you started:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#calc {
background: #FFFFFF;
margin: 0;
} #calc .cbody {
background: #d9e2ff;
margin: 5px 0px 0px 9px;
width: 780px;
height: 500px;
position: relative;
} #calc .calchead {
background: url(http://outdoorsindoors.net/DEV/GPAW/themes/CCS/calc1_header.jpg);
text-align: left;
width: 780px;
height: 47px;
} #calc .calcfoot {
background: url(http://outdoorsindoors.net/DEV/GPAW/themes/CCS/calc1_foot.jpg);
text-align: left;
width: 780px;
height: 48px;
position: absolute;
bottom: 0;
} #calc .calcname {
background: url(http://outdoorsindoors.net/DEV/GPAW/themes/CCS/calc1_name.jpg);
position: relative;
text-align: left;
width: 249px;
height: 31px;
} #calc .calcemail {
background: url(http://outdoorsindoors.net/DEV/GPAW/themes/CCS/calc1_email.jpg);
position: relative;
text-align: left;
width: 249px;
height: 31px;
} #calc .calcstartgp {
background: url(http://outdoorsindoors.net/DEV/GPAW/themes/CCS/calc1_start_gp.jpg);
position: absolute;
top: 200px;
right: 500px;
text-align: left;
width: 264px;
height: 26px;
} #calc .calcstarttc {
background: url(http://outdoorsindoors.net/DEV/GPAW/themes/CCS/calc1_start_tc.jpg);
position: absolute;
top: 225px;
right: 500px;
text-align: left;
width: 264px;
height: 26px;
} #calc .calcstartqp {
background: url(http://outdoorsindoors.net/DEV/GPAW/themes/CCS/calc1_start_qp.jpg);
position: absolute;
top: 250px;
right: 500px;
text-align: left;
width: 264px;
height: 26px;
}
</style>
</head>
<body>
<div id="calc">
<div id="cbody" class="cbody">
<div id="calchead" class="calchead">
</div>
<div id="calcname" class="calcname">
</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>
</body>
</html>


Good luck!

[gpigate]

see that is what has me puzzled. I had exactly what you showed in the previous post before. nothing appeared. I cahnged to what I had in the first post I made and everything somewhat works but it doesnt make sense.

here is what it should look like when I get done
http://outdoorsindoors.net/DEV/GPAW/gpa_examp.jpg
all of the black text/font is going to be derived based on calculations done in phph. I would like to be able to assign the results a class individually so that they are positioned based on their containing element.

for example
calc
calc body
total_credits (bg image)
total_credits p (this would be the number for the total credits)

But using the css you have above

#calc {
background: #FFFFFF;
margin: 0;
} #calc .cbody {
background: #d9e2ff;
margin: 5px 0px 0px 9px;
width: 780px;
height: 500px;
position: relative;
} #calc .calchead {
background: url(themes/CCS/calc1_header.jpg);
text-align: left;
width: 780px;
height: 47px;
} #calc .calcfoot {
background: url(themes/CCS/calc1_foot.jpg);
text-align: left;
width: 780px;
height: 48px;
position: absolute;
bottom: 0;
} #calc .calcname {
background: url(themes/CCS/calc1_name.jpg);
position: relative;
text-align: left;
width: 249px;
height: 31px;
} #calc .calcemail {
background: url(themes/CCS/calc1_email.jpg);
position: relative;
text-align: left;
width: 249px;
height: 31px;
} #calc .calcstartgp {
background: url(themes/CCS/calc1_start_gp.jpg);
position: absolute;
top: 200px;
right: 500px;
text-align: left;
width: 264px;
height: 26px;
} #calc .calcstarttc {
background: url(themes/CCS/calc1_start_tc.jpg);
position: absolute;
top: 225px;
right: 500px;
text-align: left;
width: 264px;
height: 26px;
} #calc .calcstartqp {
background: url(themes/CCS/calc1_start_qp.jpg);
position: absolute;
top: 250px;
right: 500px;
text-align: left;
width: 264px;
height: 26px;
}

andthe html

<div class="calc">
<div id="cbody" class="cbody">
<div id="calchead" class="calchead"></div>
<div id="calcname" class="calcname"></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>

I get nothing.... I get this
http://outdoorsindoors.net/DEV/GPAW/index.php?page=mods/calc/calc1

I do really appreciate you helping me with this though. I know how frustrating it can be sometimes. Is like teaching a dog to sit :)

[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/index.php?page=mods/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/ (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 :D

thanks a million for all the help.

[Snookerman]

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

[gpigate]

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

http://outdoorsindoors.net/DEV/GPAW/index.php?page=mods/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.

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

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/index.php?page=mods/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 (http://wufoo.com/) 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/ (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.

[gpigate]

think i got it. i was using a width in the style sheet instead of a size onthe text field.... i need to go downstairs to fridge and pull out one of those numbin drinks :)

http://outdoorsindoors.net/DEV/GPAW/index.php?page=mods/calc/calc1

the spacing is just a tad off... but ill figure that out.

thanks for all your help

[auntnini]

<quote>
Here is a tutorial that talks about positioning a bit:
http://nettuts.com/html-css-techniques/solving-5-common-css-headaches/

I know there is a better one somewhere but I can't find it right now, I'll post it later when I do. If you have any other questions, or probably follow-ups, just ask.

Edit: Here it is: http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/
You will find a lot of useful info there.</quote>

Snookerman.I'm falling in love with you. Those links lead to interesting reading about POSITION for my tutees (and for me as a tutor)

How do you insert a SCREEN SHOT, and how do you <quote>?.

Thanks.

[Snookerman]

@gpigate - You're welcome, I'm glad to help!

Your form is beginning to look more like the picture, you deserve a break :D

[gpigate]

i feel like i need to send snook a random act of paypalness :)

[Snookerman]

Snookerman.I'm falling in love with you. Those links lead to interesting reading about POSITION for my tutees (and for me as a tutor)

How do you insert a SCREEN SHOT, and how do you <quote>?.

Thanks.

:D I love tutorials too!

To quote you can just hit the quote button, look like so: http://www.dynamicdrive.com/forums/images/buttons/quote.gif
You then get some info like who wrote the quote and a link to the specific post (like I did with yours up there).

You can also use the quote tags, you were almost right but instead of <quote> you would use [quote]. There's even a button up there: http://www.dynamicdrive.com/forums/images/editor/quote.gif

To add a screenshot you could either link to an image (button looks like this: http://www.dynamicdrive.com/forums/images/editor/insertimage.gif) or you can attach a file if you can't upload it (button looks like this: http://www.dynamicdrive.com/forums/images/editor/attach.gif).

Good luck!