1: http://i.stenter code
i want to remove left side of user group tab sharp sized border. i want to remove that small gap of white in left side of user group tab
This is the css applied for selected tab.
ul.tabs li.selected a {-moz-border-bottom-colors: none;-moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 white; border-color: #B7B7B7 #B7B7B7 White; border-image: none;
border-style: solid; border-width: 1px; font-weight: bold;
position: relative; top: 0;}
ul.tabs li a {-moz-border-bottom-colors: none; -moz-border-left-colors: none;
-moz-border-right-colors: none; -moz-border-top-colors: none; background: none repeat scroll 0 0 #D8DAE2; border-color: #CCCCCC #CCCCCC #B7B7B7; border-image: none;
border-style: solid; border-width: 1px; color: Black; font: 11px verdana,helvetica,sans-serif;enter code here outline: medium none; padding: 5px 16px;
position: relative; text-decoration: none; z-index: 1;}
Make a change to your css:-
ul.tabs li.selected a {
top:1px; //change
}
if you are using jquery ui, the margin right is on the li element, not on a.
So your code should look like:
ul.tabs li { margin-right:0 }
if still not working, add
ul.tabs li { margin-right:0 !Important; }
Related
I have a list , then I set its css to :
.dropdown-menu > li {
list-style: none outside none;
height: 22px;
border-bottom: 1px dotted #e1e1e1;
width: 178px;
margin-left: 10px;
}
Then when mouse hover :
.dropdown-menu > li > a:hover{
color: #EC5B00 !important;
z-index: 3;
border-style: solid;
border-color:#dddddd #ffffff #dddddd #dddddd;
border-width: 1px 3px 1px 0px;
width: 183px;
background-color: #ffffff;
margin-left: 1px;
}
Problem :
Even I set the border to solid style, but the dotted still exists, so there're two lines (one is a dotted, and another one is solid). How to omit the dotted one on mouse hover by css?
Any help would be much appreciated, thank you..
Update :
After changing the style by all the answers, then I found one problem, one more dotted border is getting from the other li next to the current hover li, here it is : http://jsfiddle.net/gbw3fj14/
The border-bottom: 1px dotted #e1e1e1; style is set to li, you are changing the a border later, try to change your selector from li > a:hover to li:hover
.dropdown-menu > li {
list-style: none outside none;
height: 22px;
border-bottom: 1px dotted #e1e1e1;
width: 178px;
margin-left: 10px;
}
.dropdown-menu > li:hover {
color: #EC5B00 !important;
z-index: 3;
border-style: solid;
border-color:#dddddd #ffffff #dddddd #dddddd;
border-width: 1px 3px 1px 0px;
width: 183px;
background-color: #ffffff;
margin-left: 1px;
}
jsFiddle Demo.
http://jsfiddle.net/
your wrote wrong
.dropdown-menu > li > a:hover to .dropdown-menu > li:hover
How do I add a rule above and below my nav bar? I tried an HR tag, but that seemed to make a lot of space around the nav bar. Here is my html and here is the example of how I want to do it.
http://matthewtbrown.com/jeffandcricketquilt/
http://matthewtbrown.com/jeffandcricketquilt/rule.png
If you do not want to change your html at all, you can add this to your css
nav ul:before {
border-bottom: 1px solid white;
border-top: 1px solid white;
bottom: 5px;
content: "";
left: 5px;
position: absolute;
right: 5px;
top: 5px;
z-index:0;
}
nav ul {
overflow: auto;
position: relative;
background-color:#000;
}
nav ul li{
position:relative;
z-index:10;
}
and remove the background-color from the li elements (since i added it to the ul)
Use borders and padding:
* {
margin: 0;
padding: 0;
}
nav {
text-align: center;
background: black;
color: white;
padding: .2em;
}
ul {
padding: .5em;
border: 1px solid white;
border-left: none;
border-right: none;
}
nav li {
display: inline;
list-style-type: none;
padding: 0 2em;
}
Demo
I would apply an outline to the ul tag, so the css should be:
nav ul{
outline-color: white;
outline-style: solid;
outline-width: 2px;
outline-offset: -7px;
height: 60px;
width: 848px;
}
Try applying this CSS to the nav bar:
border-top: 1px solid #eee
border-bottom: 1px solid #eee
The easiest is to add a padding to the nav element, 4px makes good with width of li elements. Also add float: left
Now add border-top and border-bottom to the ul element. Add float: left here as well. This will switch your li element around as they have a fixed width. lower the width of them to 210px and things should be fine.
CSS additions to your code:
nav {
padding: 4px
float: left;
}
nav ul {
border-top: 1px solid white;
border-bottom: 1px solid white;
float: left;
}
nav li {
width: 210px;
}
If line-height is the same as font-size you can manipulate border distance by changing padding-bottom of list element, here is my example:
.headerSection ul.navigation li a {
font-size: 12px;
line-height: 12px;
text-decoration: none ;
padding-bottom: 10px;
border-bottom-color: transparent;
border-bottom-width: 5px;
border-bottom-style: solid;
}
.headerSection ul.navigation li a:hover {
border-bottom-color: #e8bf5d;
}
I just stumbled upon css specificity, while trying to change the pagination style of my theme.
I'm using twitter-bootstrap as a base-template, but I want to change pagination.
Specifically, I want to remove the pagination border that comes with will-paginate bootstrap :
The will-paginate/bootstrap
.pagination a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD;
border-image: none;
border-style: solid;
border-width: 1px 1px 1px 0;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
I just need this :
.pagination a {
float: left;
line-height: 34px;
padding: 0 14px;
}
The problem is that if i set this in my custom.css.scss file, then bootstrap specificity is higher (check this great explanation on specificity) than mine. I even tried and use !important, but it still did not got my specificity higher.
I have solved this problem by just using the Equal specificity rule - the one that comes last, with equal specificity, is the one that counts, and just put :
.pagination a {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: #DDDDDD;
border-image: none;
border-style: none;
border-width: 1px 1px 1px 0;
float: left;
line-height: 34px;
padding: 0 14px;
text-decoration: none;
}
But this is just trashy css, because i don't need the border at all...
What would you suggest?
Just try border: none; instead of resetting every sub-property.
Also, I just checked Bootstrap's selector for pagination and it's more specific than that:
.pagination ul > li > a, .pagination ul > li > span
Try using that selector instead for your border: none.
I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.
I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any.
I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.
Here's what I have so
CODE
<div id="menu">
<ul>
<li>home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}
You can use a mixture of line-height and margin to garner such an effect, like so:
#menu ul li a {
border-bottom: 6px solid #000000;
color: #000000;
display: block;
line-height: 50px;
list-style-type: none;
margin: 20px 0;
text-decoration: none;
}
Using display: inline-block; in combination with border-bottom could cause some weird behavior line breaks if longer links contain a line-break, see http://jsfiddle.net/PQZ9H/. Alternatively, you could use a combination of background-image and background-position which has the advantage of not touching the display value.
a {
text-decoration: none;
position: relative;
background-repeat: repeat-x;
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
background-position: left 15px;
}
a:hover { background: none; }
A disadvantage is that you might have to define a background-position for every font-size you use.
Using this technique you could also remove the border from descenders like g or y adding
a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }
and
<span class="descender">A link with descenders like g or y</span>
See http://jsfiddle.net/25XNY/1
Try to this (origin russian http://artgorbunov.ru/bb/soviet/20120510/) article methods (background gradient and http://jsfiddle.net/d3WG6/)
<p>Зигварт считал <a><span>критерием истинности необходимость и общезначимость, для которых нет никакой опоры</span></a> в объективном мире.</p>
a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
Margin property can't change the border-bottom position, so
The height of the <a> element will define the position of the your border-bottom.
#menu > ul > li > a {
height: ;
}
This css is causing the text to shift upwards in Firefox when rolled over but not in other browsers
#element{
height:40px;
}
#element a,img{
vertical-align:middle;
}
#element a{
font-size:16px;
color:#d1d1d1;
text-decoration:none;
}
#element:hover a{
border-bottom: #fff 1px dotted;
}
Makes sense to me. You are adding a border of 1px width. This will change the dimensions of the element. A simple solution is to have a permanent border and just change its color:
#element a {
font-size: 16px;
color: #d1d1d1;
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: transparent;
}
#element:hover a {
border-bottom-color: #fff;
}
Add display: inline-block; and margin-bottom: -1px; to compensate for the extra pixel on the bottom on hover.
#element:hover a{
border-bottom: #fff 1px dotted;
margin-bottom: -1px;
display: inline-block;
}