473,403 Members | 2,354 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,403 software developers and data experts.

Help! Roll-over link alignment & centering a div within a div...

I'm working on this site:
http://www.essenceofsoy.com/redesign/index2.html

and I'm having a few problems with getting the layout exactly right.

1) When the menu items are rolled over, they cannot be clicked as links unless the mouse pointer is below the word. This happens in both Firefox and IE6.

2) In Firefox, the pink quote banner and two gray form boxes above and below the content aren't centered in the "content" div, and I can't figure out to center a div within another div! I used display: table which works great in Firefox, but in IE 6, nothing seems to be working for me!

If anyone can help me with any of the above problems, I would be so grateful!
I'm a newbie at this DIV/CSS thing, so please bear with my messy code.
I can provide screenshots if needed.

Thanks again!

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>Essence of Soy - Gourmet Candles & Fine Products</title>
  4. <!--[if lt IE 7]>
  5. <script type="text/javascript" src="unitpngfix.js">
  6. </script>
  7. <![endif]-->
  8.  
  9.  
  10. <!--[if IE]>
  11. <style>
  12. .parent    {
  13.     margin-left: 15%;
  14.     width: 100%;
  15.     margin-right: 15%;
  16.     }
  17. </style>
  18. <![endif]-->
  19.  
  20. <style>
  21. *     {
  22.     margin: 0;
  23.     padding: 0;
  24.     border: 0;
  25.     text-align: left;
  26.     }
  27.  
  28. body    {
  29.     width: 100%
  30.     background: #fff;
  31.     text-align: center;
  32.     }
  33.  
  34. .wrapper{
  35.     margin: 0 auto;
  36.     clear: both;
  37.     display: table;
  38.     }
  39.  
  40. .fr    {
  41.     float: right;
  42.     margin:    0;
  43.     }
  44.  
  45. .fl    {
  46.     float: left;
  47.     }
  48.  
  49. h1    {
  50.     background: url(images/logo.jpg) no-repeat;
  51.     margin: 0;
  52.     display:inline;
  53.     float:left;
  54.     overflow: hidden;
  55.     width: 263px;
  56.     height: 72px;
  57.     }
  58.  
  59. h1 a    {
  60.     margin: 0;
  61.     display: inline;
  62.     float: left;
  63.     overflow: hidden;
  64.     width: 263px;
  65.     height: 72px;
  66.     text-indent: -100em;
  67.     }
  68.  
  69. #header {
  70.     width: 100%;
  71.     text-align: left;
  72.     margin-top: 0;
  73.     margin-left: 0;
  74.     padding: 0;
  75.     overflow: hidden;
  76.     clear: both;
  77.     padding-top: 5px;
  78.     background: #fe79a4 url(../images/header.jpg) repeat-x;
  79.     }
  80.  
  81. #header .main
  82.     {
  83.     width: 60%;
  84.     margin-left: 20%;
  85.     margin-right: 20%;
  86.     text-align: left;
  87.     clear: both;
  88.     overflow: hidden;
  89.     }
  90.  
  91. #bubble    {
  92.     position: absolute;    
  93.     width: 60%;
  94.     background: transparent;
  95.     margin-left: 20%;
  96.     margin-right: 20%;
  97.     top: 5px;
  98.     right: 0px;
  99.     text-align: right;
  100.     overflow: hidden;
  101.     }
  102.  
  103. #menu    {
  104.     text-align: left;
  105.     width: 100%;
  106.     clear: both;
  107.     padding-bottom: 5px;
  108.     padding-top: 5px;
  109.     float: top;
  110.     padding: 0;
  111.     overflow: hidden;
  112.     background: #e94a72 url(images/menu.jpg) repeat-x;
  113.     }
  114.  
  115. #menuin    {
  116.     margin-left: 200px;
  117.     }
  118.  
  119. #menu ul
  120.     {
  121.     text-align: left;
  122.     display: inline;
  123.     margin: 0;
  124.     padding: 0;
  125.     }
  126.  
  127. #menu li
  128.     {
  129.     text-align: left;
  130.     display: inline;
  131.     list-style: none;
  132.     margin-left: 30px;
  133.     padding: 0;
  134.     float: left;
  135.     font-size: 150%;
  136.     }
  137.  
  138. li.home a
  139.     {
  140.     text-align: left;
  141.     background: url(images/homea.jpg);
  142.     display: block;
  143.     width: 50px;
  144.     height: 30px;
  145.     background-position: 0 0;
  146.     text-indent: -999999px;
  147.     overflow: hidden;
  148.     }
  149.  
  150. li.home a:hover 
  151.     {
  152.     text-align: left;
  153.     background: url(images/homea.jpg);
  154.     background-position: -50px 0;
  155.     }
  156.  
  157. li.about a
  158.     {
  159.     background: url(images/abouta.jpg);
  160.     display: block;
  161.     text-align: left;
  162.     width: 50px;
  163.     height: 30px;
  164.     background-position: 0 0;
  165.     text-indent: -999999px;
  166.     overflow: hidden;
  167.     }
  168.  
  169. li.about a:hover 
  170.     {
  171.     text-align: left;
  172.     background: url(images/abouta.jpg);
  173.     background-position: -50px 0;
  174.     }
  175.  
  176. li.shop a
  177.     {
  178.     background: url(images/shopa.jpg);
  179.     display: block;
  180.     width: 50px;
  181.     text-align: left;
  182.     height: 30px;
  183.     background-position: 0 0;
  184.     text-indent: -999999px;
  185.     overflow: hidden;
  186.     margin-left: 5px;
  187.     }
  188.  
  189.  
  190. li.shop a:hover 
  191.     {
  192.     text-align: left;
  193.     background: url(images/shopa.jpg);
  194.     background-position: -50px 0;
  195.     }
  196.  
  197. li.join a
  198.     {
  199.     background: url(images/joina.jpg);
  200.     display: block;
  201.     width: 50px;
  202.     text-align: left;
  203.     height: 30px;
  204.     background-position: 0 0;
  205.     text-indent: -999999px;
  206.     overflow: hidden;
  207.     }
  208.  
  209. li.join a:hover
  210.     {
  211.     text-align: left;
  212.     background: url(images/joina.jpg);
  213.     background-position: -50px 0;
  214.     }
  215.  
  216. li.contact a
  217.     {
  218.     background: url(images/contacta.jpg);
  219.     display: block;
  220.     width: 70px;
  221.     text-align: left;
  222.     height: 30px;
  223.     background-position: 0 0;
  224.     text-indent: -999999px;
  225.     overflow: hidden;
  226.     }
  227.  
  228. li.contact a:hover
  229.     {
  230.     background: url(images/contacta.jpg);
  231.     background-position: -70px 0;
  232.     }
  233.  
  234. #trimt    {
  235.     width: 100%;
  236.     float: top;
  237.     overflow: hidden;
  238.     height: 23px;
  239.     background: #fff url(images/trimtop.jpg) repeat-x;
  240.     }
  241.  
  242. .contentwrap
  243.     {
  244.     width: 100%;
  245.     text-align: center;
  246.     }
  247.  
  248.  
  249. #content{
  250.     float: top;
  251.     background: #fff;
  252.     text-align: left;
  253.     padding: 5px;
  254.     width: 60%;
  255.     margin: 0 auto;
  256.     color: #989898;
  257.     font-size: 13px;
  258.     font-family: trebuchet ms, georgia, tahoma;
  259.     line-height: 14px;
  260.     }
  261.  
  262. .emc
  263.     {
  264.     font-weight: normal;
  265.     font-size: 16px;
  266.     color: #ff79a4;
  267.     }
  268.  
  269.  
  270.  
  271. .quote    {
  272.     padding: 0;
  273.     line-height: 24px;
  274.     font-family: georgia, times;
  275.     font-size: 23px;
  276.     width: 70%;
  277.     color: #fff;
  278.      background: #ffb8ce;
  279.     margin: 0 auto;
  280.     }
  281.  
  282. .quoteblock
  283.     {
  284.     display:block;
  285.     width: 70%;
  286.     margin: 0 auto;
  287.     }
  288.  
  289. .quoteblock *
  290.     {
  291.      display:block;
  292.      height:1px;
  293.      overflow:hidden;
  294.      font-size:.01em;
  295.      background:#ffb8ce
  296.     }
  297.  
  298. .quoteblock1
  299.     {
  300.     margin-left:3px;
  301.     margin-right:3px;
  302.       padding-left:1px;
  303.       padding-right:1px;
  304.       border-left:1px solid #ffb8ce;
  305.       border-right:1px solid #ffb8ce;
  306.       background:#ffb8ce
  307.     }
  308.  
  309. .quoteblock2
  310.     {
  311.       margin-left:1px;
  312.       margin-right:1px;
  313.       padding-right:1px;
  314.       padding-left:1px;
  315.       border-left:1px solid #ffb8ce;
  316.       border-right:1px solid #ffb8ce;
  317.       background:#ffb8ce
  318.     }
  319.  
  320. .quoteblock3
  321.     {
  322.     margin-left:1px;
  323.       margin-right:1px;
  324.       border-left:1px solid #ffb8ce;
  325.       border-right:1px solid #ffb8ce;
  326.     }
  327.  
  328. .quoteblock4
  329.     {
  330.     border-left:1px solid #ffb8ce;
  331.      border-right:1px solid #ffb8ce
  332.     }
  333.  
  334. .quoteblock5
  335.     {
  336.      border-left:1px solid #ffb8ce;
  337.       border-right:1px solid #ffb8ce
  338.     }
  339.  
  340. .emq
  341.     {
  342.     font-style: none;
  343.     font-size: 32px;
  344.     }
  345.  
  346. .quote i
  347.     {
  348.     float: right;
  349.     }
  350.  
  351. #box    {
  352.     background: #f0f0f0 url(images/info.jpg) no-repeat;
  353.     width: 254px;
  354.     height: 169px;
  355.     overflow: hidden;
  356.     margin: 25px;
  357.     display: block;
  358.     }
  359.  
  360. #boxentry
  361.     {
  362.     color: #636363;
  363.     font-family: trebuchet ms, georgia, tahoma, sans;
  364.     font-size: 12px;
  365.     line-height: 14px;
  366.     padding: 15px;
  367.     width: 254px;
  368.     height: 169px;
  369.     overflow: hidden;
  370.     }
  371.  
  372. #boxentry br
  373.     {
  374.     line-height: 10px;
  375.     }
  376.  
  377.  
  378. h5    {
  379.     color: #5c3428;
  380.     font-family: georgia, times, sans;
  381.     font-weight: lighter;
  382.     font-size: 22px;
  383.     line-height: 14px;
  384.     }    
  385.  
  386.  
  387. #footer{
  388.     position: absolute;
  389.     width: 100%;
  390.     height: 64px;
  391.     background: #5c3428 url(images/trimbottom.jpg) repeat-x;
  392.     clear: both;
  393.     left: 0;
  394.     padding: 0px;
  395.     }
  396.  
  397. #spacer    {
  398.     clear: both;
  399.     margin: 0;
  400.     bottom: 0;
  401.     height: 3px;
  402.     }
  403.  
  404. .fnav    {
  405.     color: #fff;
  406.     font-family: trebuchet ms, tahoma, verdana;
  407.     font-size: 12px;
  408.     float: left;
  409.     line-height: 14px;
  410.     }
  411.  
  412. .fcopy    {
  413.     color: #fff;
  414.     font-family: trebuchet ms, tahoma, verdana;
  415.     font-size: 12px;
  416.     width: 100%;
  417.     padding: 0;
  418.     line-height: 14px;
  419.     text-align: right;
  420.     float: left;
  421.     }
  422.  
  423. /* ----------- Form ----------- */
  424. .form
  425.     {
  426.     margin:0 auto;
  427.     width:200px;
  428.     padding:14px;
  429.     }
  430.  
  431. /* ----------- style1 ----------- */
  432. #style1    {
  433.     border: 0;
  434.     background:transparent;
  435.     }
  436.  
  437. #style1 h1
  438.     {
  439.     font-size:13px;
  440.     font-weight:bold;
  441.     margin-bottom:8px;
  442.     }
  443.  
  444. #style1 p{
  445.     font-size:11px;
  446.     color:#666666;
  447.     margin-bottom:20px;
  448.     border-bottom:solid 1px #b7ddf2;
  449.     padding-bottom:10px;
  450.     }
  451.  
  452. #style1 label
  453.     {
  454.     display:block;
  455.     font-weight:bold;
  456.     text-align:right;
  457.     width:140px;
  458.     float:left;
  459.     }
  460.  
  461. #style1 .small
  462.     {
  463.     color:#666666;
  464.     display:block;
  465.     font-size:11px;
  466.     font-weight:normal;
  467.     text-align:right;
  468.     width:140px;
  469.     }
  470.  
  471. #style1 select
  472.     {
  473.     border: solid 1px #000;
  474.     color: #000;
  475.     opacity: .5;
  476.     font-size: 11px;
  477.     font-family: georgia;
  478.     }
  479.  
  480. #style1 input
  481.     {
  482.     float:center;
  483.     font-size:11px;
  484.     padding:2px 2px;
  485.     border:solid 1px #000;
  486.     color: #000;
  487.     width:200px;
  488.     opacity: .5;
  489.     font-family: georgia;
  490.     margin:2px 0 0 2px;
  491.     }
  492.  
  493. #style1 button
  494.     {
  495.     clear:both;
  496.     float: right;
  497.     margin-top: 5px;
  498.     width:94px;
  499.     height:21px;
  500.     background:#494949 url(images/button.png) no-repeat;
  501.     text-align:center;
  502.     padding: 0;
  503.     color:#fff;
  504.     font-size:13px;
  505.     font-weight: normal;
  506.     }
  507.  
  508.  
  509. #corner    {
  510.     position: absolute;
  511.     right: 0;
  512.     top: 0;
  513.     margin: 0;
  514.     padding: 0;
  515.     background: transparent;
  516.     z-index: 99;
  517.  
  518.     }
  519.  
  520. </style>
  521. </head>
  522. <body>
  523.  
  524. <!--TOP LAYOUT-->
  525.  
  526.  
  527. <div id="header">
  528.  
  529. <div class="main">
  530. <h1><a href="index.html">Essence of Soy</a></h1>
  531. </div>
  532.  
  533. </div>
  534.  
  535. <div id="bubble">
  536. <img src="images/sbubble.png">
  537. </div>
  538.  
  539. <div id="corner"><a href="makeadifference.html"><img src="images/bcbanner.png"></a></div>
  540.  
  541. <div id="menu">
  542. <div id="menuin">
  543.  
  544. <!-- BEGIN NAV-->
  545.  
  546. <ul>
  547.     <li class="home"><a href="index2.html">Home</a></li>
  548.     <li class="about"><a href="about.html">About</a></li>
  549.     <li class="shop"><a href="shop.html">Shop</a></li>
  550.     <li class="join"><a href="join.html">Join</a></li>
  551.     <li class="contact"><a href="contact.html">Contact</a></li>
  552. </ul>
  553.  
  554. <!--END NAV-->
  555.  
  556. </div>
  557. </div>
  558.  
  559. <div id="trimt">
  560. </div>
  561.  
  562. <!--END TOP LAYOUT-->
  563. <div class="contentwrap">
  564.  
  565. <div id="content">
  566.  
  567. <div id="spacer">&nbsp;</div>
  568. <div id="spacer">&nbsp;</div>
  569.  
  570. <!--[if IE]>
  571. <div class="parent">
  572. <![endif]-->
  573. <div class="wrapper">
  574.  
  575. <div>
  576.   <b class="quoteblock">
  577.   <b class="quoteblock1"><b></b></b>
  578.   <b class="quoteblock2"><b></b></b>
  579.   <b class="quoteblock3"></b>
  580.   <b class="quoteblock4"></b>
  581.   <b class="quoteblock5"></b></b>
  582.  
  583.   <div class="quote">
  584. "how far that little <span class="emq">candle</span> throws his beams! so &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="emq">shines</span> a good deed in a weary <span class="emq">world</span>." 
  585. <br />
  586.  
  587.   </div>
  588.  
  589.   <b class="quoteblock">
  590.   <b class="quoteblock5"></b>
  591.   <b class="quoteblock4"></b>
  592.   <b class="quoteblock3"></b>
  593.   <b class="quoteblock2"><b></b></b>
  594.   <b class="quoteblock1"><b></b></b></b>
  595. </div>
  596.  
  597. </div>
  598. <!--[if IE]>
  599. </div>
  600. <![endif]-->
  601.  
  602. <div id="spacer">&nbsp;</div>
  603.  
  604. <!--BEGIN CONTENT-->
  605. <img src="images/welcome.jpg">
  606. <p>
  607. <img class="fr" src="images/candles.png">
  608. ..to <span class="emc">essenceofsoy.com</span> where you can find gourmet candles and quality service in one super, happy-go-lucky little bundle. Experience a world of <span class="emc">opportunity and happiness</span> self-created through <span class="emc">working at home</span> on your time, at your leisure. Please feel free to browse through these pages,where you can shop online, <span>quickly and conveniently</span>, and learn more about
  609. our company and why we provide the <span class="emc">very best</span> the candle industry has to offer. >> read more 
  610. </p>
  611. <!--END CONTENT-->
  612.  
  613. <div class="wrapper">
  614.  
  615. <div id="box" class="fl">
  616. <div id="boxentry">
  617. <h5>know what you need?</h5>
  618. <br />
  619. &nbsp;&nbsp;&nbsp;see that fancy box down there?
  620. <br />go ahead and give it a click!
  621.  
  622. <p>
  623. <div id="style1" class="form">
  624. <form id="form" name="form" method="post" action="index.html">
  625. <select>
  626. <option>- - - please select a product - - -</option>
  627. <option>--------------Candles--------------</option>
  628. <option>Jar candles</option>
  629. <option>Votives</option>
  630. <option>Mia Melts</option>
  631. <option>-----------Body Products---------</option>
  632. <option>Bella Bars</option>
  633. <option>Bella Wash</option>
  634. <option>---------------Misc----------------</option>
  635. <option>Car Fresheners</option>
  636. </select>
  637. <button type="submit">Find it!</button>
  638. </form>
  639. </div>
  640. </p>
  641.  
  642. </div>
  643. </div>
  644.  
  645.  
  646. <div id="box" class="fl">
  647. <div id="boxentry">
  648. <h5>join the team</h5>
  649. <br />
  650. find out how you can work from home!
  651. <br />&nbsp;&nbsp;sign up to get some free info on how.
  652. <p>
  653. <div id="style1" class="form">
  654. <form id="form2" name="form" method="post" action="index.html">
  655.  
  656. <input type="text" name="name" id="name" value="Enter your name here" />
  657.  
  658. <input type="text" name="email" id="email" value="And a valid e-mail address" />
  659.  
  660. <button type="submit">Go, go, go!</button>
  661. </form>
  662. </div>
  663. </p>
  664.  
  665. </div>
  666. </div>
  667. </div>
  668.  
  669. <div id="spacer">
  670. </div>
  671.  
  672.  
  673.  
  674. </div>
  675. </div>
  676.  
  677. <div id="footer">
  678.  
  679. <div class="fnav">
  680. <p>
  681. &nbsp;
  682. </p>
  683. <br />
  684. </div>
  685.  
  686. <div class="fcopy">
  687. Design by <u>issentia design</u>.
  688. <br />
  689. Content &copy; 2008 Ganjana Ticlo. All Rights Reserved.
  690. </div>
  691.  
  692. </div>
  693.  
  694. </body>
  695. </html>
