SitePoint Sponsor

User Tag List

Page 10 of 11 FirstFirst ... 67891011 LastLast
Results 226 to 250 of 268
  1. #226
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerbarry View Post
    Good Luck!

    On another note: Is it possible to have the sub links wider than the main link on hover some how?

    Example:

    --------
    --------------
    --------------
    --------------

    And Merry Christmas all
    yes it is, for example increase the width of the sublinks (the <ul> that contains the sublinks) and then reduce it with a negative margin-right

    for example if you use the code above, then just add this to the bottom of the CSS:
    Code CSS:
    .nav ul a {
    	width:10em;
    }
    but then you have to shift the sub sub links more towards the left, so add this too:
    Code CSS:
    .nav ul ul {
        left:10em;
    }
    .nav li.reversed ul {
        right:10em;
    }
    this works for good browsers, but not IE6, which will expand the container on hover, so add this negative margin too, which removes the extra width, but maintains it visible.
    Code CSS:
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        margin-right:-1em;
    }
    above i added 1 extra em to the links
    so i had to move them to the left by 10em instead of 9em
    and increase the links width by 1em making it 10em
    and change the focus/active/hover state to take away that extra 1em.

    if you want to add more then that they you will have to adjust the values accordingly.

    obviously i recommend replacing the original values with these instead of adding redundant css, but its just easier to explain this way.

  2. #227
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been struggling to sort a dropdown navigation that works in ie6 and validates while using a Strict Doctype. So the <if ie 6> tables etc version wasn't suitable which I think originated from Stu Nicholls.

    I've been pointed in a couple of directions by Rayzur which lead to some info in this thread (thanks again Rayzur).

    I'm new so I cant add a link just yet but if you email me I can send over a live link with my test version I was messing with on monday night so you can take a look.
    Last edited by duncVegas; Dec 22, 2009 at 16:51. Reason: Changing content

  3. #228
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm new so I cant add a link just yet but if you email me I can send over a live link with my test version I was messing with on monday night so you can take a look.
    I don't mind (you can post links, just remove the http:// part or just add a couple of spaces somewhere in the URL...), as long as it works in everything (make sure to test in IE6 if you plan to support it).
    I'm still not sure what version of the dropdown your using (I really suggest to use the latest "Post #218" as its much better than the other ones, all it takes is to copy paste the code, change some widths, its worth it, really)

    now im off to sleep, so any questions i will only answer tomorrow.

  4. #229
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a spaced out link of the version I've been messing with - its based on Yuri's Post #169.

    Everyone could probably do it before but I just altered it for my needs so the main nav was fixed width and the sub links wider.

    http: // test-3.fbstudio3.php5.truth.posiweb.net/NewNav.html

    Although I'll be looking at the latest version and alts for wider sub links.

  5. #230
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Yuri

    Here is an alternative version I have done:

    http: // test-3.fbstudio3.php5.truth.posiweb.net/4thGenNav/4thGenNav.html

    Which is based on your recent version, but as per computerbarry's question about having the sub links wider that the main link. I've tried implementing the code you've posted but can not get it to work. Can you show me where I've been going wrong please.

    Also I'm after the sub nav to have a black border with the text left justified - a bit like the new nav version I posted a couple of hours ago.

    Probably not the best hour to be working on it but couldnt resist trying the new version.

    Cheers

    Dunc

  6. #231
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerbarry View Post
    On another note: Is it possible to have the sub links wider than the main link on hover some how?
    Could a negative right margin be used? (It might not, because I've forgotten how this technique works since I haven't used it yet.)

    Edit:

    Bah. I didn't notice that there was a next page which already had Timo's reply.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  7. #232
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    seems to be broken, the only thing that is keeping it working in IE8, FF, Opera is the Operafix.

    this is because you did not follow the instructions (i will need to rewrite them then so that people understand that they are instructions, in the latest one its easiest to change width without breaking anything)
    esentially you see this in your code?
    margin-right:-299px;
    this is the thing that kills your dropdown, its because its supposed to be width - 1px
    in your case the width is 81px so its supposed to be margin-right:-80px;
    this is where the magic happens and what people mainly fail to realize.

    also you can not add a fixed with to the .sub
    because it relies on the links to tell it if its being hovered, and this requires it to have a automatic width
    additonally nothing can be visible except the links, so adding styling to the .sub is pointless.

    as a side note, I worked on my dropdown since the last version and I found a way to remove all of the IE conditional comments, hurray!




    but anyway duncVegas, I have modded the latest one to look the way you want it to:
    Code CSS:
    /***reset default styling***/
    .nav,
    .nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
    .nav a {
    	text-decoration:none;
    }
    /*CUSTOMIZATION*/
    /*i have split the code to have the width/height/color separate from the rest of the code*/
    /*COLORS*/
    /*here are some default colors, funky colors used for distinctive visibility*/
    /*i hope that you can handle colors customization on your own :p*/
    .nav a {
    	color:#fff;
    	/*font:normal 11px Arial;*/
    	text-align: center;
    	background:red;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:11px;
    }
    .nav .link {
    	border-right:solid #fff 1px;
    }
    .nav a.main {
        background:#00559E;/*so that the top link persistent background works*/
    }
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        background:red;
    	color:#000;
    }
     
     
     
    /*HEIGHT*/
    .nav {
    	height:32px;/*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:32px;/*needs to be the same as the persistent background trick and so that the sublevels are properly aligned*/
    	line-height:32px;/*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:32px;/*persistent background trick*/
    	margin-top:-32px;/*persistent background trick*/
    }
    .nav ul ul {
    	position:relative;/*so that it can be moved top/left*/
        top:-32px;/*this is the sole reason why the main links must have a fixed height*/
    }
     
     
    /*WIDTH (!IMPORTANT)*/
    /*change each width value below, else the dropdown will stop working (:hover will still work in modern browsers because of the opera fix)*/
    /*set the link width here*/
    .nav .link,
    .nav a {
        width:81px;/*same as width*/
    }
    .nav ul li {
    /*force ie8 to float-drop*/
    	max-width:81px;/*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:81px;/*same as width*/
    }
    .nav li.reversed ul {/*reverse the direction of sublinks for the last dropdown*/
    	left:auto;
        right:81px;/*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*/
    	margin-right:-80px;/*make this 81px - 1px*//*or width - 0.063em*/
    }
     
     
    /*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;/*could be block, but i trust this more*/
    }
    .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,
    .nav ul ul:hover {
        clear:left;/*fix for opera sublinks flickering on :hover*/
    }
    /*background no longer needed*/
    .nav ul ul {
        background:transparent;
    }
     
     
     
    /*modifications*/
    .nav a {
    	outline:none;
    }
    .nav ul a {
    	text-align:left;
    	width:123px;/*135 - 5px - 5px -1px -1px*/
    	padding:0px 5px 9px 5px;/*this and the above dont work in IE5 because of the "broken box model"*/
    	border-left:solid #000 1px;
    	border-right:solid #000 1px;
    }
    .nav ul a.first {
    	padding-top:12px;
    	border-top:solid #000 1px;
    }
    .nav ul a.last {
    	border-bottom:solid #000 1px;
    }
    .nav ul ul {
        left:135px;
    }
    .nav li.reversed ul {
        right:135px;
    }
    .nav a:hover,
    .nav a:focus,
    .nav a:active{
        margin-right:-54px;/*135px - 81px = 54px*/
    }
     
     
     
    /*the code below is mainly for IE5-7, but it does no harm to normal browsers*/
    /*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.*/
    a, a:hover, a:active, a:focus {}
    .nav .sub {
        width:100&#37;;
    }
    and the HTML
    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TH - CSS Only Dropdown</title>
     
     
    <link href="NewNav.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <ul class="nav">
    <li class="link">
        <a class="main" href="#">Home</a>
    </li>
    <li class="link">
        <a class="main" href="#">Head Office</a>
        <ul>
    		<li><a class="first" href="#1">Head Office Overview</a></li>
    		<li><a href="#2">Departments</a></li>
    		<li><a href="#3">Relocation</a></li>
    		<li><a class="last" href="#4">Maps &amp; Directions</a></li>
        </ul>
    </li>
    <li class="link reversed">
        <a class="main" href="#">Trade Counter</a>
        <ul>
    		<li><a class="first" href="#1">Trade Counter Overview</a></li>
    		<li><a href="#2">Roles Overview</a></li>
    		<li><a href="#3">Training</a></li>
    		<li><a class="last" href="#4">Maps &amp; Directions</a></li>
        </ul>
    </li>
    <li class="link reversed">
        <a class="main" href="#">Contact Centre</a>
        <ul>
            <li><a class="first" href="#1">Contact Centre Overview</a></li>
            <li><a href="#2">Roles Overview</a></li>
            <li><a href="#3">Training</a></li>
            <li><a class="last" href="#5">Maps &amp; Directions</a></li>
        </ul>
    </li>
    <li class="link reversed">
        <a class="main" href="#">About Us</a>
    </li>
    <li class="link reversed">
        <a class="main" href="#">Graduates</a>
    </li>
    <li class="link reversed">
        <a class="main" href="#">Our Service</a>
    </li>
    <li class="link reversed">
        <a class="main" href="#">FAQ's</a>
    </li>
    <li class="link reversed">
        <a class="main" href="#">Job Search</a>
        <ul>
            <li><a class="first" href="#1">Search &amp; Apply</a></li>
            <li><a class="last" href="#2">My Account</a></li>
        </ul>
    </li>
    <li class="link reversed">
        <a class="main" href="#">Other</a>
    </li>
    </ul>
    </body>
    </html>

    p.s. i keep the latest versions updated on http://thinkhtml.blogspot.com

  8. #233
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Yuri

    I've just finished updating the version I did last night which allows fluid main nav and a wider sub nav (Just seen you've posted an update).

    http: // test-3.fbstudio3.php5.truth.posiweb.net/4thGenNav/4thGenNav.html

    Thanks for the explantion, I'll load yours up and go through it to get a better understanding.

    Cheers

    Dunc

  9. #234
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by drhawth33 View Post
    Hi Yuri

    I've just finished updating the version I did last night which allows fluid main nav and a wider sub nav (Just seen you've posted an update).

    http: // test-3.fbstudio3.php5.truth.posiweb.net/4thGenNav/4thGenNav.html

    Thanks for the explantion, I'll load yours up and go through it to get a better understanding.

    Cheers

    Dunc
    Yours is still broken :s
    neither does it support old browser, or does it support keyboard tabbing.
    if it does not do any of that, then whats the point of using it anyway?
    if you can just use some average ul:hover states to make it work.
    it does not support IE5-6 or Keyboard tabbing.

    I really recommend getting some understanding on how it works before doing any tweaking.
    This has a visual example to make it easier to understand how it works.

  10. #235
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Yuri

    I'll start over.

    With the recent version you've updated, can this have fluid main navigation widths? Or do they have to remain defined.

    Cheers

    Dunc

  11. #236
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    can this have fluid main navigation widths?
    No.

    edit:
    First you need to ask yourself some questions:
    1. Do you plan to support IE5 when JS is off?
    2. Do you plan to support IE6 when JS is off?
    3. Do you want non JavaScript keyboard accessibility?
    4. Do you want fluid width links?
    5. Do you want super easy Dropdown maintenance?
    6. Do you want Semantic HTML?
    If you only want 1 or 2, then use my dropdown or Stu's dropdown.
    If you want 3, then use my dropdown.
    If you want 4 but don't care for 3, then use Stu's version.
    If you want 6, and 1 and 2, then use my dropdown.
    If you want 5 and done care if IE5-6 work with javascript off or the keyboard works, then use any of the widely available dropdowns...
    and if you want 5 and 6 only, then make your own simple dropdown

  12. #237
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your time and input.

    That leaves me with the defined width version with smaller text or a .js version which has been put to one side so far due to the cost of validating.

  13. #238
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The original plan was to not use javascript as the host charges for validating and the Strict Doctype had to be used to fit in with their setup and for validation.

    The original design had fluid main navigation with fluid width sub navigation.

    As I've found out with my burgeoning knowledge of CSS and trying to follow the design as rigidly as possible, trying to attain this without using .js is not an easy task and certain elements have had to be sacrificed.

    After creating a .js version I moved onto stu's dropdown but couldnt get it through strict validation as it wouldnt recognise the <if ie> elements based around the </a> link.

    Thats why I've been drowning in an attempt to achieve the results I'm after.

    Out of my depth = For shizzle!

    Givin up = Not on my Nellie!

  14. #239
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    host charges for validating and the Strict Doctype had to be used to fit in with their setup and for validation.
    sounds extremely ridiculous.
    I also see no connection between javascript and validation.

  15. #240
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They say its so there is no chance it will affect their ATS system. Personally I think its money for old rope, 950 of them to be exact! - but these are the restrictions I've had to work to.

    Stu's would have worked if they would have took it as Transitional but thats not feasible.

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

    Stu's would have worked if they would have took it as Transitional but thats not feasible.
    You must be mistaken as the conditional comments that Stu uses are 100&#37; valid and will pass validation with a strict doctype.
    Code:
    <ul>
        <li><a href="#nogo">Item 3c</a></li>
        <li><a href="#nogo">Item 3d</a></li>
        <li><a href="#nogo">Item 3e</a></li>
        <li><a href="#nogo">Item 3f</a></li>
        <li><a href="#nogo">Item 3g &#187;
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
        </li>
    </ul>

  17. #242
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Personally I think its money for old rope, &#163;950 of them to be exact! - but these are the restrictions I've had to work to.
    Move somewhere else quick as that's daylight robbery. Unless you have massive requirements hosting a normal site could be hosted for a fraction of that.

  18. #243
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If that's the case I will revisit that version and work through it to see where I went wrong. Thanks for the update.

  19. #244
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can this menu on this site (that links to this thread) use sub level?

    http://www.cssplay.co.uk/menus/new-dropdown.html

  20. #245
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

  21. #246
    SitePoint Enthusiast stunic's Avatar
    Join Date
    Sep 2009
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are also a few on CSS play that can, including this one:
    http://www.cssplay.co.uk/menus/ul-multi-six.html
    and:
    http://www.cssplay.co.uk/menus/ul-multi-seven.html

  22. #247
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi

    Thanks for links to very nice menu, on cssplay and that menu on thinkhtml

    One question I have is if some of this menu highlighting active/current page? If so, even if page reloads?

    Also, about that menu on thinkhtml, is it possible to have other width for drop-down menu than it is for top-'column'?
    It looks like width for drop-down depends on width for column on top is?

  23. #248
    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)
    To get a current page just add a class to the <li> or <a> (for example, class="current") and then style that .current class with a special thing or whatever

    More examples posted here
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  24. #249
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aha, i see Sounds easy.

    on example on that pages, all 3 of them seems work when page reloads but if I click somewhere on page then highlighting turns off. Maybe that behave is coded to do this?

  25. #250
    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)
    THat's because the page I linked you too is just an example. THe whole site wasn't build for a current page (I think)

    If you use their example (any one of them) for all your pages then it will work when you click to different areas of the website
    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
  •