2

Im learning html & css and after few tutorials I decided to write webpage from nothing. But I've got a problem. When I add "display: inline" in CSS .nav, it ignores all .nav css properties, including "display: inline".

Here's code:

HTML

<!DOCTYPE html>
<html>

    <head>
        <link href="main.css" rel="stylesheet">
        <title>Neni okurka, nebudou caciky</title>
    </head>

    <body>

        <div class="nav">
            <ul>
                <li class="active"><a href="#">Navigation 1</a></li>
                <li><a href="#">Navigation 2</a></li>
                <li><a href="#">Navigation 3</a></li>
                <li><a href="#">Navigation 4</a></li>
                <li><a href="#">Navigation 5</a></li>
            </ul>
        </div>

        <div class="nav2">
            <ul>
                <li class="active"><a href="#">Navi 1</a></li>
                <li><a href="#">Navi 2</a></li>
                <li><a href="#">Navi 3</a></li>
                <li><a href="#">Navi 4</a></li>
                <li><a href="#">Navi 5</a></li>
            </ul>
        </div>

    </body>

</html>

CSS

body {
    background-image: url("background.png");
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border: 25px solid rgba(0, 0, 0, 0.3);
}

.nav {
    display: inline;
    width: 500px;
    background: #fff;
}
1
  • 1
    First, welcome to web development! It will be a wild ride because, CSS is a pain in the butt to learn at first, wait until you get to browser compatibility. -Sheesh- Anyways! Okay, first let's talk about what you are trying to do exactly? Because, right now you are literally doing nothing other than inlining your class nav. This won't help you if you are trying to line up your links.
    – ARLCode
    Jun 19, 2015 at 20:26

5 Answers 5

1

If you want background(image) you need to have it in the container as soon you give it width and height because body is the "Base" you can give it margin: 0; padding: 0; to reset it only and you can add background to it but not height and width. Inside containeryou have created you can play with the height and width as you like.

html,
body {
  margin: 0;
  padding: 0;
  background-color: cadetblue;
}
.container {
  width: 1050px;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  background-size: 100% 100%;
  background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center;
}
.nav {
  width: 1000px;
  height: 50px;
  margin: 0 auto;
  background: beige;
  border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.nav ul li {
  margin-left: 12px;
}
.nav ul li a {
  float: left;
  font-size: 16px;
  font-weight: lighter;
  text-decoration: none;
  font-family: sans-serif;
  margin: 10px 0px 10px 0px;
  padding: 8px 15px 8px 15px;
}
.nav ul li a:hover {
  color: #fff;
  border-radius: 3px;
  background: cadetblue;
}
<div class="container">
  <div class="wrapper">
    <div class="nav">
      <ul>
        <li class="active"><a href="#">Navigation 1</a>
        </li>
        <li><a href="#">Navigation 2</a>
        </li>
        <li><a href="#">Navigation 3</a>
        </li>
        <li><a href="#">Navigation 4</a>
        </li>
        <li><a href="#">Navigation 5</a>
        </li>
      </ul>
      <ul>
        <li class="active"><a href="#">Navi 1</a>
        </li>
        <li><a href="#">Navi 2</a>
        </li>
        <li><a href="#">Navi 3</a>
        </li>
        <li><a href="#">Navi 4</a>
        </li>
        <li><a href="#">Navi 5</a>
        </li>
      </ul>
    </div>
  </div>
</div>

this code without display:inline; or display :inline-block; which it works but it's another way to align nabbar in nice way compatible with all browsers too.

I hope you like it and it helps you, let me know if you have another question.

4
  • Thanks for tip. But the width doent affect the background image, only the page "blocks".. F.e. when I add a picture with 100% width now, it is max 1000px big ... But maybe I should use other way to get this results? o.O Jun 21, 2015 at 11:03
  • Your welcome. No, In my code you don't play with image directly, you play with (.container) {width: 1050px;} or the height and it will apply automatically to the image as well but is better if you will do so, you replace the image in another div inside (.wrapper) and you apply the code of (.container) to the new div you have created for the image. also if you would like you can vote up for the answer as well, Thanks. Jun 21, 2015 at 12:47
  • Ah I see.. Now I have something like "working place" in center... I would vote up, but it is allowed only with reputation 15+ .. and Im new here Jun 21, 2015 at 13:32
  • ok, no problem at all, once you have it you can vote up, I'm glad that my code was useful to you and let me know if you have any questions. Jun 21, 2015 at 15:08
1

The right usage is:

.nav li {
    display: inline;
}
0

You should put display: inline-block;

0

Man try to put .nav ul lit to refer to the li but I will not use that let me tell you now one sec

.nav ul li`display:inline`
-1

in orther to display betther ur nav thing u shuld not use .nav ul li display:inline i know i say that was for answer ur question but this thing i will tell you will be betther .nav ul lifloat:left this will do the items in the li will float left and will do the same as the inline but isbetther to use that rather than the inline

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.