Oct 1 '08 #1
14 2498
drhowarddrfine
7,435 Expert 4TB
You will never get IE to attempt to perform like modern browsers, such as Firefox, without a proper doctype. See the article about doctypes in the Howtos section under HTML above.
Oct 1 '08 #2
Oh my gosh, I can't believe I forgot that! Silly me. :P
Now everything seems to be working fine for the center alignment EXCEPT the two gray info boxes at the bottom which are each floated to the left to keep them in line. How do I go about centering these two little items?

And now the menu doesn't work at all in Firefox and is still slightly off in IE6.
Oct 1 '08 #3
drhowarddrfine
7,435 Expert 4TB
Well, now you have to validate your html and css for those lists of errors. Ignore what IE is doing until you get it working FF cause IE will screw you up.
Oct 1 '08 #4
Well, now you have to validate your html and css for those lists of errors. Ignore what IE is doing until you get it working FF cause IE will screw you up.
Okay, so I validated both my HTML and CSS, and I'm still having problems in FF with my image menu.

I can't figure out why I'm not able to click the image links when I hover over them.
Oct 1 '08 #5
David Laakso
397 Expert 256MB
My error... see reply below.
Oct 2 '08 #6
David Laakso
397 Expert 256MB
Please upload the valid file to your host/server.
The URI you provided at the top of the thread still shows 5 errors and 15 warnings on a cleared cache.
Oct 2 '08 #7
drhowarddrfine
7,435 Expert 4TB
Yep. Plus, you've declared HTML yet try to use Xhtml end tags. This causes browsers to sometimes stop rendering at that point.
Oct 2 '08 #8
Okay, I updated the site so now the link I posted above should be the current validated version.

