SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    aligning text to center of background image

    Well, I don't know why I'm having issues with this, but I can't figure out why I can't get it to work.

    I want to align the 50 g and Carbs to the center of the image. Am I going about this the wrong way? The "margin-left:95px;" shifts the text over, but the "margin-top:75px;" has no effect. Either way I'd like to align it to the center without using pixels. I want to do something like text-align:center; but I can't get that to work. I want it to do something like that since the text here will be changing (i.e. 50 ).

    <div style="float:left;">
    <p style="font-size:18px;"> Carbohydrates </p>
    <p style="background-image:url(../../includes/images/MacronutrientsBackgroundCarbs.png);
    background-repeat:no-repeat; background-position:center; color:#776f63; width:242px; height:242px; margin-left:-15px; margin-top:-15px; font-size:30px;"> <span style="margin-left:95px; margin-top:75px;">50 g </span> <br /><span> Carbs</span> </p>

    </div>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    We'd need to see more of your CSS here, but you'd need to put text-align: center on the <p> rather than on the span. The top margin is probably not working because of "margin collapse", which also can be fixed pretty easily (or you could just use padding instead).

    Can you post a link to a working example?

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can't post a link because its hosted locally and I don't understand how to create a new page on the system. I'm waiting for the programmers to create a new page using the framework that they set up.


    here is the code for the whole page. Also, you can see the style sheet on the site http://nutritionfirstfitness.com/

    BTW the way the align-text:center worked when putting it in the paragraph styling. Also, I'd be fine adding top-padding to the paragraph too and that worked in putting the text where I wanted it but for some reason it all shifted the whole div down. ???


    <form action="@@action@@">



    <div id="fb-root">
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    </div>


    <div style="margin-top:0px; margin-left:220px; margin-bottom:25px;">
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-1791435015113217";
    /* Top of page ad */
    google_ad_slot = "5169151019";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    <!--<a href="/"><img src="public/images/tracker_ad_horizontal.jpg" width="575" /></a>-->
    </div>



    <div class="explanation tools">

    <h2>Tools <span>&gt; Body Mass Index</span>

    <div class="fb-like" data-href="http://nutritionfirstfitness.com/tools.php?tool=bmi" data-send="true" data-layout="button_count" data-width="450" data-show-faces="false" data-font="arial">
    </div>
    </h2>

    </div>




    <div class="CalculatorsMenu">
    <h3>Calculators</h3>
    <ul>
    <li class="soon"><a href="#" title="Basal Metabolic Rate" class="basal">Basal Metabolic Rate <span>*</span></a></li>
    <li><a href="tools.php?tool=bmi" title="Body Mass Index" class="current">Body Mass Index</a></li>

    <li><a href="tools.php?tool=onerepmax" title="One Rep Max" class="onerep">One Rep Max</a></li>
    <li class="soon"><a href="#" title="Post-Workout Meal" class="postmeal">Post-Workout Meal <span>*</span></a></li>
    <li class="soon"><a href="#" title="Pre-Workout Meal" class="premeal">Pre-Workout Meal <span>*</span></a></li>
    <li class="soon"><a href="#" title="Protein" class="protein">Protein <span>*</span></a></li>
    <li><a href="tools.php?tool=running" title="Running Calories" class="calories">Running Calories</a></li>
    <li class="soon"><a href="#" title="Target Heart Rate" class="target">Target Heart Rate <span>*</span></a></li>

    <li><a href="tools.php?tool=waisttohip" title="Waist/Hip Ratio" class="ratio">Waist to Hip Ratio</a></li>
    <li class="soon"><a href="#" title="Water" class="water">Water <span>*</span></a></li>
    </ul>
    <p><span>*</span> Coming Soon</p>
    </div>


    <!-- <img src="../../includes/images/Bowl_of_pasta.png" width="480" height="457" style="float:right; margin-left:15px;" alt="Height_vs_Body_Weight" />-->





    <div style="background-image:url(../../includes/images/Bowl_of_pasta.png); background-repeat:no-repeat; background-position:right; "> <!--Start Right Container-->

    <h3 style="width:700px;">What should I eat before I workout?</h3>
    <p style="width:800px;"> What you eat and how much you eat before you workout depends on your body weight, how long you eat before you workout, and the type of exercise that you will be participating in.</p>




    <div style="margin-top:0px; width:750px; float:left; font-size:16px;">
    <h3>Calculate your <span style="color:#36a3c0;">Pre-workout</span> meal needs</h3>

    <form>

    <label>Body Weight:
    <span><input type="text" name="weight" /> &nbsp; lbs.</span>
    </label>

    <fieldset>How long will you eat before you workout? :
    <span style="margin-left:175px;">
    <label><input type="text" name="feet" /> hours</label>
    &nbsp;
    <label><input type="text" name="inches" /> minutes</label>
    </span>
    </fieldset>

    </div>



    </form>


    <div style="float:left;">
    <p style="font-size:18px;"> Carbohydrates </p>
    <p style="background-image:url(../../includes/images/MacronutrientsBackgroundCarbs.png);
    background-repeat:no-repeat; background-position:center; color:#776f63; width:242px; height:242px; margin-left:-15px; margin-top:-15px; font-size:30px; text-align:center;"> <span style=" margin-top:300px;">50 g </span> <br /><span> Carbs</span> </p>

    </div>




    <div style="float:left;">
    <p style="font-size:18px;"> Protein </p>
    <p style="background-image:url(../../includes/images/MacronutrientsBackgroundProtein.png);
    background-repeat:no-repeat; color:#951919; width:242px; height:242px; margin-left:-15px; margin-top:-15px; font-size:30px;"> <span>10 g </span><br /><span> Protein</span> </p>

    </div>





    <div style="float:left;">
    <p style="font-size:18px;"> Fat </p>
    <p style="background-image:url(../../includes/images/MacronutrientsBackgroundFat.png);
    background-repeat:no-repeat; color:#c88d1c; width:242px; height:242px; margin-left:-15px; margin-top:-15px; font-size:30px;"> <span>6 g </span><br /><span> Fat</span> </p>

    </div>


    <div>


    </form>



    @@newsletter@@
    <div id="toolAd" class="left oneOfThree">
    <!--<a href="/"><img src="public/images/tracker_ad_horizontal.jpg" width="575" /></a>-->
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-1791435015113217";
    /* NFF Horizontal */
    google_ad_slot = "1746056004";
    google_ad_width = 468;
    google_ad_height = 60;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </div>
    </div>

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by BrianBam View Post
    you can see the style sheet on the site
    There are lots there.

    I'm sure you could make up a simple demo example that shows what you are working on and post it here. Here's a basic template you could use:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Example</title>
    	
    <style media="all">
    
    </style>
    	
    </head>
    
    <body>
    
    </body>
    
    </html>


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
  •