Here is a live example:
http://jsfiddle.net/Pzvdv/
<ul id="navigation">
<li>HOME</li>
<li>OUR APPROACH</li>
<li>MENU</li>
<li>GET IN TOUCH</li>
</ul>
#navigation {
float: left;
list-style-type: none;
}
#navigation li {
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
#navigation li a:link {
color: White;
text-decoration: none;
}
Notice how I can click the link if I'm careful, but when I click the "tab pill" itself, the link isn't clicked.
Any workaround or better ways to accomplish this visual effect?
I want to follow the link href whether the user clicks the actual letters or the container pill.
The padding and other styles have to move from <li> to <a>.
On top of that, you have to add display:block or display:inline-block to the anchor.
Currently, your code does not work as expected, because the padding on the <li> adds a gap between the <li>s border and the anchor.
http://jsfiddle.net/Pzvdv/9/
#navigation li {
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
}
#navigation li a:link {
display: block; /* Or inline-block */
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
padding: 5px;
}
If you add some padding to the link element like so:
#navigation li a {
padding:5px
}
It should work.
Set a to display as a block, i.e.:
a { display:block; }
And add height/width to 100%, and move all padding to there too. That will make it fill the entire list item.
The css for the link needs to be applied to the anchor instead.
#navigation li {
float: left;
}
#navigation li a {
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;=
font-size: 12px;
margin-right: 6px;
padding: 5px;
cursor: pointer;
}
Like this? http://jsfiddle.net/Pzvdv/17/
You're adding all the presentation styles to the li elements instead of the actual links, just switch them and your pill menu works fine:
#navigation li {
float:left;
}
#navigation li a {
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
You should style the <a> element itself.
#navigation {
float: left;
list-style-type: none;
}
#navigation li a:link {
color: White;
text-decoration: none;
background-color: #934B00;
border-radius: 6px 6px 0 0;
color: White;
cursor: pointer;
float: left;
font-size: 12px;
margin-right: 6px;
padding: 5px;
}
Related
I'm attempting to create a navigation menu that shows a border when an item is hovered over. While it currently looks fine, the other menu items are pushed out of the way when one item is hovered over. How would I go about making them stay put?
I've tried a few methods that were answered here but none of them have worked.
I've included a fiddle below.
nav {
float: left;
width: 100%;
}
ul {
float: left;
list-style:none;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
ul li {
display: block;
float: left;
list-style: none;
position: relative;
right: 50%;
margin: 0px 0px 0px 1px;
padding: 5px 40px;
color: white;
line-height: 1.3em;
}
li a:hover {
border: solid 1px black;
padding: 5px 10px;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
}
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>MUSIC</li>
<li>STORE</li>
<li>LIVE</li>
<li>CONTACT</li>
</ul>
</nav>
View on JSFiddle
Because you are adding padding on hover. Move the padding from hover to anchor.
li a:hover {
border: solid 1px black;
}
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
border: solid 1px transparent;
padding: 5px 10px;
}
Here is the fiddle.
Move the padding property from 'li a: hover' to 'a'.
a {
color: black;
font-family: 'Quicksand', sans-serif;
text-decoration: none;
padding: 5px 10px;
}
i try to apply hover on box .. means when i drag mouse over menu items then background color must be change so for that i try this code please check
i try this
body {
background-color: black;
}
.lefttabs a {
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
font-size: medium;
color: White;
width: 133px;
margin-left: 0px;
}
.lefttabs ul {
list-style: none;
margin: 0px 20px 0px 0px;
}
.lefttabs li {
list-style: none;
padding: 0px 0px 30px 0px;
}
.lefttabs li a {
list-style: none;
display: block;
}
.lefttabs a:hover,
.offcanvas a:focus {
color: green;
background-color: White;
border-color: Yellow;
color: #000!important;
height: 20%;
width: 10px;
}
<div class="lefttabs" style="width: 187px; height: 422px;">
<ul>
<li>
<a>DASHBOARD</a>
</li>
<li>
<a> EVENTS</a>
</li>
</ul>
</div>
In the above image i hover box but this not completely fill whereas i draw box with white color so i want to fill that box through hover
any solution?
You have to display your padding to your a tag and not to your li tag.
.lefttabs li
{
list-style:none;
}
.lefttabs li a
{
list-style:none;
display:block;
padding: 0px 0px 30px 0px;
}
My dropdown works fine, except it closes before i can move mouse top of last link in it.
CSS
nav {
width: 100%;
display: inline-block;
margin-bottom: 1%;
text-align: center;
background-color: #F0F0F0;
}
nav .links {
width: 100%;
line-height: 1.2;
font-size: 100%;
text-decoration: underline;
text-align: center;
}
nav .links a {
color: #666666;
text-decoration: none;
word-spacing: normal;
}
nav .links a:visited {
color: #666666;
text-decoration: none;
}
nav .links a:hover {
color: #383838;
text-decoration: none;
}
nav .links a:active {
color: #666666;
text-decoration: none;
}
nav ul {
position:relative;
list-style:none;
color: #666666;
white-space: nowrap;
}
nav li{
position:relative;
float: left;
margin-left: 5%;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
line-height: 1.2;
}
ul li:hover ul {
display: block;
}
HTML
<nav>
<div class="links">
<ul>
<li>ETUSIVU</li>
<li>HENKILÖKUVA JA HISTORIA</li>
<li>KORISTEKERAMIIKKA</li>
<li>GALLERIA
<ul>
<li>Keramiikkaveistokset</li>
<li>Keramiikka - kuparityöt</li>
<!--Next link is the one where dropdown closes before mouse reaches it-->
<li>Krisu testi</li>
</ul>
</li>
</ul>
</div>
I tested it with Chrome and FF. CSS is not top skill for me and i think this should work but obviously im wrong :)
I would appreciate help with this greatly, thanks.
EDIT
I changed nav ul li ul as...
nav ul li ul {
z-index: 1;
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
}
and now it works just fine. So basically i just added z-index there.
There is an image right below dropdows, not sure is it possible that it messes this one? Atleast z-index did help...
I am trying to complete a navigation list that is contained within a div.
I have it set to have a border on the right of each item to space out each item. I am looking to have this border only on the middle items and not on the last item.
HTML:
<div id="container-navigation">
<ul id="navigation">
<li>home</li>
<li>about</li>
<li>solutions</li>
<li>training</li>
<li>payments</li>
<li>contact</li>
</ul>
</div>
CSS:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid #ffffff;
}
What would be the best way to accomplish this? Give the last item a unique class and create another CSS entry?
As suggested by thgaskell, here is one way of doing it:
#navigation li a {
color: green;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid red;
}
#navigation li:last-child a {
border-right: none;
}
Demo at: http://jsfiddle.net/audetwebdesign/G3mD9/
Note: the last-child pseudo-class is supported for IE9+, so a bit more limited than first-child which is good for IE7+.
If it was me, I would move the border to the left instead of the right:
#navigation li a {
border-left: 1px solid #ffffff;
}
And then I would use first-child as it is has good cross browser compatibility.
#navigation li:first-child a {
border-left: 0 none;
}
If you need to support older browsers (IE7+, etc...) you should flip the border from the right side to the left side, so that you can use the css selector first-child.
Change your current css from this:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-right: 1px solid #ffffff;
}
To:
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
border-left: 1px solid #ffffff;
}
#navigation li:first-child a {
border-left: none;
}
EXAMPLE FIDDLE
Try the :last-child Selector, the easy way.
#navigation li a:last-child {
border-right: none;
}
Create new id or class name to last list item, then
give the style like that,
#id_name a { border-right:none !important; }
As an alternative to :first-child, you can also use the adjacent sibling selector to get IE7+ support. It needs changing to border-left from border-right like other solutions too though.
#navigation li a {
color: #ffffff;
line-height: 22px;
font-size: 11px;
text-decoration: none;
padding: 5px 15px 6px 15px;
}
#navigation li + li a {
border-left: 1px solid #ffffff;
}
Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right