Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
This may be a very stupid question, but I've been looking around on the web for a while and whilst I'm using proper syntax, my elements are not being selected in CSS.
I've made a standard sidebar and have it to the right of my screen with flexbox. I'm not looking for anything fancy, but my CSS broke when I renamed it to a class instead of selecting the aside selector, because I intend to use more aside elements and do not want same style on both of them.
Does anyone know how to fix?
.sidebar {
flex: 1;
background-color: white;
align-self: stretch;
border-left: 0.2em solid purple;
}
.sidebar h1 {
margin: 1em;
border-bottom: 0.2em solid purple;
}
.sidebar ul {
display: flex;
flex-direction: column;
list-style: none;
}
<aside class="sidebar">
<h1>This is the sidebar.</h1>
<p>Check out our awesome links!</p>
<ul>
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
</aside>
The .sidebar itself works but .sidebar h1 and .sidebar ul does not.
I have fixed it. I had overwritten my styles in a different part of my css file. Thanks everyone for the suggestions.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am to create a navigation menu using an unordered list in html. I am now trying to style the list to appear on one line, and to have a background colour, but I cannot get the colour to work. I have tried the background: and background-color: to add a background colour to my unordered list, but it doesn't see to appear in my result.
/* styling nav list */
ul#navlist {
display: table;
width: 100%;
list-style: none;
}
#navlist li {
display: table-cell;
text-align: center;
}
li.nav {
background-color: hsla(232°, 38%, 15%, 0.2);
}
<header>
<div class="navlist">
<!-- Unordered list = navigation menu -->
<ul id="navlist">
<li class="nav">Home</li>
<li class="nav">About</li>
<li class="nav">Gallery</li>
<li class="nav">Reviews</li>
<li class="nav">Fun Facts</li>
<li class="nav">News</li>
<li class="nav">Merchandise</li>
</ul>
</div>
</header>
As a last resort, I tried to apply a background colour to each list item which didn't work.
Any ideas on how to fix would be appreciated.
The hsla function's first paramater should not have the degrees symbol (°) on it.
It should just be background-color: hsla(232, 38%, 15%, 0.2);
You can find examples here: https://www.w3schools.com/csSref/func_hsla.asp
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I'm quite new to html/css/js so apologise in advance if this is a newbie question.
Every time I see a navigation bar people tend to use ul/li. However I think you can achieve the exact same result just by using and formatting the 'a' tags thus reducing the html code, like the example below:
html:
<body>
<header>
<nav class="top-nav">
About me
Education
Work
Interests & Hobbies
Contact
</nav>
</header>
</body>
css:
body {
margin: 0px;
padding: 0px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
/* Header section.*/
header {
text-align: center;
color: white;
}
/* Navigation */
.top-nav {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
background-color: black;
padding: 20px 0;
width: 100%;
}
.top-nav a {
text-decoration: underline;
color: white;
}
.top-nav a:hover {
font-style: italic;
}
Is there anything wrong with doing this in terms of semantics, etc? If so, why and what are the advantages of using the ul/li tags?
Here's the fiddle for this.
Thank you!
I understand that your question is about semantics.
There is no explicit precision about the form of the content of the navigation element <nav> (whether it use <li> <ol> or just <a>).
If you have a peek at the nav element you can see how it relates to the accessibility navigation role.
Likewise, you can look at the ul element and how it related to the accessibility list role.
So the semantic difference would be that a series of <a> is more related to plain text entries that link somewhere. When encapsulated in a <ul> it takes the meaning of a list of links. The latter is probably more explicit to define the concept of a navigation menu.
If you want to add a dropdown below every item the you will need to have ul tags to achieve that result. You just cannot simply add a dropdown menu by using anchor a tags thats why you will see most of the people using ul tags followed by li tags inside to make the dropdown menu. If you just want to show the items on your navbar and dont want to have a dropdown then this approach may be okay..:)
This question already has answers here:
Add a pipe separator after items in an unordered list unless that item is the last on a line
(11 answers)
Closed 3 years ago.
I have a CSS/HTML homework assignment to make a page look like the page my instructor gave me. I need to add "pipes" in between the links. I added pipe characters to my HTML, but I don't feel like that is the proper way to do it. Thanks! Here is a screenshot of what it needs to look like:
https://i.imgur.com/sC7OLut.png
Pipe characters work, but you could do the same thing with some CSS.
If your markup is like this:
<nav>
About
Portfolio
Contact
</nav>
You can add some CSS to style the "right side" of each link element to have a border, except for the last element because you don't want a floating divider line on the end of the links.
nav > a {
border-right: solid 1px #eff0f1;
}
nav > a:last-of-type {
border-right: none;
}
This will add a border to the right side of all your nav links, but then overrides the final nav link to not have a right border.
You're looking to add a border-right to your nav items. This can all be done with CSS and no text, like with the pipe "|". Just need to ensure that the last nav item does not have the border-right. See the example below, cheers.
ul {
list-style-type: none;
display: flex;
}
li {
border-right: 1px solid lightgray;
padding: 1rem;
}
/* This is the important piece */
li:last-of-type {
border-right: none;
}
<nav>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</nav>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
body {
font-family: verdana;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden; /*1.Why after deleting this line the menu diappear？*/
background-color: #666;
}
ul li {
float: left; /*2.Why after deleting the menu become a column shape？*/
}
ul li a {
display: inline-block; /*3.Why after deleting the menu become smaller？*/
color: white;
padding: 14px 16px;
text-decoration: none;
text-align: center;
}
ul li a:hover {
background-color: #111;
}
<!DOCTYPE html>
<html>
<body>
<h2>Menu Demo 2:</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Contact</li>
</ul>
</body>
</html>
I am a newbie in CSS. This is just a very simple menu demo, but I thought for 3 hours and still didn't understand it. I have put my 3 questions in the code, that is:-
[1] Why did I delete that line 'overflow: hidden;' in 'ul' tag and then the menu just disappear?
[2] Why after deleting the line 'float: left;' in 'li' tage then the whole menu become a column shape？I think below that line I set 'a' tag as 'display:- inline-block'...... And what is the use for 'float: left' here?
[3] Why did I change 'display: inline-block' to 'display: inline', and then the whole menu become smaller and padding-top & padding-bottom for every 'a' tag doesn't work?
The overflow: hidden contains the floated lis inside the ul by creating a blocking context, there is a in-depth explanation here:
Adding CSS border changes positioning in HTML5 webpage
The float: left pulls everything over to the left hand side, and in your case in a line, without a float: left or right the default is none which means elements will just stack which is why you're getting a column style layout.
The inline-block, or a block in other uses, makes the element incorporate the padding, in the example you provided, into its height. For example, if you had text 10px high and 20px padding on the top and bottom, the element would be 10px as the padding would get ignored, with adding a display type of block or inline-block this takes it into account and renders at a height of 50px.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I understand, lots of people have asked this question on how to center a navigation bar but when I apply this CSS, it centers it but it aligns the nav bar a bit to the right:
nav {
text-align: center;
}
nav li {
display: inline-block;
}
Could this be due to some list items having different lengths or do you think this is a different problem?
Your <ul> most likely has a padding-left, as this is the default. Just check for it in the developer tools.
nav {
background: #999;
text-align: center;
}
nav li {
background: #ccc;
display: inline-block;
}
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</nav>
Just apply padding-left:0; on the appropriate <ul> to fix this.