CODEWITHSUNDEEP
csshtml
user3562189
user3562189

Reputation: 1

aligning 2 of 3 elements in a nav to the right and another to the left

I want to create a full width nav with the page logo on the left that is a link and links home. There is also a register/login and cart li element.

I would like to put a background color 100% on the screen also. They also need to be inline.

Using HTML5 tags how can you semantically do this. What is the heirarchy of elements?

How would you achieve this.

CSS

header{
    width: 100%;
    background-color: #000000;
    margin: 0 ;
    padding: 0;
}
header h1{
     margin: 0;
    padding: .5em 0;
    color: black;
    clear:both;
}
header li:nth-child(1){
    float: left;
}

header li:nth-child(n+2){
    text-align: right;
    display: inline;
}

header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <!-- the head section -->
    <head>
        <title>Willie's Fishing Supply</title>
        <link rel="stylesheet" type="text/css"
              href="<?php echo $app_path ?>main.css" />
    </head>

    <!-- the body section -->
    <body>
        <header>

                <ul id="leftUpperNav">
                    <li>
                        <a href="<?php echo $app_path; ?>">
                            <h1>Willie's Fishing Supply</h1>
                        </a>
                    </li></ul>
                    <?php
                    // Check if user is logged in and
                    // display appropriate account links
                    $account_url = $app_path . 'account';
                    $logout_url = $account_url . '?action=logout';
                    if (isset($_SESSION['user'])) :
                    ?>
            <ul id="rightUpperNav">
                    <li>
                        <a href="<?php echo $account_url; ?>">My Account</a>
                    </li>
                    <li>
                        <a href="<?php echo $logout_url; ?>">Logout</a>
                    </li>
                    <?php else: ?>
                    <li>
                        <a href="<?php echo $account_url; ?>">Login/Register</a>
                    </li>
                    <?php endif; ?>
                    <li>
                        <a href="<?php echo $app_path . 'cart'; ?>">Cart</a>
                    </li>
                </ul>
            <nav>


    <ul>




        <h2>Categories</h2>
        <!-- display links for all categories -->
        <?php
            require_once('model/database.php');
            require_once('model/category_db.php');

            $categories = get_categories();
            foreach($categories as $category) :
                $name = $category['categoryName'];
                $id = $category['categoryID'];
                $url = $app_path . 'catalog?category_id=' . $id;
        ?>
        <li>
            <a href="<?php echo $url; ?>">
               <?php echo $name; ?>
            </a>
        </li>
        <?php endforeach; ?>
        <h2>Temp Link</h2>
        <li>
            <!-- These links are for testing only.
                 Remove them from a production application. -->
            <a href="<?php echo $app_path; ?>admin">Admin</a>
        </li>

    </ul>
</nav>


        </header>
   <section id = "wrapper">

Upvotes: 0

Views: 60

Answers (2)

bhekman
bhekman

Reputation: 3277

I'm not sure that I entirely understand your question. From what I understood, you're trying to make a navbar for the top of a webpage, and you'd like it to have a linking logo and a few list elements.

Based on that assumption, I'd highly recommend checking out Bootstrap. Bootstrap is a front-end framework made by Twitter for making elegant, responsive web projects. Start by checking out the docs here. The docs include the example below, which is a navbar with just about anything you could ever reasonably want in a navbar. NOTE that you DO need to add the bootstrap script to your page if you want to use Bootstrap components. Check out their "Getting Started" page for more info.

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9053

You can just float some elements left and some right to achieve this.

HTML

<header class="global-header">
    <div class="inner-w">

        <a href="#" class="site-logo">
            <img src="http://placehold.it/100x100" alt="" />
        </a>

        <nav class="account-nav">
            <a href="#">login</a>
            <a href="#">whatever</a>
        </nav>

    </div>
</header>

CSS

.global-header {
    background: #f06;
    padding: 1em;
    overflow: hidden;
}

.global-header .inner-w {
    max-width: 700px; /* or 960 or whatever */
    margin-right: auto;
    margin-left: auto;
}

.global-header .site-logo {
    float: left;
}

.account-nav {
    float: right;
}

.account-nav a {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid red;
}

and here is a jsFiddle (which in the future is a good place for you to start - and to show other users what you've tried so far)

Upvotes: 1

Related Questions