How to position an unordered list to the right of an Icon? How to center the the icon vertically in the Nav bar?


#1


This is a personal project and therefore cannot be found on the Code Academy website. That being said, I will provide as much evidence I can in the clearest format possible to allow people to understand and help me solve my problem


There are no error messages as this is my personal website. What I need help with is how to position an Unordered List (ul) that has been made to float horizontally, to the right side of an icon which should be aligned at the very left side of the Unordered list? And secondly, How can I center the icon in the center of the Navigation bar - Vertically?


HTML CODE:
<!DOCTYPE html>
<html>
<head>
    <title>Learn to Code</title>
    <meta charset="utf-8"/>
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}
</style>
    
</head>
<body>
    
    <ul>
        <i class="fa fa-home" style="font-size:24px;color:white;"></i> 
  <li><a href="My%20Website.html">Home</a></li>
  <li><a href="">Lessons List</a></li>
  <li><a href="">Contact</a></li>
  <li><a href="About%20Us.htm">About</a></li>
</ul>

</body>
</html>

CSS CODE:

html, body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  line-height: 1.5;
}
header {
  padding: 20px 0;
}

header .row,
footer .row {
  display: flex;
  align-items: center;
}
header nav {
  display: flex;
  justify-content: flex-end;
}

header p {
  padding: 0 20px;
  margin: 0;
}

body {
  font-family: 'Lato', sans-serif;
  background-image: url('https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-3/background.jpg');
  background-position: center top;
  background-size: cover;
  margin: 0;
}



}
/* FOOTER NAVIGATION */

The website works properly and both this lines of code have been placed inside a single folder.
Thanks for your time
Regards
Satanshu


#2

In fact, to make the second question more clear, if you scroll to the top of the page, you will see an Home icon. This is the precise Icon I wish to place on my nav bar - just like it has been on the nav bar above.


#3

well the italic element (which holds the background image) should simply have a list tag:

<li><i class="fa fa-home" style="font-size:24px;color:white;"></i></li>

elements inside <ul> should always have a li element as child


#4

That's not an image, but an italics element. Right about the first child of UL, though. It has to be an LI.


#5

Thx for the quick reply. The icon is now where it should be. Any ideas on how to center it on the Nav bar? An example of this is on the top of the page where the home icon is located. This is the icon i am using an this is the position i want it on the nav bar - only in my case alinged to the left of the page...not to the center of the right.
Regards
Satanshu


#6

The pseudo elements, :before, and :after are better suited to this purpose as they do not introduce additional structural elements.

To have two objects marry on the same row, and stay married, they need a common parent container. Float one left, and the other right, or float both left and fix the width of the parent. In an adaptive approach scaling and optional widths would be assumed in the media queries.

Floats as a rule don't like not having a set width. They are out of normal flow and not able to easily adapt without some help, fixed width being the most comfortable, but proportional is fine, too.

<li><i></i><p></p></li>

Consider the above. Let's say this is a responsive inline list with no horizontal scroll bar but elements that are able to shift and scale to fit.

In any scenario, we can give one of the two child elements a fixed width, which could also be adaptive to different screen widths by being smaller or larger, but still fixed. The other element would be auto.

I chose an I tag for simplicity, but it could be a span, or any other inline element with no natural width property, so not a P. This is for styling simplicity. P was chosen because it is a block element with auto width by default. We'll want to get rid of the margins, though.

For a class, let's give our list class="nav-icon"

