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
}
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 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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I made a site and just did the navbar. On Google its good only the underline is there but on Firefox the bullet points are still there how do I fix this. Also how do I get ride of the underlines?
Try this:
Let say: your nav has container: #nav, then:
#nav a {
list-style-type:none;
text-decoration:none;
}
You should use as CSS reset sheet: CSS Reset
And then for your nav bar:
list-style: none;
text-decoration: none;
You probably need something like text-decoration: none; list-style: none; inside your nav ul tag
Try doing the following:
list-style-type: none;
It would help if we had your code though.
Try the following in your navbar's css:
list-style-type:none;
text-decoration:none;
Here is a reference from MDN. It has everything about list styling.
on css:
*{
text-decoration: none;
list-style: none;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am making a website and though of a cool navigation bar that is suppose to look like this:
Edit - accidentaly erased the all the css code, only had the nav fixed at the bottom - Edit
I managed to make it look like this: http://pokemasters.freeiz.com/bare.html
I just ran out of ideas.... i got the images that i made seperatly, a navbar:
& buttons:
I'm looking for a full width navbar that adjusts itself to different screens, is located at the bottom of the screen, red buttons while active or hovered and white buttons while normal, with that pokeball line right on top of it and overlaying the buttons
Can someone point me in the right direction please??
what you want to do? it is not clear. you doesn't need to use image in #navigation li a.profile instead of it you can use background colour.
#navigation li a.profile {
width: 240px;
background-color:#ffffff;
text-decoration: none;
}
#navigation li a.profile:hover {
background-color:red;
background-position: -240px;
text-decoration: none;
}
#navigation li a.profile:current {
background-color:#cccccc;
background-position: -240px;
background-repeat: no-repeat;
text-decoration: none;
}
or if you want to full width navigation bar.
#navigation ul {
list-style: none;
text-align: center;
width:100%;
}
#navigation li {
display: inline;
width:16.6%;
border-right:1px solid #ccc;
}
#navigation li:last-child{
border-right:none;
}
if you want the 'ball' image above the navigation bar. please use a <span> just above of the #navigation 'div' and set its background image 'ball' image.
property of <span class=ball_Img>
.ball_Img{
background:url('whatever');
position:relative;
z-index:5;
}
#navigation{
.......//property previous define please write here.
position:relative;
top:-50px; // you can change according to your situation.
}
So you want to have a full width nav bar? with elements stretching auto? or? And why are you using images to have a color? you can just use background: red; on hover or active, and background: white on normal states
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.
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 8 years ago.
Improve this question
I've been busting my head at this for quite some time now and I can't figure it out for the life of me.
Basically, I have the following site: http://tuivirtual.com/en/
If you move your mouse at the top portion of the banner images you'll notice that the dropdown menu drops but it shouldn't. It should drop only when hovered over the actual tags, not below.
Any help is more than welcome!
Thanks!
A simple solution is to give the ".sub-nav-wrapper" a negative "z-index" and on hover to add a positive "z-index" to it.
#navigation li .sub-nav-wrapper {
z-index: -1;}
#navigation li:hover .sub-nav-wrapper {
z-index: 10;}
This will do the trick and it will keep the transition.
The element is still 'there', it just has an opacity of 0:
#navigation li .sub-nav-wrapper {
opacity: 0;
}
#navigation li:hover .sub-nav-wrapper {
opacity: 1;
}
To solve this problem, hide it in some other way.
Try add this CSS code:
ul#navigation li div.sub-nav-wrapper {
display: none;
}
ul#navigation li:hover div.sub-nav-wrapper {
display: 1;
}
That should do it.