SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dropdown Menu Using Images?

    I've followed a few tutorials trying to set up a dropdown menu. I've done it before using text, but I'm trying to do it this time with images. The test page is at www.mverminski.com/test/index2.htm

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    The page is returning a 404.

    Using images should be exactly the same as using text. What is your issue exactly...?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry. I was in a rush. This is the correct link to the test page http://mverminski.com/test/index2

    If you click on it you can see the issue right away. The nav buttons are all on top of each other. I haven't created the images for the drop down items yet so I'm just using the same image as the parent item. I've played with the CSS and still can't get it to work right.

    This is the HTML

    Code:
    <div id="navbar">
    <ul id="nav">
    
    <li><a href="composites.htm"><img src="images/BTN_Composites.jpg" alt="Composites"></a>
    <ul>
    <li><a href="composites.htm"><img src="images/BTN_Composites.jpg" alt="Composites"></a></li>
    <li><a href="composites.htm"><img src="images/BTN_Composites.jpg" alt="Composites"></a></li>
    </li>
    </ul>
    
    <li><a href="portraits.htm"><img src="images/BTN_Portraits.jpg" alt="Portraits"></a></li>
    
    <li><a href="conventions.htm"><img src="images/BTN_Conventions.jpg" alt="Conventions"></a></li>
    
    <li><a href="customers.htm"><img src="images/BTN_NewCustomers.jpg" alt="New Customers"></a></li>
    </ul>
    
    </div>
    and the CSS...
    Code:
    #navbar {
    	width: 900px;
    	margin-top: -34px;
    	margin-left: 149px;
    }
    
    #nav {
    	width: 100%;
    	padding: 0px;
    	height: 1em; }
    #nav li {
    	list-style: none;
    	padding: 10px;
    	 }
    #nav li a {
    	display: block;
    	margin-top:-34px;
    	padding: 0px;
     }
    #nav li ul {
    	display: none; 
    	width: 10em; /* Width to help Opera out */
    }
    #nav li:hover ul {
    	display: block;
    	position: absolute;
    	margin: 0;
    	padding: 0; }
    #nav li:hover li {
    	float: none; }

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well of course they are all on top of each other . You have each anchor set to -34px. Remove that. On #nav li{} you have 10px padding default. That's causing the vertical spacing between the menu items.

    As for the dropdown placement, add something like this

    Code:
    #nav li{position:relative;}
    #nav li li{position:static;}
    #nav li ul{top:0;left:100%;}
    Should help with the nav placement .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm still having an issue with this. I've been playing with the CSS, but can't get it to work right. It seems like every change I make doesn't result in an actually physical change when previewing the site.

    CSS..

    Code:
    #nav {
    	width: 100%;
    	padding: 0px;
    	height: 1em; }
    #nav li {
    	position: relative;
    	list-style: none;
    	padding: 0px;
    	 }
    	
    #nav li a {
    	display: block;
    	padding: 0px;
     }
    #nav li ul {
    	display: none; 
    	background: #db7872;
    	width: 10em; /* Width to help Opera out */
    	top: 0;
    	left: 100%;
    }
    
    #nav li li{position:static;}
    
    
    #nav li:hover ul {
    	display: block;
    	position: absolute;
    	margin: 0;
    	padding: 0; }
    #nav li:hover li {
    	float: none; }

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Could you explain the issue? And what you would like to be achieved? (Feel free to use images)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •