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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - Image Dropdown Menu, Help wanted.

    Hello there, i have another problem (yes i have posted before! xD) Anyways, i just had the nicest tutorial about a picture menu. I got that under controll now and it looks pretty awesome and i was thinking like WOYOOO! lets have a dropdown under those pictures... im sure people had this problem before. as soon as i start adding some kids to my ul-li the image gets distorted (with picture i mean my picture menu) so My question is how do i add a dropdown to the folowing code/menu.

    The HTML:
    Code:
    <div id="menubalance">
    
    <ul id="awesome-menu">
    
        <li><a href="#" class="home">Home</a></li>
        <li><a href="#" class="media">Media</a></li>
        <li><a href="#" class="opptreden">Opptreden</a></li>
        <li><a href="#" class="informasjon">Informasjon</a></li>
        <li><a href="#" class="about">About</a></li>
    
    </div>
    The CSS:
    Code:
    /***************************NavMenu*********************************/
    
    * { margin: 0; padding: 0; } /* Reset stuff */
    
    #menubalance {
    	width: 686px;
    	height: 55px;
    	margin: 0px auto -1px auto;
    }
    
    ul#awesome-menu {
    	width: 684px;
    	height: 55px;
    	margin: 0px auto -1px 10px;
    }
    
    ul#awesome-menu li { display: inline; }
    	
    ul#awesome-menu li a {
    	display: block; float: left; height: 45px;
    	background-image: url(themenu.png); text-indent: -9999px;
    }
    
    	ul#awesome-menu li a.home {
    		width: 100px; background-position: 0 0;	
    	}
    	
    	ul#awesome-menu li a.media {
    		width: 108px; background-position: -96px 0;	
    	}
    	
    	ul#awesome-menu li a.opptreden {
    		width: 160px; background-position: -204px 0;	
    	}
    	
    	ul#awesome-menu li a.informasjon {
    		width: 180px; background-position: -370px 0;	
    	}
    	
    	ul#awesome-menu li a.about {
    		width: 117px; background-position: -550px 0;	
    	}
    	
    	
    	ul#awesome-menu li a.home:hover, ul#awesome-menu li a.home:focus {
    		background-position: 0 -48px;	
    	}
    	
    	ul#awesome-menu li a.media:hover, ul#awesome-menu li a.media:focus {
    		background-position: -96px -48px;	
    	}
    	
    	ul#awesome-menu li a.opptreden:hover, ul#awesome-menu li a.opptreden:focus {
    		background-position: -204px -48px;	
    	}
    	
    	ul#awesome-menu li a.informasjon:hover, ul#awesome-menu li a.informasjon:focus {
    		background-position: -370px -48px;	
    	}
    	
    	ul#awesome-menu li a.about:hover, ul#awesome-menu li a.about:focus {
    		background-position: -550px -48px;	
    	}
    	
    
    a { outline: none; }
    /***************************End NavMenu*********************************/
    Thank you for reading, i have searched this forum for the problem first but couldnt seem to find it. Hope you can help

    Me

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    add child lists next to <a> tag and write CSS accordingly/ Following is sample



    Code:
    <div id="menubalance">
    
    <ul id="awesome-menu">
    
        <li><a href="#" class="home">Home</a></li>
        <li><a href="#" class="media">Media</a><ul><li>....</li></ul></li>
        <li><a href="#" class="opptreden">Opptreden</a></li>
        <li><a href="#" class="informasjon">Informasjon</a></li>
        <li><a href="#" class="about">About</a></li>
    
    </div>

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you mean this, this is what im used to:

    Code:
    <div>
    <ul id="awesome-menu">
    
        <li><a href="#" class="home">Home</a>
             <ul>
                 <li><a href="#" class="introduction">Home</a></li>
             </ul>
        </li>      
    </ul>
    <div>
    But like i said if i do it like that, the img gets messed up again...

    pretty new to the game sorry xD

  • #4
    Regular Coder riptide's Avatar
    Join Date
    Jan 2007
    Posts
    143
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Try fiddling around with background-repeat:repeat-y. Is your image tiling?
    what type of distortion are you having?

  • #5
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    share the page image with problem and other image of how u want ur page ll look

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would like to thank you for all the help even in my previous posts i just made a dropdown without the image, this is how it turned out so far i havent made a website in over almost 10 years so go easy on me Thanks again

    www.crossfire.no


  •  

    Posting Permissions

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