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 11 of 11
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts

    A box that changes size depending on the size of a text

    Hi, I'm new to HTML coding and I would like to know how could we do that a box changes size depending on the text size.

    The idea is that each day, there is a new message in a box (for example, quotes, news, etc.) However, I would like that box to be bigger if there is more text, or smaller if the text takes less space.

    Thanks

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    By default elements expand to contain their content.

    Unless you constrain the height of an element it will grow or contract in height to contain the text within it.

    All you need do is keep out of the way.

    That probably means don't set the height of any of the elements containing the text.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • Users who have thanked mbaker for this post:

    TiKaY (05-28-2010)

  • #3
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    you can use divs
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #4
    New Coder
    Join Date
    May 2010
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, but do you know how to make that the table adjusts to the text too? I've tried to take out the height, but it just took out the text. Here is the code I'm using :

    <iframe style="DISPLAY:BLOCK" frameBorder="0" width="300" scrolling="no" src="[link]" name="I1">
    </iframe>

    When I keep the table, I have to click and hold on the text, then drag down to see the following text.

    Thanks for your first reply.

  • #5
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    can you be more specific??
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #6
    New Coder
    Join Date
    May 2010
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I just want the table to get bigger/smaller depending on the text that it is inside. The text changes everyday.

    <td colSpan="2">
    <div style="border: 1px solid #999999; padding: 3px; background: white">
    <iframe style="DISPLAY: block" frameBorder="0" width="297" scrolling="no" src="[link]" name="I1">
    </iframe></div>
    </td>

  • #7
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe try this, its an idea

    css:
    Code:
    <style type="text/css">
    #rBox
    {
    	width: 349px;
    	background-color: #FFF;
    	margin: 0px;
    	padding left: 1em;
    	padding-top: 1em;
            -moz-border-radius: 10px; <!-- Gives you rounded corners -->
    	-webkit-border-radius: 10px; <!-- Gives you rounded corners -->
    	
    	}
    
    <!-- you can change the pixels and name to whatever you want -->
    h1
    {
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 18px;
    padding-bottom: 18px;
    }
    
    </style>
    HTML

    Code:
    <table width="300"> <!-- This allows you to control the width of the table. when you put content in it, it will only go to the width you specify but it will continue down for as much information as you put in it :) -->
        <tr>
          <td>
            <div id="rBox">
          	  <p><h1>your information goes here ;) </h1></p>
            </div>
          </td>
         </tr>
    </table>

    Hopefully that helps.
    Here is the youtube tutorial
    http://www.youtube.com/watch?v=2QNv-RTtZTk

    Let me know if that works or not, I just wrote it by hand on here.
    Last edited by Dirtynerd; 05-27-2010 at 11:22 AM.

  • #8
    New Coder
    Join Date
    May 2010
    Location
    Mexico
    Posts
    62
    Thanks
    1
    Thanked 0 Times in 0 Posts
    or simplier like this

    Code:
    <td colspan="2">
    <div style="border: 1px solid #999999; padding: 3px; background: white">
    <p>your info</p>
    </div>
    </td>
    the div will go bigger or smaller depending on the content. and for every content paragraph use <p></p>

    You should make a css file for your styles instead of writing them in your html

    here's some useful info

    as simple as that
    Last edited by rakasv; 05-27-2010 at 03:20 PM. Reason: forgot link
    Lo bueno del cine es que durante dos horas los problemas son de otros.

  • #9
    New Coder
    Join Date
    May 2010
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks guys, ill try that =)

  • #10
    New Coder
    Join Date
    May 2010
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey guys. I've found the solution.. All i had to do is to delete the height ... However, because the text inside the box is coming from another website, the code I was given always puts the height back.. So I must always delete the height.. Is there a way to stop that ''height addition'' each time?

  • #11
    New Coder
    Join Date
    May 2010
    Posts
    18
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi, previous question has been fixed. I would like to know if there is a way to only put 1 line of quote, for example.

    I use <iframe src=[link of .text document]> </iframe>. However, it doesnt work... Is there a code so that Frontpage will only take 1 line at a time of the text document?

    Text document is made like this :

    [1st line] Hi, my name is bob,
    [2nd line] Hello, my name is John,
    [3rd line] Hi, my name is Julie,
    etc.

    The concept is, that each refresh, the box shows 1 line (randomly). So when u enter the website, it shows [1st line], if u refresh, it can show [3rd line].


  •  

    Posting Permissions

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