SitePoint Sponsor

User Tag List

Page 11 of 11 FirstFirst ... 7891011
Results 251 to 268 of 268
  1. #251
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks! I must test this as soon I fund some good cross browsing css menu.

    Maybe i misunderstod that example, maybe "HOME" that have red color is the active one

  2. #252
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @Wall_e
    Mine and Stu's cross browser CSS menus are the only pure CSS cross browser menus available, the other menus rely on javascript for older browser support.

  3. #253
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have playing around now with that menu on thinkhtml as a beginning but can’t find where to change width for top/column and for drop-down. It seems that column have same width value as drop-down and vice versa.

    space between title is very bigg and want less space between them and have other value for width on dropdown.

    I can’t change value for title-columns and dropdowns with different value?

  4. #254
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    you can change the dropdown links width to be larger than the title width
    just make them larger in width, then remove the extra width with negative margins, so the width is the same but it looks much wider.

  5. #255
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean in css or in html? I try change every value for width in css but nothing happens with columns width or dropdown links with. Where exactly do I change? If you can set column width to 250px and dropdown link to say 350px would be nice. Just to make it easy to find it later and where i nead change.


    HTML Code:
    .nav a {
        width:9em; /*same as width*/
    }
    .nav ul li {
    /*force ie8 to float-drop*/
        max-width:9em; /*same as width*/
    }
    /*set the sublink left shift width here (same as width)*/
    .nav ul ul {
    /*move the sublinks to the side, so they dont overlap*/
        left:9em; /*same as width*/
    }
    .nav li.reversed ul { /*reverse the direction of sublinks for the last dropdown*/
        left:auto;
        right:9em; /*same as width*/
    }
    /*add the negative value of "width - 1px" here (because css can't do math)*/
    /*or (width - 0.063em) where 0.063em is 1px on 16px base size*/
    .nav a {
    /*makes the links very thin, so that the sublinks can hide inside the main link*/
    /*!IMPORTANT: if you want a width of 9em, then you will have to change the value below to 8.937em (because: 9 - 0.063 = 8.973)*/
        margin-right:-8.937em; /*make this width - 1px*//*or width - 0.063em (0.063 = 1px)*/
    }
    
    /*<customized width and positioning>*/
    /*ONE*/
    .nav .link.one {
        margin-right:20px;
    }
    .nav .link.one, 
    .nav .one a {
        width:11em;
    }
    .nav .one ul li {
        max-width:11em;
    }
    .nav .one ul ul {
        left:11em;
    }
    .nav .one a {
        margin-right:-10.937em; /*11 - 0.063 = 10.937em (0.063 = 1px)*/
    }
    /*TWO*/
    .nav .link.two {
        margin-right:20px;
    }
    .nav .link.two, 
    .nav .two a {
        width:3em;
    }
    .nav .two ul li {
        max-width:3em;
    }
    .nav .two ul ul {
        left:3em;
    }
    .nav .two a {
        margin-right:-2.937em; /*3 - 0.063 = 2.937em (0.063 = 1px)*/
    }
    /*THREE*/
    .nav .link.three {
        margin-right:2px;
    }
    .nav .link.three, 
    .nav .three a {
        width:9em;
    }
    .nav .three ul li {
        max-width:9em;
    }
    .nav li.reversed.three ul { /*this is because its reversed*/
        right:9em; /*same as width*/
    }
    .nav .three a {
        margin-right:-8.937em;
    }
    /*</customized width and positioning>*/
    
    
    
    
    /*HEIGHT*/
    .nav {
        height:1.563em; /*you could remove this and clear the float differently, but to me this makes the most sense*/
    }
    .nav a {
        padding:.2em 0; /*apply padding to links, to vertically center them, be careful with horizontal padding in IE5, correct width must be maintained*/
    }
    .nav a.main {
        height:1.563em; /*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
        line-height:1.563em; /*not really necessary, but in this specific case it vertically centers the main link text*/
        overflow:hidden; /*making it more bulletproof*/
        padding:0; /*remove the padding that was applied above*/
    }
    .nav ul {
        padding-top:1.563em; /*persistent background trick*/
        margin-top:-1.563em; /*persistent background trick*/
    }
    .nav ul ul {
        position:relative; /*so that it can be moved top/left*/
        top:-1.563em; /*this is the sole reason why the main links must have a fixed height*/
    }
    
    
    /*Dropper Dropdown*/
    /*supports up to 4 sub-levels in IE5-7, more can be added*/
    /*modern browsers already support any amount of sublevels*/
    /*made by Timo Huovinen*/
    
    .nav li {
        float:left; /*fixes several IE related bugs, and allows for clearing*/
    }
    .nav ul {
        float:left; /*necessary for float drop*/
    }
    .nav ul li {
        clear:left; /*must clear the floated list item inside sublist*/
    }
    .nav a {
        position:relative; /*needs to have a position, to be above the rest*/
        display:block;
    }
    .nav a.main {
        float:left; /*necessary for float drop*/
        margin-top:10000px; /*bring the links back into view*/
    }
    .nav .link,
    .nav .sub {
        margin-top:-10000px; /*hide the links and their containers, opera has low upper limits*/
    }
    .nav ul {
        margin-bottom:-5000px; /*avoid any interaction between the sub's, can be any large size*/
    }
    /*the main trick, removes the negative right-margin and causes float drop*/
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        margin-right:0;
    }
    
    /*OPERA fix*/
    .nav ul:hover {
        clear:left; /*fix for opera sublinks flickering on :hover*/
    }
    /*background no longer needed*/
    .nav ul ul {
        background:transparent;
    }
    
    
    /*IE5-6 + 7 bug fixes*/
    .nav .sub {
        width:100%;
    }
    /*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.
    it seems that this indexes the links together as one? does not happen for everyone, but im leaving it just in case.*/
    a, a:hover, a:active, a:focus {}
    </style>

  6. #256
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I will help out tomorrow, can't do it today as its much too late for me to work.

  7. #257
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problems.

    It is too late here also. Night time and I should go to bed and sleep

    One questions, are you sure this menu work with different browser? I tested first some original code that was linked to from thinkhtml "Float-Drop menu", just copy and pasted that code into html page but didnít work in IE8 with Windows 7. Everything just jumped around. That customization code from thinkhtml you linked to worked better on IE8.

  8. #258
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes this definately works in different browsers
    IE6/7/8
    FF2+
    Opera9+
    Safari 2+
    Chrome 2+

    Probably just about every browser (the above is just what I have)
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  9. #259
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @Wall e
    sorry that i couldn't help on friday, but was too busy that day.
    here is a sample of how the dropdown can be customized to your sizes:
    multilevel.subsized.html

  10. #260
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Timo, is that on Dave Morton's server?

  11. #261
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    Quote Originally Posted by Stomme poes View Post
    Timo, is that on Dave Morton's server?
    Yep

  12. #262
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    Width works now I think..but had some trouble with sublevel after some change. I tested change column width from 250px to 100px , and for dropdown from 350px to 150px (some value with -1px less).

    But, sublevel stop working after this only change. whatís wrong or went wrong?

  13. #263
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    change all the values of 350 to 150
    and all the values of 250 to 100
    and the (some values - 1px)

    use Ctrl+F to find the 350 and the 250 values, because some are also present lower down.

  14. #264
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are you think of this http://www.grc.com/menu2/invitro.htm
    Anyone have experience with this menu?

    YuriKolovsky, thank you, I will test again.

  15. #265
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Wall_e View Post
    What are you think of this http://www.grc.com/menu2/invitro.htm
    Anyone have experience with this menu?
    No first hand experience with it but at first glance I see it uses tables nested in comments for IE6.

    It is just a similar version of Stu's menu which they give credits to at the bottom of the page.

  16. #266
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got this work YuriKolovsky. Thanks for a great css menu. I only made some change with width but I hope it works with other browser than IE8 also anyway.

    @Rayzur, I tested that menu before I fund stu's and yuriKolovsky menu but it was too hard to customize I think. For me anyway.

    Otherwise it great menu and I really believe it is 100% cross browser menu after what I read on that site.

  17. #267
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    @wall e
    you can test your menu to see if it works in IE6-7 by using IE Tester

    so that you dont have to guess if it works or not.
    if you have problems with it your can PM me and ill help out.

  18. #268
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I mean usually on a website there are 4 areas

    the header
    the navigation
    the content
    the footer

    the footer is usually handled with a list
    the content is done with hn and p and list (and others)
    the navigation is a list
    and the header is done with..? what is it done with?
    what tag do i use for the logo text? for the login buttons? (another list??) for the extra notes in the head?

    or should i just move to html5...?


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
  •