I'm sorry if this should be more obvious, but I've spent a lot of time searching and can't seem to fix my problem.
I'm trying to get a specific arrow shape for a navigation list. It works perfectly on my PC on firefox and chrome, but when I take it to safari on my ipad, there's a 1px space between my :before pseudo element and the background for the link. Is there any way to fix this so that they're aligned correctly on both?
<ul id="listnav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
</ul>
css
#listnav {
list-style-type: none;
float: right;
padding: 0;
margin: 0;
}
#listnav a:link, a:visited {
display: block;
color: #ffffff;
background-color: #111111;
height: 20px;
width: 220px;
text-align: left;
padding: 3px;
margin:0 15px 5px 10px;
text-decoration: none;
position: relative;
border: none;
}
#listnav a:hover, a:active {
background-color: #462530;
color: #e2d276;
}
#listnav a:before {
content: "";
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right: 8px solid #111111;
position: absolute; left: -8px; top: 0;
border-radius: 1px;
padding: 0;
}
#listnav a:hover:before {
border-right-color: #462530;
}
jsfiddle link
Thanks for your help!
Related
Hi I am trying to develop navigation bar using CSS.
I am display menus in navigation but these menus are not displaying as expected. I am trying to display as below.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
border-top: 4px solid #2e92fa;
}
<ul>
<li><a class="active" >Product Name</a></li>
<li><a class="active" >Dashboard</a></li>
<li><a >Reports</a></li>
<li><a >Map</a></li>
</ul>
Can someone help me to change css classes in order to look like as below image? Any help would be appreciated. Thank you
Is that the way you want it to be ?
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px 20px 16px;
text-decoration: none;
border-top: 6px solid transparent;
}
li a:hover {
background-color: #222;
border-top: 6px solid #2e92fa;
}
li a:active {
background-color: #000;
border-top: 6px solid blue;
}
<ul>
<li><a class="active">Dashboard</a></li>
<li><a>Reports</a></li>
<li><a>Map</a></li>
</ul>
You can use psuedo classes for this
:active works on click
:hover works on mouse over
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-top: 4px solid transparent;
}
li a:hover {
background-color: #111;
border-top: 4px solid #2e92fa;
}
li a:active
{
border-top:4px solid blue;
}
<ul>
<li><a class="active" >Dashboard</a></li>
<li><a >Reports</a></li>
<li><a >Map</a></li>
</ul>
I've got a side bar which contains a list, however I want a triangle located at the right side of the div. Now I know about the border trick, but then the text isn't located at the same location where it should be.
JSFiddle: http://jsfiddle.net/ppX53/44/
This is how my code looks like:
HTML:
<li id="activeMenuLi">
Admin Panel
</li>'
CSS:
.multilevelpushmenu_wrapper li #activeMenuLi{
width: 213px;
height: 45px;
border-top: 20px solid transparent;
border-right: 30px solid red;
border-bottom: 20px solid transparent;
}
How it looks like now:
The triangle is not complete, but it needs to be :).I think you know how I want it to look like.
I Use the following sidebar: link.
Note: I am not a complete rookie with CSS. I just hate building sidebars ^^. I'll try building a JSFiddle.
OfficialBAMM
Taking a look at your code, the problem is that you're attempting the "border-trick" on the li itself instead of a :before/:after pseudo-element. If you move the borders to a pseudo-element, it works. I've provided an example below.
body, html {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif
}
h2 {
margin: 0 0 0.5em;
padding: 0.5em;
}
div {
background-color: #40516F;
color: #FFF;
width: 213px;
position: relative;
}
ul, li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
ul { width: 213px; }
li > a {
color: #FFF;
border-top: 1px solid #445675;
padding: 0.6em;
display: block;
position: relative;
text-decoration: none;
}
li > a:hover {
background-color: #364155;
color: #FFE;
}
li.is-active > a:before {
position: absolute;
content: "";
top: 8px;
right: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-left: none;
border-right-color: orange;
}
<div>
<h2><i class="fa"></i>About</h2>
<ul>
<li class="is-active">Our Beliefs
</li>
<li>Our Doctrines
</li>
<li>Our Constitution
</li>
<li>Our Leaders
</li>
<li>Our History
</li>
<li>Church Links
</li>
</ul>
</div>
I'm attempting to create a simple drop down menu for. What I have currently looks like the following: http://jsfiddle.net/Wt9UC/
Now, what I'm aiming to achieve is something more in the lines of what Fiverr has, see for reference.
To clarify, I'm attempting to get borders (top, left, right) around the menu item hovered and around the entire box of sub-items which appears on-hover. If I'm being unclear in my wording the following image might help.
I tried playing around with layers (e.g. bringing the sub-items to the front in hopes of the border line being covered) but it didn't work out very well.
My HTML:
<ul id="menu">
<li>Test
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
</ul>
My CSS:
#menu a {
color: black;
}
#menu {
padding: 0;
margin: 0;
list-style-type: none;
height: 30px;
}
#menu li {
float: left;
}
#menu li a {
padding: 9px 20px;
display: block;
text-decoration: none;
font-size: 12px;
}
#menu a:hover {
color: #c5cbc9;
border-radius: 3px;
border-left: 1px solid;
border-top: 1px solid;
border-right: 1px solid;
}
/* Submenu */
#menu ul {
border-radius: 3px;
border: 1px solid;
position: absolute;
left: -9999px;
top: -9999px;
list-style-type: none;
}
#menu li:hover { /*had bg*/
position: relative;
}
#menu li:hover ul { /*had bg*/
left: 0px;
top: 30px;
padding: 0px;
}
#menu li:hover ul li a {
padding: 5px;
display: block;
width: 168px;
text-indent: 15px; /*had bg*/
}
#menu li:hover ul li a:hover {
text-decoration: underline;
}
Thanks for your time!
Here is a Complete tutorial for building a Mega Menu. Hope this helps.
http://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129
Demo Link : http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.html
Hover on "4 column"/ Thats your exact requirment/
u need to do the following:
Add a "border-bottom: 1px solid #FFF" to your "#menu li a {}" and then move your dropdown 1px up.
link to fiddle http://jsfiddle.net/cL2x7/
Any lists that I make with the following CSS appear differently in IE8 and FF4. IE8 doesn't have rounded corners, but FF4 doesn't change colour when I hover over it. Are either of them right?
ul#mend {
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
float: left;
text-align: left;
}
ul#mend li {
display: inline;
list-style: none;
}
ul#mend li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#mend li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #FF99CC;
color: #034af3;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
ul#mend li a:hover {
background-color: #000000;
text-decoration: none;
}
ul#mend li a:active {
background-color: #a6e2a6;
text-decoration: none;
}
ul#mend li.selected a {
background-color: #fff;
color: #000;
}
Edit: Added HTML
<div id="menucontainer">
<ul id="mend">
<li>#Html.ActionLink("TicTacToe", "TicTacToe", "Games")</li>
</ul>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("French", "French", "Home")</li>
</ul>
</div>
Internet Explorer doesn't support rounded corners natively. You need to use a hack to get that done.
IE 9 now supports rounded corners. I'm partial to this solution for previous versions of IE:
CSS3 Pie
I might be missing something but the second list you have included (id="menu") doesn't have any corresponding CSS in your example.
Backing up what the others have said IE8 doesn't support border-radius.
I want to create a very simple tab style that looks like this:
_____ _____ _____
_|_____|_| |_|_____|______________
So basically there is a horizontal border on the bounding box that breaks for the active tab. I'm using a basic list, with the following CSS, but the outer border always appears over the individual tabs. I've tried various positioning and z-index as well to no avail.
ul.tabHolder {
overflow: hidden;
clear: both;
margin: 1em 0;
padding: 0;
border-bottom: 1px solid #666;
}
ul.tabHolder li {
list-style: none;
float: left;
margin: 0 3px -1px; /* -1 margin to move tab down 1px */
padding: 3px 8px;
background-color: #444;
border: 1px solid #666;
font-size: 15px;
}
ul.tabHolder li.active {
background-color: #944;
border-bottom: 1px solid #944;
}
Try this solution by Eric Meyer.
Content below copied from the site to ensure the answer is still valid if the site closes, changes or breaks.
#navlist {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
display: inline;
}
#navlist li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
color: #000;
background: #AAE;
border-color: #227;
}
#navlist li a#current {
background: white;
border-bottom: 1px solid white;
}
<div id="navcontainer">
<ul id="navlist">
<li id="active">Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>
</div>
ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.
Changing your existing code as little as possible - try display: inline-block for the li tags, with the border on a .menu container div:
.menu {
border-bottom: 1px solid #666;
}
ul.tabHolder {
overflow: hidden;
margin: 1em 0 -2px;
padding: 0;
}
ul.tabHolder li {
list-style: none;
display: inline-block;
margin: 0 3px;
padding: 3px 8px 0;
background-color: #444;
border: 1px solid #666;
font-size: 15px;
}
ul.tabHolder li.active {
background-color: #944;
border-bottom-color: #944;
}
HTML used to illustrate (added div at bottom to show blending of active tab into div colour):
<div class="menu">
<ul class="tabHolder">
<li>Menu 1</li>
<li class="active">Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div style="background-color: #944; height: 1em">
.tab {
display: inline-block;
background-color: #aaa;
padding: 4px;
border: 1px solid #888;
border-bottom: none;
position: relative;
bottom:-1px;
z-index: -1;
}
.tab-body {
position: relative;
height: 100px;
width: 200px;
padding: 4px;
background-color: #ccc;
border: 1px solid #888;
z-index: 1;
}
.tab.active {
background-color: #ccc;
z-index: 2;
}
<div class="tab tab1">Tab 1</div>
<div class="tab tab2 active">Tab 2</div>
<div class="tab tab3">Tab 3</div>
<div class="tab-body">Tab Body</div>