How can a make a HTML text box like this?

Johnny Danes · 09-11-2012, 11:59 PM

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)

run · 09-12-2012, 01:33 AM

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>

JohnnyS · 09-12-2012, 02:53 AM

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>

alfiecharleng · 09-12-2012, 03:47 AM

Its very simple, can do with the help of table.

Brandon Tanner · 09-12-2012, 11:21 AM

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

cssbros · 09-12-2012, 11:57 AM

A simple div's and borders would definitely do.

jamaks · 09-12-2012, 01:25 PM

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

ArcherWylde · 09-12-2012, 02:15 PM

Quote:

Originally Posted by Johnny Danes

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>

ronc0011 · 09-13-2012, 07:18 AM

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>

09-11-2012, 11:59 PM	#1
Johnny Danes Banned Join Date: Jul 2010 Location: Philly Baby! Posts: 233 Thanks: 123 Thanked 31 Times in 21 Posts	How can a make a HTML text box like this? 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)

09-12-2012, 01:33 AM	#2
run Advanced Warrior Join Date: Jul 2012 Location: Kawasaki Posts: 528 Thanks: 50 Thanked 64 Times in 62 Posts	Re: How can a make a HTML text box like this? 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>

09-12-2012, 02:53 AM	#3
JohnnyS Teacher Join Date: Jul 2011 Posts: 85 Thanks: 0 Thanked 11 Times in 10 Posts Social Networking	Re: How can a make a HTML text box like this? 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 *&* 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>

09-12-2012, 03:47 AM	#4
alfiecharleng Warrior Member Join Date: Jun 2012 Posts: 20 Thanks: 0 Thanked 1 Time in 1 Post	Re: How can a make a HTML text box like this? Its very simple, can do with the help of table.
	Responsive WordPress themes \| Best free wordpress themes \| Minimal WordPress themes

09-12-2012, 11:21 AM	#5
Brandon Tanner Advanced Warrior War Room Member Join Date: Jul 2006 Location: USA Posts: 2,413 Thanks: 157 Thanked 1,030 Times in 462 Posts	Re: How can a make a HTML text box like this? 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
	Unique Software For Creating Mobile Website Design "Mockups" CRAZY Fast ... FREE For War Room Members!

09-12-2012, 11:57 AM	#6
cssbros Web Designer/Developer Join Date: Jun 2012 Location: Manila Philippines Posts: 147 Thanks: 9 Thanked 14 Times in 14 Posts Social Networking Contact Info	Re: How can a make a HTML text box like this? A simple div's and borders would definitely do.
	Premium Web Design and Development Service Website - www.cssbros.com Email - admin@cssbros.com Skype - cssbros

09-12-2012, 01:25 PM	#7
jamaks Active Warrior Join Date: Jul 2009 Posts: 68 Thanks: 10 Thanked 11 Times in 11 Posts	Re: How can a make a HTML text box like this? 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 & 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

09-13-2012, 07:18 AM	#9
ronc0011 Advanced Warrior War Room Member Join Date: Nov 2010 Posts: 795 Thanks: 14 Thanked 61 Times in 56 Posts	Re: How can a make a HTML text box like this? 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>