CODEWITHSUNDEEP
htmlcsshtml-listsnav
Umz15
Umz15

Reputation: 61

list menu element place them side-by-side

I am trying to get my unordered list elements to be sitting side-by-side next to each other on a navigation menu bar.

Problems:

  1. I have set the display to be "inline" but that seems to not make any difference.
  2. The nav bar (.nav in css) is not taking up the 100% of the width space, I have attempted to fix this by giving the width 100% but yet there are gaps either side of the nav bar.
  3. Lastly, when the window is put into full screen the positioning of the nav bar (.nav) is changed due to the background image expanding, is there a way I can stop the background from expanding when window is made bigger so it won't have an impact on the positioning of the nav bar?

Following is my attempt, can anyone spot where I've gone wrong? Much appreciated.

HTML:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="nav">
        <h1 class="logo">LogoHere</h1>
            <ul class="nav-menu">
                <li>Action</li>
                <li>Who we are?</li>
                <li>Blog</li>
                <li>Services</li>
                <li>Get in touch</li>
            </ul>
    </div>
</body>
</html>

CSS:

.nav{
    background-color: #2EC0FE;
    opacity: 0.75;
    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
    box-shadow: 0px 0px 0px rgba(0,0,0,1), inset 0px 0px 0px rgba(0,0,0,1);
    background-image: -o-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -moz-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -webkit-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -ms-linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: linear-gradient(90deg , rgb(0,0,0) 0%, rgb(0,0,0) 100%);
    height: 100px;
    width: 100%;
    margin-top: 600px;
}

.logo{
    font-family: times, Times New Roman, times-roman, georgia, serif;
    font-size: 54px;
    line-height: 40px;
    letter-spacing: -5px;
    color: white;
    margin: 0 0 0 0;
    padding-top: 25px;
    padding-left: 25px;
    font-weight: 100;
}

.nav-menu 
{
  list-style-type: none;
  display: inline;
  text-align: center;
  font-size: 20px;
  color: white;
  padding: 0px;
  margin-top: 0px;
}

Image problem 3: This is when the window is not full screened and this is just the way I want my nav bar to be positioned enter image description here

Following is when it is full screened and you can see the background image has expanded and now the nav bar position is much higher then how I want it to be in the first image. enter image description here

Upvotes: 0

Views: 17065

Answers (1)

Harry
Harry

Reputation: 89750

First Item:

  1. Add display: inline; to .nav-menu li instead of .nav-menu.
  2. h1 (and so are other heading tags) is by default a block element. To display it in same line as the menu, add display: inline-block; to logo.

Second Item:

  1. The body by default has margins. Hence to make the nav bar take the entire space, you have to add body {margin: 0;} to the CSS.

Third Item:

  1. Add position: absolute; bottom: 0px; to the .nav class. This will put the bar at the bottom.

Working Demo covering all three above items.

Upvotes: 2

Related Questions