I was wondering if you could give me some helpful hints on how to correct this issue? I have a main menu on my site, the code for it is as follows:
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
And here's a demo of what it actually looks like:
The problem is that when I hover over a menu option (li), the background appears, but it overflows to the outside of the menu's background, and makes it look really dodgy/crap/cheap/yuck!
Note that (obviously) when I change the padding to make it display correctly in these browsers, it appears too small in height in IE! So I'm screwed either way. How can I make little imperfections like this look the same in all browsers?
Update:
HTML (The menu):
<ul class="menu">
<li class="currentPage" href="index.php"><a>Home</a></li>
<li>Services</li>
<li>Support</li>
<li>Contact Us</li>
<li>My Account</li>
</ul>
The CSS:
.menu {
margin-top: 5px;
margin-right: 5px;
width: 345px;
float: right;
}
li {
font-size: 9pt;
color: whitesmoke;
padding-left: 6px;
padding-right: 8px;
display: inline;
list-style: none;
}
li:hover {
background-color: #222222;
padding-top: 8px;
padding-bottom: 9px;
}
You might prevent problems by not changing the padding based on the hover. Furthermore you should hover on the a
Does this work as expected?
JSFiddle example
Your problems are probably due to your use of display: inline. Try setting explicit height on the ul. Doing this with your example worked for me:
ul {
border-bottom: 2px solid black;
height: 28px;
}
I added the border to be able to see where I was aligning to.
BTW, the proper solution is to not use li:hover, but a:hover, as has been stated.
Related
I am trying to follow some online HTML CSS course and tried to code an website like this website
https://www.w3schools.com/w3css/tryw3css_templates_band.htm#
When I tried to see the hided button Merchandise, Extras, Media 's information, I saw the Elements and I saw that the padding is 8px 16px, as you can see in this picture
But when I coded like them, used their information, the block became small. Like this picture
Here is some of my code
<div id="header">
<ul id="nav">
<li>HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li>
<a href="">MORE
<ul class="subnav">
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</a></li>
</ul>
</div>
My styles.css file is here
#nav li {
position: relative;
}
#nav > li {
display: inline-block;
}
#nav li a {
text-decoration: none;
line-height: 46px;
padding: 0 24px;
display: block;
}
#nav li:hover .subnav {
display: block;
}
#nav .subnav {
/*display: none;*/
position: absolute;
background-color: #fff;
top :100%;
left :0;
}
#nav .subnav a {
color: #000;
padding: 0 16px;
}
My question is, why I set padding exactly they display but it became fell in ?
Thank you very much for your time.
If I understand correctly, your question is why the widths of your <li> elements are shorter than the example.
In short, add min-width: 160px; under your #nav .subnav a CSS selector.
#nav .subnav a {
min-width: 160px;
color: #000;
padding: 0 16px;
}
Explanation:
As in your screenshot, the original example has CSS "width: 100%" which I believe you've tried but didn't work as expected. In fact, that 100% means it will follow the father <div> width (shown in following screenshot), which is set to "min-width: 160px;". Instead of following the exact structure, you may want to keep it simple, so just add "min-width" to <a>!
CSS of example page
built a simple no-dropdown horizontal nav for a new site design and its all working fine like normal except that between 2 buttons is a phantom white space that doesn't appear in dragonfly's metrics, or in the code, but is visible on the screen when the li's hover rule applies. and it does not appear between each li, just between 2 specific lis. i have attached images below showing what i mean:
no problem, everything looks as it should:
on the right side of the hovered li is a px of whitespace that shouldnt be there:
.navi {
display: inline-block;
height: 50px;
max-height: 50px;
overflow: hidden;
list-style: none;
float: right;
}
.navi li {
float: left;
}
.navi li a {
padding: 16px;
border-left: 1px solid #8bd854;
font-size: 16px;
text-decoration: none;
line-height: 50px;
color: #8c8c8c;
transition: all 0.5s ease;
}
.navi li a:hover {
background-color: rgba(13, 137, 0, 0.61);
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
color: #fff;
}
<ul class="navi">
<li>Home</li>
<li>About</li>
<li>Lawn Care</li>
<li>Tree & Shrub Removal</li>
<li>Contact</li>
</ul>
any idea where this may be coming from? It's not a huge deal if not Solvable but it is an annoyance.
Thanks in advance
An easy way to fix this is by using the font-size:
.navi {
font-size: 0;
}
.navi li {
font-size: 1rem;
}
This sets the font size of the list to zero and the font size of the list element to the size of the root element (you may use any other unit – except em – if you want to).
I'm not entirely sure what is causing this. Maybe it's webkit or some nuance of CSS, but at least in this one particular case, you can add display:block to .navi li a and change padding: 16px to padding: 0 16px on that same rule. Unfortunately I can't figure out why this works but my best guess is that whitespace is causing the issue.
I was able to reproduce the issue in Chrome by setting the zoom to 110%. Perhaps, you could set the zoom of all the navigation elements and their children to be zoom: 1.0;.
It is probably just whitespace. try
<ul class="navi"
><li>Home</li
><li>About</li
...
></ul>
i'm pretty new to css and html and trying to make a site to work on improving and learning. I've been searching and cant figure out how to fix my menu in the sidebar, to me it looks like the li's in the ul are floating to the right for some reason, heres my code:
also Jsfiddle Link:
https://jsfiddle.net/h2bpxcxe/
#side-bar #recents {
width: auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#recents h3 {
text-align: center;
padding-top: 4px;
}
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
}
#recents ul li {
padding: 2% 0px;
border-bottom: 1px solid black;
background: grey;
Thanks if somone can help! :)
UL-elements have a padding-left by default.
You need to reset this padding which will center your li-elements in your sidebar.
#recents ul {
margin-top: -10px;
list-style-type: none;
text-align: center;
padding-left:0px; //Adding this will center your LI's
}
FIDDLE
a tip for when dealing with issues like this. Look at the element in your browsers developer tools. Padding and Margin will always be shown clearly there.
I feel there is also an issue with the positioning of the sidebar's list/ul element.
If you apply:
#recents ul {
position:absolute;
}
to your CSS, it will preclude the list element from overflowing the parent, which is the case with your current code. Here's a jsfiddle: https://jsfiddle.net/46t4f5zs/
just do like this
<div id="recents">
<ul><h3>Recent Posts</h3>
<li>Recent One
</li>
<li>Recent Two
</li>
<li>Recent Three
</li>
<li>Recent Four
</li>
</ul>
</div>
Ok this is simple thing. I firstly created a usual "Home" Button linking to the Home Page of the website, but the word "Home" looked too obvious. Hence I tried to insert an icon in place of that word, but its not fitting properly. I have tried some things in my css but its messing up the whole (used to create the navigation menu). The screenshot is attached. Please if someone can see whats wrong.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></li>
<li>MEN</li>
<li>WOMEN</li>
<li>KIDS</li>
<li>DESIGN!!</li>
With your current styles you will need to play around with the vertical-alignment and margins for the image, something like:
ul#menu li#Home_Link a img {
vertical-align: text-bottom;
margin-bottom: -5px;
}
As a side note, your use of ID's for elements is not recommended - use classes if needed. And reduce the specificity of your style declarations, e.g. .home-link img
I haven't really ever done a background navigation rollover, I usually just change the colour of the text once it's been rolled over. However I'm try to do this now but can't seem to get it right.
I'm trying to do it all with CSS as I believe there is a way however I do see a lot of others using sprites and image rollovers. Which way is the best? I might end up having a lot of images on my website so I'm trying to stay away from them so I myself, am thinking strictly CSS. There is a way right?
This is my website
CSS
#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ }
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;}
#main-navigation li { float: left ;margin-left: 30px; }
#main-navigation li a { display: block; text-decoration: none; color: #000; }
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}
HTML
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>About</li>
<li>Current Season</li>
<li>Past Seasons</li>
<li>Contact</li>
<li>Partners/Sponsors</li>
</ul>
</nav>
But I want it to look like this
What am I missing?
Use this
#main-navigation li a:hover {
color: #c7bd89;
background-color: #900;
width: 120%;
line-height: 30px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 30px;
}
All the problem is that you're defining a height ... You should define a line-height instead and it will work flawlessly ... But I still can find a space for improvement in terms of padding and margin.
see the fiddle for code and demo
fiddle: http://jsfiddle.net/quR4E/3/
demo: http://jsfiddle.net/quR4E/3/embedded/result/
screen shot:
Try changing your #main-navigation li a to this:
#main-navigation li a {
/*display: block;*/
text-decoration: none;
color: black;
padding: 5px;
}
Using display block was pushing the text outside the box. Adding the padding will give you some spacing around the text.
Sprites are definitely better than using multiple images but in the end they are essentially going to be the same thing. If you can create your images small enough (for bandwidth performance) it won't affect your site that much. Sprites are nice to group images. Using background colors and borders around text is also a very efficient way to go.
Have a look at what I did here: http://torontobanfffilmfest.com/splash
Each of the eight blocks has a single image in two versions, one light and one dark, attached side-by-side. In the top-left corner, for example, is an image, splash_buy_tickets_m.png, that is 582 pixels wide. But the space in which it's displayed is 291 pixels wide. We only see half the full image, and WHICH half depends on :hover.
The CSS that makes the image change on rollover is pretty simple:
#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. {
background-position: -291px 0;
}
If each of the buttons in your button bar consists of an "active" and an "inactive" version, then you can just change the image position within the DIV in which it's shown, shifting horizontally or vertically.