I have these drop down menus HERE created using CSS on the Products, Support and Community nav links. The drop down menus have rounded corners on the bottom. The hover effect on the last link overrides the rounded corner and squares it off which I do not want. I would like the rounded corners to remain even on the hover on the last bottom link of the drop down. I think I need a property of overflow:hidden (?) on one of the styles but I've tried everything and I can't get it to work properly. What am I missing?
The CSS is HERE.
Thanks!
The issue is that the border-radius property doesn't change the boundaries of the <ul> element, rendering overflow: hidden; useless when the <li> elements get a background color.
My solution would be to apply border-radius: 0px 0px 8px 8px; to each of the bottom <li> elements in your drop-down menus.
Try setting overflow: hidden; on .menu ul
CSS Border Radius is not inherited from its parent as you can see in this fiddle:
http://jsfiddle.net/sZtHk/
HTML
<div class="outer">
<div class="inner"></div>
</div>
CSS
.outer {
background: #ff0000;
width: 100px;
height: 100px;
border-radius: 24px;
}
.inner {
background: rgba(0, 0, 0, .25);
width: 100px;
height: 100px;
}
You need to apply the borderadius that you have on your <ul> to the last link item. If your hover state is controled by the <a> tag then you need to apply it there also.
.menu ul li:last-child { border-radius: 0px 0px 8px 8px; }
You may also, or alternatively need this:
.menu ul li:last-child a { border-radius: 0px 0px 8px 8px; }
Related
Question
If both <li> are 50%, why won't they be side by side?
Code
Demo on jsfiddle.
HTML
<ul>
<li>left</li>
<li>right</li>
</ul>
CSS
ul {
padding: 0;
}
li {
list-style: none;
display: inline-block;
width: 50%;
font-size: 12px;
color: gray;
background-color: rgb(216, 216, 216);
padding: 3px;
text-align: center;
border: 1px solid rgba(179, 179, 179, 0.83);
}
Because by default, margin padding and border are counted outside the element and not inside. So padding of 3px + border of 1px will be added to 50% on all the sides.
Also am not sure whether you are resetting browser default margin and padding of the elements, if you aren't than do it. You can either use universal selector which some oppose as it hits performance by few bits, like
* {
margin: 0;
padding: 0;
}
Or if you want to reset in a lenient way than you can use CSS Reset Stylesheet
So inorder to count the padding and border inside, you will have to use box-sizing property with a value of border-box.
Also you are using inline-block which will leave a margin / whitespace whatever you call of merely 4px so make all the li in one line. OR what you can do is, you can float your elements to the left, so that you don't have to make all the li in one line in your source document.
Demo
Just make sure you clear your floating elements if you are going with the float solution.
First problem: With the display:inline-block property, there is a white-space betwen elements. This make the li elments 100% + white-space is more than 100% so they can't fit on same line better use float:left for your issue
Second problem: You give a 3px border which makes your li elements more than 50% wide you could use the property box-sizing:border-box; which would make your borders inside the li elements
CSS:
ul {
padding: 0;
padding:0;
}
li {
list-style: none;
float:left;
width: 50%;
font-size: 12px;
color: gray;
margin:0;
padding:0;
background-color: rgb(216, 216, 216);
text-align: center;
border: 1px solid rgba(179, 179, 179, 0.83);
box-sizing:border-box;
}
JSFIDDLE
It is because the <li> elements have a padding. You have to remove the padding or decrease the width.
For example,
width: 48%;
padding: 2%
It's because of the padding. Wash element is 50% + 3px wide.
As others have mentioned display: inline-block; adds space between blocks.
ul {
padding: 0;
font-size: 0; /*This is a hack for inline-block to not add space between blocks*/
}
The above code is a hack to make the "space" between <li> elements become zero. Source: CSS Tricks - https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Demo
Looks like it is a simple problem
looks like you want a padding of
3px per <li> you have 2 then you need 6px extras
and you have broder of 1px ( you have 2 borders per li) that means that you have 4px extras.
That means that you need 10 px extras
You just need to change this line
width: calc(50% - 10px);
Example
http://jsfiddle.net/L5DbR/14/
I am having some troubles in styling the top dropdown menu here so that it creates a toggle effect. I am using padding to delimit the hover area but then there is no chance I can hover over the submenus.
#topmenu {
background-color: rgba(0,0,0,1);
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 20pt;
position: fixed;
width: 100%;
top: 0;
}
add z-index: larger-number to #topmenu to make sure the menu is always on the top level, so it can be hovered.
css transform will change the z-index order. you used it on the h2. it covered the submenu.
in actully, change nothing, but scroll down your page. you'll find the hover issue on menu gone.
Demo for rotate element covered absolute element:
http://jsfiddle.net/rainthinks/xswrg/
the fix: http://jsfiddle.net/rainthinks/xswrg/1/
some refs:
http://daneden.me/2012/04/css-transforms-and-z-index/
http://www.w3.org/TR/css3-2d-transforms/
Make the padding and margins 0; and also give the code so that I could understand any other problem.
I currently have this on a webpage I'm making:
HTML
<div id="pageHeader">
<nav id="siteNav">
<ul>
<li id="currentNavTab"><span>Home</span></li>
<li><span>Services</span></li>
<li><span>Gallery</span></li>
<li class="LastNavTab"><span>Contact</span></li>
</ul>
</nav>
</div>
CSS
nav#siteNav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
nav#siteNav ul {
padding: 0;
background-image: url('NavTabsBG.jpg');
box-shadow: inset 0px 2px 8px 2px rgba(0, 0, 0, 0.4);
border-radius: 8px;
}
nav#siteNav li {
display: inline;
width: 240px;
padding-left: 50px;
padding-right: 50px;
}
nav#siteNav a {
display: inline-block;
padding: 10px;
color: rgb(255, 235, 200);
font-size: 36px;
text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.6);
}
The code results in something like this:
I would like to have it so that the currently selected tab takes on a highlight, which can either be a bitmap or generated with background-gradient; something like this mockup:
I'm having issues with the layout. I tried to put the background behind the li's, but that didn't display correctly:
Being a relative amateur at web development I don't know how to fix this and get the result I want. An additional issue is that I would like the highlight to be masked within the rounded border. Any help would be appreciated!
Here's a fiddle. http://jsfiddle.net/57VC8/1/
What i did:
Set display inline-block on the li's. Why? Putting inline-blocks or block (that's elements with one of those displays) inside inline elements just might give you some hard to understand problems.
Set all the width's and paddings on the a element and not on the li.
Added a class "current" to the currently selected link, through which you'd apply whichever styles you want.
I have the following markup:
<div id="footer">
Home |
About |
Contact
</div>
With the following styling:
#footer {
position: relative;
float: left;
background: white;
width: 960px;
height: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
box-shadow: 2px 2px 3px #000;
-moz-box-shadow: 2px 2px 3px #000;
-webkit-box-shadow: 2px 2px 3px #000;
}
#footer > a {
padding-top: 10px;
}
Is there any particular reason that the padding isn't applied to all of the child <a> elements of my #footer div?
I'm trying a similar effect without a parent > child selector somewhere else on my page, so I'm assuming it's a problem with my selector.
Browser version: Chrome 11 Beta Mac OS X
#boss, <a> is an inline element not a block element. so, vertically margin & padding only working on block element . Then define display:block in your a tag for more information please check this Why do bottom padding and bottom margins not help to add vertical spacing between these links?
Would #footer a:first-child do it?
-- Answer from the comments below --
Ahh, they're all inline. To define padding separate from the others they need to be "block" elements, floating next to each other?
Adding
#footer a { display:block; float:left; }
would give you the ability to give the first one padding the other two don't have
I'm not quite sure why this isn't working, however as a remedy, I recommend wrapping all your links in like a div and giving that a margin-top. Check out the fiddle...
http://jsfiddle.net/Ft7Tr/
I hope this helps.
Hristo
UPDATE:
This seem to only be an issue with ul/li if i replace the ul with a div and remove the li and apply the relevant style to the a's instead its fine. ID' still liek to know why the ul/li structure presents a problem since margin/padding have been reset explicitly.
Im having soem trouble with the children of a fixed position element in IE7. They seem to be gaining width/margin/padding from somewhere but I cant discern where or how to fix it.
You can take a look at it in jsFiddle here. Ive added the bg colors just for debugging. The image/li tags should be flush with they yellow, and are in IE8 as well as mozilla and webkit. But in IE7 there is an extra ~20px of space to the left pushing them over, as if the li, a, or img tags had a margin. However, if i look through the properties in IEDevToolbar there is no margin or padding being applied. Futhermore, this happens even if i assign widths to everything and zero out margin/padding directly on each element with IEDevToolbar.
I'm totally lost on this one.
Below is the relevent code... There is a XHTML 1.0 Transitional doctype on the layout in question:
<style type="text/css">
.social-widgets {
position: fixed;
top: 125px;
left: 0px;
background: #f00;
width: 34px;
}
.social-widgets-content {
list-style: none inside none;
margin: 0;
padding: 0;
text-align: left;
background: #ff0;
}
.social-widgets-content li {
margin: 10px 0 !important;
padding:0;
width: 34px;
background: #0f0;
}
.social-widgets-content img {
display:block;
border-top: 2px solid #e9e8e8;
border-bottom: 2px solid #e9e8e8;
border-right: 2px solid #e9e8e8;
padding: 0px; margin:0px;
background: #00f;
}
</style>
<div class="social-widgets">
<ul class="social-widgets-content">
<li><img src="/images/button/button.facebook.png"></li>
<li><img src="/images/button/button.twitter.png"></li>
<li><img src="/images/button/button.feedback.png"></li>
</ul>
</div> <!-- /.social-widgets -->
This has nothing to do with position:fixed;. It was an issue with the list styling. When using list-style: none inside none; IE7 still adds the spacing for the list-marker despite the marker being set to none. The solution was to set list-style-type: none; instead of using the shorthand.