Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Apr 2007
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Having Text Shrink to Proper size

    Hey,

    I have an HTML file that displays a header in an

    Code:
    <h1>
    tag, except the header varies by size with HTML. Is there a way to have the text shrink to the appropriate size with html or css to make sure it fits inside the box?

    Looking for all solutions, I know PHP as well so if that could help don't be afraid to mention it. Thanks in advance for any advice.

    -V
    I am on my way. :)

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by inVINCEable View Post
    Hey,

    I have an HTML file that displays a header in an

    Code:
    <h1>
    tag, except the header varies by size with HTML. Is there a way to have the text shrink to the appropriate size with html or css to make sure it fits inside the box?

    Looking for all solutions, I know PHP as well so if that could help don't be afraid to mention it. Thanks in advance for any advice.

    -V
    We need a lot more code than that to help you. Post your code in the [CODE] {/CODE]
    tags. Better still, a link to your page.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Apr 2007
    Posts
    85
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry, here ya go...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>CheatCC.com PS3 Giveaway!</title>
    	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    	<link rel="stylesheet" href="1/style.css" />
    		<script src="http://click-tracker.org/tracking202/static/form.js" type="text/javascript"></script>
    		<script src="http://click-tracker.org/tracking202/static/landing.php?lpip=1109" type="text/javascript"></script>
            
            
            
    </head>
    <body>
    <div id="wrapper">
    	<div id="content">
    		<h1><?php echo $_POST['myurl']; ?></h1>
    		<p>text goes here</p>
    		<ul>
    			<li>Step 1: Enter your email address</li>
    			<li>Step 2: Press continue</li>
    			<li>Step 3: Press continue again and that's it!</li>
    		</ul>
    	</div>
    	<div id="cta">    
    	  <form method="POST" action="http://xxxxxxxx.org/tracking202/redirect/lp.php" onsubmit="return validateFormOnSubmit(this)">
          <input class="leadgen" name="email" type="text" />
           <input type="hidden" value="1109" name="lpip" />
           <input type="hidden" value="<?php echo $_GET['t202kw']; ?>" name="pkw" />
          <input type="image" class="sub" width="192px" height="68px" name="submit" src="1/images/cta.png" />
          </form>
    	
      </div>
    	<div class="clear"></div>
    </div>
    </body>
    </html>

    You Will see this code is the one that dynamically changes in the header:

    PHP Code:
    <h1><?php echo $_POST['myurl']; ?></h1>

    Here is my CSS file:

    Code:
    body {
    background: url('images/bg.png') no-repeat;
    font-family: Arial, Tahoma, Verdana, sans-serif;
    font-size: 14px;
    margin: 0;
    color: #4d4d4d;
    }
    img {
    border: 0;
    }
    .clear {
    clear: both;
    }
    #wrapper {
    width: 750px;
    height: 550px;
    }
    #content {
    width: 388px;
    float: left;
    }
    input.leadgen {
    	border:2px solid #CCCCCC;
    	width: 215px;
    	height: 35px; 
    	font-weight:bold;
    	font-size:26px;
    	margin-bottom:10px; 
    	
    } 
    
    input.sub { 
    padding-left: 13px; 
    } 
    
    
    #content h1 {
    height: 51px;
    font-size: 34px;
    font-weight: bold;
    color: #fff;
    letter-spacing: -2px;
    margin: 0;
    padding: 9px 0 0 18px;
    }
    #content p {
    padding: 15px 20px;
    line-height: 24px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 0 1px;
    }
    #content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #efefef;
    padding: 20px;
    }
    #content ul li {
    background: url('images/bullet.png') 0 1px no-repeat;
    height: 19px;
    padding: 0 0 0 28px;
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 19px;
    }
    #cta {
    width: 223px;
    float: right;
    margin: 400px 30px 0 0;
    }
    I am on my way. :)

  • #4
    New Coder
    Join Date
    May 2010
    Posts
    15
    Thanks
    2
    Thanked 1 Time in 1 Post
    I noticed you didn't have h1 defined in your stylesheet that may be the reason.
    you can define the size you want h1 to appear...

    simply:
    Code:
    h1{
    font-size:xx;
    
    }
    or even separate h1's if they are inside different divs eg:
    Code:
    #divname h1{
    font-size:xx;
    
    }
    hope that helps


  •  

    Posting Permissions

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