ul.nav-icon {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav-icon li {
    display: inline-block;
    width: 16rem;
    line-height: 32px;
    background-color: #feb355;
    background-clip: padding-box;
    border: 2px solid #014caa;
    border-radius: 5px;
}
.nav-icon li i {
    display: block;
    width: 32px;
    height: 32px;
    float: left;
    background: url(skins/icon_sprite.png) no-repeat 0 0;
}
.nav-icon li p {
    margin: 0;
    width: auto;
    float: left;
    height: 100%;
    overflow: hide;
}

All theoretical at this point, mind. Still need to test it in a browser. New browsers give support for CSS variables that we can manipulate with JavaScript. That will certainly add to this immensely. The line-height and image size can be changed this way when adapting to different screen widths. How it will all play out is up to the designer. Media queries and/or JavaScript listeners. The game has changed from what it was in 1998, that's for sure.


#7

Could you specify the changes I would need to make to my line of code? I haven't come across this tag before and therefore don't know where and how to place it in my code to be successful at the task at hand.
Regards
Satanshu


#8

you could check documentation:


#9

It would be in your style sheet. I would contain it though, so not before or after an LI, but inside one.

<li><p></p></li>

li p:before {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 0.5em;
    background: url(image.png) no-repeat 0 0;
}

This will theoretically (untested) spot a 32 X 32 icon immediately before the contained P element. I'm not sure this will behave like a float though, and may affect the left margin of the P if it extends below the image. Can't say without testing.

Of course, pseudo-elements expect actual content, so we might need a span element to operate upon.


#10

Please repost your code. For simplicity, toss all your CSS into the STYLE element so there are no external files other than the CDN's. Then we can test it in a browser and go from there. Nothing like experimenting, though.


#11

I know you are hoping for a solution directly on your project, but owing that we don't yet have your current code I've gone ahead and explored the theoretical styles from the earlier example. All we need for this is an editor and a browser, along with the following image:

<!DOCTYPE html>
<html>
  <head>
    <title>A nav-icon menu</title>
    <style>

      .nav-wrap {
        text-align: center;
        width: auto;
        position: relative;
      }
      ul.nav-icon {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
      }

      .nav-icon li {
        display: inline-block;
        width: 7rem;
        line-height: 32px;
        background-color: #feb355;
        background-clip: padding-box;
        border: 2px solid #012caa;
        border-radius: 5px;
        cursor: pointer;
      }
      .nav-icon li i {
        display: block;
        width: 32px;
        height: 32px;
        float: left;
        background: url(css/skins/icon_sprite.png) no-repeat 0 0;
      }
      .nav-icon li p {
        margin: 0;
        width: 5rem;
        text-align: center;
        float: left;
        height: 100%;
        overflow: hide;
        background-color: rgba(255, 255, 255, 0.3);
      }

      .nav-icon li:hover {
        border-color: rgba(254, 179, 85, 1);
      }
      #icon1 i { background-position: 0 -32px; }
      #icon2 i { background-position: -32px -32px; }
      #icon3 i { background-position: -64px -32px; }
      #icon4 i { background-position: -96px -32px; }
      #icon5 i { background-position: -128px -32px; }
      #icon6 i { background-position: -160px -32px; }
      #icon1:hover i { background-position: 0 0; }
      #icon2:hover i { background-position: -32px 0; }
      #icon3:hover i { background-position: -64px 0; }
      #icon4:hover i { background-position: -96px 0; }
      #icon5:hover i { background-position: -128px 0; }
      #icon6:hover i { background-position: -160px 0; }

    </style>
  </head>
  <body>
    <div class="nav-wrap">
      <ul class="nav-icon">
        <li id="icon1"><i></i><p>One</p></li>
        <li id="icon2"><i></i><p>Two</p></li>
        <li id="icon3"><i></i><p>Three</p></li>
        <li id="icon4"><i></i><p>Four</p></li>
        <li id="icon5"><i></i><p>Five</p></li>
        <li id="icon6"><i></i><p>Six</p></li>
      </ul>
    </div>
  </body>
</html>

This is old school tactics from a dozen years ago that uses Dave Shea's Sprites technique. Notice we have only one image to download, but then position the image for each LI I element.

Here is a screen shot of what it should look like:

To stack this vertically means only two rule changes:

.nav-wrap {
    width: 9rem;
    margin: 0;
    left: 0;
    top: 0;
}

.nav-icon li {
    display: block;

Sandbox demo
revised sandbox demo


#12

Thanks for the help Roy,
I will get back to you today evening as i am at work currently.
Regards


#13

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.