dcsimg
www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to display links an one level in the <header>?

  1. #1
    Join Date
    Oct 2016
    Location
    Moscow
    Posts
    54

    How to display links an one level in the <header>?

    I would like to display my <nav-links-right> at one level with <nav-links-left>. But I don't understand how to do it.
    Here is my code.

    HTML Code:
    header {
        width: 1500px;
        background: #417690;
        margin-left: 10px;
        margin-right:  10px;
        margin: 0 auto;
        font-size: 20px;
        height: 70px;
    
        display: flex;
        flex-direction: row;
        align-items: center;
        /* justify-content: center; */
    }
    
    .nav-links-left ul li {
        display: inline-block;
        padding-right: 15px;
        margin-left: 10px;
    }
    .nav-links-right ul li {
        <!--something-->
    }
    HTML Code:
    <body>
        <header>
            <div class="nav-links-left">
                <ul>
                    <li><a href="#">Logo</a></li>
                    <li><a href="#">New article</a></li>
                </ul>
            <div class="nav-links-right">
                <ul>
                    <li><a href="#">username</a></li>
                </ul>
            </div>
            </div>
        </header>
    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,916

    Lightbulb

    Is is absolutely necessary to use the display:flex in the code?

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> HTML5 page </title>
    
    <style>
     header {
        width: 100%;      /* original = 1500px; */
        background: #417690;
        margin-left: 0 10px;
        font-size: 1.25em;
        height: 70px; 
     }
     .nav-links-left  {
        padding: 5px;
        margin: 10px;
        float: left;
     }
     .nav-links-right {
        padding: 5px;
        margin: 10px;
        float: right;
     }
     a { display: inline-block; width: 100px; }
     a:hover { color: white; }
    /* .clr { clear: both; } */
    </style>
    
    </head>
    <body>
     <header>
      <div class="nav-links-left">
       <a href="#">Logo</a>
       <a href="#">New article</a>
      </div>
      <div class="nav-links-right"> <a href="#">username</a> </div>
     </header>
    
    <!-- br class="clr" -->
     <p>Additional display</p>
    
    </body>
    </html>

  3. #3
    Join Date
    Dec 2012
    Posts
    1,556
    Is is absolutely necessary to use the display:flex in the code?
    I recommended it in another thread as it allows for straight forward and self adjusting vertical alignment.
    Code with flex layout:
    Code:
        <style>
            header {
                width: 100%;
                background: #417690;
                margin-left: 10px;
                margin-right:  10px;
                font-size: 20px;
                height: 70px;
            }
            header ul {
                height: 100%;
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                align-items: center;
                /* justify-content: center; */
            }
            header ul li {
                display: inline-block;
                padding-right: 15px;
                margin-left: 10px;
            }
        </style>
        <header>
            <ul>
                <li><a href="#">Logo</a></li>
                <li><a href="#">New article</a></li>
                <li class="filler"></li>
                <li><a href="#">username</a></li>
            </ul>
        </header>

  4. #4
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,916

    Lightbulb

    Quote Originally Posted by Sempervivum View Post
    I recommended it in another thread as it allows for straight forward and self adjusting vertical alignment.
    Code with flex layout:
    ...
    Sorry 'Sempervivum', I did not see your other recommendation.

    I was addressing the problem of the 'username' to be positioned to the right side of the header.
    I do not see that effect in your code, but perhaps I am using it wrong (???)



    Aha!. I did not notice your .filler class as it was not in the CSS portion.
    I assume it is supposed to be similar to this (?)
    Code:
     .filler { width: 600px; }
    Last edited by JMRKER; 10-13-2017 at 11:24 AM. Reason: Enlightened

  5. #5
    Join Date
    Dec 2012
    Posts
    1,556
    Sorry, this got lost while testing different versions of my code:
    Code:
            .filler {
                flex-grow: 1;
            }
    This makes the filler expand it's width so that it fills the remaining space completely. Thus the first items are located at the left and the third one at the right.

  6. #6
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,916
    Thanks for the information.

  7. #7
    Join Date
    Dec 2012
    Posts
    1,556
    PS: I didn't like the filler and indeed, one can do without:
    https://stackoverflow.com/questions/...56609#33856609
    Code:
        <style>
            header {
                width: 100%;
                background: #417690;
                margin-left: 10px;
                margin-right:  10px;
                font-size: 20px;
                height: 70px;
            }
            header ul {
                height: 100%;
                width: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            header ul li {
                display: inline-block;
                padding-right: 15px;
                margin-left: 10px;
            }
            header ul li:last-child {
                margin-left: auto;
            }
        </style>
        <header>
            <ul>
                <li><a href="#">Logo</a></li>
                <li><a href="#">New article</a></li>
                <li><a href="#">username</a></li>
            </ul>
        </header>

  8. #8
    Join Date
    Sep 2017
    Posts
    4
    This is great, That's a great website, it really is what I was looking for, thank you for sharing!
    **Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.**
    Last edited by Train; 11-21-2017 at 08:56 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center