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

satanshu · December 11, 2016, 2:01pm

<Below this line, add a link to the EXACT exercise that you are stuck at.>
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

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
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:

Learn to Code

<meta name="viewport" content="width=device-width, initial-scale=1">

<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;
}

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

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

<do not remove the three backticks above>

satanshu · December 11, 2016, 2:03pm

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.

stetim94 · December 11, 2016, 2:06pm

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

mtf · December 11, 2016, 2:07pm

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

satanshu · December 11, 2016, 2:12pm

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

mtf · December 11, 2016, 2:15pm

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.

satanshu · December 11, 2016, 2:20pm

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

stetim94 · December 11, 2016, 2:24pm

you could check documentation:

mtf · December 11, 2016, 2:52pm

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.

mtf · December 11, 2016, 3:03pm

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.

mtf · December 11, 2016, 10:07pm

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

satanshu · December 12, 2016, 3:51am

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

system · December 19, 2016, 3:51am

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

Topic		Replies	Views
Personal project. Dogecoin (HTML/CSS) . Need help with centering navigation items Personal Projects	2	402	June 25, 2022
Stuck on my first website Careers, Journeys, and Stories	3	1423	May 22, 2017
Html and css nav bar Community	5	2624	July 12, 2017
Need help centering items Web Development html-css	4	51	October 19, 2024
A little bit of help Off Topic	3	980	July 19, 2016

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

Related topics