Just in case, here's the new code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4.  
  5.  
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8. <head>
  9. <title>Essence of Soy - Gourmet Candles &amp; Fine Products</title>
  10.  
  11. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  12.  
  13. <!--[if lt IE 7]>
  14. <script type="text/javascript" src="unitpngfix.js">
  15. </script>
  16. <![endif]-->
  17.  
  18.  
  19.  
  20.  
  21. <style type="text/css">
  22. *     {
  23.     margin: 0;
  24.     padding: 0;
  25.     border: 0;
  26.     text-align: left;
  27.     }
  28.  
  29. body    {
  30.     width: 100%;
  31.     background: #fff;
  32.     text-align: center;
  33.     }
  34.  
  35. #wrapper{
  36.     margin: 0 auto;
  37.     clear: both;
  38.     display: table;
  39.     }
  40.  
  41. .fr    {
  42.     float: right;
  43.     margin:    0;
  44.     }
  45.  
  46. .fl    {
  47.     float: left;
  48.     }
  49.  
  50. h1    {
  51.     background: url(images/logo.jpg) no-repeat;
  52.     margin: 0;
  53.     display:inline;
  54.     float:left;
  55.     overflow: hidden;
  56.     width: 263px;
  57.     height: 72px;
  58.     }
  59.  
  60. h1 a    {
  61.     margin: 0;
  62.     display: inline;
  63.     float: left;
  64.     overflow: hidden;
  65.     width: 263px;
  66.     height: 72px;
  67.     text-indent: -100em;
  68.     }
  69.  
  70. #header {
  71.     width: 100%;
  72.     text-align: left;
  73.     margin-top: 0;
  74.     margin-left: 0;
  75.     padding: 0;
  76.     overflow: hidden;
  77.     clear: both;
  78.     padding-top: 5px;
  79.     background: #fe79a4 url(../images/header.jpg) repeat-x;
  80.     }
  81.  
  82. #header .main
  83.     {
  84.     width: 60%;
  85.     margin-left: 20%;
  86.     margin-right: 20%;
  87.     text-align: left;
  88.     clear: both;
  89.     overflow: hidden;
  90.     }
  91.  
  92. #bubble    {
  93.     position: absolute;    
  94.     width: 60%;
  95.     background: transparent;
  96.     margin-left: 20%;
  97.     margin-right: 20%;
  98.     top: 5px;
  99.     right: 0px;
  100.     text-align: right;
  101.     overflow: hidden;
  102.     }
  103.  
  104. #menu    {
  105.     text-align: left;
  106.     width: 100%;
  107.     clear: both;
  108.     padding-bottom: 5px;
  109.     padding-top: 5px;
  110.     padding: 0;
  111.     overflow: hidden;
  112.     background: #e94a72 url(images/menu.jpg) repeat-x;
  113.     }
  114.  
  115. #menuin    {
  116.     margin-left: 200px;
  117.     }
  118.  
  119. #menu ul
  120.     {
  121.     text-align: left;
  122.     display: inline;
  123.     margin: 0;
  124.     padding: 0;
  125.     }
  126.  
  127. #menu li
  128.     {
  129.     text-align: left;
  130.     display: inline;
  131.     list-style: none;
  132.     margin-left: 30px;
  133.     padding: 0;
  134.     float: left;
  135.     font-size: 150%;
  136.     }
  137.  
  138. li.home a
  139.     {
  140.     text-align: left;
  141.     background: url(images/homea.jpg);
  142.     display: block;
  143.     width: 50px;
  144.     height: 30px;
  145.     background-position: 0 0;
  146.     text-indent: -999999px;
  147.     overflow: hidden;
  148.     float: left;
  149.     }
  150.  
  151. li.home a:hover 
  152.     {
  153.     text-align: left;
  154.     background: url(images/homea.jpg);
  155.     background-position: -50px 0;
  156.     float: left;
  157.     }
  158.  
  159. li.about a
  160.     {
  161.     background: url(images/abouta.jpg);
  162.     display: block;
  163.     text-align: left;
  164.     width: 50px;
  165.     height: 30px;
  166.     background-position: 0 0;
  167.     text-indent: -999999px;
  168.     overflow: hidden;
  169.     float: left;
  170.     }
  171.  
  172. li.about a:hover 
  173.     {
  174.     text-align: left;
  175.     background: url(images/abouta.jpg);
  176.     background-position: -50px 0;
  177.     float: left;
  178.     }
  179.  
  180. li.shop a
  181.     {
  182.     background: url(images/shopa.jpg);
  183.     display: block;
  184.     width: 50px;
  185.     text-align: left;
  186.     height: 30px;
  187.     background-position: 0 0;
  188.     text-indent: -999999px;
  189.     overflow: hidden;
  190.     margin-left: 5px;
  191.     float: left;
  192.     }
  193.  
  194.  
  195. li.shop a:hover 
  196.     {
  197.     text-align: left;
  198.     background: url(images/shopa.jpg);
  199.     background-position: -50px 0;
  200.     }
  201.  
  202. li.join a
  203.     {
  204.     background: url(images/joina.jpg);
  205.     display: block;
  206.     width: 50px;
  207.     text-align: left;
  208.     height: 30px;
  209.     background-position: 0 0;
  210.     text-indent: -999999px;
  211.     overflow: hidden;
  212.     float: left;
  213.     }
  214.  
  215. li.join a:hover
  216.     {
  217.     text-align: left;
  218.     background: url(images/joina.jpg);
  219.     background-position: -50px 0;
  220.     }
  221.  
  222. li.contact a
  223.     {
  224.     background: url(images/contacta.jpg);
  225.     display: block;
  226.     width: 70px;
  227.     text-align: left;
  228.     height: 30px;
  229.     background-position: 0 0;
  230.     text-indent: -999999px;
  231.     overflow: hidden;
  232.     float: left;
  233.     }
  234.  
  235. li.contact a:hover
  236.     {
  237.     background: url(images/contacta.jpg);
  238.     background-position: -70px 0;
  239.     }
  240.  
  241. #trimt    {
  242.     width: 100%;
  243.     overflow: hidden;
  244.     height: 23px;
  245.     background: #fff url(images/trimtop.jpg) repeat-x;
  246.     }
  247.  
  248. .contentwrap
  249.     {
  250.     width: 100%;
  251.     text-align: center;
  252.     }
  253.  
  254.  
  255. #content{
  256.     background: #fff;
  257.     text-align: left;
  258.     padding: 5px;
  259.     width: 60%;
  260.     margin: 0 auto;
  261.     color: #989898;
  262.     font-size: 13px;
  263.     font-family: trebuchet ms, georgia, tahoma;
  264.     line-height: 14px;
  265.     }
  266.  
  267. .emc
  268.     {
  269.     font-weight: normal;
  270.     font-size: 16px;
  271.     color: #ff79a4;
  272.     }
  273.  
  274.  
  275.  
  276. .quote    {
  277.     padding: 0;
  278.     line-height: 24px;
  279.     font-family: georgia, times;
  280.     font-size: 23px;
  281.     width: 70%;
  282.     color: #fff;
  283.      background: #ffb8ce;
  284.     margin: 0 auto;
  285.     }
  286.  
  287. .quoteblock
  288.     {
  289.     display:block;
  290.     width: 70%;
  291.     margin: 0 auto;
  292.     }
  293.  
  294. .quoteblock *
  295.     {
  296.      display:block;
  297.      height:1px;
  298.      overflow:hidden;
  299.      font-size:.01em;
  300.      background:#ffb8ce
  301.     }
  302.  
  303. .quoteblock1
  304.     {
  305.     margin-left:3px;
  306.     margin-right:3px;
  307.       padding-left:1px;
  308.       padding-right:1px;
  309.       border-left:1px solid #ffb8ce;
  310.       border-right:1px solid #ffb8ce;
  311.       background:#ffb8ce
  312.     }
  313.  
  314. .quoteblock2
  315.     {
  316.       margin-left:1px;
  317.       margin-right:1px;
  318.       padding-right:1px;
  319.       padding-left:1px;
  320.       border-left:1px solid #ffb8ce;
  321.       border-right:1px solid #ffb8ce;
  322.       background:#ffb8ce
  323.     }
  324.  
  325. .quoteblock3
  326.     {
  327.     margin-left:1px;
  328.       margin-right:1px;
  329.       border-left:1px solid #ffb8ce;
  330.       border-right:1px solid #ffb8ce;
  331.     }
  332.  
  333. .quoteblock4
  334.     {
  335.     border-left:1px solid #ffb8ce;
  336.      border-right:1px solid #ffb8ce
  337.     }
  338.  
  339. .quoteblock5
  340.     {
  341.      border-left:1px solid #ffb8ce;
  342.       border-right:1px solid #ffb8ce
  343.     }
  344.  
  345. .emq
  346.     {
  347.     font-style: normal;
  348.     font-size: 32px;
  349.     }
  350.  
  351. .quote i
  352.     {
  353.     float: right;
  354.     }
  355.  
  356. #wrapleft
  357.     {
  358.     width: 50%;
  359.     margin: 0 auto;
  360.     float: left;
  361.     display: table;
  362.     text-align: center;
  363.     }
  364.  
  365. #wrapright
  366.     {
  367.     float: left;
  368.     width: 50%;
  369.     margin: 0 auto;
  370.     display: table;
  371.     text-align: center;
  372.     }
  373.  
  374.  
  375. #boxl    {
  376.     background: #f0f0f0 url(images/info.jpg) no-repeat;
  377.     text-align: left;
  378.     width: 254px;
  379.     height: 169px;
  380.     overflow: hidden;
  381.     margin-left: 50px;
  382.     float: left;
  383.     display: block;
  384.     }
  385.  
  386. #boxr    {
  387.     background: #f0f0f0 url(images/info.jpg) no-repeat top left;
  388.     text-align: left;
  389.     width: 254px;
  390.     height: 169px;
  391.     overflow: hidden;
  392.     margin-left: 50px;
  393.     float: left;
  394.     display: block;
  395.     }
  396.  
  397. .boxentry
  398.     {
  399.     color: #636363;
  400.     font-family: trebuchet ms, georgia, tahoma, sans;
  401.     text-align: left;
  402.     font-size: 12px;
  403.     line-height: 14px;
  404.     padding: 15px;
  405.     margin: 0 auto;
  406.     overflow: hidden;
  407.     }
  408.  
  409. .boxentry br
  410.     {
  411.     line-height: 10px;
  412.     }
  413.  
  414.  
  415. h5    {
  416.     color: #5c3428;
  417.     font-family: georgia, times, sans;
  418.     font-weight: lighter;
  419.     font-size: 22px;
  420.     line-height: 14px;
  421.     }    
  422.  
  423.  
  424. #footer{
  425.     position: absolute;
  426.     width: 100%;
  427.     height: 64px;
  428.     background: #5c3428 url(images/trimbottom.jpg) repeat-x;
  429.     clear: both;
  430.     left: 0;
  431.     padding: 0px;
  432.     }
  433.  
  434. .spacer    {
  435.     clear: both;
  436.     margin: 0;
  437.     bottom: 0;
  438.     height: 3px;
  439.     }
  440.  
  441. .fnav    {
  442.     color: #fff;
  443.     font-family: trebuchet ms, tahoma, verdana;
  444.     font-size: 12px;
  445.     float: left;
  446.     line-height: 14px;
  447.     }
  448.  
  449. .fcopy    {
  450.     color: #fff;
  451.     font-family: trebuchet ms, tahoma, verdana;
  452.     font-size: 12px;
  453.     width: 100%;
  454.     padding: 0;
  455.     line-height: 14px;
  456.     text-align: right;
  457.     float: left;
  458.     }
  459.  
  460. /* ----------- Form ----------- */
  461. .form
  462.     {
  463.     margin:0 auto;
  464.     width:200px;
  465.     padding:14px;
  466.     }
  467.  
  468. /* ----------- style1 ----------- */
  469. .style1    {
  470.     border: 0;
  471.     background:transparent;
  472.     }
  473.  
  474. .style1 h1
  475.     {
  476.     font-size:13px;
  477.     font-weight:bold;
  478.     margin-bottom:8px;
  479.     }
  480.  
  481. .style1 p{
  482.     font-size:11px;
  483.     color:#666666;
  484.     margin-bottom:20px;
  485.     border-bottom:solid 1px #b7ddf2;
  486.     padding-bottom:10px;
  487.     }
  488.  
  489. .style1 label
  490.     {
  491.     display:block;
  492.     font-weight:bold;
  493.     text-align:right;
  494.     width:140px;
  495.     float:left;
  496.     }
  497.  
  498. .style1 .small
  499.     {
  500.     color:#666666;
  501.     display:block;
  502.     font-size:11px;
  503.     font-weight:normal;
  504.     text-align:right;
  505.     width:140px;
  506.     }
  507.  
  508. .style1 select
  509.     {
  510.     border: solid 1px #000;
  511.     color: #000;
  512.     opacity: .5;
  513.     font-size: 11px;
  514.     font-family: georgia;
  515.     }
  516.  
  517. .style1 input
  518.     {
  519.     opacity: .5;
  520.     font-size:11px;
  521.     padding:2px 2px;
  522.     border:solid 1px #000;
  523.     color: #000;
  524.     width:200px;
  525.     font-family: georgia;
  526.     margin:2px 0 0 2px;
  527.     }
  528.  
  529. .style1 button
  530.     {
  531.     clear:both;
  532.     float: right;
  533.     margin-top: 5px;
  534.     width:94px;
  535.     height:21px;
  536.     background:#494949 url(images/button.png) no-repeat;
  537.     text-align:center;
  538.     padding: 0;
  539.     color:#fff;
  540.     font-size:13px;
  541.     font-weight: normal;
  542.     }
  543.  
  544.  
  545. #corner    {
  546.     position: absolute;
  547.     right: 0;
  548.     top: 0;
  549.     margin: 0;
  550.     padding: 0;
  551.     background: transparent;
  552.     z-index: 99;
  553.  
  554.     }
  555.  
  556. </style>
  557. </head>
  558. <body>
  559.  
  560. <!--TOP LAYOUT-->
  561.  
  562.  
  563. <div id="header">
  564.  
  565. <div class="main">
  566. <h1><a href="index.html">Essence of Soy</a></h1>
  567. </div>
  568.  
  569. </div>
  570.  
  571. <div id="bubble">
  572. <img src="images/sbubble.png" alt="Shop Online!" />
  573. </div>
  574.  
  575. <div id="corner"><a href="makeadifference.html"><img src="images/bcbanner.png" alt="Make a difference" /></a></div>
  576.  
  577. <div id="menu">
  578. <div id="menuin">
  579.  
  580. <!-- BEGIN NAV-->
  581.  
  582. <ul>
  583.     <li class="home"><a href="index2.html">Home</a></li>
  584.     <li class="about"><a href="about.html">About</a></li>
  585.     <li class="shop"><a href="shop.html">Shop</a></li>
  586.     <li class="join"><a href="join.html">Join</a></li>
  587.     <li class="contact"><a href="contact.html">Contact</a></li>
  588. </ul>
  589.  
  590. <!--END NAV-->
  591.  
  592. </div>
  593. </div>
  594.  
  595. <div id="trimt">
  596. </div>
  597.  
  598. <!--END TOP LAYOUT-->
  599. <div class="contentwrap">
  600.  
  601. <div id="content">
  602.  
  603. <div class="spacer">&nbsp;</div>
  604. <div class="spacer">&nbsp;</div>
  605.  
  606.  
  607. <div id="wrapper">
  608.  
  609. <div>
  610.   <b class="quoteblock">
  611.   <b class="quoteblock1"><b></b></b>
  612.   <b class="quoteblock2"><b></b></b>
  613.   <b class="quoteblock3"></b>
  614.   <b class="quoteblock4"></b>
  615.   <b class="quoteblock5"></b></b>
  616.  
  617.   <div class="quote">
  618. "how far that little <span class="emq">candle</span> throws his beams! so &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="emq">shines</span> a good deed in a weary <span class="emq">world</span>." 
  619. <br />
  620.  
  621.   </div>
  622.  
  623.   <b class="quoteblock">
  624.   <b class="quoteblock5"></b>
  625.   <b class="quoteblock4"></b>
  626.   <b class="quoteblock3"></b>
  627.   <b class="quoteblock2"><b></b></b>
  628.   <b class="quoteblock1"><b></b></b></b>
  629. </div>
  630.  
  631. </div>
  632.  
  633. <div class="spacer">&nbsp;</div>
  634.  
  635. <!--BEGIN CONTENT-->
  636.  
  637.  
  638. <img src="images/welcome.jpg" alt="Welcome!" />
  639. <p>
  640. <img class="fr" src="images/candles.png" alt="" />
  641. ..to <span class="emc">essenceofsoy.com</span> where you can find gourmet candles and quality service in one super, happy-go-lucky little bundle. Experience a world of <span class="emc">opportunity and happiness</span> self-created through <span class="emc">working at home</span> on your time, at your leisure. Please feel free to browse through these pages,where you can shop online, <span>quickly and conveniently</span>, and learn more aboutour company and why we provide the <span class="emc">very best</span> the candle industry has to offer. >> read more 
  642. </p>
  643.  
  644.  
  645. <!--END CONTENT-->
  646.  
  647. <div class="parent">
  648. <div id="wrapleft">
  649.  
  650. <div id="boxl">
  651. <div class="boxentry">
  652. <h5>know what you need?</h5>
  653. <br />
  654. &nbsp;&nbsp;&nbsp;see that fancy box down there?
  655. <br />go ahead and give it a click!
  656.  
  657. <div class="form">
  658. <div class="style1">
  659. <form id="form" method="post" action="index.html">
  660. <div>
  661. <select>
  662. <option>- - - please select a product - - -</option>
  663. <option>--------------Candles--------------</option>
  664. <option>Jar candles</option>
  665. <option>Votives</option>
  666. <option>Mia Melts</option>
  667. <option>-----------Body Products---------</option>
  668. <option>Bella Bars</option>
  669. <option>Bella Wash</option>
  670. <option>---------------Misc----------------</option>
  671. <option>Car Fresheners</option>
  672. </select>
  673. </div>
  674. <div><button type="submit">Find it!</button></div>
  675. </form>
  676. </div>
  677. </div>
  678.  
  679. </div>
  680. </div>
  681. </div>
  682. </div>
  683.  
  684.  
  685. <div class="parent">
  686. <div id="wrapright">
  687.  
  688. <div id="boxr">
  689. <div class="boxentry">
  690.  
  691. <h5>join the team</h5>
  692. <br />
  693. find out how you can work from home!
  694. <br />&nbsp;&nbsp;sign up to get some free info on how.
  695. <br />
  696. <div class="style1">
  697. <div class="form">
  698. <form id="form2" method="post" action="index.html">
  699.  
  700. <div>
  701. <input type="text" name="name" id="name" value="Enter your name here" />
  702.  
  703. <input type="text" name="email" id="email" value="And a valid e-mail address" />
  704. </div>
  705.  
  706. <div><button type="submit">Go, go, go!</button></div>
  707. </form>
  708.  
  709. </div>
  710. </div>
  711.  
  712. </div>
  713. </div>
  714. </div>
  715. </div>
  716.  
  717.  
  718. <div class="spacer">
  719. </div>
  720.  
  721.  
  722. </div>
  723. </div>
  724.  
  725.  
  726. <div id="footer">
  727.  
  728. <div class="fnav">
  729. <p>
  730. &nbsp;
  731. </p>
  732. <br />
  733. </div>
  734.  
  735. <div class="fcopy">
  736. Design by issentia design.
  737. <br />
  738. Content &copy; 2008 Ganjana Ticlo. All Rights Reserved.
  739. </div>
  740.  
  741. </div>
  742.  
  743. </body>
  744. </html>
Oct 2 '08 #9
drhowarddrfine
7,435 Expert 4TB
The first problem is caused by forgetting that <a> is a seperate element from <li> so it is placed on a different line. For example, do .contact{position:absolute} and you'll see the <a> rise up into position because .contact is removed from the normal flow.

The second, 'display:table' only works in modern browsers, not IE.

Third,
In #boxleft and right, change to:
Expand|Select|Wrap|Line Numbers
  1. #wrapleft {
  2. float:left;
  3. width:50%;
  4. }
but it doesn't quite center it but that's all I have time for right now.
Oct 2 '08 #10
The first problem is caused by forgetting that <a> is a seperate element from <li> so it is placed on a different line. For example, do .contact{position:absolute} and you'll see the <a> rise up into position because .contact is removed from the normal flow.

The second, 'display:table' only works in modern browsers, not IE.

Third,
In #boxleft and right, change to:
#wrapleft {
float:left;
width:50%;
}

but it doesn't quite center it but that's all I have time for right now.
Thank you very much for all your help! I definitely see how adding .contact{position:absolute} made the link clickable, but how do I apply that to the other links? Applying the same concept to all the links doesn't seem to work.
Oct 2 '08 #11
drhowarddrfine
7,435 Expert 4TB
I didn't mean you should use abs pos to get it to work. I was just showing how it makes the point. I'm really flying around right now and don't have time to look further.
Oct 3 '08 #12
I didn't mean you should use abs pos to get it to work. I was just showing how it makes the point. I'm really flying around right now and don't have time to look further.
That's alright, I think I've figured about 90% of it out, or at least something else that's apparently working for me. You've been a big help, so I really appreciate it!
Oct 3 '08 #13
David Laakso
397 Expert 256MB
All I can suggest is get it working in simple text and no images.

