I am using the selectors first-child and last-child to apply rounded corners to an unordered list.
The problem I am encountering is that the right hand border of the last list item is not showing.
I define the borders like so:
border: 1px solid hotpink;
border-right: 0;
Setting the right hand border to 0 to prevent a double bordering, then in the last-child I give the border-right a width of one.
But this is leaving me without a right-hand border on the last child and I am unsure why, as you can see below:
Here's my entire CSS and a JSFiddle:
ul, li {
margin: 0;
padding: 0;
}
.menu {
width: 90%;
margin: 0 auto;
height: 30px;
list-style: none;
}
.menu li {
box-sizing: border-box;
display: inline-block;
border: 1px solid hotpink;
border-right: 0;
padding: 0 0.5em;
}
.menu li:first-child {
border-top-left-radius: 5px;
}
.menu li:last-child {
border-top-right-radius: 5px;
border-right: 1px;
}
http://jsfiddle.net/QFvr6/
Instead of using border-right: 0; you should use border-right-width: 0; and for the :last-child selector, you need to use
.menu li:last-child {
border-top-right-radius: 5px;
border-right-width: 1px;
}
Demo
The issue is that when you use border-right: 0; it will reset the size, type and the color as well, so even if you use border-right-width: 1px; only, it won't work, so you need to use border-right-width: 0; for the .menu li as well.
Your rule is not complete : border-right: solid 1px; or it should be border-right-width:1px;
DEMO
Fixed, you forgot you specified border-right cannot have border:
.menu li:last-child {
border-top-right-radius: 5px;
border-right: 1px solid #FF69B4;
}
Related
i need the borders of my list to appear like this on the screen, Im not able to put the white spacing between the border-bottom and the border-right.
This is my code: https://jsfiddle.net/w1n72hkx/3/
HTML:
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
CSS:
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
display: inline;
padding-right: 5px;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
Here i attach an image of how it should look like:
Just apply a bottom and top margin to your li elements and set their display to inline-block in order to make the margin matter.
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding: 0 5px;
border-color: DarkTurquoise;
}
.barraDatosSociales li {
padding-right: 5px;
/*Here' what changed*/
display: inline-block;
margin: 5px 0;
border-collapse: separate;
}
.barraDatosSociales li:not(:last-child) {
border-right: solid;
border-color: DarkTurquoise;
}
.barraDatosSociales li:not(:first-child) {
padding-left: 5px;
}
<div>
<ul class="barraDatosSociales">
<li>Valoración 4,6 (267 votos)</li>
<li>108 comentarios</li>
<li>716 veces compartido</li>
</ul>
</div>
There are many ways to separate the internal borders:
you could move up list-items with a negative top value, e.g.
.barraDatosSociales li {
display: inline;
padding-right: 5px;
position: relative;
top: -2px;
}
or you could add a padding-bottom to the outer container
.barraDatosSociales {
border: solid;
border-top: none;
border-right: none;
margin-right: 3%;
padding-bottom: 2px;
border-color: DarkTurquoise;
}
You need a little modification in the css for the list-items.
Inline elements do not accept top/bottom padding and margins. So try using display: inline-block
.barraDatosSociales li {
display: inline-block;
padding: 5px 15px;
}
I have a selector created as a component:
<my-selector
...
</my-selector>
and this is its css file:
my-selector{
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px;
}
.select-container {
position:relative;
display: inline;
margin-right: 10px;
}
.select-container:after {
content:"";
position:absolute;
pointer-events: none;
}
.select-container:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: .5em;
right: .75em;
border-top: 5px solid black;
}
select::-ms-expand {
display: none;
}
}
The problem I've is the distance between the words and the left margin. I've tried margin-left, padding and others in order to remove it or make it smaller but without success.
Any suggestions?
You added the padding via the css for the selector:
select {
-webkit-appearance: none !important;
-moz-appearance: none;
padding: .5em;
background: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 3px 26px; /* this is the problem, and it's overwriting the padding attribute 4 lines up */
}
you need to remove the first incidence of padding, then set padding to something like:
padding: 3px 26px 3px 5px; /* top right bottom left */
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 did this before but I can't remember how to do it again.
Image of what i'm trying to get:
and what I have so far
In between each link,, theres two borders. yes I know how to make the effect, put two borders together. But the problem is I can't do it!
At first I tried Jefferey ways Technic.
nav ul li:before { border-left: 1px solid red; content: ''; margin: 0 -30px; position: absolute; height: 20px; }
nav ul li:after { border-right: 1px solid white; content: ''; margin: 0 39px; position: absolute; height: 20px; }
It worked, except the borders from the left and right end of the nav is sticking out. I tried :first-of-type and :last-of-type to try to remove the borders at the end, but they didn't go away.
Then, I tried just using both :first-of-type and :last-of-type to create the borders,but again. it didn't work. So I don't really know what to do to create the effect! I wish there was a way to remove the front and end borders with Jefferey Ways code but I can't. Can anybody help?
Heres the whole css of the nav.
nav { background: #282828 url(../images/nav-bg.png) repeat-x; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; margin: 24px auto; padding: 11px 29px; width: 670px; }
nav ul {}
nav ul li { display: inline; padding: 32px; margin: 0 auto; }
nav ul li:before { border-right: 1px solid red; }
nav ul li:odd { border-right: 1px solid white; }
nav ul li a { color: #626262; height: 20px; }
#nav {
background: #282828 url(../images/nav-bg.png) repeat-x;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-o-border-radius: 6px;
margin: 24px auto;
padding: 11px 29px;
width: 670px; }
#nav ul { list-style: none; padding: 0; margin: 0;}
#nav ul li {
display: inline;
padding: 32px;
margin: 0 auto;
border-left: 1px solid #LIGHTERCOLOR;
border-right: 1px solid #DARKERCOLOR;
}
#nav ul li:first-child { border-left: 0; }
#nav ul li a { color: #626262; height: 20px; }
But I would suggest you cut out the separator as an image and put it on li as
background: transparent url(border-image.png) left center no-repeat;
and on the li:first-child have
background: none;