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;
}
Related
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 6 years ago.
Improve this question
Hello I am making a dummy promotion page and I am not sure why I have so much
spacing under my h1 tags.
Also for my footer, my li's dont seem to inherit the hover effect?
My li:hover works locally but not when I transfer it over on ftp.
Poking around on your site I found some problems (Chrome inspect is a powerful tool)
In your css/style.css you're setting the hover style on the < li> element, but it's the < a> element you should change the styling of. Change nav li:hover and h1 to this:
nav a:hover {
background: #222; // Looks better
color: #1CDFED;
text-decoration: underline;
}
h1 {
display: inline-block;
margin: 0;
}
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'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.
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
So I'm having a problem with my css nav styling. The code works on every other page, just not my first page in my drop down. When I open the page, the nav bar changes to a deep purple instead of my chosen color #E7DDDC.
Link to the page that isn't working
Ps. Sorry I'm new at coding and on here as well. Can't seem to find out how to post the code in my question.
This is because the default visited link colour has not been specified in your projects_style.css file. To add it you must use,
a:visited {
color: #E7DDDC;
}
To disable it, you need to replace,
a:link {
color: #E7DDDC;
font-family: lateef, sans-serif;
font-weight: lighter;
}
with the one below,
a {
color: #E7DDDC;
font-family: lateef, sans-serif;
font-weight: lighter;
}
To specify different colours for different link states, you need to use
a:link
a:visited
a:hover
a:active
You can change in your css,
Add the following styles,
#nav ul li a {
color: #E7DDDC;
}
It might solve your issue.
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