Strip the entire menu html and the entire menu css, and replace it with this [1] using your colors:
[1] rollover
Whether you then go on from there to make it just another inaccessible, nightmare of a Photoshop magazine ad hosted on the Web is your call...
Oct 3 '08 #14
Thank you for everything. Finally got it working! Yay! :)
Oct 5 '08 #15

Sign in to post your reply or Sign up for a free account.

Similar topics

21
by: Dave | last post by:
After following Microsofts admonition to reformat my system before doing a final compilation of my app I got many warnings/errors upon compiling an rtf file created in word. I used the Help...
9
by: Tom | last post by:
A question for gui application programmers. . . I 've got some GUI programs, written in Python/wxPython, and I've got a help button and a help menu item. Also, I've got a compiled file made with...
4
by: Sarir Khamsi | last post by:
Is there a way to get help the way you get it from the Python interpreter (eg, 'help(dir)' gives help on the 'dir' command) in the module cmd.Cmd? I know how to add commands and help text to...
2
by: Sudheer Kareem | last post by:
Dear All Please tell me how to assosiate help files with my Vb.net Project. Regards Sudheer
6
by: wukexin | last post by:
Help me, good men. I find mang books that introduce bit "mang header files",they talk too bit,in fact it is my too fool, I don't learn it, I have do a test program, but I have no correct doing...
3
by: Colin J. Williams | last post by:
Python advertises some basic service: C:\Python24>python Python 2.4.1 (#65, Mar 30 2005, 09:13:57) on win32 Type "help", "copyright", "credits" or "license" for more information. >>> With...
7
by: Corepaul | last post by:
Missing Help Files When I enter "recordset" as the keyword and search the Visual Basic Help index, I get many topics of interest in the resulting list. But there isn't any information available...
10
by: JonathanOrlev | last post by:
Hello everybody, I wrote this comment in another message of mine, but decided to post it again as a standalone message. I think that Microsoft's Office 2003 help system is horrible, probably...
1
by: trunxnirvana007 | last post by:
'UPGRADE_WARNING: Array has a new behavior. Click for more: 'ms-help://MS.VSCC.v80/dv_commoner/local/redirect.htm?keyword="9B7D5ADD-D8FE-4819-A36C-6DEDAF088CC7"' 'UPGRADE_WARNING: Couldn't resolve...
0
by: hitencontractor | last post by:
I am working on .NET Version 2003 making an SDI application that calls MS Excel 2003. I added a menu item called "MyApp Help" in the end of the menu bar to show Help-> About. The application...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.