I have a CSS problem that I've been unable to figure out. Basically, I have a menu which is a fixed width and height. The background of the menu is simply a graphic, with a gray bar, and a drop shadow beneath. Here is the css for that menu:
#menu
{
width:1024px;
height:63px;
background: url(../images/menuholder.jpg);
margin:0px;
}
I have a CMS controlling the menu options, however for this example, I have them hardcoded. I am using CSS to position the elements in the correct place vertically, over the gray bar, centered vertically, which is fine. Here is the issue: I am trying to place a 1px wide white (#fff) line in between each menu option. I would prefer to do this via CSS entirely, rather than with a saved image. I was able to do it (sort of) using this code:
<div id="menu">
<div id="upperNavLinks">
<ul>
<li style="border-right: 1px solid #fff;">Option 1</li>
<li style="border-right: 1px solid #fff;">Option 2</li>
<li style="border-right: 1px solid #fff;">Option 3</li>
<li style="border-right: 1px solid #fff;">Option 4</li>
<li style="border-right: 1px solid #fff;">Option 5</li>
</ul>
</div>
</div>
The css behind it is:
#upperNavLinks
{
float:left;
padding-top:0px;
padding-left:0px;
}
#upperNavLinks ul
{
list-style-type:none;
}
#upperNavLinks ul li
{
float:left;
}
#upperNavLinks ul a {
padding-right: 18px;
padding-left: 18px;
display: block;
text-decoration: none;
font-family:PT Sans, Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight:bold;
color: #333333;
}
#upperNavLinks ul a:hover
{
font-weight:bold;
color: #a31624;
}
The problem is, it generates a white line where I want it to, however I need it to start at the top of the gray bar, and proceed down to the bottom of the gray bar, but not over the drop shadow. The size (vertically) of the gray bar is : 44px.
So, the question I have is: How do I make the white line lock to the top of the gray bar, and cover 44px (and not over) of vertical space over the gray bar, while leaving the actual menu options floating in the center of the graphic as they are now?
If this doesnt make any sense I could post the actual graphic and code somewhere.
Between each li with an anchor, place another li, now with a class (I named it border). Give that class a display: block;, a width: 1px; and a height: 20px;.Now you can play with the height to get the effect you looking for.
http://jsfiddle.net/skeurentjes/4hJrb/1/
What's the semantic implications of placing empty 's? Personaly I would use background image for something like this rather than creating empty tags.
Related
I've created a basic nav with the following structure:
<div class="nav">
<ul>
<li>Home</li>
<li>Another Link</li>
<li>Another Link</li>
</ul>
</div>
The nav is a typical horizontal one with lis floated to the left. The thing is, the nav is dynamic per user, and the nav will never take up 100% the width of the screen.
However, I want the hovered/current nav link to have a red underline, and the rest of the nav across the remaining width of the site container to have a different colored bottom border.
Here's an image of what I want:
I can do this by attaching a background image of the default border color to the nav div, but I'm not sure how to do this with pure CSS.
Is this possible?
Thank you.
Edit: Here's the CSS (and please note that the CSS does not give me the intended effect):
.nav ul {
border-bottom: #DDD solid 5px;
list-style: none;
overflow: hidden;
}
.nav li {
float: left;
}
.nav a {
border-bottom: #FFF solid 5px;
display: block;
font-size: 16px;
font-weight: bold;
padding: 5px 20px;
text-decoration: none;
}
.nav_link:hover {
border-bottom: #F00 solid 5px;
color: #F00;
}
.current_page {
border-bottom: #F00 solid 5px;
color: #F00;
}
Here's a possible solution.
Set a top and bottom border on your nav element. Then with your a tags, set them with a bottom border matching the non-hover color and size. Set a negative margin-bottom on the a tag equal to the size of the nav border-bottom. And then change the border color of the a element on hover.
Here's a fiddle showing it: http://jsfiddle.net/FNLmf/
*Note: I did not use floats, I used inline-block. You can use floats, just be sure to clearfix your nav element.
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'm trying to make the underline from the active / hovered tab transparent. But I didn't get it working. Anyone knows how to do this?
Screenshot: http://i.imgur.com/m6ogRjB.png
I want the red marked white line removed.
Setting blue border bottom color isn't the correct solution because I need it transparent/removed.
JSFiddle: http://jsfiddle.net/mULUv/6/
border-color: #fff #fff transparent;
I guess I need something to do here.
But still don't get it working like I want.
Since you can only cover up borders in css, and since you do not want to set a blue color to overlap one of your borders, the only remaining (and quite tricky) way of achieving the effect you are looking for is to "build" the borders block by block.
The idea is to remove the bottom border from the ul container bar and add fillers between the tabs and after them that would have a bottom border. Then, the tabs which are not hovered nor active will have a bottom border displayed closing the gaps between fillers. Hovering or activating will cause the tab to lose the bottom border and to gain a right, left and top border. Using a custom css class such as your .tab-advanced this can be done safely without overwriting the built-in BootStrap classes.
Here is a working demo.
The html code to add the fillers changes the list to:
<ul class="nav nav-tabs tabs-advanced">
<li class="active">1</li>
<li class="in-between-filler"></li>
<li>2</li>
<li class="in-between-filler"></li>
<li>3</li>
<li class="filler"></li>
</ul>
and the corresponding additional css is:
.tabs-advanced {
display: table;
border: none;
}
.tabs-advanced > li{
display: table-cell;
float: none;
}
.tabs-advanced > li > a{
margin-right: 0;
border-bottom-style: none;
}
.tabs-advanced > li:not(.active):not(:hover) {
border-bottom: 1px solid #ddd;
}
.tabs-advanced > li.filler{
width: 100%;
border-bottom: 1px solid #ddd;
}
.tabs-advanced > li.in-between-filler{
min-width: 2px;
border-bottom: 1px solid #ddd;
}
You could either do...
border: none;
or
border: 1px solid transparent;
(if you want a 1px line there still)
I decided on an effect I would like for a vertical drop down list. Basically, each list element is separated by a 1px grey bar. This effect is easy, apply bottom-border: solid 1px black;
On hover, I want the top and bottom borders of the selected item to become white. Unfortunately, setting the top and bottom borders on the list item element, does not change the bottom border of the list item above it and I end up with the top border staying black and the bottom border becoming white.
Is there a css only way to achieve this effect?
The desired effect is shown here:
This would be a perfect use of the nonexistent previous-sibling selector. Unfortunately, it being nonexistent at all, I'd take a different approach. If you can change the border to be on top, the next-sibling selector will work perfectly:
ul > li:hover, ul > li:hover + li {
border-top: 1px solid white;
}
Demo: http://jsfiddle.net/mattball/ZNR94/
there is apparently looking at a CSS selector to the elements prior siblings, only for the following, look at this example:
<html>
<head>
<title></title>
</head>
<style type="text/css">
ul {
list-style: none;
width: 50%;
margin: 50px auto;
}
li {
background: #ccc;
border-bottom: 1px solid #000;
height; 20px;
}
li:hover + li, li:hover {
border-bottom: 1px solid #FFF;
}
</style>
<body>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<p></p>
</body>
</html>
so it is difficult only with css
I have a simple ul list. the li's contain simple a href's.
I have a background and all that on the li and I want to change the li's border when the a href is mouseover...
Is that possible?
<ul>
<li>Button 1</li>
</ul>
anyway, I need the li border to change on mouseover... this seems simple, but I can't figure it out.
I would make the li the same size as the a tag.
then in your css file:
ul li {
border: 1px solid #000000;/*Black 1px border*/
}
ul li:hover {
border: 2px dotted #ff0000; /*Red 2 pix dotted line border*/
}