How can a make a HTML text box like this?

by Johnny Danes Banned

Posted: 14 years ago 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

run

14 years ago

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>

Thanks
1 reply

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 }}

JohnnyS

14 years ago

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>

Thanks

{{ DiscussionBoard.errors[6968459].message }}

alfiecharleng 14 years ago

Its very simple, can do with the help of table.
- Thanks
- 1 reply
Signature
Responsive WordPress themes | Best free wordpress themes | Minimal WordPress themes
{{ DiscussionBoard.errors[6968687].message }}
- Brandon Tanner 14 years ago
  
  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
  
  Thanks
  
  Signature
  
  {{ DiscussionBoard.errors[6971054].message }}
cssbros 14 years ago

A simple div's and borders would definitely do.
- Thanks
Signature
Premium Web Design and Development Service

Website - www.cssbros.com
Email - arman@cssbros.com
Skype - cssbros
{{ DiscussionBoard.errors[6971237].message }}

jamaks

14 years ago

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

Thanks

Signature

jamaks

{{ DiscussionBoard.errors[6971735].message }}

ArcherWylde

14 years ago

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>

Thanks

{{ DiscussionBoard.errors[6972045].message }}

ronc0011 14 years ago
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>
- Thanks
{{ DiscussionBoard.errors[6976543].message }}

How can a make a HTML text box like this?

Trending Topics

Lightening strikes :(

If you had to start over today -- what would you do ?

" It is what it is" ... overused way too much imo

Are you into the Stock Market??

What would you do without the Internet ??