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 8 years ago.
Improve this question
I've already done quite a bit of searches and looked at other Stack Overflow posts, but nothing is working as a solution. All help is appreciated.
HTML:
<div class="nav-bar">
<nav>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>PUBLISHERS</li>
<li>ADVERTISERS</li>
</ul>
</nav>
</div>
CSS:
body{
margin: 0 auto !important;
background:black;
background-color:black;
}
.nav-bar{
text-align:center;
margin-top:40px;
background-color:black;
background:black;
}
.nav-bar nav ul li{
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
display:inline-block;
border:2px dashed #E06223;
padding:3px;
width:118px;
height:28px;
background-image:url ('http://example.com/sof/images/b_home.png');
}
.nav-bar a{
text-decoration:none;
color:white;
}
JSfiddle
Simply remove the extra space after url
background-image: url('http://example.com/sof/images/b_home.png');
Demo http://jsfiddle.net/tDCWR/3/
Reference and more info: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Remove the Extra space from the value. Until then it would give you the following error
Invalid property Value.
Which means that the property's value isn't Valid. So, you need to change and make it Valid. Here is a way to make it valid.
Remove the space and it would be like
background-image: url('http://example.com/sof/images/b_home.png');
Now, it won't show the error.
You don't need the space between url and the source for background-image property:
background-image:url('http://example.com/sof/images/b_home.png');
Updated Fiddle
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 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 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
I have this problem with my drop down menu I cant seem to figure out how to move the drop down menu that shows when you hover above the "support" button, I would like to move it little bit to the left,the other half is sticking out of the screen and can't be seen.
here is the link to it.
[jsfiddle] http://jsfiddle.net/3ZzVT/1/
All replies and help will be very much appreciated!
http://jsfiddle.net/3ZzVT/3/
Adding a right: 0px to the .head_menu ul selector makes the element position itself better underneath the nav item.
Like this .head_menu ul give position:relative; and right:0;
DEMO
CSS
.head_menu ul
{
padding:0px;
margin:0;
list-style:none;
position:relative;
right:0;
}
.head_menu ul li ul
{
display: none;
width: auto;
position:absolute;
top:30px;
padding:0px;
margin:0px;
right: -15px; // I added 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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm working on my website, and was wondering how to do this hover effect like on this site:
http://www.level1productions.com/athletes.cfm?catID=4
Add :hover to your li class
li.classname {color: #fff}
li.classname:hover {color: #000}
Now when you hover over the element the color of the text will change.
you can easily achieve your desired result with simple html and css
HTML
<div>Shailender Arora
<span>UI Developer</span>
</div>
CSS
div {
background:red;
width:200px;
height:50px;
}
span {
display:block;
color:red;
}
div:hover {
background:yellow;
}
DEMO
Do it with CSS. In CSS there are some thing called pseudo elements and they act as type of functions used for altering the markup tags.
For hover this one is used: :hover
The colon here is very necessasry.
Usage:
tag_name:hover { /*CSS*/ }
Read more about :hover here.