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>
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 needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
A list item (<li>) should be able to host children (<div class="full-width">), that take in a certain parents width without interrupting the document flow.
The solution should not be affected by resizing the viewport.
It should not involve any JavaScript.
The red parts should overlap the yellow part without changing anything else:
.list { background: yellow; }
.full-width { background: red; }
.list ul { padding-left: 40px; }
<ul class="list">
<li>Lorem</li>
<li>Ipsum</li>
<li>This text
<div class="full-width">
full width (no yellow on the left side)<br>
and random height (in document flow)
</div>
continues here and does not start a new <li>.
</li>
<li>
Lorem
<ul>
<li>Ipsum</li>
<li>This text
<div class="full-width">
full width (no yellow on the left side)<br>
and random height (in document flow)
</div>
continues here and does not start a new <li>.
</li>
<li>Lorem</li>
</ul>
</li>
</ul>
What I have tried so far:
Applying a negative margin with JavaScript that is equal the left offset. This works, but I would like to achieve it without JavaScript.
Positioning the element absolute. The problem is that the element would be taken out of the document flow.
Closing the <li> tags and re-opening them after the div. This solution is almost perfect, but the content after the div ("continues here and does not start a new <li>") starts a new <li> tag.
Any suggestions will be appreciated.
A margin, equal to the reciprocal value of the offset of the current list item can be applied:
.list li .full-width { margin-left: -40px; }
.list li li .full-width { margin-left: -80px; }
.list { background: yellow; }
.full-width { background: red; }
.list ul { padding-left: 40px; }
.list li .full-width { margin-left: -40px; }
.list li li .full-width { margin-left: -80px; }
<ul class="list">
<li>Lorem</li>
<li>Ipsum</li>
<li>This text
<div class="full-width">
full width (no yellow on the left side)<br>
and random height (in document flow)
</div>
continues here and does not start a new <li>.
</li>
<li>
Lorem
<ul>
<li>Ipsum</li>
<li>This text
<div class="full-width">
full width (no yellow on the left side)<br>
and random height (in document flow)
</div>
continues here and does not start a new <li>.
</li>
<li>Lorem</li>
</ul>
</li>
</ul>
I'm wondering what some good practices are for styling li elements like buttons. Any examples would be appreciated. I'm guessing a box shadow and a background color would go a long way, but that alone does not seem to be enough.
Edited the question to make it more useful.
Okay I think what your after is to make the whole link clickable rather than just the text. All you need to do is make your anchor a block element, then it will take the full width of the li:
.nav a {
display:block;
}
<ul class="nav">
<li>Home</li>
<li>About us</li>
</ul>
I assume you try to make menu and want bigger buttons than just link text.
You should set links inside list elements as you shown and then make links as buttons.
Very simple css example for horizontal menu would be something like this:
.nav li {
list-style-type: none;
padding 0px;
margin 0px;
float: left;
}
.nav li a {
text-decoration: none;
display: block;
padding: 0px 15px;
line-height: 25px;
}
For horizontal menu you should make width with padding and height with line-height. Unless you want every button to be same sized, then you just could use width.
More in-depth example would be this one http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
I think your issue may be that you have styled the <li> to look like the menu button, but the text is the only part that is clickable, is this correct?
What you need to do, is not style the <li> as the menu button but instead the <a> within it.
Here is a demo: https://jsfiddle.net/arrx7dL7/
As you can see the styles are applied to the links, rather than the li
HTML:
<ul class="menu">
<li><a class="menu-item" href="#">Item 1</a></li>
<li><a class="menu-item" href="#">Item 2</a></li>
<li><a class="menu-item" href="#">Item 3</a></li>
<li><a class="menu-item" href="#">Item 4</a></li>
</ul>
CSS:
.menu {
list-style:none;
}
.menu-item {
color:black;
text-decoration: none;
background: #eee;
border: 1px solid #ccc;
padding:20px 30px;
display:block;
}
I think this is what you mean, if so I hope it is helpful.
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.
This question already has answers here:
A space between inline-block list items [duplicate]
(8 answers)
Closed 7 years ago.
I'm trying to cover the top of my site with list items.
My list items are appearing like this:
And i don't know why this separation between them. They don't have any margin and padding.
Anyone knows why is this?
HTML:
<ul class="listras-lista">
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
<li class="listras-lista_item"></li>
</ul>
CSS:
.listras-lista {
list-style: none;
width: 100%;
}
.listras-lista_item {
display: inline-block;
background: #CC00CC;
width: 20%;
height: 5px;
padding: 0;
}
It's whitespace that causes the spaces. If you can, change the markup so that </li><li> are together
This is caused by display: inline-block;. Change it to float:left;.