10 {{ upvoteCount | shortNum }}
10 {{ upvoteCount | shortNum }}

How can a make a HTML text box like this?

by Johnny Danes Banned
8 replies
  • WEB DESIGN
    • |
This website has a 3 column text box as well one large text box. Does anyone know how to make the boxes?


No, this is not my website, I just like the boxes. :0)
#box #html #make #text
  • Profile picture of the author run
    That's just normal HTML table tag. Something like this:
    3 columns text box:
    <table border="1">
    <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
    </tr>
    </table>

    The same goes to 1 column that:
    <table border="1">
    <tr>
    <td>One Column</td>
    </tr>
    </table>
    Signature
    I just wanna tell you that most of the links in the signature are trash and/or a trap to make you pay!
    {{ DiscussionBoard.errors[6968205].message }}
    • Profile picture of the author JohnnyS
      the website used a table to create the 3 column content while the one big content they used a paragraph tag..

      here is the exact html code of the 3 column table in the content of the website stated..
      HTML Code:
      <table width="490" height="166" border="1" align="center" cellpadding="10" cellspacing="" bordercolor="#CCCCCC" bgcolor="FFFFCE">
	<tr>
		<td width="145" height="144" valign="top">
			<p><font color="#996600"><b>How to make a great cup of coffee</b></font></p>
			<a href="http://www.coffeedetective.com/how-to-make-coffee.html">How to make coffee</a><br>
			<br>
			<a href="http://www.coffeedetective.com/iced-coffee-drinks-at-home.html">Iced coffee drinks</a><br><br>
			<a href="http://www.coffeedetective.com/coffee-benefits.html"><b>The health benefits of coffee</b></a> <p></p>    
		</td>
		<td width="145" height="144" valign="top">
			<p><font color="#996600"><b>Choosing the best coffee maker</b></font></p>
			<p><span class="style7">
			<a href="http://www.coffeedetective.com/single-cup-coffee-brewers.html"><b>The best single cup coffee makers</b></a></span></p>
			<a href="http://www.coffeedetective.com/best-coffee-makers.html">Which are the best coffee makers?</a> <br><br>
			<a href="http://www.coffeedetective.com/best-coffee-makers-under-hundred-dollars.html">Best coffee makers under $100</a><br> <br>
		</td>
		<td width="145" height="144" valign="top">
			<p><font color="#996600"><b>Reviews, Videos &amp; Questions</b></font></p>      
			<p>
				<a href="http://www.coffeedetective.com/coffee-reviews.html"><b>Coffee reviews</b></a><br>
				<br><a href="http://www.coffeedetective.com/coffee-videos.html">Videos on making coffee</a>
			</p>
			<p><a href="http://www.coffeedetective.com/questions-about-coffee.html">Ask your questions about coffee</a> <br></p>
			<p> </p>
		</td>
	</tr> 
</table>
      {{ DiscussionBoard.errors[6968459].message }}
  • Profile picture of the author alfiecharleng
    Its very simple, can do with the help of table.
    Signature
    Responsive WordPress themes | Best free wordpress themes | Minimal WordPress themes
    {{ DiscussionBoard.errors[6968687].message }}
    • Profile picture of the author Brandon Tanner
      You shouldn't use tables for layout purposes. You should use CSS for that instead. Simply create a div for each box, and use CSS to set it's location, size, border style, colors, etc.

      Here's a simple explanation of how it works...

      CSS Box Model
      Signature

      {{ DiscussionBoard.errors[6971054].message }}
  • Profile picture of the author cssbros
    A simple div's and borders would definitely do.
    Signature
    Premium Web Design and Development Service

    Website - www.cssbros.com
    Email - arman@cssbros.com
    Skype - cssbros
    {{ DiscussionBoard.errors[6971237].message }}
  • Profile picture of the author jamaks
    Hi, thought you might be interested in my version of this. Could be coded a little lighter but this example gives you fluid equal length columns.
    Code:
    <html>
<head>
<style type="text/css">
.holder{width:100%;text-align:center;overflow:auto;}
.hold{width:489px;margin:auto;overflow:auto;color:#996600;background:#CCCCCC;}
.hm{width:100%;overflow:hidden;margin-bottom:1px;}
.rh{float:right;width:326px;overflow:hidden;}
.ctr{float:left;width:161px;margin:1px;background:#FFFFCE;padding-bottom:10em;margin-bottom:-10em;}
.rgt{float:right;width:161px;margin:1px;background:#FFFFCE;padding-bottom:10em;margin-bottom:-10em;}
.lft{float:left;width:161px;margin:1px;background:#FFFFCE;padding-bottom:10em;margin-bottom:-10em;}
.hold p{text-align:left;margin:10px;}
</style>
</head>
<body>
<div class="holder">
  <div class="hold">
    <div class="hm">
      <div class="rh">
        <div class="ctr">
          <p><b>Choosing the best coffee maker</b></p>
          <p><a href="http://www.coffeedetective.com/singl...wers.html">The best single cup coffee makers</a></p>
          <p><a href="http://www.coffeedetective.com/best-...rs.html">Which are the best coffee makers?</a></p>
          <p><a href="http://www.coffeedetective.com/best-...ars.html">Best coffee makers under $100</a></p>
        </div>
        <div class="rgt">
          <p><b>Reviews, Videos &amp; Questions</b></p>
          <p><a href="http://www.coffeedetective.com/coffe...s.html">Coffee reviews</a></p>
          <p><a href="http://www.coffeedetective.com/coffe...s.html">Videos on making coffee</a></p>
          <p><a href="http://www.coffeedetective.com/quest...ffee.html">Ask your questions about coffee</a></p>
        </div>
      </div>
      <div class="lft">
        <p><b>How to make a great cup of coffee</b></p>
        <p><a href="http://www.coffeedetective.com/how-t...ffee.html">How to make coffee</a></p>
        <p><a href="http://www.coffeedetective.com/iced-...ome.html">Iced coffee drinks</a></p>
        <p><a href="http://www.coffeedetective.com/coffe...fits.html">The health benefits of coffee</a></p>
      </div>
    </div>
  </div>
</div>
</body>
</html>
    Have fun with it. Jim
    {{ DiscussionBoard.errors[6971735].message }}
  • Profile picture of the author ArcherWylde
    Originally Posted by Johnny Danes View Post

    This website has a 3 column text box as well one large text box. Does anyone know how to make the boxes?
    No, this is not my website, I just like the boxes. :0)
    There are almost no acceptable uses of tables in modern web design anymore.

    Here is a very short and to the point example of how to achieve this:
    <html>
    <head>
    <title></title>
    <style type="text/css">
    .boxholder {float:left;padding:1px; border:1px solid #CCC;}
    .box {float:left; width:158px;border:1px solid #CCC; padding:1px;margin:1px;}
    .clear {float:none;width:100%;}
    </style>
    </head>
    <body>
    <div class="boxholder">
    <div class="box1 box">Box1 Content</div>
    <div class="box2 box">Box2 Content</div>
    <div class="box3 box">Box3 Content</div>
    </div>
    <div class="clear"></div>
    </body>
    </html>
    {{ DiscussionBoard.errors[6972045].message }}
  • Profile picture of the author ronc0011
    Looks to me like it's likely just divs with a border and no margins. probably something like...

    Code:
     
<div style="float:left;width:120px;height:250px; margin:0px 0px 0px 0px;border;1px solid #000;"></div>
    {{ DiscussionBoard.errors[6976543].message }}

Trending Topics