I'm creating a navigation bar for a website and I want the menu elements to change background color when I hover the cursor over them. The color changing part works however, if I take a closer look at the nav bar when I hover the cursor over one menu element I can see that the nav bar (div) and the menu elements (a) aren't the same height. (The red rectangular isn't as high as the orange one.) It's just one px or so but it's really annoying. I used 20px padding for the height, but apparently something's wrong and I'm sure there's a better way to make it work. I'm new to web development and CSS by the way.
div {
background-color: orange;
padding: 20px;
}
a {
padding: 20px;
}
a:hover {
background-color: red;
}
<div>
Menu 1
Menu 2
</div>
Thanks for your help in advance.
Have you tried:
div {
background: orange;
}
a {
display: inline-block;
padding: 20px;
}
By setting display: inline-block; on your <a>, the padding should behave as required.
Related
I've got a mess with two links at the top of this page ("WORK" and "ABOUT").
http://danux.me/
I'm not sure why I can't get them to style. I only seem to be able to apply a float and nothing else in the CSS does anything.
#nav_container {
float: right;
position: relative;
padding-right: 110px;
padding-top: 60px;
}
#nav_container li {
float: left;
display: inline;
color: #fff;
list-style: none;
text-decoration: none;
cursor: pointer;
}
As far as the clickable part, if I expand my browser so they are off to the right of the tiled images they are clickable.
I have the tiled images set to relative for that overlap effect, and the blue bar is set to absolute.
I have the z-index higher for the tiled images and tried applying a higher z-index to those nav links thinking I could get them to pop up on top and be clickable, but no dice.
Any guesses?
The problem is that your #home_console_wrapper element actually overlaps your #color_beam, and has a large padding-top on it to hide this behaviour. It also has a higher z-index, meaning that it will make your links unclickable.
To rectify this, you need to remove position: absolute from #color_beam, and padding-top: 190px from #home_console_wrapper.
This will cause your links to become clickable, without changing the display at all.
If you would like to still have the slight 'overlap' effect, simply set a negative margin-top on #home_console_wrapper:
#home_console_wrapper {
margin-top: -35px;
}
Hope this helps! :)
I am working on a site here: http://americanbitcoinacademy.com/
When you scroll a bit on the site a fixed nav will appear but on this fixed navigation I want to hide the logo nav BUT I still want it to appear on the regular nav bar on the top.
Here's the CSS I am using:
.nav>li>a>img {
max-width: none;
}
.menu-item a img {
border: none;
box-shadow: none;
vertical-align: middle;
width: auto;
display: inline;
}
I want it to hide on a black fixed nav but I still want it to appear on the regular nav. ANy idea how to do so?
You can use the inspector of Chrome to check this out.
The nav menu has class .affix when it is fixed/black, so using that as the parent selector to hide the image should hide it in the fixed state without affecting the menu's default state.
.main-menu.affix .menu-image {
display: none;
}
Can't use chrome as I am on iPad, as the navy bar looks different at the top and when it's further down the page, I'm guessing that at some point you apply a different class to the nav div?
You can target the img within that class with the style display: none;
Hope this helps, if not I'm sure some one on a computer can give more of an example
I know this is probably a stupid question. But say I have a navigation menu, would it be more practical to set a fixed height..
nav {
background: red;
Width: 80%;
height: 60px;
}
nav ul li {
Line-height: 60px;
}
Or to use padding to define the height?
nav {
background: red;
Width: 80%;
Padding: 30px 0;
}
I usually go with the first choice. But I'm worried that the font size might change in different computers/browsers and therefore becomes unproportional with the container. Could this actually happen?
Your vertical padding should probably go on the
nav ul li a
That way, if the anchor text scales up, so does your header and everything doesn't break out, and you have a larger clickable area. Also, don't leave the anchor display inline.
So I have a navigation at the top of my page and a div block underneath it..
What i want is to have the border of the div block go up through the navbar..
Here is a picture to demonstrate what i have so far:
borderthing http://puu.sh/4pkgO.png
Thanks for the help if anyone knows how!
Here is a proof-of-concept example. The details will differ depending on the actual design.
Start with the following HTML:
<div class="nav-wrap">
<ul class="nav">
<li>Home</li>
<li>About This</li>
</ul>
</div>
and use the following CSS rules:
.nav {
text-align: center;
border: 1px dotted lightgray; /* for demo only */
}
.nav li {
display: inline-block;
padding: 10px;
margin: 0 20px;
background-color: white;
}
.nav-wrap {
position: relative;
border-bottom: 1px solid blue;
height: 20px;
}
The idea is to add a wrapper block around your navigation (.nav-wrap) and then set the bottom border to it. You can then position the border by adjusting the height of the wrapper.
The .nav block actually overflows out of the wrapper, but that in this case, it provides a useful effect.
See demo at jsFiddle
Design Note: The wrapper block is not strictly necessary but very often, you may need the ul block to set an overall height for the navigation bar or some positioning for a multi-level menu. The wrapper gives you more design options.
You can set the navigation to have absolute positioning or you use z-index.
Give negative value to div margin - KK
I am having trouble getting a background-image to overlay the border of another div. We have a sidebar panel with various sidebars, including a navigation menu. To the right is the content panel. We'd like anything selected on the sidebar to appear connected to the content panel:
In the example above, there is a background image on the Personal Info <li> tag. I'd like to extend this image one pixel to the right so that the line next to the selected value isn't visible.
Here is my CSS for the submenu (selected) and the Content area to the right:
.submenu-item li span{
padding: 4px 0 4px 16px;
min-height: 16px;
border-bottom:0px;
}
.submenu-item li{
font-size:12px;
border: none;
padding: 0px 0 0px 16px;
}
.submenu-item span.Active{
background-image: url(../images/submenu-select.png);
background-repeat: no-repeat;
}
#Content {
margin-left:190px;
border-left: 1px solid #b0b0b0;
padding: 20px;
background: #FFFFFF;
min-height:600px;
}
Is there a way to do this other than putting a right border on my sidebar (and excluding it on the list item tag)?
If you have a border on that right, you just can't eliminate that part of the border.
However, you're in luck. Try using margin-right: -1px; in your CSS. This will drag the
element to the right 1 pixel, and hopefully over the border. You may need to also set
position: relative;
z-index: 100;
Also, because it's over to the right 1 pixel, to make it align on the left with the others, you may need to make the active element 1 pixel wider.
Alex's solution should work, but another way to do it would be to remove the border-left CSS atrtribute from #Content and instead use a 1 pixel wide gray GIF or PNG image on the DIV containing the submenu items.
Like this:
#SubMenu { background: url(grayline.gif) #CCCCCC top right; }
That would remove the need to worry about the selected submenu element not being aligned.