471,596 Members | 1,045 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > html / css > questions > help! roll-over link alignment & centering a div within a div...

Join Bytes to post your question to a community of 471,596 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 2256
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

Post your reply

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

Similar topics
Help, *.CHM, etc
9 posts views Thread by Tom | last post: by
Interpreter-like help in cmd.Cmd
4 posts views Thread by Sarir Khamsi | last post: by
Help
2 posts views Thread by Sudheer Kareem | last post: by
help me? About "include files"
6 posts views Thread by wukexin | last post: by
Problem with Help when using numarray
3 posts views Thread by Colin J. Williams | last post: by
Missing Help Files
7 posts views Thread by Corepaul | last post: by
Folder Locker C++
reply views Thread by Anwar ali | last post: by

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.

BYTES.COM © 2022
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates