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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2003
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts

    CSS Menu overlapping JS Image Gallery

    I have a CSS drop-down menu and a JS image gallery, when the CSS menu drops down you can still see the JS image gallery underneath. How can I prevent this from happening?

    Have a look: http://www.konnectservices.com/new1/

    Site CSS

    Code:
    #/*
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	margin-top: 40px;
    	background: #FFFFFF;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #757E82;
    }
    
    h1, h2, h3 {
    	color: #AA2808;
    }
    
    h1 {
    }
    
    h2 {
    }
    
    h3 {
    }
    
    p, blockquote, ul, ol {
    	margin-bottom: 20px;
    	line-height: 2em;
    }
    
    p {
    }
    
    blockquote {
    }
    
    ul, ol, li {
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
    }
    
    a {
    	text-decoration: underline;
    	color: #DE1C1D;
    }
    
    a:hover {
    	text-decoration: none;
    	color: #DE1C1D;
    }
    
    /* Wrapper */
    
    #wrapper {
    }
    
    /* Header */
    
    #header {
    	width: 992px;
    	height: 91px;
    	margin: 0 auto;
    	border-bottom: 1px solid #E5E5E5;
    }
    
    /* Logo */
    
    #logo {
    	float: left;
    	width: 270px;
    	height: 76px;
    	margin: 0px;
    	padding: 15px 0px 0px 30px;
    }
    
    #logo h1 {
    	margin: 0;
    	padding: 0;
    	text-transform: lowercase;
    	font: normal 46px Georgia, "Times New Roman", Times, serif;
    }
    
    #logo h2 {
    	margin: -2px 0 0 0;
    	padding: 0;
    	text-transform: uppercase;
    	letter-spacing: 2px;
    	font-size: 10px;
    	font-weight: bold;
    	color: #0A9444;
    }
    
    #logo h2 a {
    	color: #9AA9B1;
    }
    
    #logo a {
    	text-decoration: none;
    	color: #0A9444;
    }
    
    /* Menu */
    
    #menu {
    	float: right;
    	width: 692px;
    	height: 54px;
    	margin-top: 10px;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 0px 0 0 20px;
    	list-style: none;
    	line-height: normal;
    	margin-left: 30px;
    }
    #menu ul li {
      display: block;
      position: relative;
      float: right;
    }
    #menu li ul { display: none; }
    #menu ul li a {
      display: block;
      	text-decoration: none;
    	text-align: center;
    	text-transform: uppercase;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;;
      color: #0A9444;
      border-top: 1px solid #ffffff;
      padding: 18px 15px 18px 15px;
      background: #0FFFFFF;
      margin-left: 20px;
      white-space: nowrap;
    }
    #menu ul li a:hover { background: #0A9444; 
    color: #FFFFFF;}
    #menu li:hover ul {
      display: block;
      position: absolute;
    }
    #menu li:hover li {
      float: none;
      font-size: 11px;
    }
    #menu li:hover a { background: #0A9444; 
    color: #FFFFFF;}
    
    /* Search */
    
    #search {
    	height: 45px;
    	padding: 0px 0px 40px 0px;
    }
    
    #search form {
    	margin: 0;
    	padding: 12px 0px 0 0;
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search input {
    	float: left;
    	font: 12px Georgia, "Times New Roman", Times, serif;
    }
    
    #search-text {
    	width: 120px;
    	height: 18px;
    	padding: 3px 0 0 5px;
    	border: 1px solid #000000;
    	color: #000000;
    }
    
    #search-submit {
    	height: 21px;
    	margin-left: 10px;
    	padding: 0px 2px;
    	border: none;
    	background: #DE1C1D;
    	color: #FFFFFF;
    }
    
    /* Page */
    
    #page {
    	width: 930px;
    	margin: 0 auto;
    }
    
    #page-bgtop {
    	padding: 0px 30px;
    }
    
    /* Content */
    
    #content {
    	float: left;
    	width: 592px;
    }
    .post {
    	margin: 0px 0px 30px 0px;
    }
    
    .post .title {
    	margin: 0px;
    	padding: 0px 0px 5px 0px;
    	color: #232F01;
    }
    
    .post .title a {
    	padding: 4px 35px 4px 15px;
    	background: #0A9444;
    	text-decoration: none;
    	font-weight: normal;
    	color: #FFFFFF;
    }
    
    .post .entry {
    }
    
    .post img {
    	float: left;
    	padding: 15px 0px;
    }
    
    .post .meta {
    	text-align: right;
    	padding-top: 20px;
    	border-bottom: 1px solid #E5E5E5;
    	font-weight: bold;
    	color: #202020;
    }
    
    .post .byline {
    	float: right;
    	margin-top: -30px;
    	font-size: 12px;
    	color: #5E5E5E;
    }
    
    /* Sidebar */
    
    #sidebar {
    	float: right;
    	width: 238px;
    }
    
    #sidebar ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	line-height: normal;
    }
    
    #sidebar li {
    	margin-bottom: 1px;
    }
    
    #sidebar li ul {
    	margin: 0px;
    	padding: 0px 0px 40px 0px;
    }
    
    #sidebar li li {
    	margin: 0;
    	padding: 9px 0px;
    	border: none;
    }
    
    #sidebar h2 {
    	margin: 0px;
    	padding: 0px;
    	border-bottom: 2px solid #EBEBEB;
    	font-size: 160%;
    	font-weight: normal;
    	color: #454E55;
    }
    
    #sidebar h3 {
    	font-size: 77%;
    	color: #454E55;
    }
    
    #sidebar p {
    	margin: 0;
    	line-height: normal;
    	color: #D4C792;
    }
    
    #sidebar a {
    	border: none;
    	text-decoration: none;
    	color: #757E82;
    }
    
    #sidebar a:hover {
    	text-decoration: underline;
    	color: #363636;
    }
    
    /* Submenu */
    
    #submenu {
    }
    
    /* News */
    
    #news {
    }
    
    #news a {
    	font-size: 85%;
    }
    
    /* Footer */
    
    #footer {
    	width: 892px;
    	height: 50px;
    	margin: 0 auto;
    	padding: 20px 0 20px 0;
    	border-top: 1px solid #E5E5E5;
    	color: #757E82;
    }
    
    #footer p {
    	margin: 0;
    	text-align: center;
    	font-size: 77%;
    }
    
    #footer a {
    	text-decoration: underline;
    	color: #757E82;
    }
    
    #footer a:hover {
    	text-decoration: none;
    }
    
    /* CSS by PA */
    
    #google_map{
    	width:600px;
    	height:350px;
    }
    
    .bordered {
    border:1px solid #197F19;
    }
    
    .map_hint  {
    background:none repeat scroll 0 0 #FFFFFF;
    display:none;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
    padding:3px 6px;
    position:absolute;
    text-align:center;
    white-space:nowrap;
    z-index:100;
    }
    #hint_zoom {
    width:286px;
    }
    #hint_click {
    width:200px;
    }
    #hint_finished {
    width:235px;
    }
    
    #map_error{
    	clear:both;
    }
    
    #thanks {
    	padding: 0px 25px;
    #google_maps_wrap{
    	clear:both;
    }
    
    #button1, #button2{
    	background:none repeat scroll 0 0 #056839;
    	color:#FFFFFF;
    	border:0px none;
    	cursor:pointer;
    	font-size:12px;
    	font-weight:bold;
    	padding:5px 15px;
    	width:125px;
    }
    .stdlight {
    color:#70AF1A;
    }
    
    h3.stdlight {
    color:#70AF1A;
    }
    
    .lowlight {
    color:#097609;
    }
    
    .lowestlight {
    	color:#046838;
    }
    
    h1 .lowestlight{
    	color:#046838;
    }
    .form_detail {
    float:left;
    width:396px;
    }
    
    .form_row {
    margin:0 0 12px;
    overflow:hidden;
    }
    
    .form_row label {
    display:block;
    float:left;
    font-weight:bold;
    margin-top:3px;
    width:120px;
    }
    
    .form_row input {
    background:none repeat scroll 0 0 #FFFFFF;
    border:1px solid #70AF1A;
    color:#535B5F;
    padding:3px 2px;
    }
    
    .error {
    background:none repeat scroll 0 0 #FEEDED;
    border:1px solid #990000;
    color:#990000;
    margin-bottom:12px;
    padding:8px 0;
    text-align:center;
    }
    
    .form_row .form_detail label.list_checkbox {
    width:400px;
    }
    
    .form_row.checkbox_list .form_detail label {
    display:inline;
    font-size:11px;
    margin:2px 10px 8px 0;
    }
    
    .form_row .form_detail label {
    font-size:12px !important;
    font-weight:normal;
    }
    
    .form_detail.button_detail  {
    display:inline;
    margin-left:120px;
    text-align:right;
    }
    Gallery CSS

    Code:
    #gallery-wrapper {
    	width: 880px;
    	height: 210px;
    	margin: 20px auto;
    	padding: 10px 40px;
    	background: url(images/img06.jpg) no-repeat 40px 10px;
    }
    
    #gallery {
    	margin: 0px;
    	padding: 0px;
    	color: #FFFFFF;
    }
    
    #gallery img.output {
    	float: left;
    	width: 512px;
    	height: 202px;
    	border: solid 4px #0A9444;
    	background: #0A9444;
    }
    
    #thumbnails {
    	float: right;
    	width: 360px;
    	height: 210px;
    }
    
    #gallery .caption-box {
    	height: 84px;
    	background: #0A9444;
    }
    
    #gallery span.caption {
    	display: block;
    	margin: 10px 0 0 0;
    	padding: 10px 0px 0px 0px;
    	text-align: center;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-weight: bold;
    	font-size: 30px;
    	text-transform: lowercase;
    	font-weight: normal;
    	letter-spacing: -1px;
    }
    
    #gallery span.caption2 {
    	margin: 5px 0 0 0;
    	display: block;
    	text-align: center;
    }
    
    #gallery ul.nav {
    	width: 100%;
    	list-style: none;
    	margin: 0 0 3em 0;
    	padding: 0;
    }
    
    #gallery ul.nav li {
    	margin: 0 0 1em 0;
    	float: left;
    }
    
    #gallery ul.thumbnails {
    	margin: 0;
    	list-style: none;
    	float: left;
    }
    
    #gallery ul.thumbnails li{
    	width: 102px;
    	height: 92px;
    	margin: 0 0 0 10px;
    	padding: 0;
    	float: left;
    	overflow: hidden;
    	position: relative;
    	border: solid 4px #0A9444;
    	text-align: center;
    }
    
    #gallery ul.thumbnails li img {
    	position: absolute;
    	top: -100px;
    	left: -145px;
    	border: solid 4px #0A9444;
    	cursor: pointer;
    }
    
    #gallery ul.thumbnails li img.active {
    	border: solid 4px #FF4747;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #menu ul li {
    display:block;
    float:right;
    position:relative;
    z-index:10;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2003
    Posts
    46
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Excellent, thanks! Also, how do I make the padding smaller on the expanded menu items?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    <div id="menu">
    <ul id="menu">
    You need to fix the error in your markup first. See http://validator.w3.org/check?verbos....com%2Fnew1%2F
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Jul 2009
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts
    hey i have a similar problem . Plz see my post and help me a well.
    http://codingforums.com/showthread.php?t=196859


  •  

    Posting Permissions

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