I have a drop down menu and it seems to be cut of due to the parent div i.e if i increase the height of the parent div, the drop down menu seems to come visible. please help. and below is my code:
MarkUp
<div id="main-navigation" class="container">
<div class="menu rounded">
<ul id="navigation" class="l_tinynav1">
<select id="tinynav1" class="tinynav tinynav1">
</div>
</div>
CSS
#main-navigation .menu ul
{
background: none repeat scroll 0 0 #FFFFFF;
border-bottom: 1px solid #D51386;
border-left: 1px solid #D51386;
border-radius: 0 0 5px 5px;
border-right: 1px solid #D51386;
margin: 0 auto;
min-height: 38px;
overflow: visible;
width: 98%;
}
#main-navigation .menu li
{
border-left: 1px solid #E1E1E1;
border-right: 1px solid #C1C1C1;
float: left;
height: 38px;
position: relative;
top: 0;
}
It may be that you have overflow:hidden; on one of wrap divs .menu .rounded #main-navigation or .container, check them.
On inspecting your site, I found that you're using ul and li as custom dropdown menu. Thr reason for cut off is the the width of .va_sort_list_wrap.
Try changing it to
.va_sort_list_wrap {
width: 132px;
}
Related
I got issue with my border right in my <li>
as you see the yellow right border is a bit trimmed at the bottom,I tried find a solution for this but I could not, this happen when the user zoom in the browser.
any ideas what can be?
this is my jsfiddle:
https://jsfiddle.net/veft8jw9/
You could use box shadows instead of borders like so:
.sidebar-nav li {
box-shadow: inset 0 -1px 0 0 blue;
padding: 15px;
}
.sidebar-nav li:hover {
box-shadow: inset 0 -1px 0 0 blue, inset -3px 0 0 0 red;
cursor: pointer;
}
it's the default rendering of border. when the borders are applied on same element, this is how they connect with adjacent border
You can use :after on li tags and display it on hover as shown in fiddle below.
div {
width: 200px;
height: 200px;
border: 50px solid;
border-color: red blue green yellow;
}
/* your solution */
.sidebar-nav li {
position: relative;
border-bottom: 1px solid blue;
padding: 15px;
}
.sidebar-nav li:hover:after {
content: '';
display: block;
border-right: 5px solid yellow;
position: absolute;
width: 5px;
height: 100%;
right: 0;
top: 0;
}
<div></div>
<h1>your solution</h1>
<ul class="sidebar-nav">
<li>link 1</li>
<li class="active" au-target-id="34">
link 2</li>
<li class="" au-target-id="34">
</ul>
CSS borders all have chamfers at their ends to fit with the connecting border.
I would suggest applying a wrapper around the bordered div with a yellow background. Then apply right padding to the bordered div to get the yellow area.
you can provide border with pseudo css, please use below css for same html.
.sidebar-nav li {
border-bottom: 1px solid blue;
padding: 15px;
position:relative;
}
.sidebar-nav li:hover {
cursor: pointer;
}
.sidebar-nav li:hover:after {
content:"";
position:absolute;
width:5px;
top:0px;
bottom:0px;
right:0px;
background:#f00;
}
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'm trying to create a tab effect, as you see in this fiddle: http://jsfiddle.net/kZTUK/
The problem is that the li which is active needs to have a white bottom border so as to make it actually look like a tab.
I can't figure how this is done whilst keeping the li as blocks (I need them as display:block for other reasons.)
Any idea. Thanks,
<style>
.item-list {
border-bottom: 1px solid grey;
overflow: hidden;
}
li {
display: block;
float: right;
margin: 0 30px 0 0;
padding: 5px 10px;
}
li.active {
border:1px solid black;
border-bottom:none;
}
</style>
<div class="item-list">
<ul class="my_ul">
<li class="first active">one</li>
<li class="">two</li>
<li class="">three</li>
<li class="last">four</li>
</ul>
</div>
Without tweaking your code too much, you change overflow to a static height in your .item-list class.
.item-list {
border-bottom: 1px solid grey;
height: 31px;
}
li {
display: block;
float: right;
margin: 0 30px 0 0;
padding: 5px 10px;
}
li.active {
border:1px solid black;
border-bottom: 2px solid #fff;
}
http://jsfiddle.net/HEUqC/12/
Change your .item-list to a static height of 30 - 1 = 29px , so that the borders overlap, then set the bottom border to white instead of none.
.item-list {
border-bottom: 1px solid grey;
height: 29px;
}
li {
display: block;
float: right;
margin: 0 30px 0 0;
padding: 5px 10px;
}
li.active {
border:1px solid black;
border-bottom: 1px solid white;
}
http://jsfiddle.net/kZTUK/4/
Note the background-color:
<div class="item-list">
<ul class="my_ul">
<li class="first active">one</li>
<li class="">two</li>
<li class="">three</li>
<li class="last">four</li>
</ul>
</div>
.item-list {
border-bottom: 1px solid grey;
height: 31px;
}
li {
display: block;
float: right;
margin: 0 30px 0 0;
padding: 5px 10px;
}
li.active {
border:1px solid black;
border-bottom: solid white;
background-color: white;
}
Hello :) Is it possible to have bottom border in the center (without using pictures). Something like separator between list items which doesn't go from edge to edge?
Thanks
You can do that with two elements easily, here's a demo http://jsfiddle.net/slash197/JbFrN/6/
Not directly. But if it's OK to insert additional elements just for the sake of the border then you can make these elements less wide than your "proper" list items to achieve the desired effect.
See an example.
Old post, but I was wondering how to do this effect on a day of 2017
I did it with pseudo element ::after and display: inherit
li::after {
content: '';
display: inherit;
width: 50%;
margin: 10px auto;
border-top: 1px solid #DFDFDF;
}
I know it's an old question but I found this thread using google.
It can also be accomplished with :after
div:after {
content: '.';
display: block;
height: 1px;
width: 200px;
margin: 0px auto;
text-indent: -9999px;
border-top: 1px solid #585858;
}
Demo
<div class="dropDown">
<ul class="ddMenu">
<li>ONe</li>
<li>Two</li>
<li class="last">Three</li>
</ul>
</div>
.dropDown {
background-color: #F6F6F2;
border: 1px solid #D6DAC4;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
margin-top: -1px;
padding: 10px;
width: 110px;
}
ul, ol {
list-style: none outside none;
margin: 0;
padding: 0;
}
ul.ddMenu li {
border-bottom: 1px solid #E9EADE;
box-shadow: 0 1px #FFFFFF;
display: list-item;
line-height: 2.3;
}
ul.ddMenu li a {
display: block;
padding: 4px 10px;
}
<h1 class="center underlined">
<span>My title</span>
<h1>
h1 {
&.center.underlined {
display: flex;
align-items: center;
justify-content: center;
span {
border-bottom: 3px solid;
}
}
}
My code below. This comes out to be a horizontal menu bar. I want to put this in the footer; therefore, has to pop out.
HTML
<ul id="nav">
<li>
Chicago Bears
<ul>
<li>Running Backs</li>
<li>Quarterbacks</li>
<li>Lineman</li>
</ul>
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
ul li {
position: top;
}
li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}
li:hover ul {
display: block;
}
Answered another question (that was deleted) about the same premise, a menu that pops "up" instead of down, here are my results for future users:
Created my own .dropup-menu class to not mess with the default functionality of the dropdown menu. In this class, i positioned the dropdown menu above the current menu item along with the arrow so now once the menu with a dropdown available is clicked, the menu opens upwards.
CSS
.dropup-menu {
bottom: 100%;
top: auto !important;
}
/* position the arrow downwards, pointing to the menu */
.navbar .dropup-menu:before {
border-bottom: none;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid rgba(0, 0, 0, 0.2);
left: 7px;
top: 100%;
}
.navbar .dropup-menu:after {
border-bottom: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #fff;
left: 10px;
top: 100%;
left: 6px;
}
/* point the caret up*/
.up {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #000000;
border-top: none;
}
Markup
In order to use the class we have to include it inside the container of the dropdown menu, like so:
<ul class="dropdown-menu dropup-menu">
<li>...</li>
</ul>
Demo: http://jsfiddle.net/andresilich/NMs4Z/2/
I guess the OP simply ask for a way to place the dropdown selection above the menu bar. As of 2.3.1, the actual version of Bootstrap, it's already integrated and explayned in the examples!
You simply need to add the class dropup to the parent of your dropdown element
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
Check the docs here, Dropup Menus the last part of the Button Dropdown section.