HTML:
<ul id="menu">
<li>Categories 1
<ul id="cat1">
<li class="first">temp1</li>
<li>temp2</li>
<li>temp3</li>
</ul>
</li>
</ul>
CSS:
#menu {
background-color: #0000FF;
height: 20px;
padding: 15px 0 10px;
margin: 5px;
font: 12px Tahoma;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: inset 0px 0px 10px #000;
text-align: center;
}
#menu > li{
display: inline;
}
li a {
color: #fff;
text-decoration: none;
}
.first{
margin-top: 12px;
}
#cat1 > li{
display: block;
background-color: #0000FF;
width: 150px;
margin-right: auto;
}
#cat1 > li > a{
display: block;
padding: 10px;
box-shadow: inset 0px 0px 2px #000;
}
When i use margin-left: auto in #cat > li it is woring properly. margin-right:auto on the other hand doesn't get the full margin, and I don't understand why this is.
Here's my fiddle: http://jsfiddle.net/ZfN7t/25/
Thank you for any and all help!
Mayb you should set <li> inline-block , maybe text-align:center and reset margin/padding of <ul> second level too :)
http://jsfiddle.net/ZfN7t/26/
ul {
margin:0 auto;
padding:0;
}
#menu > li {
display: inline-block;
}
Remove the default padding for html elements and it should work like expected.
ul,li
{
margin:0;padding:0;
}
FIDDLE
Related
How can i make custom pills for navbar like on
screenshot?
I did it by myself, but pills are inside of navbar and the text is not in the center of pill.
I understand, that the problem is inside of .menu li a:hover:not and .menu li a:hover:not(.active). But i don't know, how to make outside of navbar(i mean borders of the pills like on screenshot)
.menu {
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
margin: 0 auto;
padding: 0px;
overflow: hidden;
display: block;
list-style:none;
border-radius: 20px 0 0 0;
background-color: #0b78ad;
text-align: center;
}
.menu li {
list-style-type: none;
text-align: center;
display: inline-block;
}
.menu ul li a {
padding: 10px;
padding-left: 50px;
margin: 0px;
display: block;
text-align: center;
}
.menu li a:hover:not(.active) {
color: #325491;
}
.menu li.active a {
border-radius: 20px 0 20px 0;
border-style: solid;
border-width: 2px;
border-color: #325491;
color: #325491;
background-color: white;
}
<div class="menu">
<ul>
<li class="active">startseite</li>
<li>über uns</li>
<li>zell-linien</li>
<li>downloads</li>
<li>kontakt</li>
</ul>
</div>
.menu {
font-family: Arial, sans-serif;
}
.menu ul {
padding: 0;
list-style: none;
background-color: #0b78ad;
text-align: center;
white-space: nowrap;
height: 34px;
margin: 30px 0;
}
.menu li {
position: relative;
top: -10px;
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0 10px;
}
.menu ul li a {
position: relative;
display: block;
padding: 18px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 2px solid transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
line-height: 1;
transition: all .1s ease-in-out;
}
.menu ul li a.active,
.menu ul li a:hover {
background-color: #FFF;
border: 2px solid #0b78ad;
color: #0b78ad;
}
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skill</li>
<li>Contact</li>
</ul>
</div>
You can do it with just a plain border-radius, like any other property it starts with top, right, bottom and right
.button {
display: inline-block;
background-color: #ededed;
border: 1px solid deepskyblue;
border-radius: 10px 0 10px 0;
padding: 10px 16px;
text-align: center;
}
<div class="button">shape</div>
You can do like this.
1. Navbar you can give a 'max-height' property so that we can set a height for the first-child.
#nav-id {
max-height: 65px;
margin-top: 20px;
}
2.We can set the first 'li' 'margin-top' or 'position'
li:first-child {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 106px;
background: blue;
background-position: center;
margin-top:-20px;
z-index:1;
text-align:center;
}
Here is the working copy:
https://codepen.io/nabanitadasgupta/pen/aLNGgo
My fiddle so far:
https://jsfiddle.net/dzjqor2d/
I just can't get the middle <li> to center, whatever I try.
My Code:
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
}
ul li {
list-style: none;
float: left;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:last-child {
float: right;
}
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
Note:
Content is dynamic, so is the width of the container
make first li to left and last to right rest will float as per ul's text-alignment:
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
text-align: center;
}
ul li {
list-style: none;
display:inline-block;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position:relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:last-child{
float:right;
}
ul li:first-child{
float: left;
}
demo
You shouldn't need to float the last li right, use margins to get the alignments right:
ul li {
margin: 0 20px;
list-style: none;
float: left;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position:relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
https://jsfiddle.net/dzjqor2d/8/
You may try using the CSS3 :nth-child() Selector with your ul and li tag
HTML
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
CSS
ul {
width: 60%;
overflow: auto;
background-color: #F5FAFF;
padding: 20px;
text-align:center;
}
ul li {
list-style: none;
display:inline-block;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
ul li:nth-child(1){
float:left;
}
ul li:nth-child(3){
float:Right;
}
These days flexbox is the way to go, in the past floating was great, but now not so much.
for the UL I've added display: flex; and justify-content: space-between; this means; make them all fit in one block and if there is extra space, just put have space between them.
Here have a look:
body {
margin: 0;
}
ul {
display: flex;
justify-content: space-between;
width: calc(100% - 40px);
background-color: #F5FAFF;
padding: 20px;
}
ul li {
list-style: none;
padding: 10px 20px;
background-color: #388CD1;
color: #F5FAFF;
position: relative;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
<ul>
<li>
Empty cart
</li>
<li>
Continue shopping
</li>
<li>
Update cart
</li>
</ul>
I've changed the width to make the example easier to see.
Hope this helps.
Just use below css for ul:
ul {width: 70%;overflow: auto;background-color: #F5FAFF;padding:20px;display: flex;}
I'm trying to create a basic drop-down menu. Whenever I however over "blog", the "wiki" link seems to get dragged into it.
Here's a screenshot to show what I mean:
As you can see, "wiki" is below "march". I want to have "march" drop down from "blog" and keep "wiki" along the green line.
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius: 15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header ul ul {
display: none;
}
#header ul li:hover > ul {
display: block;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
padding: 2px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here's a JSFiddle.
So I cleaned up the css and it seems to work now.
Here is your html below
<div id="header">
<ul>
<li style="font-size:30px"><strong>Home</strong></li>
<li style="font-size:30px"><strong>Blog</strong>
<ul>
<li style="font-size:30px"><strong>March</strong></li>
</ul>
</li>
<li style="font-size:30px"><strong>Wiki</strong></li>
</ul>
</div>
Here is the new css below:
#header {
box-shadow: 0px 0px 5px 2px #000;
border-radius:15px 15px 15px 15px;
width: 790px;
height: 30px;
line-height: 85%;
background: #002929;
word-spacing: 5px;
}
#header li {
display: inline;
}
#header a:hover {
background: #0147FA;
border-radius: 15px 15px 15px 15px;
}
#header a {
text-decoration: none;
color: #ffff4c;
}
#header ul a
{
text-decoration:none;
font-weight:700;
line-height:32px;
padding:0 15px;
}
#header ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#header ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
padding:0
}
#header ul li:hover > ul
{
display:block
}
Be sure to compare to see the differences between your css and my css. If this is is not what you wanted please get back to me.
I have this code:
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
}
nav li:first-child, nav li:last-child {
border-radius: 5px;
}
<nav>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</nav>
I would like to remove this right margin.
How can I do it? I tried:
margin:0
padding:0
It doesn't work.
It's a common problem of inline-blocks, you should remove white space between elements.
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
}
nav li:first-child, nav li:last-child {
border-radius: 5px 0 0 5px;
}
nav li:last-child {
border-radius: 0 5px 5px 0;
}
<nav>
<li>Home</li><!--
--><li>Work</li><!--
--><li>Contact</li>
</nav>
Reference: Fighting the Space Between Inline Block Elements
Please reset of parent element font-size: 0 and line-height: 0
then set required font-size and line-height on child element
Like this way
nav li{
display: inline-block;
background-color:blue;
width: 70px;
padding: 5px;
font-size: 14px;
line-height: 20px;
color: #fff;
text-align: center;
}
nav li:first-child {
border-radius: 5px 0 0 5px;
}
nav li:last-child{border-radius: 0 5px 5px 0;}
nav ul{
font-size: 0;
line-height: 0;
}
nav li:hover{
background: #333;
}
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
I have a dropdown menu and it's not working with Internet Explorer 10 (and compatibility mode) and Chrome. It does however work with Firefox (latest).
CSS:
#menu_items
{ float: left;
width: 600px;
}
#menu
{ margin:0;
float: left;
}
#menu li
{
padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;
}
#menu li a{
float: left;
font: bold 120% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
height: 24px;
text-shadow: 0px 1px 0px #000;
padding: 16px 0px 10px 40px;
background: transparent;
}
#menu li ul li a {
float: left;
font: bold 90% Arial, Helvetica, sans-serif;
text-align: center;
color: #FFF;
text-decoration: none;
height: 24px;
text-shadow: 0px 1px 0px #000;
padding: 16px 0px 10px 40px;
background: transparent;
}
#menu li:hover ul {
display: flex;
float:inherit;
text-shadow: 0px 1px 0px #000;
padding: 1px 40px 0px 0px;
background: #669CD8;
background: -moz-linear-gradient(#90B9E2, #4B75AF);
background: -o-linear-gradient(#90B9E2, #4B75AF);
background: -webkit-linear-gradient(#90B9E2, #4B75AF);
margin: 50px 0px 0px 0px;
border-style:solid;
border-width:1px;
z-index: 2;
}
#menu li ul {
display: none;
position: absolute;
}
#menu li.current a, ul#menu li:hover a
{
color: #FFF;
text-decoration: underline;
}
HTML:
<div id="menu_items">
<ul id="menu">
<li class="current">Home</li>
<li>Werkwijze</li>
<li>Producten
<ul>
<li>Klimaat</li>
<li>Voerbakken</li>
<li>Voerinstallatie</li>
<li>Kraamhokken</li>
<li>Boxen</li>
<li>Biggen hokken</li>
<li>Roosters</li>
<li>Silo's</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
In the rules for #menu li:hover ul, use display: block; instead of display: flex;. (See demo at http://jsfiddle.net/8LaLa/1/.)
display: flex isn't supported by all browsers - see https://developer.mozilla.org/en-US/docs/Web/CSS/display#Browser_compatibility.
Your menu may not be clearing properly. You have a lot of floated elements and that can cause errors with your rendering. When you float an element you are taking that element "out of flow". Basically the element will disregard its position in the DOM and try to slide to the side you set in your float. If all child elements inside of a wrapper are floated the parent no longer knows how tall it should be (since all the elements are out of flow) and it sets itself to 0px height or to the height of the tallest in-flow element. To fix this you need a clearfix. This will tell the browser to make the container clear its children. Hopefully this fixes your issue!