I'm using the display setting "table" to create a ul navbar with li containing evenly sized buttons. I set a box shadow on the ul to avoid 1px gaps in the shadow between buttons. Unfortunately it appears that the buttons are rendering 2px smaller than their containing li elements. This results in a gap between the shadow and the button.
Any ideas on how to resolve? Previously, I had been using display:inline but I ran into the same issue. Thanks!
http://jsfiddle.net/Lfvq9/
CSS:
#navbar ul {
top: 1%;
height: 98%;
width: 98%;
margin: 0 2% 0 2%;
padding: 0;
list-style: none;
box-shadow: 0 4px 2px -2px #888888;
border-radius: 20px;
display: table;
table-layout: fixed;
}
#navbar li {
height: 100%
width: 100%
display: table-cell;
padding: 0;
margin: 0;
}
#navbar button {
height: 100%;
width: 100%;
margin:0;
padding: 0;
border-top:1px solid #696969;
border-bottom:1px solid #696969;
border-right:1px solid #696969;
border-left: 0px;
}
Pretty HTML: (actual HTML has no spacing to avoid 1px gaps)
<ul>
<li>
<button>
</button>
</li>
<li>
<button>
</button>
</li>
</ul>
This seems to fix it:
#navbar button {
margin: 2px 0 0;
}
http://jsfiddle.net/Lfvq9/1/
Related
I had implemented an auto-complete functionality for my search box, but autocomplete is moving for different screen sizes it is static for above 600px. I want that to be below my search bar.
Mobile view
Desktop View
CSS for auto complete
.autocomplete-items {
border: 1px solid #d4d4d4;
border-bottom: none;
border-top: none;
z-index: 99;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
right: 0;
position: relative;
display: flex;
align-items:center;
flex-direction: column;
}
.autocomplete-items div {
padding: 10px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
box-sizing: border-box;
cursor: pointer;
background-color: #fff;
border-bottom: 1px solid #d4d4d4;
width: 70%;
max-width: 630px;
position: relative;
right: 64px;
text-align: left;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
background-color: #e9e9e9;
}
Search bar CSS
.mainSection .searchContainer .searchBox {
border: none;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
height: 44px;
border-radius: 2px;
outline: none;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
width: 70%;
max-width: 630px;
color: #000;
}
I am pretty sure that width: 70%; is causing the problem. % always depends on the container size and therefore such problems can happen. Try it with using Pixels instead.
I'm trying to build a page where people can select the colour and capacity of a product. Only one colour/capacity can be active at a given time and when one has been selected a border needs to appear around it.
You can see in my attempt below the problem of the other elements being displaced when the border is applied.
I thought about giving all the elements border: 2px solid rgba(0,0,0,0) to resolve the displacing issue then using javascript to change the border properties on click, but I think this is probably not an elegant solution.
Here is the HTML...
<ul>
<li onclick="changeName('Gold')"><div class="select-colour" id="gold"></div></li>
<li onclick="changeName('Silver')"><div class="select-colour" id="silver"></div></li>
<li onclick="changeName('Space Grey'); "><div class="select-colour" id="space-grey"></div></li>
</ul>
and the CSS...
ul li {
width: 47px;
height: 47px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0);
padding: 3px;
}
.select-colour {
width: 45px;
height: 45px;
border-radius: 8px;
border: 1px solid #c2bebb;
-webkit-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
-moz-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
}
#gold {
background-color: #f5e7dc;
}
#silver {
background-color: #e2e2e2;
}
#space-grey {
background-color: #232323;
}
Does anyone have any ideas about the best way to approach this? Thanks.
Add box-sizing: border-box to the ul li selector like this:
ul li {
width: 47px;
height: 47px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0);
padding: 3px;
box-sizing: border-box;
}
Box sizing: border-box makes the element total width/height include the border and radius.
Edit:
Two links for documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Here's a CSS only solution using radio buttons and labels. Hope this helps.
* {
box-sizing: border-box;
}
.container {
position: relative;
padding-top: 30px;
}
label {
color: transparent;
position: absolute;
top: 0;
left: 0;
}
input:checked+label {
color: black;
}
input[type="radio"] {
display: none;
}
#gold+label:after {
content: "";
width: 2rem;
height: 2rem;
background: gold;
position: absolute;
border-radius: 5px;
top: 30px;
left: 0;
}
#gold:checked+label:after, #silver:checked+label:after, #bronze:checked+label:after {
border: 2px solid red;
}
#silver+label:after {
content: "";
width: 2rem;
height: 2rem;
background: silver;
position: absolute;
border-radius: 5px;
top: 30px;
left: 40px;
}
#bronze+label:after {
content: "";
width: 2rem;
height: 2rem;
background: sandybrown;
position: absolute;
border-radius: 5px;
top: 30px;
left: 80px;
}
<div class="container colors">
<form name="colors">
<input type="radio" id="gold" name="color" />
<label for="gold">Gold</label>
<input type="radio" id="silver" name="color" />
<label for="silver">Silver</label>
<input type="radio" id="bronze" name="color" />
<label for="bronze">Bronze</label>
</form>
</div>
use
box-sizing: border-box;
Here is the link to MDN where you can find more details
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Simply keep the border-color: transparent if the div is not selected, and change the color of the border on selection. By the way, you may add a transition to it as well.
<style>
input[type="checkbox"]:checked ~ #hello{
box-shadow: 0 0 0 3px hotpink;
}
#hello{
width: 50px;
margin: 20px;
}
</style>
<input id="check" type="checkbox">
<label id="hello" for="check">Hello</label>
This is what you want a hidden check box
I am tired to create drop down menu in my existing main menu of website. I have tried many times but no result sometimes I get menu inline sometimes everything disturbed.
HTML code :
<ul class="mainmenu">
<li>Best Forex Broker</li>
<li>Top Rated Brokers</li>
<li>
Forex Bonus
<ul>
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>Articles & Tutorials</li>
<li>Affiliate Programs</li>
<li>
<img src="<?=$site_folder?>/images/rss.png" alt="RSS" />
</li>
<li> </li>
</ul>
and CSS code:
div.mainmenu { background: url('images/body-bg.gif') 0px -50px repeat-x; }
div.mainmenu div.center { background: url('images/body-bg.gif') 0px -50px repeat-x; border-bottom-color: #007399; border-left: none; border-right: none; }
ul.mainmenu { height: 28px; padding: 4px 0px 5px 0px; background: url('images/body-bg.gif') 0px -50px repeat-x; }
ul.mainmenu li { float: left; padding: 5px 10px 5px 12px; margin: 0px; background: url('images/mainmenu-sep2.gif') left repeat-y; font-size: 15px; }
ul.mainmenu li a { color: #fff; }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.mainmenu img { width: 20px; height: 20px; vertical-align: middle; margin: 0px 0px -2px 0px; }
I am waiting for anybody to help me . Thanks
So, you may do something like below. Add a class .dropdown to the 2dn level menu and hide it to begin with. Then, on li:hover display it. You need to apply positions to your main menu and dropdown menu as I did in the CSS. Feel free to style your dropdown the way you like. Take a look.
ul.mainmenu { position: relative; height: 28px; padding: 4px 0px 5px 0px; }
ul.mainmenu li { list-style-type: none; float: left; padding: 5px 10px 5px 12px; margin: 0px; font-size: 15px; }
ul.mainmenu li a { color: #000; }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.dropdown { position: absolute; overflow: hidden; top: 24px; margin: 0; display: none; background: #ccc; padding: 0; max-width: 100px; }
ul.mainmenu li:hover .dropdown, .dropdown:hover { display: block; }
<ul class="mainmenu">
<li>Best Forex Broker</li>
<li>Top Rated Brokers</li>
<li>
Forex Bonus
<ul class="dropdown">
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>Articles & Tutorials</li>
</ul>
below is my js fiddle for a drop down menu, however how do i make the secondary drop down lists a horizontal bar along the bottom of the menu.
http://jsfiddle.net/tcKvH/1/
css
#header {
height: 100px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#content {
max-width:700px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
I am trying to build a menu like the one found here.
http://www.pauledmonds.com/
You need to declare #menu with position:relative, and remove that from li. This way second ul will expand to the width of #menu. Second, you need to make ul ul li { display: inline-block; } and last ul ul { width: 100%; left: 0 }
#menu li ul li {display: inline-block;}
#menu {
display: inline-block;
min-width: 600px;
list-style:none;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
position: relative;
}
#menu > li:hover > ul {
border: 1px solid #FF0000;
display: block;
left: 0;
width: 100%;
}
Here is a link of a working example - Click here
I'm making some breadcrumbs and restricting the width of them using text-overflow so the text does not spill over. I have wrote a jQuery script which enlarges the size of the breadcrumb when the user hovers over it.
My problem is that when the breadcrumb is enlarged, they end up too long to fit inside the container. I need to make the width of the other breadcrumbs smaller and at the same time, make the highlighted breadcrumb longer.
I have wrote a script for this but it is very buggy. The reason is that when other breadcrumbs are shrunk down in size, the position of the highlighted breadcrumb moves.
I would like the highlighted breadcrumb to expand in size outwards, so that it remains in the same position. But the breadcrumbs around it shrink in size to allow everything to fit on.
Is this do-able?
Here's a fiddle of what I've got so far-
http://jsfiddle.net/8FPeS/
And here's my jQuery code:
$('.breadcrumbButton').mouseenter(function(){
$('.breadcrumbButton').css({width:'30px', minWidth:'30px'});
$(this).css({width:'auto', minWidth:'80px'});
});
$('.breadcrumbButton').mouseleave(function(){
$('.breadcrumbButton').css({width:'80px', minWidth:'80px'});
$(this).css({width:'80px'});
});
I've re-coded it from scratch to hopefully get it to work to Codepen/JSFiddle
HTML
<ul id="container">
<li>Network Accessories
<li>DYMO
<li>Labelling Solutions
<li>Labelling Solutions
<li>Sound Proof Data Cabinets & Server Racks
<li>Labelling Solutions
<li class='active'>Dymo Flexible Nylon
</ul>
CSS
body {
font-family: 'Tahoma', sans-serif;
font-weight: bold;
}
#container {
width: 735px;
border: 1px solid red;
padding-top: 10px;
padding-bottom: 10px;
float: left;
list-style: none;
margin: 0;
}
#container li:first-child {
margin-left: -20px;
}
#container li {
margin-right: 22px;
background: #eee;
border-right: none;
text-decoration: underline;
padding: 10px 5px;
float: left;
height: 16px;
position: relative;
}
li:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 18px 0 17px 17px;
border-color: transparent transparent transparent #eee;
position: absolute;
top: 0px;
right: -17px;
}
li:before {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 18px 0 18px 18px;
border-color: #eee #eee #eee transparent;
position: absolute;
top: 0;
left: -18px;
}
#container li a {
font-size: 11px;
color: #666;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
float: left;
overflow: hidden;
display: block;
max-width: 30px;
line-height: 15px;
text-align: center;
}
.active {
background: #333365 !important;
}
.active:before {
border-color: #333365 #333365 #333365 transparent;
}
.active:after {
border-color: transparent transparent transparent #333365;
}
.active a {
max-width: 1000px;
color: #fff !important;
}
.hover {
max-width: 1000px !important;
}
JS
$('li').mouseenter(function(){
$('.active a').css('max-width', '40px');
$(this).children('a').addClass('hover');
});
$('li').mouseleave(function(){
$(this).children('a').removeClass('hover');
$('.active a').css('max-width', '1000px');
});
Hope this helps!