Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 35

Thread: div css questions

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

    Default

    That's because you're not using what I posted:
    Code:
    <div id="calc">
    You have this:
    Code:
    <div class="calc">
    Like I said, # for id and . for class.
    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!

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

    gpigate (01-06-2009)

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

    Default

    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

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

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

    Default

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

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

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

    Default

    <p> tags have some top margin. If you want to remove that you need to get rid of that:
    Code:
    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!
    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. #15
    Join Date
    Jul 2007
    Location
    Irmo, SC
    Posts
    96
    Thanks
    10
    Thanked 7 Times in 7 Posts

    Default

    yes they will be input fields... eventually.

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

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

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

    Default

    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.
    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. The Following User Says Thank You to Snookerman For This Useful Post:

    gpigate (01-06-2009)

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

    Default

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

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

    Default

    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 Code:
    <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!
    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. The Following User Says Thank You to Snookerman For This Useful Post:

    gpigate (01-06-2009)

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

    Default

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

    thanks a million for all the help.

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

    Default

    Hehe, you're welcome, I'm glad to help!
    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!

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

    gpigate (01-06-2009)

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
  •