I am having a problem. My bottom border is "overlapping" my right border on the same element.
This is how it looks like: http://awesomescreenshot.com/0311z2fy84
As you can see, the green right borders bottom, is looking messed up, because of the bottom gray border. How can I fix this?
This is the css:
.side-menu{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.side-menu li{
border-bottom: 1px solid #E6E7E9;
padding: 7px;
padding-left: 0px !important;
width: 192px;
}
.side-menu li.active{
color: #CACDD0;
border-right: 6px solid #2CC588;
width: 199px;
}
Edit: Added jsFiddle: http://jsfiddle.net/wu958/
I assume the <li> elements will have an <a> link inside?
You could add the border right to the <a> elements like so:
HTML
<li class="active">Banners</li>
CSS
.side-menu li a {
padding: 7px;
display: block;
}
.side-menu li.active a {
border-right: 6px solid #2CC588;
}
Refer to this JsFiddle which shows a better working example.
try this:
.side-menu{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.side-menu li{
border-bottom: 1px solid #E6E7E9;
padding: 7px;
padding-left: 0px !important;
width: 192px;
}
.side-menu li.active {
color: #a2a7ad;
border-right: 6px solid #2CC588;
width: 204px;
}
I simply changed the width of the class. "side-menu li.active" and seems to work.
You can use the ::after pseudo-element to avoid this kind of problems :
.side-menu li{
line-height: 35px;
padding-left: 18px !important;
width: 210px;
color: #37434f;
}
.side-menu li::after {
content: ' ';
display: block;
border-bottom: 1px solid #E6E7E9;
}
Update JSFiddle
Related
I have this element with this style added:
.checkout-step.current .number {
background-color: #d26d51;
outline: 1px solid #d26d51;
outline-offset: 4px;
}
But I not want square corners in the outline, I want round the corners, like this example:
How can I do this?
My approach is as follows. Please check JSFiddle.
I have added following HTML.
2
I have added following css.
a {
background: #999;
width: 40px;
height: 40px;
border-radius: 20px;
text-decoration: none;
color: #fff;
display: inline-block;
line-height: 40px;
position: relative;
border: 2px solid #000;
text-align: center;
}
a:after {
content: '';
display: block;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
border-radius: 30px;
border: 2px solid #f00;
}
Use border-radius property to do this.
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
**use this code **
outline we cant use radius property Instead of outline make as border and radius so i changed code like this Try This .
Html
<div class="usecode"><div class=".checkout-step.current .number">2</div></div>
css
.checkout-step.current .number {
background-color: #d26d51;
margin:15px;
}
.usecode
{
border:1px solid #d26d51;
border-radius:25px !important;
}
I have a navigation bar.
Each item has borders on the right side (execpt the 1st one, which has borders on left and right).
I'm looking for a way to hide the next/previous li's right border, disallowing a duplicate border.
You can see a lighter border on the right side of the first item.
I would need to hide the 1st item's right border or hide the 2nd one's left border, and instead activate the right side of the 1st one.
I was looking through the CSS selectors, but couldn't find pretty much anything.
Almost all the selectors are for selecting a child from parent.
CSS
#nav {
width: 100%;
height: 50px;
position: fixed;
top: 0;
margin-top: 25px;
z-index: 9;
left: 0;
display: inline;
text-align: center;
}
#nav li {
list-style: none;
display: inline;
padding: 7px;
margin-left: 2px;
margin-right: 2px;
height: 100%;
border-right: 1px solid #E3E3E3;
transition: 0.2s ease;
}
#nav li:nth-of-type(1) {
border-left: 1px solid #E3E3E3;
}
#nav li:hover:nth-of-type(1) {
border-left: 2px solid #C4C4C4;
border-right: 2px solid #C4C4C4;
}
#nav li:hover:nth-of-type(2){
border-left: 2px solid #C4C4C4;
border-right: 2px solid #C4C4C4;
}
#nav li:hover:nth-of-type(2) #nav li:nth-of-type(1){
border-left: 0px solid transparent;
}
HTML
<nav id="nav">
<li>Etusivu</li>
<li>Tietoa Meistä</li>
<li>Hinnasto</li>
<li>Yhteystiedot</li>
</nav>
FIDDLE
Sorry for the messy explanation.
http://jsfiddle.net/qp6sd0hc/
give -7px margin-left to nav li because by default display inline give some margin between elements
nav li{ margin-left: -7px; }
So I was creating a design and when I tested it the border was a bit out on the left from the content. It didn't create a border right around the content inside, it created a bigger border.
HTML
<ul id="profile_stats">
<li class="top"><b>100</b><br /><i>short</i></li>
<li class="top"><b>100</b><br /><i>long</i></li>
<li class="top"><b>100</b><br /><i>images</i></li><br />
<li class="bottom"><b>10</b><br /><i>friends</i></li>
<li class="bottom"><b>10</b><br /><i>followers</i></li>
</ul>
CSS
ul#profile_stats {
float: right;
list-style-type: none;
border-radius: 5px;
margin-right: 10px;
border: 1px solid #222;
width: 180px;
}
ul#profile_stats li {
float: left;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul#profile_stats .top {
width: 60px;
background: #B0B0B0;
border-bottom: 1px solid #FFF;
}
.top:not(:nth-of-type(1)) {
border-left: 1px solid #FFF;
}
.top:not(:nth-of-type(3)) {
border-right: 1px solid #000;
}
ul#profile_stats .bottom {
width: 90px;
background: #555;
border-top: 1px solid #000;
}
JSFiddle: http://jsfiddle.net/rU8N9/8/
By default most browsers render ul with some left-side padding, I think that's what's interfering with your design, try:
ul {padding-left: 0;}
Hope it helps.
ul {padding: 0px 0px 0px 0px;}
I have a vertical menu having an item "Click here to get the scientific name".
on hover it is showing like
I need to get the overflow part after the black background image to be in the next line(i cannot increase the image width at all.). How can I write the style for that.
css:
on hover
{
display: block;
background: url('/../.png') no-repeat 0px 2px #2F2F31;
text-decoration: none;
color:..;
}
This is coming under
<td>
<div id="first">
<ul id="second">
<li>Click here to get the scientific name
And css:
#first {
display: block;
width: 180px;
min-height: 50px;
float: left;
}
ul#second {
display: block;
clear: both;
margin: 50px 0px 12px 0px;
border-bottom: 1px solid
#C8C8C8;
}
ul#second li {
border-top: 1px solid
#C8C8C8;
padding: 0px;
display: block;
}
ul#second li a {
color:
#004C8E;
margin: 4px 0px 4px 0px;
padding: 4px 0px 4px 12px;
display: block;
text-decoration: none;
font-size: 12px;
background: url('/../.png') no-repeat 0px 2px;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background:
transparent;
}
On hover, you should explicitly set the width of the element to equal the width of the image.
FOr this you can use word-wrap:break-word;. Write like this:
p{
word-wrap:break-word;
}
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}