Advanced Search

Page 1 of 4 123 ... LastLast
Results 1 to 10 of 35

Thread: div css questions

  1. #1
    Join Date
    Jul 2007
    Location
    Irmo, SC
    Posts
    96
    Thanks
    10
    Thanked 7 Times in 7 Posts

    Default div css questions

    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
    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
    Code:
    .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
    Last edited by gpigate; 01-07-2009 at 06:16 PM. Reason: resolved

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. The Following User Says Thank You to Snookerman For This Useful Post:

    gpigate (01-06-2009)

  4. #3
    Join Date
    Jul 2007
    Location
    Irmo, SC
    Posts
    96
    Thanks
    10
    Thanked 7 Times in 7 Posts

    Default

    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

  5. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Now you confused me, could you please try to explain your question again?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  6. The Following User Says Thank You to Snookerman For This Useful Post:

    gpigate (01-06-2009)

  7. #5
    Join Date
    Jul 2007
    Location
    Irmo, SC
    Posts
    96
    Thanks
    10
    Thanked 7 Times in 7 Posts

    Default

    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.

  8. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  9. #7
    Join Date
    Jul 2007
    Location
    Irmo, SC
    Posts
    96
    Thanks
    10
    Thanked 7 Times in 7 Posts

    Default

    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

    Code:
    #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?

  10. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  11. #9
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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:
    HTML Code:
    <!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!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  12. #10
    Join Date
    Jul 2007
    Location
    Irmo, SC
    Posts
    96
    Thanks
    10
    Thanked 7 Times in 7 Posts

    Default

    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
    Code:
                #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

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •