TUTORIAL: CSS Menu (Basic)

Discussion in 'Web Design' started by PixelPusher, Apr 1, 2010.

to remove all ads.
  1. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    For all those who have asked about how to create a menu with a list (and not a table), here is a basic menu created with an unordered list and CSS.

    Markup
    HTML:
    <ul class="menu">
       <li><a href="">home</a</li>
       <li><a href="">products</a</li>
       <li><a href="">press</a</li>
       <li><a href="">support</a</li>
       <li><a href="">contact</a</li>
    </ul>
    
    CSS
    Code:
    body {
    margin-top:100px; /* JUST USED TO MOVE LIST DOWN PAGE */
    }
    ul, li, a {
    margin:0;
    padding:0;
    }
    ul.menu {
    overflow:hidden;
    }
    ul.menu li {
    list-style:none;
    float:left;
    border-top:solid 1px #bbb;
    border-bottom:solid 1px #bbb;
    border-right:solid 1px #bbb;
    }
    ul.menu li:first-child {
    border-left:solid 1px #bbb;
    }
    ul.menu li a {
    font:bold 11pt Tahoma, san-serif;
    display:block;
    height:40px;
    line-height:42px;
    color:#555;
    text-align:center;
    text-decoration:none;
    text-transform:capitalize;
    padding:0 30px;
    background-color:#ddd;
    }
    ul.menu li a:hover {
    color:#fff;
    background-color:#666;
    }
    
     
    Last edited: Apr 2, 2010
  2. Ennesus

    Ennesus New Member

    Messages:
    70
    nice article, but one remark about the pseudo class :first,
    if you are developing for ie6 it doesn't work.

    so why don't you give the <ul> a border-left property ?

    -------------------------------------------------------------------------------
    if you don't make websites compatible with ie6 don't bother this post ;)
    -------------------------------------------------------------------------------

    Yes you are correct, psuedo classes like "first:child" will not be recognized by IE6. This can be solved by simply making a class to substitute.
     
    Last edited by a moderator: Apr 30, 2010
  3. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    Ennesus,

    Isn't designing for IE6 a somewhat superfluous task? When I worked in technical support, I would always have to ask the caller what web browser they were using (nobody every knew unless they were using a Mac; one person actually said they were using "Dell"). It was extremely rare that they would say IE6.

    In my opinion, why cater to people who are SO far behind in technology? Saying that "if you don't make websites compatible with ie6 don't bother this post" is like saying don't use Flash because some people don't have it. The odds are, those people using IE6 are not valued visitors.

    -Lou
     
  4. Ennesus

    Ennesus New Member

    Messages:
    70
    it depends of the visitor you expect on your website,
    a lot of companies has IE6 because they run their intranet on this old outdated browser,
    and some customers want full cross-browser compatibility websites (including ie6)..

    Updating a company structure for todays standard cost companies a lot of money,
    that's why some people are forced to use this browser

    so get your facts straight
     
  5. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    I'm going to kindly dismiss your rebuke. You say "it depends on the visitor you expect on your website." My point was, don't cater to them; force them to move on. People and companies who disregard the enginery of modern software are actively hindering the technological enterprise. If a client ever demanded cross-browser compatibility (though only about 10% actually know what it is) and wanted their site to work with IE6, then I would not take the job. Simple as that. As a web designer and technical support specialist I have a moral obligation to push technology further, along with the users on the other side of that digital divide. I bet, with a large enough sample size, we can show that there is a correlation between companies with outdated software and companies that are failing.

    -Lou
     
  6. Ennesus

    Ennesus New Member

    Messages:
    70
    I totally agree with your opinion, I give the visitors a warning so they be aware of their outdated browser, and I give them a link to upgrade on my site,

    but I also had some customers who want ie6 support, and believe me as a webddesigner/webdeveloper I hate to engineer for ie6.
     
  7. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    You make a great point, it is crucial to keep technology pushing forward, that being said, old habits die hard, especially those by large corps that don't want to take the time to change things if they work already. Being that only about 10% of people today use IE6 (taken from W3C), I simply make sure the majority website [I am developing] renders correctly.
     
  8. smoovo

    smoovo New Member

    Messages:
    377
    I hate IE6, but i hate when companies force customers to use something. That's the reason i hate Apple, and i hate their products. They force you to behave and use their lines.

    Anna is right, If someone wants to keep using something it doesn't makes him less or more than anyone else. We as a web developers should give solution for them too if we want this clients to use our services.

    And as PixelPusher post somewhere, IE bugs makes us more professional, we aware of our errors, and aware of small details. I hate it, but it still there.
     
  9. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    My quote was, "with a large enough sample size." Of course there is individual variance, and I wouldn't viciously call these exceptions "special." In order to perform statistical analysis, you need a large enough sample size.

    There are also exceptions to the point that I've made, such as when supporting IE 6 is absolutely necessary. My question to you is, if we keep catering to this type of client, when it isn't completely necessary, then what will carry these companies out of their IE 6 era? Are they to remain that way forever (or until 2014 technically, which IS forever in technology time)?

    Perhaps we should create a standard where we bill for more hours for supporting IE 6. That would be interesting for them to see on an invoice. If all designers/developers did this, then we could always say, it's common practice to charge more for IE6 compatibility.

    Oh, and I am an apple fan as well (but not the snooty-designer type). Many of Apple's attempts to constrict, for example, Flash on the iPhone, are comparable to the way I constrict my services to developing for IE 6. I'm promoting further technological expansion that emphasizes modern criteria.

    -Lou
     
    Last edited: Nov 8, 2010
  10. Webinspire

    Webinspire New Member

    Messages:
    1
    Hear hear

    As much as I agree with your thought process and would love to take that stand that you take, I think it's a bit extreme. I guess as developers, we also have the responsibility of educating our clients, so they can come to appreciate why we work in such a manner. At the end of the day, clients are where our bread comes from - can we afford to push them away?
    The client is always right, but its our job they are well informed whilst they are taking our consult. At the end of the day, if they have a genuine reason as to why they need to have a website that is compatible with older browsers... its a system spec. Just do it and get it over with.

    -brad
    http://webinspire.com.au
     
  11. LouTheDesigner

    LouTheDesigner New Member

    Messages:
    506
    Kindly said brad, and welcome to the forum,

    I'm sympathetic with your critique that my stance is a bit extreme, but as Bertrand Russell once said "All movements go too far." The question of whether or not we can push them away, and thus deny money, is a question that I'm glad you brought to the table.

    My position is this: Yes, it does (rarely) cost me a customer b/c I don't develop for IE 6. BUT, I feel that I have a moral obligation to do so.

    For example, I'm a vegan -- not for health issues (I'm also a drunk and I smoke) but because I have a great deal of sympathy toward animals. Being a vegan is extremely tough, especially b/c I know that I'm depleting my body of certain nutrients. I'm using this as an analogy. Depleting my body of nutrients is an impact I'm willing to take for the well-being of animals, just like losing a client here and there is a side effect of trying to promote technology in this way -- something that I also consider a moral obligation.

    By now I feel as if I can write a book entitled "The Ethics of IE6." Perhaps that will be my dissertation when I get my doctorate in philosophy.

    Be a web designer, but amid all your business, be still a man (paraphrasing David Hume :))

    -Lou
     
  12. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    ie6 is a choice each developer has to make. I gave up on it 12months ago.
    the time freed up from making ie6 work I can now use to make my pages shine even more.

    I havent had a marked loss of clients, in fact I've picked up a higher class of clientele.

    just for the record the anchors on the first post are not closed. surprised no one has picked up on that yet.

    </a</li>
    should be
    </a></li>
     
  13. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Ha, can't believe no one caught that. Thanks!
    Its the darn html/code wysiwyg in the forum, everything has to be written manually and there is no indent in code option, damn it :p
     
  14. ChurroV

    ChurroV New Member

    Messages:
    17
    I was using this template, and noticed that I couldn't center my menu by any normal means -- putting it in a div with margin:0 auto didn't work unless I defined the width of the div in the first place -- a width that could change at any moment, and that I'd thus have to keep redefining.

    I did some experimenting and found a similar way to make a menu by just using <a> links -- no list -- that can be easily centered (but which for now lacks the capacity to have all the items in the menu have the same width).
     
  15. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Yes the auto property for margin will only work when a width is defined.
     
  16. jamesmorrison92

    jamesmorrison92 New Member

    Messages:
    2
    I agree with you, "it depends on the visitor you expect on your website, a lot of companies has IE6 because they run their intranet on this old outdated browser, and some customers want full cross-browser compatibility websites (including ie6)".
    It really costs a huge amount if you can convert your site as per the old versions of the browsers, especially with the IE. So, still web site owners and web designers have to work on the compatibility issues taken into account the IE browser as well.
     

Share This Page