div css questions

[gpigate]

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

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/...ods/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/

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.

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

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/...ods/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