SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    suckerfish problem :(

    howdy!

    got a bit of a problem with a suckerfish menu that ive got the code from stu nichols site. however im not that experienced with them (i think this is my third problem on the third menu ive made! lol) so im getting a little confused as to what style does what.

    basically i have this site

    http://defactodesigns.co.uk/beyond/

    that needs to look like this

    http://defactodesigns.co.uk/beyond/layout.gif

    its getting there, but needs a little tweaking - can anyone point me in the right direction please?

    thanks in advance

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,543
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't like those menus for Stu as they make this much more complicated than it should be and are basically using invalid code that's just hidden from the validator.

    Here's a quick tweak but personally I would start again with one of the suckerfish menus instead.
    Code:
    .menu {
        font-size:14px;
        position:relative;
        z-index:100;
        background-color: #00b1c2;
        font-weight: bold;
        height:2em;
    }
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
        padding:0;
        margin:0;
        list-style-type:none;
      height:2em;
    }
    .menu ul ul {width:149px;}
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .menu li {
        float:left;
        width:149px;
        position:relative;
        background: url(http://defactodesigns.co.uk/beyond/images/arrow.gif) no-repeat 0 35%;
        text-align:left;
        margin-left:30px;
        display:inline;
        line-height:2em;
    }
    /* style the links for the top level */
    .menu a, .menu a:visited {
        display:block;
        text-decoration:none!important;
        padding:0 0 0 20px;
        color: #FFFFFF;
    }
    .menu a:hover {
        color: #fff200;
    }
    /* a hack so that IE5.5 faulty box model is corrected */
    * html .menu li{line-height:1.5em}
    * html .menu a, * html .menu a:visited {
        height:1%;
        padding:5px 0 0px 20px;
    }
    
    /* style the second level background */
    .menu ul ul a.drop, .menu ul ul a.drop:visited {
        color: #fff200;
    }
    /* style the second level hover */
    .menu ul ul a.drop:hover {
        color: #fff200;
    }
    .menu ul ul :hover > a.drop {
        color: #fff200;
    }
    
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {
        visibility:hidden;
        position:absolute;
        height:auto;
        top:100%;
        left:0; 
        width:149px;
        padding:0;
        background: #46c3d1;
    }
    .menu ul ul li{
        line-height:1em;
        margin:0;
        padding:0;
    }
    .menu ul ul li a,.menu ul ul li a:visited{
        color:#666;
        font-weight:normal;
        font-size:85%;
        padding:7px 10px;
        margin:0;
        background-color: #46c3d1;
        line-height:1em;
        text-decoration:none;
    }
    
    /* style the top level hover */
    .menu a:hover, .menu ul ul a:hover{
        color: #fff200;
        background-color:#84d2dc;
    }
    .menu :hover > a, .menu ul ul :hover > a {
        color: #fff200;
        background-color:#84d2dc;
    }
    
    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul,
    .menu ul a:hover ul{visibility:visible; }

  3. #3
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi paul!

    can you point me in a direction of a tutorial that uses valid code to achieve the same results?

    if im going to learn i might as well take the time to learn properly

    ps thanks for the fix though - it works perfectly

  4. #4

  5. #5
    SitePoint Addict
    Join Date
    Dec 2004
    Location
    england
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!

    ive added it into my favourites

    cheers guys

  6. #6
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Agree with Paul using em heights.
    But I really do like Stu Nichol's solution for a no-script dropdown menu. And I think ~5% has script turned off.
    Therefore spended a little time to tweak the menu widths to achive what i think the picture is aiming at.
    Code CSS:
    /* CSS Document */
    * {margin:0;padding:0}
    body {
    	text-align:center;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	color: #58585a;
    	line-height: 20px;
    }
    .img {
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    }
    /* centre for ie5.+ */
    #outer{
    	position:relative;/* stacking context for further positioned elements*/
    	text-align:center;
    	z-index:2;
    	width: 780px;
    	margin-top: 2em;
    	margin-right: auto;
    	margin-bottom: 0;
    	margin-left: auto;
    	color: #333333;
    	border: 2px solid #bbbdc0;
    }
    h1 {
    	color: #903F98;
    	font-size: 16px;
    	margin-top: 20px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    a:link, a:active, a:visited {
    	color: #58585a;
    	text-decoration: none;
    }
    a:hover {
    	color: #913E98;
    	text-decoration: underline;
    }
    a.smaller:link, a.smaller:active, a.smaller:visited {
    	color: #58585a;
    	text-decoration: none;
    	font-size: 10px;
    }
    a.smaller:hover {
    	color: #913E98;
    	text-decoration: underline;
    }
    a.smallerpink:link, a.smallerpink:active, a.smallerpink:visited {
    	color: #903F98;
    	text-decoration: none;
    	font-size: 10px;
    }
    a.smallerpink:hover {
    	color: #231F20;
    	text-decoration: underline;
    }
    #header {
    	background-repeat: no-repeat;
    	height: 155px;
    }
    #logo {
    	float: right;
    	background-image: url(images/logo.gif);
    	background-repeat: no-repeat;
    	height: 123px;
    	width: 189px;
    	margin-top: 17px;
    	margin-right: 37px;
    	margin-bottom: 0px;
    	margin-left: 0px;
    }
    .clearer{
        height:1px;
        overflow:hidden;
        margin-top:-1px;
        clear:both;
    }
    #captionhome {
    	background-image: url(images/safepairofhands.gif);
    	background-repeat: repeat;
    	height: 73px;
    	width: 255px;
    	float: left;
    	margin-top: 40px;
    	margin-left: 25px;
    }
    .menu {
    	height:32px;
    	font-size:14px;
    	position:relative;
    	z-index:100;
    	background-color: #00b1c2;
    	font-weight: bold;
    }
    /* hack to correct IE5.5 faulty box model */
    * html .menu {}
    /* remove all the bullets, borders and padding from the default list styling */
    .menu ul {
    	padding:0;
    	margin:0;
    	list-style-type:none;
    }
    /*.menu ul ul {width:149px;} commented out, is already set later /erik.j */
    /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
    .menu li {
    	float:left;
    	width:256px;/* spred the li over the page width /erik.j */
    	position:relative;
    	background: url(images/arrow.gif) no-repeat 0px 5px;/* centered the bg image */
    }
    /* style the links for the top level */
    .menu a, .menu a:visited {
    	display:block;
    	text-decoration:none;
    	width:245px;/* = li width - margin-left /erik.j */
    	height:27px;/* = menu height - padding-top /erik.j */
    	margin-left:11px;/* maked room for bg image /erik.j */
    	/*padding-left:10px; commented out, doesn't make bg visible /erik.j */
    	color: #FFFFFF;
    	padding-top: 5px;
    	text-align: center;/* centered text for IE /erik.j */
    }
    .menu a:hover {
    	color: #fff200;
    }
     
    /* style the second level background */
    .menu ul ul a.drop, .menu ul ul a.drop:visited {
    	color: #fff200;
    }
    /* style the second level hover */
    .menu ul ul a.drop:hover {
    	color: #fff200;
    }
    .menu ul ul :hover > a.drop {
    	color: #fff200;
    }
     
    /* hide the sub levels and give them a positon absolute so that they take up no room */
    .menu ul ul {
    	visibility:hidden;
    	position:absolute;
    	height:auto;/* changed from 0 /erik.j */
    	top: 32px;/* changed to same as menu div /erik.j */
    	left:0;
    	width:245px;
    }
    .menu ul ul li {
    	background-image: none;
    }
    /* another hack for IE5.5 
    * html .menu ul ul {top:30px;t\op:31px;} commented out /erik.j */
     
    /* style the second level links */
    .menu ul ul a, .menu ul ul a:visited {
    	height:auto;
    	padding:5px 0; /* removed horizontal padding /erik.j */
    	width:245px;/* = li width - margin-left /erik.j */
    	background-color: #46c3d1;
    }
    /* a hack so that IE5.5 faulty box model is corrected */
    * html .menu a, * html .menu a:visited {height:32px;he\ight:27px;}/* only vertical padding, moved down in code  /erik.j */
    /* yet another hack for IE5.5
    * html .menu ul ul a, * html .menu ul ul a:visited {
    	width:150px;w\idth:128px;
    } commented out, no horizontal padding /erik.j */
     
    /* style the top level hover */
    .menu a:hover, .menu ul ul a:hover{
    	color: #fff200;
    	background:#84d2dc;
    }
    .menu :hover > a, .menu ul ul :hover > a {
    	color: #fff200;
    	background:#84d2dc;
    }
     
    /* make the second level visible when hover on first level list OR link */
    .menu ul li:hover ul,
    .menu ul a:hover ul{visibility:visible; }
     
     
    #footer {
    	color: #FFFFFF;
    	background-color: #903f98;
    	height: 56px;
    	padding-top: 20px;
    	font-size: 14px;
    	margin-top: 30px;
    }
    #right {
    	width: 468px;
    	float: right;
    	text-align: left;
    	padding-right: 37px;
    }
    #left {
    	width: 260px;
    	float: left;
    }
    #homeballs {
    	background-image: url(images/balls.gif);
    	background-repeat: no-repeat;
    	height: 217px;
    	width: 250px;
    }
    #terms {
    	color: #903F98;
    	padding-top: 20px;
    	padding-bottom: 20px;
    }
    .purple {
    	color: #903F98;
    	font-weight: bold;
    }
    .green {
    	color: #00B1C2;
    	font-weight: bold;
    }

  7. #7
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    Agree with Paul using em heights.
    But I really do like Stu Nichol's solution for a no-script dropdown menu. And I think ~5% has script turned off.
    Therefore spended a little time to tweak the menu widths to achive what i think the picture is aiming at.
    The SuckerFish method only uses JavaScript to make IE6 play nice though which at some point will become obsolete.

    Stu's method as already mentioned is more complex and is essentially invalid as it hides invalid code from the validator.

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    csswiz - Thanks for reminding me, I'm not concentrating or focused at all. I had a little time doing nothing else.


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
  •