HTML Forum

**darthvadersmom** · 04-29-2006, 09:22 PM

I've read through a couple threads to try to find the answer before posting & found the align center html but it just won't work. So far this is what I have:

http://www.bowwowbeds.com/cotton.htm

I cannot get the text to go under the image. At one point I did something that made one go there but then the whole text & image were off center.

Thanks in advance for any help!

**Skorch1** · 04-29-2006, 10:36 PM

Using CSS I make a pic display div ( ie. The division is as wide as the pic )I write the image tag followed by a line break I then put the text wrapped in a p tag

Code:

The CSS
div.pic {width:400px;text-align:center;position:relative;float:left;}
p {text-align:center;}

The HTML
<div class="pic">
<img src="" alt="" />
<br />
<p>Centered under pic text</p>
</div>

Hope that helps and you can change the width, positioning, and alignment to suit your needs.

**colbyt** · 04-29-2006, 11:00 PM

Quote:

Originally Posted by darthvadersmom

I've read through a couple threads to try to find the answer before posting & found the align center html but it just won't work. So far this is what I have:

http://www.bowwowbeds.com/cotton.htm

I cannot get the text to go under the image. At one point I did something that made one go there but then the whole text & image were off center.

Thanks in advance for any help!

If you are just trying to get the color names to appear under the color sample use the <p> tag after the image like this:

HTML Code:

