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
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 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
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.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
My site is at kenastonchiropractic.com
In Chrome, the "Home" link stays the color of the other links and they all turn white upon hover. In Firefox, however, the "Home" link is blue and stays blue even after it is clicked on (but it does turn white on hover). IE appears to behave rightly, as in Chrome.
I have tried many things and had no results. Maybe somebody can see my error.
Thank you!
To avoid such problems, you're always better off setting colors directly on links similar to this:
a{
display:block;
text-decoration:none;
color: #ffffff;
}
And, you should also keep your browser versions updated in case you haven't.
Add this:
#nav ul li:hover a {
color: rgb(255, 255, 255);
}
The default browser pre-set overrided your CSS rule because it is more specific.
The other links aren't affected because you wrapped them with <span style="color:#fff">, which overrides their default colors.
PS: On Chrome it shows a blue color just like all other browsers.
Your "Home" link is the only one that's not wrapped by <span style="color:#fff">.
You need to add the padding to the a tags not the li.
Here is a fiddle.
<ul>
<li>Home</li>
<li>New Patient Process</li>
<li>Health Products</li>
<li>About Us</li>
</ul>
ul li a {
text-decoration:none;
display:block;
padding: 16px 20px;
color:#583709;
transition:.5s all;
}
ul li a:hover {
color:#fff;
background:#000;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am designing a web page.
And i want to use sticky-notes (post-it) in my page. Where, each sticky-note is added when we click an add button... Color of sticky notes must change randomly, and it must be tilted and must have some hover effect.
How can i do that ? Only CSS and HTML must be used.
I tried the code which i got from a website
http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/
But, i had some part of my website as list..so when i used this code, it also make the list items as sticky note.. i want to give property only to a div
HTML
<html>
<head>
<ul>
<li> Not to use sticky note </li>
</ul>
<div class="sticky"> -------------want to give property to this div only
<ul class="sticky">
<li >
<p >Stickynote1</p>
</li>
<li class="r" >
stickyonote2
</li>
</ul>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It's not possible to generate a random number(and thus random color) using only CSS & HTML. Javascript or a server side language like PHP would be needed.
However you could simulate random colour by having a list of items and have each note a random colour. But random colour chosen would be the same every time you reset the page.
HTML
<ul class="sticky">
<li>Note text</li>
<li>Note text</li>
<li>Note text</li>
</ul>
CSS
.sticky li { background-color: red; }
.sticky li:nth-child(2n) { background-color: green; }
.sticky li:nth-child(3n) { background-color: yellow; }
.sticky li:nth-child(5n) { background-color: blue; }
In this case the note sequence would be
red, green, yellow, green, blue, green, red, green, yellow, blue
Which would give the first time user a feeling of random.
Where 2n and 3n have the same values, 3n will take precedence, and where 3n and 5n have the same values, 5n will take precedence, and so on.
Method in the link you posted is similar to what I wrote. See this section for random color
ul li:nth-child(even) a{
-o-transform:rotate(4deg);
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
position:relative;
top:5px;
background:#cfc;
}
ul li:nth-child(3n) a{
-o-transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
position:relative;
top:-5px;
background:#ccf;
}
You've changed the question quite a bit but if you want to apply the same effect to the div instead of 'ul li try changing occurrences of '.sticky li:nth-child' to 'div.sticky:nth-child