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
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
I am relatively inexperienced with HTML and CSS and I am having a spot of difficulty trying to change the padding and margin values of my navigation bar on a second page without it affecting the index page.
NB: I want to style the nav slightly different on the second page.
I have 2 navigation bars .navbar and .navbar2 each with identical code.
<div class="navbar">
<nav class="large clearfix">
<ul>
<li>
Home
</li>
<li>
Famous People
</li>
<li>
Places to Visit
</li>
<li>
Contact Us
</li>
</ul>
<div class="veggieburger">≡</div>
</nav>
</div>
How do I call out navbar2 UL LI properties from a syntactical perspective in the CSS in order to style it different without affecting the navigation values aligned to the index page.
I have tried without success in the CSS.
.navbar2 > li {
margin-top: 50px;
}
Well, for managing different classes (.), and IDs (#), we use these selectors in the brackets I've written in.
Say for example you want to style navbar and navbar2 independently, you would directly style them differently by using the selector ".". Just add a "." in front of the class, and apply your properties as needed.
So for example, imagine my HTML is all done up, this would be the CSS:
.navbar
{
width: 100%;
height: 30vw;
color: red; /*this would make the text red*/
}
.navbar2
{
width: 100%;
height: 30vw;
color: green /*and this makes the text green*/
}
Hope that helped!
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've seen a fair amount asked about this in certain areas, but the answers I found didn't resolve my problem. I'm trying to make a nav menu, and can't get the list style set to none, nor will it display inline. Here is the HTML/CSS I had written:
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
I don't know if it's interfering elements elsewhere on the page, but I tried creating it both inside and outside my header with the same result...which was basically none. I'm wanting to remove the bullet points, center the elements and/or add padding between them, and style the text with the font on the res tof the page, but after getting the element to appear, any stylization I add via CSS isn't applying.
I'm editing because apparently the post was labelled 'off-topic', so I reworded the above text a bit. Also wanted to point out I'm not using embedded css, I'm applying it from an external .css file, which has cooperated just fine until this issue. Thanks for the help guys.
Your css is correct. However, did you enter the code exactly the way you display it above?? Your css needs to go inside a <style> tag if you want it on the same file as your markup. Like so:
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
<style>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
</style>
Demo
What you have written above should work.
I took your code and plugged it in fiddle and it displayed just fine.
<div class="nav">
<ul>
<li>About</li>
<li>Dream Series</li>
</ul>
</div>
.nav ul {
list-style-type: none;
}
.nav li {
display: inline;
}
http://jsfiddle.net/uL3sonrx/1/
You must have something affecting it in your css. Try inspecting it through Firebug or Chrome developer tools to see all the styles applied to it.
I'm having a hard time understanding why the behavior of certain properties do not follow the behavior stated in the W3 specification.
For example, in the specification it says that the "background-image" and "background-color" property is not inherited.
But the following code proves this otherwise.
The CSS
#nav > li {
background-color: yellow;}
The markup
<div>
<ul id="nav">
<li>This is a list</li>
<li>This is a list</li>
<li>
<ul>
<li>This is a list</li>
<li>This is a list</li>
</ul>
</li>
</ul>
</div>
You will see that even the 2nd level list items which is nested inside the 3rd list item also has their background-color changed, while I only intended for it to be applied only on the direct children which is the 1st level list items.
Now my question is this.
Why is this happening? Who is in the wrong here, the browsers or the specification? Am I missing something?
Any help is appreciated.
I think I found your answer.
When you look at the devtools, you will see, that the 2nd level got no background-color. The color you see, is the color of the parent li :-)
Fiddle
#nav > li {
background-color: yellow;
}
With the border property you can see it better.
Updated fiddle:
http://jsfiddle.net/2brhj2bq/1/
#nav li {
border:1px solid red;
}
#nav > li {
border:1px solid lime;
}
This is because the next UL is also in the Li , and li have bg color yellow so it should be yellow . just think it what have you done , you are assigning bg then you are seeking why it is happening it is not the bg of inner ul li it is the bg of ul#nav li.
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;
}