<html>
<HEAD><TITLE>Bow Wow Beds: Duck Canvas</TITLE>
<META http-equiv=Content-Language content=en-us>
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<META http-equiv=Content-Type content="text/html; charset=windows-1252"></HEAD>
<BODY>
<P>
<CENTER>
<DIV align=center>
<CENTER>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=750 border=1>
<TBODY>
<TR>
<TD width="100%">
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; BORDER-BOTTOM: 1px solid; BORDER-RIGHT-WIDTH: 1px" width="100%" background=http://bowwowbeds.com/topbarbg.gif colSpan=2>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="100%">&nbsp;</TD></TR>
<TR>
<TD width="100%">&nbsp;</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width="100%" bgColor=#144969 colSpan=2>
<P align=left>&nbsp;</P></TD></TR>
<TR>
<TD vAlign=top width="59%" background=http://bowwowbeds.com/gradbg2.gif><IMG height=265 src="http://bowwowbeds.com/bowwowlogob.gif" width=432 border=0></TD>
<TD vAlign=top width="41%" background=http://bowwowbeds.com/gradbg2.gif><IMG height=265 hspace=0 src="http://bowwowbeds.com/dane4.jpg" width=266 align=right border=0></TD></TR>
<TR>
<TD style="BORDER-BOTTOM: #111111 2px solid" width="100%" bgColor=#144969 colSpan=2>
<P align=right><B><FONT face=Verdana size=2><FONT color=#ffffff><A href="http://bowwowbeds.com/index.htm"><FONT color=#ffffff>home</A> </FONT>| </FONT><A class=meniu href="http://www.bowwowbeds.com/about.html"><FONT color=#ffffff>about</FONT></A><FONT color=#ffffff> | <A href="http://bowwowbeds.com/contact.htm"><FONT color=#ffffff>contact</FONT></A> | </FONT><A class=meniu href="http://www.bowwowbeds.com/beds.htm"><FONT color=#ffffff>beds</FONT></A><FONT color=#ffffff> </FONT><FONT color=#ffffff>| <A href="http://www.bowwowbeds.com/lounger.htm"><FONT color=#ffffff>vehicle lounger</FONT></A> </FONT><FONT color=#ffffff>| </FONT><A class=meniu href="http://www.bowwowbeds.com/new.html"><FONT color=#ffffff>crate covers</FONT></A><FONT color=#ffffff> | </FONT><A class=meniu href="http://www.bowwowbeds.com/products.html"><FONT color=#ffffff>gifts</FONT></A><FONT color=#ffffff> | </FONT><A class=meniu href="http://www.bowwowbeds.com/links.html"><FONT color=#ffffff>links</FONT></A><FONT color=#ffffff> | </FONT><A class=meniu href="http://www.bowwowbeds.com/affiliates.html"><FONT color=#ffffff>affiliates</A>&nbsp;</FONT></FONT></B></P></TD></TR>
<TR>
<TD vAlign=top width="100%" bgColor=#ffffff colSpan=2>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 height=528 cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle width="100%" colSpan=3 height=19>&nbsp;</TD></TR>
<TR>
<TD align=middle width="1%" height=19>&nbsp;</TD>
<TD align=middle width="130%" height=19>&nbsp;</TD>
<TD align=middle width="1%" height=19>&nbsp;</TD></TR>
<TR>
<TD align=middle width="1%" height=29>&nbsp;</TD>
<TD align=middle width="130%" height=29><B><FONT face=Verdana size=5>DUCK CANVAS ORDER FORM</B></FONT> 
<P>
<P><IMG height=158 src="http://bowwowbeds.com/Leo.jpg" width=250 border=0>
<P><IMG height=158 src="http://bowwowbeds.com/112-1251_IMG.jpg" width=250 border=0>
<P><IMG height=158 src="http://bowwowbeds.com/abby.jpg" width=250 border=0> 
<P><B>We Only Purchase Quality Durable Fabrics</B> 
<P></P></TD>
<TD align=middle width="1%" height=29>&nbsp;</TD></TR>
<TR>
<TD align=middle width="1%" height=19>&nbsp;</TD>
<TD align=middle width="136%" height=19>&nbsp;</TD>
<TD align=middle width="1%" height=19>&nbsp;</TD></TR>
<TR>
<TD align=middle width="1%" height=499>&nbsp;</TD>
<TD align=middle width="136%" height=499>
<FORM onsubmit="this.target = 'paypal'; ReadForm (this);" action=https://www.paypal.com/cgi-bin/webscr method=post>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width="50%" border=0>
<TBODY>
<TR>
<P><BR><IMG src="http://bowwowbeds.com/med canvas burgundy.jpg" border=0 width="120" height="120"><B><br>
BURGUNDY<BR><BR><IMG src="http://bowwowbeds.com/med canvas eggplant.jpg" border=0 width="120" height="120"><br>
EGGPLANT<BR><BR><IMG src="http://bowwowbeds.com/med canvas hunter.jpg" border=0 width="120" height="120"><br>
HUNTER</B></P>
<P><B><B><B><BR><IMG src="http://bowwowbeds.com/med canvas light sage.jpg" border=0 width="120" height="120"><br>
LIGHT SAGE</P>
<P><BR><IMG src="http://bowwowbeds.com/med canvas mango.jpg" border=0 width="120" height="120"><br>
MANGO</P>
<P><BR><IMG src="http://bowwowbeds.com/med canvas red.jpg" border=0 width="120" height="120"><br>
RED</P>
<P><BR><IMG src="http://bowwowbeds.com/med canvas sea blue.jpg" border=0 width="120" height="120"><br>
SEA BLUE</P>
<P><BR><IMG src="http://bowwowbeds.com/med canvas rose.jpg" border=0 width="120" height="119"><br>
ROSE</P>
<P><BR><IMG src="http://bowwowbeds.com/port.jpg" border=0 width="119" height="120">PORT</P>
<P><BR><IMG src="http://bowwowbeds.com/loden.jpg" border=0 width="120" height="120"><br>
LODEN</P>
<P><BR><IMG src="http://bowwowbeds.com/kiwi.jpg" border=0 width="120" height="119"><br>
KIWI</P>
<P><BR><IMG src="http://bowwowbeds.com/pro green.jpg" border=0 width="120" height="119"><br>
GREEN</P>
<P><BR><IMG src="http://bowwowbeds.com/pro olive green.jpg" border=0 width="120" height="120"><br>
OLIVE</P>
<P><BR><IMG height=120 src="http://bowwowbeds.com/khakipol.jpg" width=119 border=0><br>
KHAKI</P><BR></b></b></b></TR></TBODY></TABLE><BR><BR>
<CENTER>
<P>--Please allow 7-14 days for delivery-- 
<P>
<CENTER><INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=_cart name=cmd> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=1 name=add> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=kallzking@zoomtown.com name=business> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value="Bow Wow Bed ~ Cotton" name=item_name> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=19.00 name=amount> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=USD name=currency_code> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=US name=lc> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=0 name=baseamt> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value="Bow Wow Bed ~ Cotton" name=basedes> &nbsp;&nbsp;&nbsp;&nbsp; <BR><BR><FONT face=Verdana><FONT size=2>Please select a size - </FONT><SELECT onchange="ReadForm (this.form);"> <OPTION value="Small @19.00" selected>Small 19 x 25 ($19.00)</OPTION> <OPTION value="Large @33.00">Large 25 x 38 ($33.00)</OPTION> <OPTION value="X-Large @46.00">X-Large 38 x 50 ($46.00)</OPTION></SELECT><FONT size=2> </FONT></FONT>
<P><FONT face=Verdana><FONT size=2>Please select a color - </FONT><SELECT onchange="ReadForm (this.form);"> <OPTION value=Burgundy selected>Burgundy</OPTION> <OPTION value=Eggplant>Eggplant</OPTION> <OPTION value=Hunter>Hunter</OPTION> <OPTION value="Light Sage">Light Sage</OPTION> <OPTION value=Mango>Mango</OPTION> <OPTION value=Red>Red</OPTION> <OPTION value="Sea Blue">Sea Blue</OPTION> <OPTION value=Rose>Rose</OPTION> <OPTION value=Port>Port</OPTION> <OPTION value=Loden>Loden</OPTION> <OPTION value=Kiwi>Kiwi</OPTION> <OPTION value=Green>Green</OPTION> <OPTION value=Olive>Olive</OPTION> <OPTION value=Khaki>Khaki</OPTION> <OPTION value="SURPRISE ME!">SURPRISE ME!</OPTION></SELECT><FONT size=2> </FONT></FONT>
<P><FONT face=Verdana><FONT size=2>Input Quantity = </FONT><INPUT size=3 name=quantity><FONT size=2> Total item cost = </FONT><INPUT size=8 name=tot><FONT size=2> <INPUT type=image height=35 alt="Make payments with PayPal - it's fast, free and secure!" width=70 src="https://www.paypal.com/en_US/i/btn/sc-but-01.gif" border=0 name=submit> </FONT><INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=1 name=add> </FONT></FORM>
<FORM action=https://www.paypal.com/cgi-bin/webscr method=post target=paypal><INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=_cart name=cmd> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=kallzking@zoomtown.com name=business> <INPUT type=image height=32 alt="Make payments with PayPal - it's fast, free and secure!" width=130 src="https://www.paypal.com/en_US/i/btn/view_cart.gif" border=0 name=submit> <INPUT style="BORDER-RIGHT: #000 0px solid; BORDER-TOP: #000 0px solid; BORDER-LEFT: #000 0px solid; WIDTH: 0px; BORDER-BOTTOM: #000 0px solid; HEIGHT: 0px" type=hidden value=1 name=display> </FORM>
<SCRIPT type=text/javascript>
<!-- Hide JS source from HTML validators
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}
function ReadForm (obj1) { // process un-named selects
var i,amt,des,obj,pos,val;
amt = obj1.baseamt.value*1.0; // base amount
des = obj1.basedes.value; // base description
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "select-one" && // just get selects
obj.name == "") { // must be un-named
pos = obj.selectedIndex; // which option selected
val = obj.options[pos].value; // selected value
pos = val.indexOf ("@"); // price set?
if (pos > 0) amt = val.substring (pos + 1)*1.0;
pos = val.indexOf ("+"); // price increment?
if (pos > 0) amt = amt + val.substring (pos + 1)*1.0;
pos = val.indexOf ("%"); // percent change?
if (pos > 0) amt = amt + (amt * val.substring (pos + 1)/100.0);
if (des.length == 0) des = val;
else des = des + ", " + val; // accumulate value
}
}
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
//-->
</SCRIPT>
</CENTER></CENTER></TD>
<TD align=middle width="1%" height=499>&nbsp;</TD></TR>
<TR>
<TD align=middle width="1%" height=1></TD>
<TD align=middle width="136%" height=1>
<TD align=middle width="1%" height=1></TD></TR>
<TR>
<TD align=middle width="13%" height=19></TD>
<TD align=middle width="82%" height=19><B><FONT face=Verdana color=#0000ff size=2>&lt;--<A href="http://bowwowbeds.com/beds.htm">Back</A></FONT></B></TD>
<TD align=middle width="5%" height=19>&nbsp;</TD></TR></TBODY></TABLE></TD></TR>
<TR>
<TD width="100%" bgColor=#144969 colSpan=2>
<P align=center>&nbsp;</P></TD></TR>
<TR>
<TD width="100%" background=http://bowwowbeds.com/topbarbg.gif colSpan=2>&nbsp;</TD></TR>
<TR>
<TD width="100%" background=http://bowwowbeds.com/topbarbg.gif colSpan=2>
<P align=center>&nbsp;</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></DIV>
<DIV align=center>
<CENTER>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=772 border=0>
<TBODY>
<TR>
<TD align=middle width=772><B><FONT face=Verdana color=#144969 size=1><FONT class=text6>Copyright © 2004-2006 Bow Wow Beds</FONT></FONT></B></TD></TR></TBODY></TABLE></CENTER></DIV><!-- Start of StatCounter Code -->
<SCRIPT language=javascript type=text/javascript>
<!-- 
var sc_project=383636; 
var sc_invisible=1; 
var sc_partition=1; 
var sc_security=""; 
var sc_remove_link=1; 
//-->
</SCRIPT>
<script src="http://www.statcounter.com/counter/counter.js"></script><NOSCRIPT><IMG alt="free webpage hit counter" src="http://c2.statcounter.com/counter.php?sc_project=383636&amp;java=0&amp;security=&amp;invisible=1" border=0> </NOSCRIPT><!-- End of StatCounter Code --></CENTER></BODY>
</html>

I missed the one on port