i have a navigation bar and i am positioning it absolute, i have a problem with the padding on it, the top and bottom padding are not taking effect on the anchor tag, only the left and right, any idea why this might be occurring?
<nav class="main-nav">
<ul class="main-nav-links">
<li class="main-link">HOME</li>
<li class="main-link">ABOUT US</li>
<li class="main-link">ORDER</li>
<li class="main-link">CONTACT</li>
</ul>
</nav>
Here is the css for the nav:
.main-nav {
position: absolute;
bottom: 0;
margin-left: 290px;
}
.main-link {
list-style: none;
background-color: #1281f4;
display: block;
float: left;
}
.main-link > a {
text-decoration: none;
color: #073a4f;
padding: 1em;
}
Add display: inline-block; to the <a>.
The way it is, it is rendered as a piece of text, and as such, it can't have vertical padding.
An alternative would be to use line-height;
Here's a demo: fiddle.
try this
http://jsfiddle.net/xdpHJ/
CSS
.main-nav {
position: absolute;
bottom: 0;
margin-left: 290px;
}
.main-link {
list-style: none;
background-color: #1281f4;
display: block;
float: left;
}
.main-link > a {
text-decoration: none;
color: #073a4f;
padding: 1em;
display: inline-block;
}
Related
So there is the letter spacing/gap between each word and i want to minimize that, but when i try to do it the only thing that shrinks is the button itself.
.navbar {
position: fixed;
top: 0;
right: 7%;
z-index: 10;
display: flex;
text-align: center;
display: table;
}
.navbar ul {
flex: 1;
text-align: right;
padding: 40px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
background: transparent;
}
.navbar ul li a {
color: #6dffe7;
text-decoration: none;
letter-spacing: 1px;
font-size: 15px;
cursor: pointer;
}
body { background: black; }
<div class="page">
<nav class="navbar">
<ul>
<div class="download-btn">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li> Download Resume</li>
</div>
</ul>
</nav>
</div>
Thank you for your help
I think you are trying to recreate the navbar as depicted in the image provided. As such, you need to following rules:
Horizontal navbar with a fixed height (I assumed it to be 100px).
All links except for the button should appear on the left and separated by some gap.
The "Download Resume" button needs to appear on the right side of your navbar.
There should be some padding at the left and right side of the navbar (I assumed this to be 2rem).
To achieve, this you need to set flex layout on your navbar, so that we can use the align-items: center to center the links vertically inside the navbar. We then need to set flex layout on the ul itself, and give it flex-direction: row with some gap: 2rem.
Now to place the button on the far right side of your navbar, you need to remove it from the ul inside the navbar, and place it as a sibling below it. And set justify-content: space-between on your navbar. This should move the links to far left, and the button to far right.
Additionally, we can style the visuals by giving navbar a background-color and color. We then inherit this color onto the anchor links a. We also set list-style: none and text-decoration: none on the ul and a respectively, to achieve the look of the image linked in the question.
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.navbar {
padding: 0 2rem;
position: fixed;
top: 0;
width: 100%;
background-color: #12182b;
color: #6dffe7;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
gap: 2rem;
}
.navbar ul a {
font-size: 0.9em;
color: inherit;
text-decoration: none;
}
.navbar .btn {
font-size: 0.9em;
border: 2px solid #6dffe7;
padding: 0.6em;
text-decoration: none;
color: inherit;
font-weight: bold;
}
<div class="page">
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
Download Resume
</nav>
</div>
Looking at the image it seems like you want to adjust nav items spacing instead of letter spacing/gap.
You can try to adjust paddings/margins on navbar ul and the li child items.
Also, you have duplicate display prop on .navbar you can remove one.
.navbar {
background-color: #12182b;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
text-align: center;
}
.navbar ul {
flex: 1;
text-align: right;
padding: 20px;
background: transparent;}.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 20px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 20px;
background: transparent;
}
.navbar ul li a {
color: #6dffe7;
text-decoration: none;
letter-spacing: 1px;
font-size: 15px;
cursor: pointer;
}
<nav class="navbar">
<ul>
<div class="download-btn">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>
Download Resume </li>
</div>
</ul>
</nav>
it seems to me you use bootstrap if you do then you will to need to use !important after any styles in css
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:)!
My page header has a misaligned <li> element. Here is a screenshot:
Basicly I want to say "center both elements vertically, one to the left and the other to the right".
I'm able to align a <li> element
horizontally with style="float:right"
vertically with style="vertical-align:middle".
...But not at the same time. Based on a similar question, I was expecting this to work:
style="float:right; vertical-align:middle"
It doesn't.
I also found some ways to align an entire list, but those were not applicable to aligning an individual element of a list.
Here is the relevant html-thymeleaf code:
<div th:fragment="header">
<nav>
<ul class="navcontainer">
<li class="navtitle"><h2>Personal Expense Tracker</h2></li>
<li class="navlogout" th:inline="text" style="float:right">[[(${user != null ? 'Logout ' + user : ''})]]</li>
</ul>
</nav>
</div>
Here is the relevant css code:
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
With the code you added..
Using flexbox, you can do this:
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;/* added */
align-items: center;/* added */
justify-content: space-between;/* added */
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav > ul > li > a:hover {
background-color: #111;
}
<div th:fragment="header">
<nav>
<ul class="navcontainer">
<li class="navtitle"><h2>Personal Expense Tracker</h2></li>
<li class="navlogout" th:inline="text" >Log out</li>
</ul>
</nav>
</div>
the question is a little vague. If you could give me a visual of your problem / what you're looking for as a result I could probably help more.
Anyways here is the classic way to horizontally and vertically align an element to its parent.
Best of luck!
.container {
position: relative;
display: block;
margin: 0 auto;
width: 50%;
max-width: 1000px;
height: 100px;
background: grey;
}
.element {
position: absolute;
display: block;
width: 50%;
height: 50px;
background: red;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -25%;
}
<ul class="container">
<li class="element"></li>
</ul>
You should give height or line-height to the element (or in some case parent element has no height) so vertical-align:middle will not work because there is no height.
First give height to the element which you want to set vertically middle if it does not work give height to the parent element.
<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.
I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far:
html:
<body>
<div class="navbar">
<ul class="topnav left">
<li>nav</li>
<li>menu1
<span class="subnav">
<ul class="subnav subnav-left">
<li>item1-1</li>
<li>item1-2</li>
<li>item1-3</li>
</ul>
</span>
</li>
<li>menu2
<span class="subnav">
<ul class="subnav subnav-left">
<li>item2-1</li>
<li>item2-2</li>
<li>item2-3</li>
</ul>
</span>
</li>
</ul>
<ul class="topnav right">
<li class="right">menu3
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</span>
</li>
<li class="right">menu4
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</span>
</li>
</ul>
</div>
</body>
css:
body {
font-family: arial;
margin: 0;
}
.navbar {
height: 40px;
background-color: black;
}
ul.topnav {
margin: 0;
padding: 0;
}
.subnav {
position: absolute;
}
.subnav-right {
right: 0;
}
ul.subnav {
position: relative;
margin: 4px 0 0 -8px;
padding: 0;
display: none;
}
ul.topnav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
ul.subnav li {
background-color: red;
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
.topnav li:hover {
background-color: red;
}
.topnav li:hover ul.subnav {
display: inline-block;
background-color: red;
}
.nav ul li:hover {
background-color: black;
}
.nav ul li {
width: 100%;
}
.nav li ul {
display: inline-block;
clear: none;
position: absolute;
background-color: red;
margin: 4px 0 0 -8px;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
The jsfiddle:
jsfiddle.net/aLZqZ
Here is what I'm trying to accomplish:
image to nav menu
I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.
This issue was three fold:
Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right
The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.
You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.
HTML for the right nav (follows the HTML for the left nav):
<ul class="rightNav">
<li>menu3
<ul class="rightSubNav">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</li>
<li>menu4
<ul class="rightSubNav">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
</ul>
CSS that I added to separate the right and left nav:
ul.rightNav {
margin:0;
padding:0;
text-align: right;
}
.rightNav li:hover {
background-color: red;
}
ul.rightNav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
position:relative;
}
ul.rightSubNav {
position: absolute;
right:0;
margin: 4px 0 0 -20px;
padding: 0;
display: none;
white-space:nowrap;
}
ul.rightSubNav li {
background-color: red;
list-style: none;
display: inline;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
}
.rightNav li:hover ul.rightSubNav {
display: inline-block;
background-color: red;
}
If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.