Need some assistance with a CSS menu

Discussion in 'Web Design and Development' started by torndownunit, Nov 17, 2009.

  1. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #1
    I am trying to incorporate a drop down menu from Dynamic Drive, into a CSS layout. (this menu http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm)

    This is the page I am trying to use it on: http://www.ic-designs.ca/test/csslayout2.html . This is a premade CSS layout I downloaded. I haven't really edited much on either the menu CSS or the layout CSS. I mainly just increased the size of the header.

    (I know it's rough looking, but I am just trying to get these elements working together before I do anything else)

    The problem is the drop down options in the menu are way off the right for some reason in every browser I check it on. Can anyone tell me how to fix this?

    The menu is in a separate CSS sheet at www.ic-designs.ca/test/chrometheme/chromestyle.css

    The other style sheet is at www.ic-designs.ca/test/css/main2.css

    Again, I know things are unorganized, but I can't get through this initial problem with the menu so I haven't worked on much else.

    Thanks for any tips
     
  2. DewGuy1999 macrumors 68040

    DewGuy1999

    Joined:
    Jan 25, 2009
    #2
    I'm still pretty much a beginner with CSS, but, if you make a new page with just the menu does it work properly? If so, then theres something in the different CSS files that are overriding one another.
     
  3. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #3
    Ya it does work fine on it's own page.

    That makes sense. I can't see anything styles that conflict looking through the sheets, but I am not very advanced with my CSS.
     
  4. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #4
    If you use Firefox, download the Firebug extension. Then you can right-click and "Inspect Element". That will give you a list of what CSS rules are affecting your menu.
     
  5. torndownunit thread starter macrumors regular

    Joined:
    Jan 4, 2009
    #5
    hmm seem to be getting errors trying to install Firebug. I'll have to try later. Thanks.
     
  6. DewGuy1999 macrumors 68040

    DewGuy1999

    Joined:
    Jan 25, 2009
    #6
    I'm not an expert, or even that knowledgeable with CSS, but I tweaked it a bit, I can't say that this is the best thing to do, or even the right thing to do, but try this for your main2.css, it fixes the menu problem, but might create other problems, I don't know:

    Code:
    /**
     * 100% height layout with header and footer
     * ----------------------------------------------
     * Feel free to copy/use/change/improve
     */
    html,body {
    	margin:0;
    	padding:0;
    	height:100%; /* needed for container min-height */
    	background:gray;
    	
    	font-family:arial,sans-serif;
    	font-size:small;
    	color:#666;
    }
    
    h1 { 
    	font:1.5em georgia,serif; 
    	margin:0.5em 0;
    }
    h2 {
    	font:1.25em georgia,serif; 
    	margin:0 0 0.5em;
    }
    
    
    h1, h2, a {
    		color:orange;
    	}
    p { 
    	line-height:1.5; 
    	margin:0 0 1em;
    }
    div#container {
    	margin:0 auto; /* center, not in IE5 */
    	width:875px; background:#f0f0f0; height:auto !important; /* real browsers */
    	height:100%; /* IE6: treaded as min-height*/
    
    	min-height:100%; -moz-border-radius: 15px; -webkit-border-radius: 15px; /* real browsers */
    }
    /*Layout
    */
    div#header { background-image: url(../media/kc_auctions-banner.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 98% 0; height: 162px; padding:0.5em 0.5em 0; }
    div#header p {
    		font-style:italic;
    		font-size:1.1em;
    		margin:0;
    	}
    div#content { margin-top: 10px;
    	 /* bottom padding for footer */
    }
    div#content p {
    		text-align:justify;
    	}
    div#footer {
    	width:100%;
    	bottom:0; /* stick to bottom */
    	background:#ddd;
    	border-top:6px double gray;
    }
    div#footer p {
    		padding:1em;
    		margin:0;
    	}
    /* Rounded Corners */
    #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;}
    #xsnazzy h1 {font-size:2.5em; color:#000;}
    #xsnazzy h2 {font-size:2em;color:#06a; border:0;}
    #xsnazzy p {padding-bottom:0.5em;}
    #xsnazzy h2 {padding-top:0.5em;}
    #xsnazzy {background: transparent; margin:25px 1em;}
    
    .xtop, .xbottom {display:block; background:transparent; font-size:1px;}
    .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {background:#ffc; border-left:1px solid #000; border-right:1px solid #000;}
    .xb1 {margin:0 5px; background:#000;}
    .xb2 {margin:0 3px; border-width:0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
    
    .xboxcontent { display:block; background:#ffc; border-color: #000; border-style: solid; border-width:0 1px; }
    
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    It sets the left position in the JavaScript. It seems to be a bug of sorts. If you narrow your browser window to the width of the page you'll see the sub-menus line up correctly. Contact the developer so they know about this problem and they might be able to fix it. You may be better off looking at other menu options. Most do navigation as nested lists rather than having the sub-menus as different elements on the page.
     
  8. astroot macrumors regular

    Joined:
    Nov 12, 2009

Share This Page