So I basically want to do a list, each li containing an anchor and a dropdown menu (using bootstrap). The li are contained into a div, itself contained into a ul. I successfully aligned the anchors on the left, and I would like to do the same thing for the dropdowns on the right, but it's not working. Here's the result, each element with a border to visualize its behaviour.
Here's the html...
<ul>
<li class="list_items">'.$location.'
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
More info <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<!-- items of the dropdown menu -->
</ul>
</div>
</li>
<!-- repeat... -->
</ul>
... and the css
ul
{
display: inline-block;
padding: 0;
margin-left: 20px;
margin-right:0;
vertical-align: top;
width:240px;
font-family: Verdana;
text-align: justify;
list-style-type: none;
}
#list_box // div containing the whole list
{
border-right: 2px solid #b2dba1;
border-bottom: 2px solid #b2dba1;
border-left: 2px solid #b2dba1;
border-radius: 0 0 6px 6px;
width: 230px;
margin-left: 5px;
padding-bottom: 5px;
padding-top: 5px;
background: rgba(206,232,196,0.7);
padding-right:0;
}
.list_items // all the <li>
{
padding-bottom: 5px;
margin-left: 5px;
width: 100%;
border: 1px dashed red;
}
ul .list_items .dropdown button
{
position: relative;
right: 2px;
margin-right: 0;
border: 1px solid black;
}
.dropdown // div containing the button
{
display: inline-block;
margin: 0;
padding: 0;
position: relative !important;
right: 0 !important;
border: 1px solid blue;
}
What else could be done to solve this problem? Thanks!
You could add the standard bootstrap class 'pull-right' at the dropdown div.
Then it will look like this:
<div class="dropdown pull-right">
I think that should do the trick.
Related
I have a list ul with items li. Under the list there is a box surrounded with border. The top border of the box is also the bottom border of the list items.
What I want to do know is to remove the bottom border of the active tab. That means removing the top border of the content box along the active tab. Is this possible or do I need to use a different approach?
li {
display: inline-block;
padding-top: 0;
padding: 15px;
border-right: 1px solid #e6e6e6;
cursor: pointer;
border-top: 1px solid #e6e6e6;
font-family: 'Cera';
font-size: 13px;
}
ul {
list-style-type: none;
margin: 0 auto;
border-left: 1px solid #e6e6e6;
padding-left: 0px;
}
.content-box {
display: block;
min-height: 100px;
margin: 0 auto;
border: 1px solid #e6e6e6;
overflow: hidden;
padding-bottom: 10px;
}
.active {
position: relative;
background-color: #f8f8f8;
top: -3px;
}
<ul id="menu">
<li class="active" data-nav="1">Prerender</li>
<li data-nav="2">Prefetch</li>
<li data-nav="3">Preconnect</li>
<li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender"> Prerendered page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
Here's how I'd like it to look:
I suggest that you use negative margin to overlap elements.
Use a margin-top:-1px to overlap the top border of the lower box with the bottom edge of the top boxes. This allows the background-color of the active top box to cover the top border of the lower box.
Use margin-left:-1px on all top boxes except the first one to overlap the borders on their left and right sides. Otherwise, with a border on only one side, the active box will be missing a piece of border where it rises above the others.
I've removed the white space between <li> elements because, since they are display:inline-block, that space is rendered as gaps between the boxes.
I'm using additional padding to raise the active top box, instead of using negative top. This keeps the text inside the active box at the same height as the other boxes.
I've aligned the top boxes with vertical-align:bottom to keep them flush against the bottom box.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 15px;
margin-left: -1px;
border-style: solid;
border-color: #e6e6e6;
border-width: 1px 1px 0 1px;
cursor: pointer;
font-family: 'Cera';
font-size: 13px;
vertical-align: bottom;
}
li:first-child {
margin-left: 0;
}
.content-box {
min-height: 100px;
border: 1px solid #e6e6e6;
margin-top: -1px;
padding: 10px;
}
.active {
background-color: #f8f8f8;
padding-top: 18px; /* 15 + 3 */
}
<ul id="menu">
<li data-nav="1">Prerender
</li><li class="active" data-nav="2">Prefetch
</li><li data-nav="3">Preconnect
</li><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender">Prefetched page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
If your idea is to slide down the tab to hide the border , then you should reset vetical-align on li (and eventually mind the white-space) , then increase the padding of 1px (for a one px border) and low it down of that extra pixel(s) like you tried.
li {
display: inline-block;
padding-top: 0;
padding: 15px;
border-right: 1px solid #e6e6e6;
cursor: pointer;
border-top: 1px solid #e6e6e6;
font-family: 'Cera';
font-size: 13px;
vertical-align: bottom;
}
ul {
list-style-type: none;
margin: 0 auto;
border-left: 1px solid #e6e6e6;
padding-left: 0px;
}
.content-box {
display: block;
min-height: 100px;
margin: 0 auto;
border: 1px solid #e6e6e6;
overflow: hidden;
padding-bottom: 10px;
}
.active {
position: relative;
background-color: #f8f8f8;
padding-bottom: 16px;/* increase height of 1 px here, can be any value you want */
top: 1px;/* low it done at least the border's thickness to hide */
}
body {
margin: 1em;
}
<ul id="menu">
<li class="active" data-nav="1">Prerender</li><!-- kill that white space via comments
--><li data-nav="2">Prefetch</li><!--
--><li data-nav="3">Preconnect</li><!--
--><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender"> Prerendered page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
This question already has answers here:
Any way to declare a size/partial border to a box?
(6 answers)
Closed 4 years ago.
Looks like now
Want it to look like
I have provided a picture of what I currently have and what I need need it to look like (ignore the images that aren't present in first image. Is there anyway I can make the border-right only be say 75% of height? I also was thinking about making a container inside the main container and then putting the border on the smaller inner container.
Thanks in advance for all the help/advice on this very frustrating issue!!!
<div class="col-sm-6 col-md-6 col-lg-6 header-right-menu-wrapper">
<ul class="list-inline top-element pull-right header-right-menu-list">
<li class="header-right-menu-list-item">
<a href="#" id="popuptest" class="header-right-list-text">
<span class="img-icon">
<span class="svg-icon svg-header svg-icon-Account-icon-white"></span>
</span> 'SIGN IN/UP'
</a>
<div class="container authenticated-user-profile head">
<sly data-sly-include="profile.html"></sly>
</div>
</li>
<li class="header-right-menu-list-item">
<a href="#" class="header-right-list-text">
<span class="img-icon">
<span class="svg-icon svg-icon-list-header-16px"></span>
</span> 'LIST'
</a>
</li>
<li class="header-right-menu-list-item">
<a href="#" class="header-right-list-text">
<span class="img-icon">
<span class="svg-icon svg-icon-Cart"></span>
</span>'ITEMS'
</a>
</li>
</ul>
</div>
.parent {
padding: 0 10px;
display: inline-block;
background-color: #f80000;
color: #fff;
}
li {
padding: 8px 0;
list-style: none;
display: inline-block;
}
li+li a {
border-left: 1px solid #fff;
}
a {
text-decoration: none;
display: block;
padding: 8px 16px;
}
i {
font-size:16px;
margin-right: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul class="parent">
<li><a><i class="fa fa-user"></i>SIGN IN/UP</a></li>
<li><a><i class="fa fa-list"></i>LIST</a></li>
<li><a><i class="fa fa-shopping-cart"></i>ITEMS</a></li>
</ul>
You can add the border with :after pseudo selector. Try this code.
.header-right-menu-list-item a {
display: block;
position: relative;
}
.header-right-menu-list-item a:after {
content: '';
position: absolute;
right: 0;
height: 75%;
top: 12.5%;
width: 1px;
background-color: #fff;
}
you can use pseudo elements for this
.outer{
display: inline-flex;
background-color: maroon;
}
.item{
color: white;
padding: 10px 30px;
position: relative;
}
.item:not(:last-child):after{
content: '';
position: absolute;
height: 60%;
width: 2px;
background-color: white;
top: 20%;
right: 2px;
}
<div class="outer">
<div class="item">item01</div>
<div class="item">item02</div>
<div class="item">item03</div>
</div>
You can define css for <ul class="list-inline top-element pull-right header-right-menu-list"> something like this :
header-right-menu-list {
background-color: red;
color: white;
padding: 3px;
}
and than for <li class="header-right-menu-list-item">
header-right-menu-list-item {
border-right: 1px solid black;
}
You just want to add the border on the <a> and give the lia bit of padding.
This way the border is the size of the inside element
ul {
background-color: red;
color: white;
display: inline-block;
padding: 0 10px;
}
li {
list-style: none;
display: inline-block;
padding: 10px 0;
}
a{
display: block;
padding: 10px 15px;
}
li + li a {
border-left: 1px solid white;
}
<ul>
<li><a>FREED</a></li>
<li><a>FROM</a></li>
<li><a>DESIRE</a></li>
</ul>
I have menu that open inline block links
this menu work fine in all browser except IE11
in chrome appear like this
in IE11 appear link this
this snippet
.rlist--inline {
list-style: none;
padding: 0;
margin: 0;
}
.rlist--inline li{
display:inline-block;
padding:10px;
border:1px solid black;
}
.dropdown__menu li{
padding:5px;
}
.dropdown__menu a {
white-space: nowrap;
padding: 12px 20px 8px;
}
* {
box-sizing: border-box;
}
.dropdown:hover>.dropdown__menu {
display: flex;
background: #ed1c24;
left:-100%;
}
.dropdown {
display:inline-block;
position: relative;
background:red;
}
.dropdown__menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
font-size: 14px;
text-align: left;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
<ul class="rlist--inline">
<li class="menu-item"><a><span>Topics</span></a></li>
<li class="dropdown menu-parent" >
<a title="Journal" class="dropdown__toggle">
<span>Journal</span>
</a>
<ul class="rlist dropdown__menu">
<li>
<a title="Current Issue"">
<span>Current Issue</span>
</a>
</li>
<li>
<a>
<span>Archive</span>
</a>
</li>
<li>
<a >
<span>Article Series</span>
</a>
</li>
</ul>
</li>
</ul>
how I can fix it in IE11?
I tried to make clearfix & make right:-100% , but still there is problem.
any help ............................................................
First, there is issue in your HTML with double quote here
<a title="Current Issue"">
Second, it looks like when you display flex in a row in IE it does not compute new width and instead keeps the same width from when flex box was a column. I am not exactly sure what you want to accomplish but if you are trying to make submenues red you can apply red color and shadow directly to your list items like so:
.rlist--inline {
list-style: none;
padding: 0;
margin: 0;
}
.rlist--inline li {
display: inline-block;
padding: 10px;
border: 1px solid black;
}
.dropdown__menu li {
padding: 5px;
}
.dropdown__menu a {
white-space: nowrap;
padding: 12px 20px 8px;
}
* {
box-sizing: border-box;
}
.dropdown:hover>.dropdown__menu {
display: flex;
/* background: #ed1c24; */
left: -100%;
}
.dropdown {
display: inline-block;
position: relative;
background: red;
}
.dropdown__menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
font-size: 14px;
text-align: left;
}
ul.rlist > li {
background: #ed1c24;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
<ul class="rlist--inline">
<li class="menu-item"><a><span>Topics</span></a></li>
<li class="dropdown menu-parent">
<a title="Journal" class="dropdown__toggle">
<span>Journal</span>
</a>
<ul class="rlist dropdown__menu">
<li>
<a title="Current Issue">
<span>Current Issue</span>
</a>
</li>
<li>
<a>
<span>Archive</span>
</a>
</li>
<li>
<a>
<span>Article Series</span>
</a>
</li>
</ul>
</li>
</ul>
I am having real troubles with trying to align a horizontal menu.So far my menu is looking like
I have 2 centered elements to make up the menu in the image you can see a gray border (slide-nav class) that has been centered within the page. Now I am trying to do the same for the menu
I have had to hard code the li widths but ideally I would like them to fit automatically. Is it possible without javascript to align the menu items in the center?
My html
<nav class="slide-nav">
<ul class="slider">
<li class="selected">
<div>
<span class="heart"></span>
<div>
Get Started</div>
</div>
</li>
<li>
<div>
<span class="price-tag"></span>
<div>
Get Results</div>
</div>
</li>
<li>
<div>
<span class="star"></span>
<div>
Track & Engage</div>
</div>
</li>
<li>
<div>
<span class="people"></span>
<div>
Features</div>
</div>
</li>
</ul>
</nav>
css
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
}
.slider
{
list-style: none;
height: 38px;
margin: 0 auto;
width: 722px;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
width: 150px;
}
.slider li div
{
line-height: 31px;
}
.slider li div div
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;
}
Here the CSS that u have to change with
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
text-align:center;
}
.slider
{
list-style: none;
height: 38px;
margin: 0;
padding: 0;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
padding:0 10px;
}
I believe this has been answered in detail here.
Basically you want to have your individual buttons rendered with display:inline-block which would allow for them to be justified. There's a trick however with adding a "dummy" line break to force justification.
I just got rid of the widths, removed margin: 0 auto from .slider and added the ole text-align: center.
Check out a live demo:
http://jsfiddle.net/RJL7J/
Hope this helps.
I want to create a tabbed view of pages similar to that of the profile page of stack overflow, as can be seen in the image below.
I have been able to create a tabbed interface, but I am unable to remove the border below the tab, because the border has been actually given to the div below. If I give the border to the tab, then I can't extend the border over the area where there is not a tab.
Here is the html that I am using
<div id="centerDiv">
<div id="centeredMenu">
<ul class="tabs">
<li><a class="active" href="#">Questions</a></li>
<li>Blogs</li>
<li>Posts</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<div class="favContentBox">
<!-- The content goes here -->
</div>
<div class="favContentBox">
<!-- The content goes here -->
</div>
<div class="favContentBox">
<!-- The content goes here -->
</div>
I have as many favContentBox as there are the ul li elements. And the javascript is
$(document).ready(function(){
var currentTab = 0;
function openTab(clickedTab) {
var thisTab = $(".tabs a").index(clickedTab);
$(".tabs li a").removeClass("active");
$(".tabs li a:eq("+thisTab+")").addClass("active");
$(".favContentBox").hide();
$(".favContentBox:eq("+thisTab+")").show();
currentTab = thisTab;
}
$(".tabs li a").click(function() {
openTab($(this));
return false;
});
$(".tabs li a:eq("+currentTab+")").click()
});
And the css goes like this
.favContentBox
{
border:1px solid #808080;
padding-left:20px;
padding-right:20px;
min-height: 500px;
}
.tabs
{
margin:0 0 0 0;
padding:0 0 0 0;
left:50%;
text-align:center;
clear:left;
position:relative;
float:left;
}
.tabs li
{
list-style: none;
float: left;
right:50%;
display:block;
position:relative;
}
.tabs li a
{
display: block;
color:black;
font-weight: bold;
text-align: center;
text-decoration: none;
width:100px;
padding: 5px 0 5px 0;
border-left: 1px solid #808080;
border-top: 1px solid #808080;
border-right: 1px solid #808080;
margin-left:20px;
background-color:#F0F0F0;
}
Add a white bottom border to the tab and make the tab one pixel smaller than its container (to account for the top border). Here's an all CSS solution for the tab hovering.
Demo: http://jsfiddle.net/ThinkingStiff/sCgMg/
HTML:
<ul id="tabs"><!--
--><li class="tab">summary</li><!--
--><li class="tab selected">answers</li><!--
--><li class="tab">questions</li><!--
--><li class="tab">tags</li><!--
--></ul>
CSS:
#tabs {
border-bottom: 1px solid #666666;
font: bold 15px/15px Helvetica, Tahoma, Arial;
height: 30px;
margin: 0;
padding: 0;
padding-left: 10px;
}
.tab {
color: #777;
cursor: pointer;
display: inline-block;
height: 23px;
font-size: 13px;
line-height: 13px;
margin-left: 2px;
margin-right: 2px;
padding-top: 8px;
text-align: center;
vertical-align: top;
width: 80px;
}
.tab:hover {
border: 1px solid #666666;
border-bottom: 1px solid white;
height: 22px;
margin-top: 5px;
padding-top: 2px;
width: 78px;
}
.selected {
border: 1px solid #666666;
border-bottom: 1px solid white;
color: black;
font-size: 15px;
line-height: 15px;
padding-top: 6px;
width: 78px;
}
.selected:hover {
height: 23px;
margin-top: 0;
padding-top: 6px;
width: 78px;
}
Script:
$( ".tab" ).click( function () {
$( ".selected" ).removeClass( "selected" );
$( this ).addClass( "selected" );
} );
Output:
(Don't just copy and paste! Read the explaination below first!)
HTML:
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="content-boxes">
<div class="content1">Content 1</div>
<div class="content2">Content 2</div>
<div class="content3">Content 3</div>
</div>
CSS:
ul li {
/* I've left out all the floating and other obvious stuff,
since you didn't ask for that */
position: relative;
top: 1px;
background-color: #fff;
border: solid 1px #808080;
border-bottom: none;
z-index: 2;
}
.content-boxes>div {
position: relative;
z-index: 1;
}
The essence of this code is:
Moving the tabs down by 1 pixel while leaving the content boxes' positions as they are with `position: relative; top: 1px;`
Giving the tabs a background color to cover up the content boxes' borders
z-index the tabs on top of the content boxes with `position: relative; z-index: 1/2;` (z-index only works on positioned elements)
I didn't test the code, so you will have to work out the details on your own. For example, this code would push all tabs down instead of just the active one. But I think you get the basic approach.
Hope this helps.