<ul class="nav">
<li><i class="icon-home"></i></li>
<li>Blog</li>
<li>Elements</li>
<li>Contact us</li>
</ul>
.nav {
line-height: 70px;
margin: 0;
padding: 0;
border: 0;
}
.nav li {
list-style-image: none;
list-style-type: none;
margin-left: 0;
white-space: nowrap;
display: inline;
float: left;
padding-left: 4px;
padding-right: 4px;
}
.active {
background: pink;
}
.icon-home {
background: url(http://i.stack.imgur.com/MNme0.png) no-repeat;
width: 16px;
height: 14px;
display:block;
}
body {
background: gray;
}
How do I make the background of .active take up the whole height of li and center the icon? If you check the demo it doesn't respect the line-height of the li.
Demo: http://codepen.io/anon/pen/ulEGw
You could set .icon-home to display: inline-block;, which will center it vertically with the rest of the text.
You can also keep your line-height this way.
Assuming you want to keep your line-height: 70px on .nav, put height: 70px; on .icon-home.
Related
I want to ask about good practive in making spacing between two divs which have flexbox. For example:
header {
background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9);
height: 80px;
}
.menu-section {
display: flex;
}
.nav-logo {
color: #e00986;
font-size: 25px;
margin: 0;
padding-left: 15px;
line-height: 80px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
nav ul li {
display: inline-block;
width: 150px;
position: relative;
}
nav ul li a {
text-decoration: none;
line-height: 80px;
padding: 0 10px;
display: block;
color: #e00986;
}
nav ul li a:hover {
color: #FFF;
transition-duration: 2s;
}
<header>
<nav class="menu-section">
<h1 class="nav-logo">Love ♡ Cookies</h1>
<ul>
<li>Strona główna</li>
<li>Ciastka
<ul>
<li>Torty</li>
<li>Babeczki</li>
<li>Bezy</li>
<li>Ciasta</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
Of course I can give margin-left: 550px to nav ul and it will be okay, but I don't think so that is the good practice. What's your opinion in this topic?
All you gotta do is make the parent of those two div's (the left logo and the right menu items) a display flex and justify-content: space-between or justify-content: space-around like so
.parent-div {
display:flex;
justify-content: space-between; //or space-around
}
.child-left {//doesn't matter what you put in here just so long as its a div}
.child-right {//doesn't matter what you put in here just so long as its a div}
If you have anymore question, this is where I go if I need help figuring out how to use flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I guess what you need is to move your navigation menu to right, reading the comments.
So solution to this would be giving space to left for your navigation(menu links). Yes you can definitely use margin-left but you do not need to specify exact pixels.
Better would be giving margin-left:auto, so that remaining space would be left on left side of your Navigation
Solution:
header {
background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9);
height: 80px;
}
.menu-section {
display: flex;
}
.nav-logo {
color: #e00986;
font-size: 25px;
margin: 0;
padding-left: 15px;
line-height: 80px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
margin-left:auto; /*ADDED HERE - THIS IS THE TRICK :)*/
}
nav ul li {
display: inline-block;
width: 150px;
position: relative;
}
nav ul li a {
text-decoration: none;
line-height: 80px;
padding: 0 10px;
display: block;
color: #e00986;
}
nav ul li a:hover {
color: #FFF;
transition-duration: 2s;
}
<header>
<nav class="menu-section">
<h1 class="nav-logo">Love ♡ Cookies</h1>
<ul>
<li>Strona główna</li>
<li>Ciastka
<ul>
<li>Torty</li>
<li>Babeczki</li>
<li>Bezy</li>
<li>Ciasta</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
Hope this helps you.
.nav-logo
{
color: #e00986;
font-size: 25px;
margin-right: 100px;
padding-left: 15px;
line-height: 80px;
}
Use margin for outside spacing:)!
All the questions I've looked at refer to WordPress or Bootstrap (what is that?) nav bars, I have made mine using CSS.
I would like to make my nav bar bigger so that it's easier for mobile users to click the correct link. I've tried using the height: px; but all that did was push the text below further down.
What do I use to change the size of the buttons themselves? included my CSS below.
html{background:gray;}
ul {
left: 0;
top: 50%;
width: 100%;
text-align: center;
display: inline-block;
list-style-type: none;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
margin: 0
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
Please note I have added backgrounds in order to display the navbar, and are not required in production
You are OK to use the ul and li elements within your code. In order to make the navbar appear 'taller', you would need to set both the height of the ul element itself, as well as the child li. A quick demo has been provided below.
I have given the height of the ul element 100px, although this value can be changed to your preference. Note you may also want to change line-height property of your a elements to suit this.
html,body {
background: gray;
margin:0;
padding:0;
}
ul {
left: 0;
top: 50%;
text-align: center;
display: block;
list-style-type: none;
background: dimgray;
height: 100px; /* <-- change this line*/
}
li {
display: inline-block;
height: 100%;
}
li a {
display: inline-block;
color: white;
background: lightgray;
line-height: 100px; /* <-- change this line*/
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
margin: 0;
height: 100%;
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
What do I use to change the size of the buttons themselves?
Add more padding! Take a look-see.
body {background-color: gray;}
ul {
left: 0;
top: 50%;
width: 100%;
text-align: center;
display: inline-block;
list-style-type: none;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 2em; /* bigger button? add more padding! */
text-decoration: none;
margin: 0
}
li a:hover:not(.active) {
background-color: #111;
}
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
There are many ways to increase the size of the link. This is just one way. jbutler's answer is a good way too. It just depends on what exactly you want it to do.
Hope this helps.
If you are trying to make the text itself larger you can use the font-size property.
It's strange, my unsorted list with display: inline-block is inside an height: auto div element. But the div is 3px higher then the unsorted list. Do someone see the problem ?
html, body {
margin: 0;
width: 100%;
height: 100%;
font-family: monospace;
}
#main_navigation {
width: 100%;
background-color: #3e3e3e;
text-align: center;
}
#main_navigation img {
height: 5em;
width: 5em;
position: absolute;
left: 1em;
top: 0.5em;
}
#main_navigation ul {
padding: 0px;
margin: 0 auto;
display: inline-block;
}
#main_navigation ul li {
padding: 2em;
list-style-type: none;
display: table-cell;
border-left: 1px solid #000;
}
#main_navigation ul li:hover {
background-color: #e04100;
}
#main_navigation ul li:first-child {
display: none;
}
#main_navigation ul li:nth-child(2) {
border: none;
}
#main_navigation ul li a {
font-size: 1.75em;
color: #cecece;
padding: 2em;
text-decoration: none;
}
<nav id="main_navigation"> <img src="res/logo.png">
<ul id="main_navigation_ul">
<li>Navigation
<div id="menu_symbol" onclick="nav_toggle()">
<div></div>
<div></div>
<div></div>
</div>
<hr>
</li>
<li>Home
</li>
<li>Projects
</li>
<li>About me
</li>
<li>Imprint
</li>
</ul>
</nav>
JSFIDDLE
You can see the space very good by hovering over the nav points.
Change the vertical-align value on your list: Fiddle example
#main_navigation ul {
padding: 0px;
margin: 0 auto;
display: inline-block;
vertical-align: top;
}
The extra pixels come from the fact that the element with display: inline-block is an inline element, so it will be treated as a character on a text line.
The element is placed on the base line of the text line, and there is space below the base line for hanging characters like j and g. That's where the extra pixels come from.
From what I can tell, you can just remove the display: inline-block style without any problems.
I'm trying to make a navigation bar with 100% width, that distributes equally within a header that also has a width of 100%. Also each a element has two words each, that are perfectlly center aligned under each other.
The HTML I'm working with is below:
<div class="nav">
<ul>
<li><span style="font-family:sacramento; text-align: center;">Our</span><br> HOME</li>
<li><span style="font-family:sacramento;text-align: center;">About</span><br> US</li>
<li><span style="font-family:sacramento;text-align: center;">Client</span><br> WORKS</li>
<li><span style="font-family:sacramento;text-align: center;">Contact</span><br> US</li>
<li><span style="font-family:sacramento;text-align: center;">Our</span><br> VISION</li>
<li><span style="font-family:sacramento;text-align: center;">Our</span><br> BIOS</li>
</ul>
</div><!--end of nav-->
CSS I'm working with
.nav {
position: relative;
width: 100%;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 25px 80px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
text-align: center;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 20px;
width: 10px;
}
The example I'm trying to make looks like this below :
UPDATE
When I try the code in IE9, I get this image :
Please how can i solve this.
To distribute all items equally set a percentage width on the list items. You have six items so add width: 16%; to the .nav li rule.
To center align the text change:
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;
}
to (removed explicit width and added display: block):
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
display: block;
}
Lastly remove display: inline-block from the .nav li rule and add float: left. You should also add a <div style="clear: both"></div> element below the list (the tag) to "fix" the page flow.
Check this JSfiddle : JSfiddle working
See the result here Result of navigation
Use this css
.nav {
position: relative;
width: 100%;
text-align: center;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 5px 20px;
list-style: none;
display: inline-block;
text-align: center;
}
.nav a {
padding: 3px 2px;
text-decoration: none;
color: #999;
line-height: 100%;
font-family: actor;
font-size: 15px;
width: 10px;
}
I have this menu:
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
}
#navbar li {
list-style: none;
float:left; }
#navbar li a:hover{
background-color: #CCC;
}
#navbar li a {
border: 1px solid #000;
display: block;
margin-right: 18px;
margin-left: 18px;
padding: 3px 8px;
background-color: #FFF;
color: #000;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: #FFF;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #CCC; }
<ul id="navbar">
<li>Start</li>
<li>Vad?</li>
<li>Kom igång!</li>
<li>Läringsartikler<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
<li>Läringsfilmer<ul>
<li>Subitem One</li>
<li>Second Subitem</li>
<li>Numero Tres</li></ul>
</li>
</ul>
as you can see in navbar { i tried to use text-align: center or margin:auto but it still wont center the whole menu..
why?
when i change the navbar li to float center instead of float left then it make the whole menu stupid big
You need to specify a width on your navbar ul.
#navbar {
text-align: center;
margin: auto;
padding: 0;
height: 1em;
width: 400px;
}
There is NO center value for 'float' style attribute
-- Oops dint see that comment
As mentioned, there is no Float:center. In order to center using margin-left and margin-right auto, you either need to set a width (as mentioned above) or change it to display:block.
If you don't want to set a width or can't, there's a CSS hack called Shrink Wrapping that is easy to setup.