#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Location
    San Diego
    Posts
    97
    Rep Power
    15

    suckerfish dropdowns


    Can anyone help me tweak the dropdowns I have? I don't know what I'm doing, and I've taken it as far as I can with my beginner level skills. http://www.esdcar.org/web/test/templatem4.html

    I'd like to center the menu within the page (right now I'm approximating by padding it in about 100 px, but there's probably a better way), center the text within each box, not have the "resources" one wrap across two lines like it does, and have a color change for each item on hover. I tried on the first two, but it didn't quite work as you can see. I don't understand the suckerfish code. I kind of want it to look like http://www.esdcar.org/web/test/templatem2.html but with dropdowns.

    The html looks like:

    Code:
        <td colspan="3"  id="nav">
    <ul id="navm">
    	<li id="one"><a href="#">About</a>
    		<ul class="one">
    			<li><a href="#">Remoras</a></li>
    			<li><a href="#">Tilefishes</a></li>
    			<li><a href="#">Bluefishes</a></li>
    			<li><a href="#">Tigerfishes</a></li>
    		</ul>
    	</li>
    	<li id="two"><a href="#">Membership</a>
    		<ul class="two">
    			<li><a href="#">Climbing perches</a></li>
    			<li><a href="#">Labyrinthfishes</a></li>
    			<li><a href="#">Kissing gouramis</a></li>
    			<li><a href="#">Pike-heads</a></li>
    			<li><a href="#">Giant gouramis</a></li>
    		</ul>
    	</li>
    	<li id="three"><a href="#">REALTOR&reg; Resources</a>
    		<ul class="three">
    			<li><a href="#">Burrowing gobies</a></li>
    			<li><a href="#">Dartfishes</a></li>
    			<li><a href="#">Eellike gobies</a></li>
    			<li><a href="#">Gobies</a></li>
    			<li><a href="#">Loach gobies</a></li>
    			<li><a href="#">Odontobutidae</a></li>
    			<li><a href="#">Sandfishes</a></li>
    			<li><a href="#">Schindleriidae</a></li>
    			<li><a href="#">Sleepers</a></li>
    			<li><a href="#">Xenisthmidae</a></li>
    		</ul>
    	</li>
    	<li id="four"><a href="#">Buyers &amp; Sellers</a>
    			<ul class="four">
    			<li><a href="#">Burrowing gobies</a></li>
    			<li><a href="#">Dartfishes</a></li>
    			<li><a href="#">Eellike gobies</a></li>
    			<li><a href="#">Gobies</a></li>
    			<li><a href="#">Loach gobies</a></li>
    			<li><a href="#">Odontobutidae</a></li>
    			<li><a href="#">Sandfishes</a></li>
    			<li><a href="#">Schindleriidae</a></li>
    			<li><a href="#">Sleepers</a></li>
    			<li><a href="#">Xenisthmidae</a></li>
    		</ul>
    	</li>
    	<li id="five"><a href="#">Events</a>
    			<ul class="five">
    			<li><a href="#">Burrowing gobies</a></li>
    			<li><a href="#">Dartfishes</a></li>
    			<li><a href="#">Eellike gobies</a></li>
    			<li><a href="#">Gobies</a></li>
    			<li><a href="#">Loach gobies</a></li>
    			<li><a href="#">Odontobutidae</a></li>
    			<li><a href="#">Sandfishes</a></li>
    			<li><a href="#">Schindleriidae</a></li>
    			<li><a href="#">Sleepers</a></li>
    			<li><a href="#">Xenisthmidae</a></li>
    		</ul>
    	</li>
    </ul>
    
    </td>
    and the CSS like:

    #nav {
    background-color: #B6978A;
    background:url(images/dark_green_bar.jpg) repeat;
    font: bold 12px verdana;
    }

    #navm {
    padding: 0 0 0 100px;
    margin: 0;
    list-style: none;
    line-height: 1;
    }

    #navm ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    }

    #navm a {
    display: block;
    width: 10em;
    }

    #navm li#one { /* all list items */
    float: left;
    width: 10em; /* width needed or else Opera goes nuts */
    background-color: #646641;
    }

    #navm li#two { /* all list items */
    float: left;
    width: 10em; /* width needed or else Opera goes nuts */
    background-color: #8c5c47;
    }

    #navm li#three { /* all list items */
    float: left;
    width: 10em; /* width needed or else Opera goes nuts */
    background-color: #6A4118;
    }

    #navm li#four { /* all list items */
    float: left;
    width: 10em; /* width needed or else Opera goes nuts */
    background-color: #886F2C;
    }

    #navm li#five { /* all list items */
    float: left;
    width: 10em; /* width needed or else Opera goes nuts */
    background-color: #A65B1B;
    }

    #navm li#one:hover, #navm li#one.sfhover {
    background: #484d25;
    }

    #navm li#two:hover, #navm li#two.sfhover {
    background: #B6978A;
    }

    #navm li ul.one:hover, #navm li ul.one.sfhover {
    background: #484d25;
    }

    #navm li ul.two:hover, #navm li ul.two.sfhover {
    background: #B6978A;
    }

    #navm li ul.one { /* second-level lists */
    position: absolute;
    background: #646641;
    width: 10em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }


    #navm li ul.two { /* second-level lists */
    position: absolute;
    background: #8c5c47;
    width: 10em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    #navm li ul.three { /* second-level lists */
    position: absolute;
    background: #6A4118;
    width: 10em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    #navm li ul.four { /* second-level lists */
    position: absolute;
    background: #886F2C;
    width: 10em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    #navm li ul.five { /* second-level lists */
    position: absolute;
    background: #A65B1B;
    width: 10em;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }

    #navm li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    }
  2. #2
  3. Power User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Location
    Canada
    Posts
    180
    Rep Power
    15
    Basically, what you'll want to do is add text-align:center; to #nav
    Code:
    #nav {
    	background-color: #B6978A;
    	background:url(images/dark_green_bar.jpg) repeat;
    	font: bold 12px verdana;
            text-align:center;
    }
    You could also add text-align center #navm a and it would center all links, or you could go and add centering to each list one by one and it would center the lists for you.

    But just use the code provided above, it's easier. I don't yet see any problems with using it so it should be safe.

    Now, about getting realtor resources to stop wrapping. This entails removing the parent width and then adjusting each lists width individually. Mch like what your code is attempting.

    Then for getting the menu centered, I didn't do anything fancy. Just used the left margin to push the menu to the right. You used padding, I used margin.. nothing fancy.

    Instead of writing down everything I'm going to paste the revised css.
    Just copy and paste into your stylesheet to see the differences. But before you do, make a backup of your current style sheet. I don't wanna break anything.

    On a safer note, I only played with the menu, and made it do what you wanted. So I doubt anything will break. But always backup.
    Code:
    body {
    	background-color: #8C5C47;
    	margin: 0;
    	padding: 0;
    }
    
    #bannerm {
    	background-color: #B6978A;
    	padding-left: 10px;
    	padding-top: 4px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #EDD3A7;
    }
    #bannermr {
    	background-color: #B6978A;
    	padding: 2px 7px 0 0;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #EDD3A7;
    }
    #bannerm a {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #EDD3A7;
    	text-decoration: none;
    		}
    #bannermr a {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #EDD3A7;
    	text-decoration: none;
    		}
    #bottomm {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	background-color: #B6978A;
    	color: #EDD3A7;
    			}
    #bottomm a {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #EDD3A7;
    	text-decoration: none;
    	padding: 0 0 0 0;
    }
    #contentm {
    	background:url(images/watermark.gif) bottom center no-repeat;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #484D25;
    	background-color: #edd3a7;
    	padding-top: 5px;
    }
    
    #contentm img {
    	vertical-align: top;
    	}
    
    /*#headergraphic {
    	vertical-align: top;
    }
    */
    .pageheader {
    margin-top: 0;
    vertical-align: top;
    	}
    
    #lefttopm {
    	background:url(images/rightshadm_tile.gif) top right repeat-y;
    	background-color: #BDA093;
    	margin: 0;
    	padding: 0;
    }
    
    #lefttopm ul {
    	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    	list-style-type: none;
    	padding: 0 0 0 3px;
    	margin: 0;
    	}
    	
    .indent {
    	padding: 0 0 0 8px;
    	margin: 0;
    }
    
    a {
    color: #edd3a7;
    text-decoration: none;
    }
    
    #lefttopm a:hover 
    {
    	color: #8C5C47;
    	text-decoration: none;
    }
    
    #leftbotm {
    	background-color: #edd3a7;
    	padding: 0;
    	margin: 0;
    }
    
    /***************************/
    #nav {
    	background-color: #B6978A;
    	background:url(images/dark_green_bar.jpg) repeat;
    	font: bold 12px verdana;
    text-align:center;
    }
    
    #navm {
    	padding: 0;
    	margin-left: 8.5em;
    	list-style: none;
    	line-height: 1;
    		}
    
    #navm ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	line-height: 1;
    
    		}
    /************************/
    #navm a {
    	display: block;
    
    }
    
    #navm li#one { /* all list items */
    	float: left;
    	width: 6em; /* width needed or else Opera goes nuts */
    	background-color: #646641;
    	}
    
    #navm li#two { /* all list items */
    	float: left;
    	width: 10em; /* width needed or else Opera goes nuts */
    	background-color: #8c5c47;
    	}
    
    #navm li#three { 
    	float: left;
    	width: 15em; 
    	background-color: #6A4118;
    	}
    
    #navm li#four { /* all list items */
    	float: left;
    	width: 11em; /* width needed or else Opera goes nuts */
    	background-color: #886F2C;
    	}
    
    #navm li#five { /* all list items */
    	float: left;
    	width: 7em; /* width needed or else Opera goes nuts */
    	background-color: #A65B1B;
    	}
    
    #navm li#one:hover, #navm li#one.sfhover {
    	background: #484d25;
    }
    
    #navm li#two:hover, #navm li#two.sfhover {
    	background: #B6978A;
    }
    
    #navm li ul.one:hover, #navm li ul.one.sfhover {
    	background: #484d25;
    }
    
    #navm li ul.two:hover, #navm li ul.two.sfhover {
    	background: #B6978A;
    }
    
    #navm li ul.one { /* second-level lists */
    	position: absolute;
    	background: #646641;
    	width: 10em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    
    #navm li ul.two { /* second-level lists */
    	position: absolute;
    	background: #8c5c47;
    	width: 10em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    #navm li ul.three { /* second-level lists */
    	position: absolute;
    	background: #6A4118;
    	width: 15em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    #navm li ul.four { /* second-level lists */
    	position: absolute;
    	background: #886F2C;
    	width: 10em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    #navm li ul.five { /* second-level lists */
    	position: absolute;
    	background: #A65B1B;
    	width: 10em;
    	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    }
    
    #navm li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    	left: auto;
    }
    
    			
    /*#navm ul li {
    	float: left;
    	padding: 0 10px;
    	background: yellow;
    	font: 12px verdana;
    	font-weight: bold;
    	}
    	
    #navm ul li a {
    color: #edd3a7;
    padding: 0 5px;
    text-decoration: none;
    }
    
    #navm ul li a:hover {
    color: #edd3a7;
    text-decoration: none;
    padding: 0 5px;
    }
    #navm li#one {
    background: #646641;
    }
    #navm li#two {
    background: #8C5C47;
    }
    
    #navm li#three {
    background: #6A4118;
    }
    #navm li#four {
    background: #886F2C;
    }
    
    #navm li#five {
    background: #A65B1B;
    }#navbotbarm {
    	background-color: #edd3a7;
    }
    */
    
    #rightm {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	background-color: #edd3a7;
    	color: #484D25;
    	margin: 0;
    	padding: 0;
    }
    #toppink {
    width: 215px;
    background-color: #B6978A;
    margin: 0;
    padding: 0;
    }
    
    #toppink p {
    	margin: 0px;
    	padding: 0px;
    }
    
    #onTap {
    	background:url(images/soldpicall2.jpg) top left no-repeat; 
    	border:  1px dashed #484D25;
    	width:213px; 
    	height:290px;
    	margin: 0;
    	padding: 0 2px 0 0;
    }
    
    /*.taphdr {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #484D25;
    	padding: 7px 0 7px 25px;
    	margin: 0;
    }
    */
    
    .taphdr4 {
    	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #484D25;
    	padding: 0;
    	margin: 0;
    }
    #onTap ul{
    	list-style: none;
    	/*font: bold 12px Verdana, Arial, Helvetica, sans-serif;*/
    	color: #484D25;
    	padding: 0;
    	margin: 0;
    }
    #onTap ul li{
    	list-style: none;
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    	color: #484D25;
    	padding: 2px 0 8px 4px;
    	margin: 0;
    }
    
    #onTap a {
    text-decoration: none;
    }
    
    .sub {
    	border-bottom:  1px dashed #484D25;
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    		}
    
    #valid a {
    	text-decoration: none;
    	padding: 0 5px 0 0;
    }
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Location
    San Diego
    Posts
    97
    Rep Power
    15
    Oh, thank you! Yes, that worked. Now my question is, how do I get the background's height to be the same as the menu's? When the "REALTOR Resources" item wrapped to two lines, it expanded the green thing behind it. I thought once the menu went back to one line the background would follow suit, but it didn't. I tried putting in a line-height of 1 in the #nav properties

    #nav {
    background-color: #B6978A;
    background:url(images/dark_green_bar.jpg) repeat;
    font: bold 12px verdana;
    text-align:center;
    line-height: 1;
    }

    but that didn't fix it.

    Also, how can I make the submenu items change color when rolled over? I tried on "About" and "Membership," but I only got the background of the whole list to change, not each individual item.
  6. #4
  7. Power User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Location
    Canada
    Posts
    180
    Rep Power
    15
    to get the bg to the right size, add this to your #navm ID class.
    margin-top:0px;

    It should fix the lists margin by setting it to 0.

    I gotta go take a shower, no time to get the rest..sorry.

IMN logo majestic logo threadwatch logo seochat tools logo