Discussion of Coding

Blog coding and discussion of coding about JavaScript, PHP, CGI, general web building etc.

Saturday, July 16, 2016

Need help in adding space to a nav list in CCS3

Author:  |   |  No comments | 

Need help in adding space to a nav list in CCS3


I need to add a space in between some of the items in a nav list but not sure how. Some help would be appreciated.

Here is the HTML

I need to put a space between the 5th and 6th line and between the 15th and 16th. Not sure how to do it in the CCS.

Answer by Ali for Need help in adding space to a nav list in CCS3


Give 5th & 15th an ID ... Then write in CSS Codes :

In HTML:

  • Coaches
    •   
  • Active.com
    •

    do the same with 15 and 16

    Answer by user3385150 for Need help in adding space to a nav list in CCS3


    try to add padding/margin to those li tags

  • Coaches
    •   
  • Active.com
    •

    Answer by Luchiro for Need help in adding space to a nav list in CCS3


    In the

  • put a margin like so
  • . That will give you extra spacing above. You can change top to bottom/left/right and the pixels for customizing.

    Answer by hansgoed for Need help in adding space to a nav list in CCS3


    This can be achieved in CSS3 by using the nth-child

    nav ul li:nth-child(6), nav ul li:nth-child(16)  {      margin-top: 5px;  }

    Answer by Spencer Rohan for Need help in adding space to a nav list in CCS3


    EDIT: Add a class to those li elements you want space around. Do this like so:

        
  •

    • Then You could add padding or margins to the CSS file or between

    tags in the html document.

        .space { margin: 10px; }      .space { padding: 10px; }

    Answer by Haeresis for Need help in adding space to a nav list in CCS3


    There is a good reason why you want exactly add some space to this positions, so:

    To avoid to modify CSS file each time an entry is added

    Add some :nth-child is not a good solution. If tomorrow you add a new item, your space will not be in the correct place.

    To Avoid a semantic meaning confusion

    Add some

  •  
    • is not a good solution too because a
  • (list item) must contain same semantic thing (in
      (ordered list) or
        (unordered list) each item are the same purpose, else use
        insteed). If there is some ? empty ? item, this is not a list item anymore. For example, if you list link from a database, create empty item just for ? design ? is not good, because this force you to add some ? empty data ?.

        To allow Semantic and Design to fit

        You do first define ? why this item need more space ?, ? why this item is different ? ? For example: ? because this item is a very important item ? so tag item as important (or others).

        After that, just apply your specific CSS for .important item on your list for example.

         /**    * List all link to navigate into website.    * @component .main-navigation    */  .main-navigation {}    /**    * Set an item as important in a list of item.    * @pattern .important    * @partof  .main-navigation    * @example 
              *     
        • This is important
          •     *     
        • This is less important
          •     * 
            */  .main-navigation .important {      margin-bottom: 10px;  }

        Name the .important class as you want but not .space for example, because if tomorrow you want change the design not with space but with color differenciation, your class will not be correctly named. But an item important will always be important. If it's not the case anymore, just ? untag ? it by removing class.

        If tomorrow or later you want add some link between your existing link, no change in CSS will be needed.


        Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72

    • 0 comments:

    Post a Comment

    Popular Posts

    Powered by Blogger.