CSS / HTML bugged menu

Question

I have a problem with my menu, I'm just a beginner and I'm learning.

The problem is: My menu goes in three lines. (I need only one, straight line.) I tried display:inline but it doesn't work.

MY CSS like this:

 body {
    height:auto;
    width:auto;
    background-image: url("img/bgr.png");
}

.header {
    text-align:center;
    margin:0px auto;
}

#header {
    height:300px;
    width:960px;
    background-image:url("img/top.png")
}
#menu ul {
    list-style: none;
}
#menu li a  {
    color:#fff; 
    text-decoration:none; 
    display:block; 
    background:url(img/manu.png); 
    padding:0 10px 0 10px;  
    height:54px; 
    width: 150px;

    line-height:54px;
}

#menu li a:hover {
    color:#fff; 
    text-decoration: none; 
    background:url(img/manu1.png);  
    height:54px; 
    width:150px;
    line-height:54px;
}

And my HTML like this:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Pagrindinis Puslapis</title>
</head>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="header" id="header">
    <tekstas><br><br><br><br><br><br>http://www.profilio.com</tekstas>
    </div>
<div class="header" id='menu'>
<ul>
   <li><a href='#'><span>Pagrindinis</span></a></li>
   <li><a href='#'><span>Kontaktai</span></a></li>
   <li><a href='#'><span>Paslaugos</span></a></li>
</ul>
</div>


    
</body>
</html>

Have no idea what's wrong....

Adding some extra text

Please try to describe your problem more clearly in your question itself. What exactly is bugged? What should it do and what does it do instead? — Praxis Ashelin
– Praxis Ashelin, Commented Nov 20, 2015 at 15:15
EDIT: The problem is: Menu goes in three lines( I need only one), and the imagebackground is spammed... I only need him to appear when I enter a new menu item <li></li> — Tomas
– Tomas, Commented Nov 20, 2015 at 15:17
As a small sidenote: Don't use   to add space. Use margin or padding instead. It's much cleaner. — Praxis Ashelin
– Praxis Ashelin, Commented Nov 20, 2015 at 16:08

Paulie_D · Accepted Answer · 2015-11-20 15:36:16Z

3

The links are set to display:block and so they wrap. They do not line up by default.

If you set the li to display:inline-block they will only be as wide as they need to be which is dtermined by the size of the links.

.header {
  text-align: center;
  margin: 0px auto;
  max-width: 960px;
  background: green;
}
#menu ul {
  list-style: none;
}
#menu li {
  display: inline-block;
}
#menu li a {
  color: #fff;
  text-decoration: none;
  display: block;
  background: blue;
  padding: 0 10px 0 10px;
  height: 54px;
  line-height: 54px;
  width:150px;
}
#menu li a:hover {
  color: #fff;
  text-decoration: none;
  background: red;
  height: 54px;
  line-height: 54px;
}

<header class="header" id="menu">
  <ul>
    <li><a href='#'><span>Pagrindinis</span></a>

    </li>
    <li><a href='#'><span>Kontaktai</span></a>

    </li>
    <li><a href='#'><span>Paslaugos</span></a>

    </li>
  </ul>
</header>

edited Nov 20, 2015 at 15:36

answered Nov 20, 2015 at 15:22

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tomas Over a year ago

I changed my question a bit, I realised, that I missed width in menu li a style

Tomas Over a year ago

s4.postimg.org/fswu35vwt/ketvirtas.png this is what I get after your Edit. And another problem appeared: space between header and menu

Praxis Ashelin Over a year ago

@Tomas Can you try to reproduce your issue in JSFiddle with minimal amount of code? (don't just copy&paste the entire site code in it) It will be much easier to debug your issue with the code instead of just screenshots.

Tomas Over a year ago

jsfiddle.net/cvk5a3nn well the code is small enough , don't know what to delete. Maybe there is a problem it other things.

Praxis Ashelin Over a year ago

@Tomas Here you go. You had the display: inline-block; on the #menu li a element instead of the #menu li element.

|

Collectives™ on Stack Overflow

CSS / HTML bugged menu

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related