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.
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 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.
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 5 years ago.
Improve this question
Trying to select the 'contacts' li within CSS and add a right margin.
.navLinks #contacts {
margin-right: 20px;
}
<ul class="navLinks">
<li id="contacts">contacts</li>
<li id="about">about</li>
<li id="index">home</li>
</ul>
I have also tried to select it with .navlinks li #contacts and just #contacts. Neither seem to work; I'm not sure why.
Margin-right doesn't seems to be right. Because anyway, you cannot see that because this is in the left side. And nothing wrong in referring the contact id from the navlinks. Perhaps you want it to move a bit to right right. For that use margin-left
.navLinks #contacts {
margin-left: 20px;
}
<ul class="navLinks">
<li id="contacts">contacts</li>
<li id="about">about</li>
<li id="index">home</li>
</ul>
.navLinks #contacts {
margin-left: -20px;
}
<ul class="navLinks">
<li id="contacts">contacts</li>
<li id="about">about</li>
<li id="index">home</li>
</ul>
The li element is a block element with a full width of 100%; that means it stretched to the full width of the row. if you are to use margin on it, you need to either add width property to it, or you need to make the display property inline.
Try this; you will see the effect.
.navLinks #contacts{
margin-left: 200px;
margin-right: 200px;
color: red;
background: red;
width:200px;
}
<ul class="navLinks">
<li id="contacts">contacts</li>
<li id="about">about</li>
<li id="index">home</li>
</ul>
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
How can I make an image be aligned with 2 lines of text in a li elements?
I have posted a sketch to show more info about the problem.
Just use display:inline-block; and vertical-align:middle on theboth ul and the img tags.
img {
width:50px;
height:50px;
}
img, ul {
display:inline-block;
vertical-align:middle;
}
<img src="" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Try:
li:nth-child(2n){
display: inline;
}
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 8 years ago.
Improve this question
I would like to know what is the best possible way to align links with icon images with a vertical navigation.
So far my code looks like this:
<li><img src="./images/icon1.png">Link 1</li>
<li><img src="./images/icon2.png">Link 2</li>
<li><img src="./images/icon3.png">Link 3</li>
<li><img src="./images/icon4.png">Link 4</li>
Currently, obviously they are not aligned how I need them. The links need to be aligned to the middle of the icon images. What is the best way to do this? Using CSS if necessary.
For something that will require multiple images, I recommend using a sprite sheet which will contain all your images (one large .png file which also reduces the number of images loaded on the page). Assign each <a> a background image in your CSS.
HTML:
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
CSS:
li a.link1 {
background: url(/images/spritesheet.png) no-repeat 10px 25px; /* 10px is the value of the horizontal position of the image; 25px is the value of the vertical position */
width: 15px; /* the width of the image */
height: 15px; /* the height of the image */
padding: 0 8px; /* enough padding to account for the width of the image */
}
SpriteCow.com is a great resource for getting the exact position of the image on the sprite sheet.
One common approach is to make the icon a background image that sits in the padding for the link, but this means the link urls are hard-coded into your css:
markup:
<li>Link 1</li>
css
a {
padding-left: 20px; /* or really whatever size you need for your icon */
background: url(./images/icon1.png) no-repeat center;
}