Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question need help, menu column problems

    ok, i am starting to get the hang of this, but my right column isnt doing what i want it to.
    i need the right side to copy the left mene column, except i need the images to appear in the middle culum (left side), instead of like the left column's menu showing the image in the middle. i want both menus to show images in the middle when you put mouse over it. this is a starter page, so please dont make fun of it. i am trying to learn the css the best i can.

    http://pantherkitten9.tripod.com/services.htm



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

    <head>
    <title>Black Diamond Services</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">

    html, body{height:100%;}


    body {
    padding:0;
    margin:0;
    background-color: #000000 repeat-y left top;
    color: #F0F8FF ;
    }
    #outer{
    min-height:100%;
    margin-left:130px;
    margin-right:130px;
    background:#000000;
    border-left:1px solid #000;
    border-right:1px solid #000;
    margin-bottom:-52px;
    color: #F0F8FF ;
    }

    * html #outer{height:100%} /*for IE as IE treats height as min-height anyway*/
    #header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:70px;
    background:#000000;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    overflow:hidden;
    color: #F0F8FF ;
    }
    #left {
    position:relative;/*ie needs this to show float */
    width:130px;
    float:left;
    margin-left:-129px;/*must be 1px less than width otherwise won't push footer down */
    z-index:100;
    left:-1px;
    }
    * html #left {padding-bottom:52px ;margin-right:-3px;}/*fix gap in ie next to float and clear footer because we've moved float too far left*/
    #left p {padding-left:3px;padding-right:2px}
    #right p {padding-left:3px;padding-right:2px}

    #right {
    position:relative;/*ie needs this to show float */
    width:130px;
    float:right;
    margin-right:-129px;/*must be 1px less than width otherwise won't push footer down */
    z-index:100;
    left:1px
    }

    #footer {
    width:100%;
    clear:both;
    height:50px;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    background-color: #000000;
    color: #000000;
    text-align:center;
    position:relative;
    }
    * html #footer {/*only ie gets this style*/
    \height:52px;/* for ie5 */
    he\ight:50px;/* for ie6 */
    }
    #clearheader{height:72px;}/*needed to make room for header*/
    #clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
    * > html #clearfooter {float:left;width:100%;}/* ie mac styles */
    div,p {margin-top:0}/*clear top margin for mozilla*/
    * html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
    #centrecontent {position:relative;z-index:1}

    /* css stuff below is just for presentation and not needed for the demo */

    #left span {
    display:none;
    }
    #left a:hover {
    color: #FF0033;
    background: #000000;
    text-decoration: none;
    }
    #left a:hover span {
    display:block;
    position:absolute;
    left:130px;
    width:150px;
    z-index:20;
    background:#000000;
    }
    @media all and (min-width: 0px){
    #left a:hover span {
    top:150px;
    }








    #right span {
    display:none;
    }
    #right a:hover {
    color: #FF0033;
    background: #000000;
    text-decoration: none;
    }
    #right a:hover span {
    display:block;
    position:absolute;
    left:130px;
    width:150px;
    z-index:20;
    background:#000000;
    }
    @media all and (min-width: 0px){
    #right a:hover span {
    top:150px;
    }


    }
    #footer span {
    display:none;
    }
    #footer a:hover {
    color: #000000;
    background: #000000;
    text-decoration: none;
    }
    #footer a:hover span {
    display:block;
    position:absolute;
    top:-95px;
    width:150px;
    z-index:20;
    background:#000000;
    left:50%;
    }
    html > body #minHeight{float:left;width:0px;height:100%;margin-bottom:-52px;}

    </style>
    </head>
    <body>
    <div id="minHeight"></div>
    <div id="outer">
    <div id="clearheader"></div> <!-- to clear header -->
    <div id="left">
    <p></p>
    <ul>
    <li><a href="home.htm">Home<span><img src="/images/main/buffalo_diamond_logo.gif" alt="Buffalo Diamond" width="141" height="241" /></span></a></li>
    <li><a href="aboutus.htm">About Us<span><img src="/images/main/us.jpg" alt="Who we are" width="299" height="241" /></span></a></li>
    <li><a href="engraving.htm">Buffalo Shadow Engraving<span><img src="/images/engraving/bs_main_logo.jpg" alt="Buffalo Shadow Engraving" width="246" height="182" /></span></a></li>
    <li><a href="nascar.htm">Nascar<span><img src="/images/fun/nascar_logo.gif" alt="Our nascar Pages" width="240" height="39" /></span></a></li>
    </ul>
    </div>
    <div id="right">
    <p></p>
    <ul>
    <li><a href="design.htm">Black Diamond Design<span><img src="/images/services/bd_design_logo.jpg" alt="Black Diamond Design" width="223" height="308" /></span></a></li>
    <li><a href="services.htm">Black Diamond Services<span><img src="/images/services/bd_services_logo.gif" alt="Black Diamond Services" width="157" height="286" /></span></a></li>
    <li><a href="affiliates.htm">Affiliates<span><img src="/images/main/affilates_logo.jpg" alt="Our Affiliates" width="240" height="38" /></span></a></li>
    </ul>
    </div>

    <div id="centrecontent">
    <!--centre content goes here -->
    <p><strong>Black Diamond Services</strong> -~*^~~^*~-</p>
    <p>We offer maid and pet services</p>
    <p>More To Come</p>
    <p>CCCCCCCCCCCCCC</p>
    <p style="text-align:center">hmmmm</p>
    </div>
    <div id="clearfooter"></div> <!-- to clear footer -->
    </div><!-- end outer div -->

    <div id="footer">Copyrighted By - <a href="design.htm">Black Diamond Design</a>
    | <a href="engraving.htm">Buffalo Shadow Engraving</a>
    - 2005
    <p></p>
    </div>
    <div id="header"><img src="/images/services/bds_header.jpg" alt="Black Diamond Services" width="700" height="100" /></div>
    </body>
    </html>


    thanks for any help i can get.

  • #2
    New Coder
    Join Date
    Feb 2005
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    never mind

    It was a stupid question. i am trying something different, please either delete this thread or dont bother with it. i was trying more than i should have and i apologize.

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by pantherkitten9
    i was trying more than i should have and i apologize.
    lol.... don't apologize. That's how we ALL got in this coding mess for the most part. Every site I build I try something more than I should have

    Let us know if you still need help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •