SitePoint.com

camm · Sep 7, 2004, 13:31

So there I was, friends ...
adding a few bells and whistles, prettying things up on a design for which I owe a great deal to Paul. I had a link/button inserted in the left side block (wording TBA, a shortcut to the order engine on a related site) and that seemed okay. Then I decided to insert similar buttons in the main content stream and everything got broke. I've been fiddling with width and margins in the definitions for all three buttons, but I can't find the one that is enlarging either the #nav or #main, forcing the entire main div below the nav div rather than alongside it where it should be.
And ... since I'm already here ... in my leftside menu, under the heading "Useful Flower Facts & More", third item is "Flower, Fruit and Gourmet Food Baskets". Is there a better way to force a break than the </br> tag I've used? And how do I get a narrower line height between the two lines of that item than I have between items in the list? (I'm assuming I use line-height=.75em; -- where do I put that, given that it's a one-time requirement?

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Floraworld.ca Trial Run -- Occasions Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<styletype="text/css"/>
<style>
body {
background-color: #12127d;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
div#outer {
width: 80%;
background-color:#fffae6;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
text-align: left;
}
div#header {
padding: 15px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
height: 100px;
text-align: center;
}
#header img {
width: 747px;
height: 73px;
border-style: ridge;
border-color: #e6edff;
border-width: 5px;
}
div#nav {
width: 25%;
padding: 5px;
margin-top: 1px;
margin-left: 5px;
border-style: solid;
border-color: 192d19;
border-width: 2px;
background-color: #e6edff;
float: left;
display: inline; /*ie fix*/
}
div#buttonA {
margin-top: 15px;
margin-bottom: 30px;
}
div#buttonA ul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonA li {
list-style-type: none;
height: 30px;
width: 100px;
margin: 10px;
text-align:center;
}
div#buttonA li a {
text-decoration: none;
height: 100%;
width: 100%;
display: block;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonA li a:link {
color: #000000;
font-weight: bold;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonA li a:visited {
color: #000000;
font-weight: normal;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonA li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #414e80;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
div#buttonA li a:active {
font-weight: bold;
color: #FFFFFF;
background-color: #717a9f;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
div#nav ul {
margin: 5px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000;
line-height: 30px;
/*white-space: nowrap;*/
text-align: center;
}
div#nav li {
list-style-type: none;
display: inline;
white-space: nowrap;
}

div#nav li a {
text-decoration: none;
padding: 7px 10px;
color: #000;
}
div#nav lia:link {
color: #000:
}
div#main3 lia:visited {
color: #CCC;
}
div#nav lia:hover {
font-weight: bold;
color: #000;
background-color: #3366FF;
}

div#main {
margin-left: 30%;
margin-top: 1px;
margin-right: 10px;
border-style: solid;
border-color: 192d19;
border-width: 2px;
background-color: #ffe480; /*#aed0ae;*/
padding: 10px;
}
* html div#main {height:1%}/* ie fix*/

div#main1 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
}
div#main2 {text-align: left;}

div#main2-sample1, #main2-sample2, #main2-sample3 {
float: left;
width: 150px;
height: 205px;
padding-top: 15px;
background-color: #ffffff;
border: 1px solid #000000;
text-align: center;
margin-left: 2%;
margin-bottom: 5px;
display:inline;/*ie fix*/
}

div#main2-sample2 {
background color: #ffc2ff;
}
div#main2-sample3 {
background color: #d6ffff;
}

div#main3 {
margin-left: 1px;
margin-top: 1px;
margin-right: 1px;
margin-bottom: 1px;
clear: both;
}
div#buttonb {
float: left;
margin-top: 15px;
margin-left: 2%;
margin-bottom: 30px;
}
div#buttonb ul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonb li {
list-style-type: none;
height: 30px;
width: 125px;
margin: 10px;
text-align:center;
}
div#buttonb li a {
text-decoration: none;
height: 100%;
width: 100%;
display: block;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonb li a:link {
color: #000000;
font-weight: bold;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonb li a:visited {
color: #000000;
font-weight: normal;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonb li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #414e80;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
div#buttonb li a:active {
font-weight: bold;
color: #FFFFFF;
background-color: #717a9f;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
div#main3 ul {
margin: 5px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #000;
line-height: 30px;
/*white-space: nowrap;*/
text-align: center;
}
div#main3 li {
list-style-type: none;
display: inline;
white-space: nowrap;
}

div#main3 li a {
text-decoration: none;
padding: 7px 10px;
color: #000;
}
div#main3 lia:link {
color: #000:
}
div#main3 lia:visited {
color: #CCC;
}
div#main3 lia:hover {
font-weight: bold;
color: #000;
background-color: #3366FF;
}
div#buttonc {
float: left;
margin-top: 15px;
margin-left: 2%;
margin-bottom: 30px;
}
div#buttonc ul {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 30px;
}
div#buttonc li {
list-style-type: none;
height: 30px;
width: 125px;
margin: 10px;
text-align:center;
}
div#buttonc li a {
text-decoration: none;
height: 100%;
width: 100%;
display: block;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonc li a:link {
color: #000000;
font-weight: bold;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonc li a:visited {
color: #000000;
font-weight: normal;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}
div#buttonc li a:hover {
font-weight: bold;
color: #FFFFFF;
background-color: #414e80;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
div#buttonc li a:active {
font-weight: bold;
color: #FFFFFF;
background-color: #717a9f;
border-style: solid;
border-right-color: #c1ceff;
border-bottom-color: #cbebff;
border-top-color: #717a9f;
border-left-color: #6276bf;
}
div#footer {
padding: 15px;
margin: 5px;
border-top: thin solid #000000;
}
img#flowers{
float: right;
width: 200px;
height:280px;
margin:5px;
}
img#fpologo{}
img#ftdlogo{}
img#main2_im1{
width: 100px;
height: 116px;
}
img#main2_im2{
width: 100px;
height: 116px;
}
img#main2_im3{
width: 100px;
height: 116px;
}
</style>
</head>
<body>
<div id="outer">
<div id="header"><img alt="floraworld 1-888-rose-888" src="images/header.gif" /> </div>

<div id="nav">
<div id="buttonA">
<ul>
<li><a href="link1.html">Button 1</a></li>
</ul>
</div>
<h4>Useful Flower Facts<br /> & More</h4>
<ul>
<li><a href="link2.html">Flower Care</a></li>
<li><a href="link2.html">Flower Holidays</a></li>
<li><a href="link2.html">Flower, Fruit and<br />Gourmet Food Baskets</a></li>
<li><a href="link2.html">Monthly Flower Charts</a></li>
<li><a href="link2.html">Monthly Birth Stones</a></li>
<li><a href="link2.html">Plants & Planter Baskets</a></li>
<li><a href="link2.html">Flower Reminder Service</a></li>
</ul>
<br />
<br />

<img id="fpologo" src="images/fpo_logo2.jpg" alt="Flower Promotion Organization" />
<img id="ftdlogo" src="images/ftdlogo.jpg" alt="FTD" />
<br />
<br />

<h4>Popular Flower Varieties<br /> for Delivery in Canada</h4>
<p>Agapanthus, Alstroemeria, Aster, Bird Of Paradise, Bouvardia, Calla Lilies, Carnations/Mini Carnations, Chrysanthemums/Pompons, Daffodils, Delphinium (aka Larkspur), Freesia, Gerbera Daisies, Gladioli, Godetia, Gypsophila, Iris, Liatris, Lilies, Limonium, Orchids, Ornithogalum, Queen Anne's Lace, Roses, Snapdragons, Statice, Stock, Tulips</p>
<br />
<br />
<br />
<br />
</div>

<div id="main">
<div id="main1">
<h2>Send Anniversary Flowers in Canada</h2>
<h3>Order Online from FloraWorld</h3>
<h4>Have your Anniversary Flowers Delivered by Floraworld</h4>
<img id="flowers" src="images/covermain.jpg" alt="flowers delivered" />

<p>When you can't make a personal delivery,<br />
trust western Canada's home-grown floral delivery service to make it right!</p>
<p>Working with the best local flower shops<br />
(FTD, Teleflora and Grower Direct),<br />
Floraworld offers

/p>
<p>&nbsp &nbsp -- easy, secure online ordering</p>
<p>&nbsp &nbsp -- fast, reliable floral delivery<br />
&nbsp &nbsp &nbsp &nbsp (same day delivery on early orders)</p>
<p>&nbsp &nbsp -- Aeroplan Miles (or CAA Discount)<br />
&nbsp &nbsp &nbsp &nbsp with every order</p>
<p>&nbsp &nbsp -- the freshest roses and other cut flowers<br />
&nbsp &nbsp &nbsp &nbsp in exquisite bouquets and arrangements</p>

<br />
<br />
<br />
<br />
</div>
<div id="main2">
<h2>Popular Anniversary Selections</h2>
<br />
<div id="main2-sample1"><img id="main2_im1" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
<p>Image Title</p>
<p>Image Price</p>
</div>
<div id="main2-sample2"><img id="main2_1m2" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
<p>Image Title</p>
<p>Image Price</p>
</div>
<div id="main2-sample3"><img id="main2_im3" src="images/tnail_C4-3020.jpg" alt="flowers delivered" />
<p>Image Title</p>
<p>Image Price</p>
</div>
</div>

<div id="main3">
<br />
<br />
<div id="buttonb">
<ul>
<li><a href="link1.html">Button 1</a></li>
</ul>
</div>
<br />
<br />
<h2>Favourite Canadian Locations for<br />
Anniversary Flower Delivery</h2>
<h3>Popular Places to Send Flowers in Canada</h3>

<ul>
<li><a href="link1.html">Victoria, British Columbia</a></li>
<li><a href="link2.html">Vancouver BC</a></li>
<li><a href="link3.html">Kelowna BC</a></li>
</ul>
<ul>
<li><a href="link4.html">Edmonton, Alberta</a></li>
<li><a href="link5.html">Calgary, Alberta</a></li>
<li><a href="link6.html">Regina, Saskachewan</a></li>
</ul>
<ul>
<li><a href="link7.html">Saskatoon, Saskatchewan</a></li>
<li><a href="link8.html">Winnipeg, Manitoba</a></li>
<li><a href="link9.html">Toronto, Ontario</a></li>
</ul>
<ul>
<li><a href="link10.html">Ottawa, Ontario</a></li>
<li><a href="link11.html">Montreal, Quebec</a></li>
<li><a href="link12.html">Moncton, New Brunswick</a></li>
</ul>
<ul>
<li><a href="link13.html">Saint John, New Brunswick</a></li>
<li><a href="link14.html">Halifax, Nova Scotia</a></li>
<li><a href="link15.html">Charlottetown, PEI</a></li>
</ul>
<ul>
<li><a href="link16.html">St. Johns, Newfoundland</a></li>
<li><a href="link17.html">Yellowknife, NWT</a></li>
<li><a href="link18.html">Whitehorse, Yukon</a></li>
</ul>

<ul>
<li><a href="link19.html">All Other Canadian Locations</a></li>
</ul>
<br />
<br />
<div id="buttonc">
<ul>
<li><a href="link1.html">Button 1</a></li>
</ul>
</div>
<br />
<br />

<h2>U.S.A. Flower Delivery</h2>
<h3>Popular Places to Send Flowers in the United States</h3>
<br />
<br />
<br />
<br />

<h2>International Flower Delivery</h2>
<h3>Popular Places to Send Flowers around the World</h3>
<br />
<br />
<br />
<br />

</div>
</div>

<div id="footer">
<p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp  |&nbsp
&nbsp &nbsp &nbsp &nbsp   Site Map &nbsp &nbsp &nbsp &nbsp &nbsp  |&nbsp
&nbsp &nbsp &nbsp &nbsp   Contact Us</p>
</div>
</div>
</body>
</html>

Thanks you for your help and patience...
Cam

Paul O'B · Sep 8, 2004, 07:51

Hi,

Take out the 100% height and widths from the buutona b & c anchors.

Code:

div#buttonb li a {
text-decoration: none;
/*height: 100%;
width: 100%;*/
display: block;
background-color: #839dff;
border-style: solid;
border-bottom-color: #717a9f;
border-right-color: #6276bf;
border-left-color: #c1ceff;
border-top-color: #cbebff;
}

Also take out the whitespace:nowrap otherwise ie will just push the column wide.

Code:

div#nav li {
list-style-type: none;
display: inline;
}

Have a play around with that and you should get some results.

Paul

camm · Sep 8, 2004, 09:37

Quote:

Originally Posted by Paul O'B

Hi,
Take out the 100% height and widths from the buutona b & c anchors.
<snip>
Also take out the whitespace:nowrap otherwise ie will just push the column wide.
<snip>
Paul

Hi Paul... I did both, and the problem appears to be solved. I wish I understood why. To compensate for the absence of the whitespace:nowrap in the div# nav li, I also had to remove display:inline -- I confess I don't know how that came to be there in the first place.

There was a second question about use of line-height buried in my initial question. I fear it wasn't too comprehensible

My thanks for the rescue, and I'd appreciate any explanation you might have time for.
regards,
Cam

Paul O'B · Sep 8, 2004, 14:02

Quote:

And how do I get a narrower line height between the two lines of that item than I have between items in the list? (I'm assuming I use line-height=.75em; -- where do I put that, given that it's a one-time requirement?

Just applying a class to that list item only should do the trick. (<li class="whatever">)

Paul

Sep 8, 2004, 07:51	#2
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	Hi, Take out the 100% height and widths from the buutona b & c anchors. Code: div#buttonb li a { text-decoration: none; /height: 100%; width: 100%;/ display: block; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } Also take out the whitespace:nowrap otherwise ie will just push the column wide. Code: div#nav li { list-style-type: none; display: inline; } Have a play around with that and you should get some results. Paul

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Sep 7, 2004, 13:31	#1
camm SitePoint Enthusiast Join Date: Aug 2004 Location: edmonton, canada Posts: 32	Stumped Again on Positioning So there I was, friends ... adding a few bells and whistles, prettying things up on a design for which I owe a great deal to Paul. I had a link/button inserted in the left side block (wording TBA, a shortcut to the order engine on a related site) and that seemed okay. Then I decided to insert similar buttons in the main content stream and everything got broke. I've been fiddling with width and margins in the definitions for all three buttons, but I can't find the one that is enlarging either the #nav or #main, forcing the entire main div below the nav div rather than alongside it where it should be. And ... since I'm already here ... in my leftside menu, under the heading "Useful Flower Facts & More", third item is "Flower, Fruit and Gourmet Food Baskets". Is there a better way to force a break than the </br> tag I've used? And how do I get a narrower line height between the two lines of that item than I have between items in the list? (I'm assuming I use line-height=.75em; -- where do I put that, given that it's a one-time requirement? Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <!--meta tags to come --> <head> <title>Floraworld.ca Trial Run -- Occasions Template</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <styletype="text/css"/> <style> body { background-color: #12127d; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; text-align: center; } h1 { text-align: center; } h2 { text-align: center; } h3 { text-align: center; } h4 { text-align: center; } div#outer { width: 80%; background-color:#fffae6; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; text-align: left; } div#header { padding: 15px; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; height: 100px; text-align: center; } #header img { width: 747px; height: 73px; border-style: ridge; border-color: #e6edff; border-width: 5px; } div#nav { width: 25%; padding: 5px; margin-top: 1px; margin-left: 5px; border-style: solid; border-color: 192d19; border-width: 2px; background-color: #e6edff; float: left; display: inline; /ie fix/ } div#buttonA { margin-top: 15px; margin-bottom: 30px; } div#buttonA ul { margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 30px; } div#buttonA li { list-style-type: none; height: 30px; width: 100px; margin: 10px; text-align:center; } div#buttonA li a { text-decoration: none; height: 100%; width: 100%; display: block; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonA li a:link { color: #000000; font-weight: bold; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonA li a:visited { color: #000000; font-weight: normal; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonA li a:hover { font-weight: bold; color: #FFFFFF; background-color: #414e80; border-style: solid; border-right-color: #c1ceff; border-bottom-color: #cbebff; border-top-color: #717a9f; border-left-color: #6276bf; } div#buttonA li a:active { font-weight: bold; color: #FFFFFF; background-color: #717a9f; border-style: solid; border-right-color: #c1ceff; border-bottom-color: #cbebff; border-top-color: #717a9f; border-left-color: #6276bf; } div#nav ul { margin: 5px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #000; line-height: 30px; /white-space: nowrap;/ text-align: center; } div#nav li { list-style-type: none; display: inline; white-space: nowrap; } div#nav li a { text-decoration: none; padding: 7px 10px; color: #000; } div#nav lia:link { color: #000: } div#main3 lia:visited { color: #CCC; } div#nav lia:hover { font-weight: bold; color: #000; background-color: #3366FF; } div#main { margin-left: 30%; margin-top: 1px; margin-right: 10px; border-style: solid; border-color: 192d19; border-width: 2px; background-color: #ffe480; /#aed0ae;/ padding: 10px; } * html div#main {height:1%}/* ie fix/ div#main1 { margin-left: 1px; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; } div#main2 {text-align: left;} div#main2-sample1, #main2-sample2, #main2-sample3 { float: left; width: 150px; height: 205px; padding-top: 15px; background-color: #ffffff; border: 1px solid #000000; text-align: center; margin-left: 2%; margin-bottom: 5px; display:inline;/ie fix/ } div#main2-sample2 { background color: #ffc2ff; } div#main2-sample3 { background color: #d6ffff; } div#main3 { margin-left: 1px; margin-top: 1px; margin-right: 1px; margin-bottom: 1px; clear: both; } div#buttonb { float: left; margin-top: 15px; margin-left: 2%; margin-bottom: 30px; } div#buttonb ul { margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 30px; } div#buttonb li { list-style-type: none; height: 30px; width: 125px; margin: 10px; text-align:center; } div#buttonb li a { text-decoration: none; height: 100%; width: 100%; display: block; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonb li a:link { color: #000000; font-weight: bold; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonb li a:visited { color: #000000; font-weight: normal; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonb li a:hover { font-weight: bold; color: #FFFFFF; background-color: #414e80; border-style: solid; border-right-color: #c1ceff; border-bottom-color: #cbebff; border-top-color: #717a9f; border-left-color: #6276bf; } div#buttonb li a:active { font-weight: bold; color: #FFFFFF; background-color: #717a9f; border-style: solid; border-right-color: #c1ceff; border-bottom-color: #cbebff; border-top-color: #717a9f; border-left-color: #6276bf; } div#main3 ul { margin: 5px; padding: 0px; font-family: Arial, Helvetica, sans-serif; font-size: small; color: #000; line-height: 30px; /white-space: nowrap;*/ text-align: center; } div#main3 li { list-style-type: none; display: inline; white-space: nowrap; } div#main3 li a { text-decoration: none; padding: 7px 10px; color: #000; } div#main3 lia:link { color: #000: } div#main3 lia:visited { color: #CCC; } div#main3 lia:hover { font-weight: bold; color: #000; background-color: #3366FF; } div#buttonc { float: left; margin-top: 15px; margin-left: 2%; margin-bottom: 30px; } div#buttonc ul { margin: 0px; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 30px; } div#buttonc li { list-style-type: none; height: 30px; width: 125px; margin: 10px; text-align:center; } div#buttonc li a { text-decoration: none; height: 100%; width: 100%; display: block; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonc li a:link { color: #000000; font-weight: bold; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonc li a:visited { color: #000000; font-weight: normal; background-color: #839dff; border-style: solid; border-bottom-color: #717a9f; border-right-color: #6276bf; border-left-color: #c1ceff; border-top-color: #cbebff; } div#buttonc li a:hover { font-weight: bold; color: #FFFFFF; background-color: #414e80; border-style: solid; border-right-color: #c1ceff; border-bottom-color: #cbebff; border-top-color: #717a9f; border-left-color: #6276bf; } div#buttonc li a:active { font-weight: bold; color: #FFFFFF; background-color: #717a9f; border-style: solid; border-right-color: #c1ceff; border-bottom-color: #cbebff; border-top-color: #717a9f; border-left-color: #6276bf; } div#footer { padding: 15px; margin: 5px; border-top: thin solid #000000; } img#flowers{ float: right; width: 200px; height:280px; margin:5px; } img#fpologo{} img#ftdlogo{} img#main2_im1{ width: 100px; height: 116px; } img#main2_im2{ width: 100px; height: 116px; } img#main2_im3{ width: 100px; height: 116px; } </style> </head> <body> <div id="outer"> <div id="header"><img alt="floraworld 1-888-rose-888" src="images/header.gif" /> </div> <div id="nav"> <div id="buttonA"> <ul> <li><a href="link1.html">Button 1</a></li> </ul> </div> <h4>Useful Flower Facts<br /> & More</h4> <ul> <li><a href="link2.html">Flower Care</a></li> <li><a href="link2.html">Flower Holidays</a></li> <li><a href="link2.html">Flower, Fruit and<br />Gourmet Food Baskets</a></li> <li><a href="link2.html">Monthly Flower Charts</a></li> <li><a href="link2.html">Monthly Birth Stones</a></li> <li><a href="link2.html">Plants & Planter Baskets</a></li> <li><a href="link2.html">Flower Reminder Service</a></li> </ul> <br /> <br /> <img id="fpologo" src="images/fpo_logo2.jpg" alt="Flower Promotion Organization" /> <img id="ftdlogo" src="images/ftdlogo.jpg" alt="FTD" /> <br /> <br /> <h4>Popular Flower Varieties<br /> for Delivery in Canada</h4> <p>Agapanthus, Alstroemeria, Aster, Bird Of Paradise, Bouvardia, Calla Lilies, Carnations/Mini Carnations, Chrysanthemums/Pompons, Daffodils, Delphinium (aka Larkspur), Freesia, Gerbera Daisies, Gladioli, Godetia, Gypsophila, Iris, Liatris, Lilies, Limonium, Orchids, Ornithogalum, Queen Anne's Lace, Roses, Snapdragons, Statice, Stock, Tulips</p> <br /> <br /> <br /> <br /> </div> <div id="main"> <div id="main1"> <h2>Send Anniversary Flowers in Canada</h2> <h3>Order Online from FloraWorld</h3> <h4>Have your Anniversary Flowers Delivered by Floraworld</h4> <img id="flowers" src="images/covermain.jpg" alt="flowers delivered" /> <p>When you can't make a personal delivery,<br /> trust western Canada's home-grown floral delivery service to make it right!</p> <p>Working with the best local flower shops<br /> (FTD, Teleflora and Grower Direct),<br /> Floraworld offers/p> <p>&nbsp &nbsp -- easy, secure online ordering</p> <p>&nbsp &nbsp -- fast, reliable floral delivery<br /> &nbsp &nbsp &nbsp &nbsp (same day delivery on early orders)</p> <p>&nbsp &nbsp -- Aeroplan Miles (or CAA Discount)<br /> &nbsp &nbsp &nbsp &nbsp with every order</p> <p>&nbsp &nbsp -- the freshest roses and other cut flowers<br /> &nbsp &nbsp &nbsp &nbsp in exquisite bouquets and arrangements</p> <br /> <br /> <br /> <br /> </div> <div id="main2"> <h2>Popular Anniversary Selections</h2> <br /> <div id="main2-sample1"><img id="main2_im1" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> <p>Image Title</p> <p>Image Price</p> </div> <div id="main2-sample2"><img id="main2_1m2" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> <p>Image Title</p> <p>Image Price</p> </div> <div id="main2-sample3"><img id="main2_im3" src="images/tnail_C4-3020.jpg" alt="flowers delivered" /> <p>Image Title</p> <p>Image Price</p> </div> </div> <div id="main3"> <br /> <br /> <div id="buttonb"> <ul> <li><a href="link1.html">Button 1</a></li> </ul> </div> <br /> <br /> <h2>Favourite Canadian Locations for<br /> Anniversary Flower Delivery</h2> <h3>Popular Places to Send Flowers in Canada</h3> <ul> <li><a href="link1.html">Victoria, British Columbia</a></li> <li><a href="link2.html">Vancouver BC</a></li> <li><a href="link3.html">Kelowna BC</a></li> </ul> <ul> <li><a href="link4.html">Edmonton, Alberta</a></li> <li><a href="link5.html">Calgary, Alberta</a></li> <li><a href="link6.html">Regina, Saskachewan</a></li> </ul> <ul> <li><a href="link7.html">Saskatoon, Saskatchewan</a></li> <li><a href="link8.html">Winnipeg, Manitoba</a></li> <li><a href="link9.html">Toronto, Ontario</a></li> </ul> <ul> <li><a href="link10.html">Ottawa, Ontario</a></li> <li><a href="link11.html">Montreal, Quebec</a></li> <li><a href="link12.html">Moncton, New Brunswick</a></li> </ul> <ul> <li><a href="link13.html">Saint John, New Brunswick</a></li> <li><a href="link14.html">Halifax, Nova Scotia</a></li> <li><a href="link15.html">Charlottetown, PEI</a></li> </ul> <ul> <li><a href="link16.html">St. Johns, Newfoundland</a></li> <li><a href="link17.html">Yellowknife, NWT</a></li> <li><a href="link18.html">Whitehorse, Yukon</a></li> </ul> <ul> <li><a href="link19.html">All Other Canadian Locations</a></li> </ul> <br /> <br /> <div id="buttonc"> <ul> <li><a href="link1.html">Button 1</a></li> </ul> </div> <br /> <br /> <h2>U.S.A. Flower Delivery</h2> <h3>Popular Places to Send Flowers in the United States</h3> <br /> <br /> <br /> <br /> <h2>International Flower Delivery</h2> <h3>Popular Places to Send Flowers around the World</h3> <br /> <br /> <br /> <br /> </div> </div> <div id="footer"> <p>Floraworld 1-888-ROSE-888 (1-888-767-3888) &nbsp &nbsp &nbsp &nbsp  \|&nbsp &nbsp &nbsp &nbsp &nbsp   Site Map &nbsp &nbsp &nbsp &nbsp &nbsp  \|&nbsp &nbsp &nbsp &nbsp &nbsp   Contact Us</p> </div> </div> </body> </html> Thanks you for your help and patience... Cam