SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My dropdown menu moves in different resolution

    hi please help me with this one I have this new draft site the problem is the dropdown menu is moving everytime I resize it or look into a different monitor resolution please help me I am new to css and its really been a great challenge debugging it but an advice would be much appreciated
    here is the link: http://webmx04.freehyperspace2.com/der/index.html

    please help me also if its not a burden too much can you help me with ie6 png problems tried many png fix but with no success thank you for your time.

  2. #2
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is my css code
    * {
    color: #666666;
    padding-bottom: 0px;
    text-decoration: none;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    }

    body {
    background: #fff url(../images/bg.jpg) center top repeat-x;
    }

    #wrapper {
    background-image: url(../images/Untitled-1.png);
    position: relative;
    width: 855px;
    height: 768px;
    margin: auto;
    }

    #header {
    width: 765px;
    height: 88px;
    margin-top:22px;
    margin-left:49px;
    }

    #wholebody {
    width: 855px;
    padding-bottom:20px;
    height: 350px;
    }

    /* ============================= NAVIGATION ============================= */

    #menu{
    width:750px;
    height:22px;
    background:url(../images/menu.jpg);
    font-size:19px;
    padding-left:15px;
    line-height: 23px;
    margin-left: 49px;
    }

    #menu ul{
    margin:0;
    padding:0;
    list-style:none;
    }

    #menu ul li{
    display:inline;
    margin-left:10px;
    margin-right:10px;
    font-size:10px;
    font-family:Arial, Helvetica, sans-serif;
    }

    #menu ul li a{
    color:#666666;
    text-decoration:none;
    }

    #menu ul li a:hover{
    color:#ffffff;
    text-decoration:none;
    }

    /* ######### Style for Drop Down Menu ######### */

    .dropmenudiv {
    position:absolute;
    margin:-20px 0px 0px -210px;
    border-bottom-width: 0;
    z-index:100;
    visibility: hidden;
    color: #1F445F;
    font-size: 11px;
    font-family:Arial, Helvetica, sans-serif;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
    filter:alpha(opacity=70);
    -moz-opacity: .70;
    opacity: .70;
    }

    .dropmenudiv ul{
    padding:0;
    margin:0;
    list-style:none;
    }

    .dropmenudiv ul li{
    width:160px;
    height:20px;
    background: #e9a923;
    margin-bottom:1px;
    padding-top:1px;
    }

    .dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    text-decoration: none;
    color: #000;
    }

    .dropmenudiv a:hover{ /*Theme Change here*/
    color: #000;
    background-color:#F0F0F0;
    width:160px;
    height:20px;
    display: block;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4);
    filter:alpha(opacity=70);
    -moz-opacity:.70;
    opacity:.70;
    }

    /* ######### Style for flash banner ######### */

    #flash{
    width:765px;
    height:222px;
    z-index: 1;
    position: relative;
    left: 49px;
    }

    /* ######### Style for left Content ######### */

    #leftmenu {
    width:164px;
    height:auto;
    float:left;
    margin-top: 10px;
    position: relative;
    left: 36px;
    }

    #leftmenu ul{
    margin:0;
    padding:0;
    list-style:none;
    }

    /* ######### Style for center Content ######### */

    #centercontent {
    width:430px;
    height:auto;
    float:left;
    position: relative;
    z-index: 10;
    top: -20px;
    left: 36px;
    }

    /* ######### Style for right Content ######### */

    #apDiv1 {
    width:162px;
    height:275px;
    float:left;
    padding-top: 22px;
    margin-top: 10px;
    left: 48px;
    position: relative;
    }

    #apdiv1 .trivia p {font-size: 12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
    font-weight: normal;
    color:#655c5d;
    margin:10px 0
    }

    /* ######### Style for footer ######### */

    #footer {
    clear: both;
    border: none;
    text-align: center;
    float: left;
    position: relative;
    left: 160px;
    padding: 0px;
    margin-top: 25px;
    }

    /* ============================= Mango sub links ============================= */

    #wrapper2 {
    background-image: url(../images/bg2.png);
    background-position:top
    position: relative;
    width: 855px;
    height: 768px;
    margin: auto;
    position: relative;
    }

    #wholebody2 {
    width: 855px;
    padding-bottom:20px;
    height: 572px;
    }

    /* ######### mango Style for left Content ######### */

    #leftmenu1 {
    width:150px;
    height:auto;
    float:left;
    margin-top: 10px;
    position: relative;
    left: 55px;
    }

    #leftmenu1 p{
    color: #666666;
    padding-bottom: 0px;
    text-decoration: none;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
    }

    #leftmenu1 a:hover{
    color: #fc1313;
    text-decoration: none;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    }

    #leftmenu1 ul{
    margin:0;
    padding:0;
    list-style:none;
    }

    /* ######### mango Style for center Content ######### */

    #centercontent1 {
    width:430px;
    height:auto;
    float:left;
    position: relative;
    z-index: 10;
    top: 10px;
    left: 54px;
    }

    h1, h2 {
    margin-top: 0;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 36px;
    }

    .mainimage {
    margin-bottom:10px;
    padding-right:20px;
    }

    #centercontent1 .img {
    float:left;
    width:130px;
    }

    #centercontent1 .txt {
    float:right;
    width:270px;
    }

    #sideline {
    background-image:url(../images/sideline.png);
    height:473px;
    width:1px;
    position:relative;
    left: 49px;
    top: 30px;
    float: left;
    }

    /* ######### mango style for right Content ######### */

    #apDiv2 {
    width:162px;
    height:275px;
    float:left;
    padding-top: 22px;
    margin-top: 10px;
    left: 60px;
    position: relative;
    }

    #apDiv2 p{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #000;
    padding-bottom:8px;
    }

    #apDiv2 a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #f05b23;
    padding-bottom:8px;
    text-align: right;
    }

    h4 {font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    font-weight:bold;
    color:#43200a;
    text-decoration:none
    }

    h5 {font-family:"Times New Roman", Times, serif;
    font-size:14px;
    color: #f05b23;
    padding-bottom:5px;
    }

    h6 {
    margin-top: 0px;
    color: #f05b23;
    padding-bottom: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

    /* ######### pineapple style for middle Content ######### */

    #wrapper3 {
    background-image: url(../images/bg4.png);
    position: relative;
    width: 855px;
    height: 918px;
    margin: auto;
    position: relative;
    }

    #wholebody3 {
    width: 855px;
    padding-bottom:20px;
    height: 722px;
    }

    #smallb {
    height:83px;
    }

    #smallb img{
    float:left;
    bottom: 20px;
    margin-right: 40px;
    }

    #smalla {
    height:83px;
    }

    #smalla img{
    float:left;
    bottom: 20px;
    margin-right: 61px;
    }

    /* ######### other style for new Content ######### */

    #columnac {
    float: left;
    position: relative;
    width: 190px;
    }

    #columnab {
    float: right;
    position: relative;
    width: 190px;
    margin-right: 10px;
    }

    #smallcontent {
    width: 180px;
    }

    /* ######### fiber style for new Content ######### */

    #centercontent2 {
    width:430px;
    height:auto;
    float:left;
    position: relative;
    z-index: 10;
    top: 10px;
    left: 54px;
    }

    #centercontent2 .txt {
    float:left;
    width:270px;
    }

    /* ######### pineapple style for middle Content ######### */

    #wrapper4 {
    background-image: url(../images/bg5.png);
    position: relative;
    width: 855px;
    height: 868px;
    margin: auto;
    position: relative;
    }

    #wholebody4 {
    width: 855px;
    padding-bottom:20px;
    height: 660px;
    }

    /* ######### produce style for middle Content ######### */

    .thumbnail
    {
    float: left;
    width: 226px;
    margin: 0 15px 0px 15px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#43200a;
    height: 125px;
    }
    .thumbnail a { font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#43200a;
    }

    .thumbnail a:hover {color:#fc1313;
    text-decoration:none;
    }

    #centercontent3 {
    width:530px;
    height:auto;
    float:left;
    position: relative;
    top: 10px;
    left: 54px;
    }

    #wholebody5 {
    width: 855px;
    height: 565px;
    }

    #footer1 {
    clear: both;
    border: none;
    text-align: center;
    float: left;
    position: relative;
    left: 160px;
    padding: 0px;
    margin-bottom: 30px;
    margin-top: 50px;
    }

    /* ######### Style for center Content ######### */

    #centercontent2 {
    width:430px;
    height:auto;
    float:left;
    position: relative;
    z-index: 10;
    top: 10px;
    left: 50px;
    }
    /* ######### news Style for center Content ######### */
    #centercontent2 .floatright {float:right;
    margin:0px 0px 10px 10px;
    }


    #apDiv3 {
    width:162px;
    height:275px;
    float:left;
    padding-top: 22px;
    margin-top: 10px;
    left: 60px;
    position: relative;
    }

    #apDiv3 p{
    font-family:Arial, Helvetica, sans-serif;
    font-size:10px;
    color: #000;
    padding-bottom:10px;
    }

    #apDiv3 a{
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color: #000;
    padding-bottom:10px;
    text-align: left;
    }
    #apDiv3 a:hover{
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color: #f05b23;
    padding-bottom:10px;
    text-align: left;
    }
    /* ######### fiber style for new Content ######### */

    #centercontent3 {
    width:583px;
    height:auto;
    float:left;
    position: relative;
    z-index: 10;
    top: 10px;
    left: 54px;
    }

    #centercontent3 .txt {
    float:left;
    width:270px;
    }

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and my html code

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Petbowe Internatinal Corp. Philippines</title>
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/main.css" />
    <script language="JavaScript" type="text/javascript" src="js/chrome.js"></script>
    <!--[if gt ie 5]>
    <style type="text/css">

    .dropmenudiv { margin:3px 0px 0px -210px; }
    html { height:100% }
    body { min-height:101% }
    body { overflow: -moz-scrollbars-vertical; }
    #footer { margin: 0px;
    left: 160px;
    }
    #wrapper { behavior: url(alphaImageLoader.htc); }

    </style>
    <![endif]-->
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>

    <body>
    <div id="wrapper" >

    <!-- the header -->
    <div id="header"> <img id="main_03" src="images/main_03.png" width="765" height="88" alt="" /> </div>
    <div id="chromemenu">
    <div id="menu">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Products</a></li>
    <li><a href="faq.html">Faq</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="contact.html">Contact us</a></li>
    </ul>
    </div>
    </div>

    <!-- Services drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    <ul>
    <li><a href="pineapple.html" >Pineapples</a></li>
    <li><a href="banana.html" >Bananas</a></li>
    <li><a href="mango.html" >Mangoes</a></li>
    <li><a href="other.html" >Other Fruits</a></li>
    <li><a href="fiber.html" >Coco Fiber</a></li>
    <li><a href="charcoal.html" >Coco Charcoal</a></li>
    <li><a href="twine.html" >Coco Twine</a></li>
    <li><a href="product.html" >Other Coco Products</a></li>
    </ul>
    </div>



    <!-- the flash banner -->
    <div id="flash">
    <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','765','height','222','src','fruit1','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','fruit1' ); //end AC code
    </script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="765" height="222">
    <param name="movie" value="fruit1.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <embed src="fruit1.swf" width="765" height="222" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
    </object>
    </noscript></div>

    <div id="wholebody">
    <!-- left of content -->
    <div id="leftmenu">
    <ul>
    <li><img id="main_13" src="images/main_13.png" width="164" height="51" alt="" /> </li>
    <li><a href="produce.html"><img src="images/main_18.png" alt="" width="164" height="45" border="0" id="main_18" /></a> </li>
    <li><a href="faq.html"><img src="images/main_20.png" alt="" name="main_20" width="164" height="45" border="0" id="main_20" /></a> </li>
    <li><a href="about.html"><img src="images/main_22.png" alt="" width="164" height="45" border="0" id="main_22" /></a> </li>
    <li><a href="contact.html"><img src="images/main_25.png" alt="" width="164" height="45" border="0" id="main_25" /></a></li>
    </ul>
    </div>

    <!-- center of content -->
    <div id="centercontent"><img src="images/main_08.gif" width="430" height="301" /></div>


    <!-- right of content -->
    <div id="apDiv1">
    <div class="trivia">
    <p><SCRIPT language="Javascript"><!--
    function image() { };
    image = new image();
    number = 0;
    // imageArray
    image[number++] = "<img src='images/main_15.png' border='0'><br><br>The Filipino national costume Barong Tagalog is made from the fibers of pineapple leaves. "
    image[number++] = "<img src='images/2.jpg' border='0'><br><br>China is the currently the biggest producer of pineapples in the world."
    image[number++] = "<img src='images/3.jpg' border='0'><br><br>Fresh pineapples contain the gelatin-digesting enzyme bromelain, which makes it unsuitable for use in recipes with gelatin and dairy products."
    image[number++] = "<img src='images/4.jpg' border='0'><br><br>Pineapples originated from South America, particularly southern Brazil and Paraguay."
    image[number++] = "<img src='images/5.jpg' border='0'><br><br>The most popular banana before the emergence of the Cavendish was the Gros Michel, which was wiped out by Panama disease during the 1950s."
    image[number++] = "<img src='images/6.jpg' border='0'><br><br>The famous 1923 musical �Yes, We Have Bananas!� was said to have been written by Frank Silver and Irving Cohn after a neighborhood grocer failed to provide them with the fruit."
    image[number++] = "<img src='images/7.jpg' border='0'><br><br>In the Philippines, green mangoes are eaten with fish paste or bagoong in the native vernacular."
    image[number++] = "<img src='images/8.jpg' border='0'><br><br>A cluster of bananas, which numbers to about 10 to 20 pieces, is called a hand. Each banana is called a finger."
    increment = Math.floor(Math.random() * number); document.write(image[increment]);
    //-->
    </SCRIPT></p>
    </div>
    </div>
    </div>
    <!-- footer of content -->
    <div id="footer">
    <p class="footer_txt">Copyright Petbowe, Inc. 2007 All rights Reserved Webdesign by Flaunt Media Exchange Advertising</p>
    </div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Welcome to the forums. I would suggest using the son of suckerfish method for your menu instead of the positioning method you are trying. http://www.htmldog.com/articles/suckerfish/dropdowns/
    Joe


Bookmarks

Posting Permissions

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