Understanding how menus work in html5 and css3

Question

Good day! I am trying to learn how to create good looking menus in html 5 and css3. Due to my small experiance with these languages I soon found that I might be missing the logic behind the menus. The idea of this thread is to make sure I understand (or understand after this thread) the logic of the menus and how to style them.

It will be divided into two parts, the second part will focus on the coding itself, the first one will focus on the theory.

Okay so what I've read / figured out, the idea of every menu is to basically be a list with custom style. So far so good, however what I fail to grasp is, exactly how much of the formatting is done with styling the < li > elements, how much(and what) is done with styling the elements inside the < li >. Speaking of what's inside these elements, I see that a lot of people prefer to use < a > elements over buttons. Is it a standard or style preference ? Are there advantages on using the < a > element?

I think this covers the thery, now on to the actual code. I've made a small menu from scratch with what I can figure. Some parts of it aren't working, like for example the li:last-child and li:first-child parts of the css.

1) I am interested to know where the errors are. 2) I am interested to know how I can improve this code.

Here is the entire source code with some comments inside:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
<style>
    /* this should remove all padding, margins and outlines*/
  * {
    margin: 0;
    padding: 0;
    outline: none;  
}
     /*This will style the list itself*/   
       ul {
      list-style: none;  
        margin: 3% 40%;
    }
      li:first-child {
          border-top-left-radius: 10px; 
          border-bottom-left-radius: 10px;  
      }
    li:last-child {
        border-top-right-radius: 10px; 
        border-bottom-right-radius: 10px; 
    }
     li {
        float : left;       
        }
    /*This will style the buttons*/
    .buttonStyle {
        width : 60px;
        height : 20px;
        border-radius: 1px;
        }
    /*This should make them change their color when they are hovered*/
    .buttonStyle:hover { 
                            background: #383;                            
      /*this line :*/      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#EDEDED',GradientType=0);
                       } 

</style>
</head>
<body>

    <!-- custom made list to store the buttons-->
    <ul >
        <!-- Just some buttons to make it look like a menu-->
        <li><input type="button" class="buttonStyle" /></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
        <li><input type="button" class="buttonStyle"/></li>
    </ul>
</body>
</html>

Scipion · Accepted Answer · 2013-06-21 10:05:25Z

1

the difference between A and INPUT/BUTTON is that A do not make up paragraphs. if it don't contains only phrasing content. I think this is usually preferred.

https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories

Regarding :first-child and :last-child pseudoclasses, you may not be using properly.

maybe you're trying to do this:

li:first-child input {
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;  
}
li:last-child input{
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

http://jsfiddle.net/3uw6p/

answered Jun 21, 2013 at 10:05

Scipion

1,3801 gold badge10 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Understanding how menus work in html5 and css3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related