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; }
Related
I have the following div which aligns to the left side of the screen
css
#nav {
position: fixed;
height: 50px; width: 50px;
display: block;
background-color: #000;
}
This div contains an icon acting as a link
html
<div id="nav">icon</div>
I want the div to be a triangle (pointing towards the right) and not a square
I find this site useful: https://css-tricks.com/examples/ShapesOfCSS/
Right-facing triangle:
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
You can adjust the border properties to change the width, height, and color of the triangle.
Something like this is probably what you're looking for: https://jsfiddle.net/kh2xsoh2/1
HTML
<div id="nav"><span>icon</span></div>
CSS
#nav {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #000;
border-bottom: 25px solid transparent;
position: fixed;
}
#nav span {
position: absolute;
line-height: 0;
left: -45px;
color: white;
}
As you can see, when the div expands I have no option to scroll down and I'm wondering how I would go about fixing this. Here is my css
<style>
#cust_info {
width: 300px;
min-height:350px;
margin: 0 auto;
padding: 1em;
background-color: #fff;
border-radius: 25px;
border: 2px solid #66CCFF;
padding: 20px;
position: fixed;
top: 100px;
left: 40px;
font-family: arial;
}
.more {
display: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff; }
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left; }
a.hideLink {
background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; }
</style>
I gave the div a min height so it would expand without text leaving the area, but when the div expands past the screen I lose most of the div.
Please remove position:fixed from #cust_info id.
Removing that will automatically give a scroll in your page.
For keeping it left align, just give float:left to #cust_info.
LIVE DEMO
Consider the following menu example: (note the red border)
<div class="menu-wrapper">
<div class="menu-item">Hello</div>
<div class="menu-item">Stack</div>
<div class="menu-item">Overflow</div>
</div>
.menu-wrapper {
display: flex;
flex-direction: column;
width: 200px;
background-color: #ccc;
border-left: 5px solid #bbb;
height: 300px;
}
.menu-item {
padding: 20px;
cursor: pointer;
}
.menu-item:hover {
margin-left: -5px;
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
Now, imagine that the height of menu-wrapper is small, and we want the vertical scroll bar to appear. For example, we could replace:
height: 300px;
with:
height: 100px;
overflow-y: auto;
But, the red border disappears then:
Why is that? How would you fix that?
PLAYGROUND HERE
Since overflow hides what overflows, you may instead draw the border on the background or with an inset shadow , so it is drawn on the whole height of cntainer : DEMO
.menu-wrapper {
display: flex;
flex-direction: column;
width: 200px;
background-color: #ccc;
box-shadow: inset 5px 0 #bbb;/* here draws an inside left border via shadow */
height: 300px;
height: 100px;
overflow:auto;
}
.menu-item {
padding: 20px;
cursor: pointer;
}
.menu-item:hover {
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
I think this works:
The problem is that the red border of menu-item is hiding behind the grey border of the menu-wrapper. So, I removed the border from the wrapper and put it in the item, like this:
.menu-wrapper {
...
/* border-left: 5px solid #bbb; No longer needed */
height: 100px;
overflow-y: auto;
}
.menu-item {
padding: 20px;
cursor: pointer;
border-left: 5px solid #bbb; /* Add border to menu-item rather than the wrapper */
}
.menu-item:hover {
/* margin-left: -5px; No longer needed*/
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
Note: The grey border of the menu-wrapper doesn't take the full height anymore. You could use box-shadow on the wrapper (as answered by GCyrillus) to fix this.
You could integrate both the solutions, so the design won't look too bad in older browsers where box-shadow isn't supported.
.menu-wrapper {
...
box-shadow: inset 5px 0 #bbb;
}
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
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;
}