I made a simple navigation menu using a ul, but when you hover over it, the background color will not change the entire background. I think it may have to do with my padding elements. How do I fix this?
Here is a Fiddle of my code: https://jsfiddle.net/b8js8zkq/
I have looked at How do I make the hover background color fill the height of the link? and did not find a good answer there, so please don't mark this as a duplicate of that.
The problem with your code is, you have margin and padding on both <h3> and <li>. So remove them and add them as padding to the <a> tag. And you are done!
The padding and margin of each 15px constitute 30px of total padding to <a>. That's what I have done below:
.header li {
border-bottom: 1px solid #888;
font-size: 20px;
padding: 0;
}
ul h3 {
margin: 0;
padding: 0
}
.header a {
display: block;
padding: 30px;
}
Fiddle: https://jsfiddle.net/19r4a4ft/
I'd recommend changing your css from this
.header a:hover{
background-color: #f3e5d8;
}
to this
.header li:hover{
background-color: #f3e5d8;
}
This will make it so any list item within your header class will change its background colour when hovered.
https://jsfiddle.net/b8js8zkq/1/
Fixed fiddle.
You remove the padding on both <h3> and <li>, and add that same padding to the <a>-tag.
jsfiddle update
Old
.header a:hover {
background-color: #f3e5d8;
}
New
.header li:hover {
background-color: #f3e5d8;
}
You want to change the color of the li element rather than just the a tag
Related
I'm making navigation tabs and when a tab is active or "current" I want a border to appear at the bottom of that tab, but the border is including the icon only and not the text...
my HTML
<li class="current"><a href="#tab-3"><img src="assets/related.svg"
height="20px" width="20px">Related</a></li>
my CSS
.tabs-menu li.current {
position: relative;
font-weight: bold;
border-bottom: 3px solid red;
}
this is what I'm getting
and here's a fiddle
https://jsfiddle.net/qxL6w0yf/
I need it to look like this
Note: in the fiddle the tabs aren't working for some reason, but that's irrelevant, I think. Thanks.
you are limiting the height for ul and li to 30px,remove them.
Change like :
.tabs-menu li {
height: 30px;<---------------------Remove Or 50px
//More codes......
}
.tabs-menu {
height: 30px;<---------------------Remove Or 50px
//More codes......
}
Fiddle
All you need to do is add an a at the end. Otherwise, it's ignoring the nested a tag.
.tabs-menu li.current a {
This produces the results you're looking for when I added it to your code sample.
I have a few images with which I'm using background-color.
HTML:
<nav id="mainNav">
<ul id="buttons">
<li><img src="https://dl.dropboxusercontent.com/s/tqbyzi5pm97d95m/Message.png"/></li>
</ul>
</nav>
CSS:
#mainNav {
opacity: 0.75;
filter: alpha(opacity=75);
position: relative;
}
#mainNav ul {
margin: 0 auto;
padding: 0;
position: absolute;
left: 0;
right: 0;
}
#mainNav li {
display: inline;
margin: 0.3em;
}
#mainNav img {
height: 1.5em;
background-color: blue;
border: none;
}
#mainNav a:link, #mainNav a:visited, #mainNav a:hover, #mainNav a:active {
font-size: 1em;
font-weight: bold;
text-decoration: none;
color: blue;
}
#mainNav a.active {
text-decoration: none;
}
No issues occur on my standard setup, OS X Safari Version 7.0.6 (9537.78.2) but in iOS 7 Safari, border lines appear.
For example: and
What can I do to avoid this?
Thanks!
EDIT: Note how it appears on other sides of images, how is that?
I really suspect you did not resized/cropped properly your .png images.
A reason this might happen is that you'll need to double-check your .png images. Means, open them again in your favorite editor and remove the half-transparent borders that usually occur resizing an image and saving it as png with alpha transparency.
Also try to add to your img:
vertical-align: middle;
and make sure to take a look at <img> inside <a> gets blue border
While I'm still not certain what exactly caused the issue, it is probably just a rendering glitch rare among browsers.
The solution I am using is simply replacing the used (.png) images with SVGs and background-color with CSS' ability to color .svg images. The code for this is CSS:
svg {
fill: blue;
}
or replacing an actual color with currentcolor for making the fill same color as the parent element.
Try adding the border style to the image and set it to zero.
See How remove border around image in css?
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.
This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 8 years ago.
When I hover over the navigation links, the hover changes the background color and link color however there is a tiny sliver of a space between the right border and hover fill. How can have the hover fill reach the border? I have tried playing around with padding etc and moving the border to another element but nothing is working. I'm sure it's something so small.
HTML
<nav id="bottomNavWrap">
<nav id="bottomNav" class="fl">
<ul>
<li>汽车首页</li>
<li>购车必读</li>
<li>新车导购</li>
<li>新车排行榜</li>
<li>最新促销</li>
<li>维修问答</li>
<li class="last">车行搜索</li>
</ul>
</nav>
CSS
#bottomNavWrap {
height: 34px;
width: 900px;
margin-left: auto;
margin-right: auto;
}
#bottomNav {
display: inline-block;
}
#bottomNav ul {
color: #fff;
font-size: 120%;
font-weight: 500;
text-align: left;
}
#bottomNav ul li {
display: inline;
}
#bottomNav li a {
border-left: solid 1px #454b95;
width: 80px;
padding-bottom: 7px;
padding-top: 7px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
color: #fff;
}
#bottomNav li a:hover {
color: #000;
background-color: #FFF;
}
#bottomNav li.last a {
border-right: solid 1px #454b95;
}
There are several methods to removing the white space. Some suggest having literally no white space in the code as follows:
<ul><li>First Link</li><li>Second Link</li></ul>
However, this may become difficult to read for the coder. Another suggestion is to use HTML comments between code gaps like so:
<ul>
<li></li><!--
--><li></li><!--
--><li></li><!--
--><li></li>
</ul>
Another alternative is to put the closing tag's final character right before the next tag, so that the white space is inside a tag:
<ul>
<li></li
><li></li
><li></li
><li></li>
</ul>
While these two methods are easier on the eyes than the first, coders who like to see everything neat would also have a problem with this. I am one such coder, and I prefer to use another method.
Add the following to your CSS:
*{font-size:small;}
.fl>ul{font-size:0;}
The first will set literally every single item's font-size attribute to small, and the second will set the font-size attribute of the <ul> within the .fl class to 0, but the > selector makes sure that only the ul, and none of its children (ie, the <li>) get affected by this. At a font size of 0, you don't see the white space on the page at all, and the gaps are removed.
You can play around with this method to get it the way you want it, but this is the quickest method to do it.
I want to do this with CSS only. I have an unordered list and some hyperlinked list items and I want to limit the width and height of the links (list items) to width:300px and height:1.5em. So, no matter what the length of the links are, only up to 300px of the links will be showing and the rest will be hidden because of height limit and overflow:hidden. I want to show the rest of the link on mouse hover.
I can partially do this and hover over links shows the rest of the content BUT it also pushes down the content below it.
Is it possible, to show the rest of the content on mouseover WITHOUT pushing down the content below it?
Please see this fiddle 'http://jsfiddle.net/3VyaC/'
Looks a little clunky, but it's close to the effect you're shooting for. Only changed your CSS:
body {font-family: arial; font-size: 0.8em;}
.news-entry ul {
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
width: 300px;
}
.news-entry li {
border-top: 1px solid #dcdcdc;
width:300px;
height:1.5em;
overflow:hidden;
position:relative;
}
.news-entry li a.itemtitle {
display: block;
width: 100%;
padding: 4px 0 3px 0;
line-height: 1.5em;
text-decoration: none;
}
.news-entry li:hover {
color: #333;
background-color: #fafafa;
overflow:visible;
z-index:10;
}
.news-entry li:hover a{
position:absolute;
width:100%;
background-color:#fafafa;
border:1px solid #555;
}
Fiddle: http://jsfiddle.net/y3Vkt/
Might need to tweak the margins when the link changes to absolute position, there's a 1-2px glitch.
Hope this helps!
There would not be a way to do this. The only way you could actually do that is by setting position: absolute; but that would make the link sit on top of the next one. So to basically answer your question, there is not a way to do this with the width set as you have it.