Formatting a horizontal navigation bar

[zme1]

Anyone know what I'm doing wrong to prevent my nav bar links from appearing next to each other. They're written as links in the document so I know that automatically makes them skip to the next line in display but the W3 Schools tutorial on Nav Bars said that adding

display: inline

to the li element would override that but it's not doing so. I'm sure it's something else in the CSS that's messing this up but I'm not sure what it is.

Here's the link to see the nav bar on the website: http://amman.obdurodon.org

The CSS in Github: https://github.com/aem98/dialect-variations/blob/master/css/index.css

And the Nav Bar document (menu.xhtml): https://github.com/aem98/dialect-variations/blob/master/inc/menu.xhtml

Thanks!

[zme1]

Hey. So my site (conlang) uses a horizontal nav bar. I think that you might just not be putting in enough information into your stylesheet. Here's the CSS I used to make it horizontal, which hopefully will help you out. For instance, telling the ul element to have no style causes your items to no longer be bulleted. If you haven't done this, there's a possibility that your stylesheet is basically getting confused, because bullet points are supposed to be vertically aligned with one another.

nav ul {list-style-type: none;
margin: 0;
padding: 0;
text-align: center;}
nav ul li {display: inline;}
nav ul li a {text-decoration: none;
padding: 5px;
color: black;
border: 4px black;}

[zme1]

The issue with your nav bar is that you are using an attribute called @about to identify the nav bar elements. In XML markup it is alright to make up your own attributes; however, in HTML/XHTML, you cannot make up attributes. The browser does not recognize your attribute and thus cannot apply CSS to the elements. Instead, you should us the @class attribute.

[zme1]

As Shawn notes, we can't make up attributes in HTML (there's one class of exceptions to that rule, but it isn't relevant here), and @class will do what you need here. But @class has another property that makes it unique among HTML attributes: the value of @class is a sequence of word tokens ("word token" = "word"), rather than a string. The difference is that if, for example, you set the value of the @title attribute (which can define a "tool tip") as "Blue ice cream", it has that single three-word string as its value. But if you define the value of a @class attribute as "Blue ice cream", your CSS stylesheet understands that as three mutually independent one-word values: the element belongs simultaneously to the classes "Blue", "ice", and "cream". And that means that if you have CSS rules for each of those classes, they'll all be applied simultaneously.

This is handy when you have to represent multiple properties. For example, you might want all of your nouns to be colored blue and all of your borrowings from French to be underlined. If you tag a noun borrowed from French with a @class attribute value "french noun" (or "noun french"; the order of the word tokens doesn't matter) and if you have CSS rules specifying separately what to do with "french" things and what to do with "noun" things, both sets of rules will be applied simultaneously.

[zme1]

When I look at the CSS on your site, I see display: inline on the a elements, but not on the li elements. If you move that CSS to the li element, you should get the results you want.