This is my jsfiddle example. My ul.nav is 910px and i have 7 li.nav inside it. I set their width to 130px each but the last one is out of place. Thanks.
Try increasing the min/max width of ul.nav
ul.nav {
width: 90%;
min-width: 1000px;
max-width: 1000px;
margin: 0 auto;
}
nav.nav {
width: 100%;
min-width: 980px;
max-width: 1024px;
height: 40px;
padding: 0;
border: 1px solid black;
}
ul.nav {
width: 90%;
min-width: 1000px;
max-width: 1000px;
margin: 0 auto;
}
li.nav,
a.nav {
width: 130px;
display: inline-block;
}
<nav class="nav">
<ul class="nav">
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
<a href="#" class="nav">
<li class="nav">Home</li>
</a>
</ul>
</nav>
set an exact width on your last nav and it works:
<a href="#" class="nav" style="width:40px">
<li class="nav">Home</li>
</a>
try to reduce nav length
li.nav, a.nav {
width: 110px;
display: inline-block;
}
I reduced 130 to 110
Try adding the below css
nav.nav {
width: 100%;
min-width: 980px;
max-width: 1024px;
height: 40px;
padding: 0;
border: 1px solid black;
}
ul.nav {
width: 90%;
min-width: 910px;
max-width: 910px;
margin: 0 auto;
}
li.nav, a.nav {
width: 130px;
float: left;
}
ul.nav:after {
content:"";
clear:both;
display:block;
}
li.nav {
list-style-type:none;
padding: 12px 0;
box-sizing:border-box;
}
instead <li class="nav">Home</li>
use - <li class="nav">Home</li>
maybe use display: flex; justify-content: space-between; for ul.nav?
nav.nav {
width: 100%;
min-width: 980px;
max-width: 1024px;
height: 40px;
padding: 0;
border: 1px solid black;
}
ul.nav {
width: 100%;
min-width: 980px;
max-width: 1024px;
margin: 0 auto;
text-align: center;
padding-left: 0;
list-style: none;
display: flex;
justify-content: space-between;
border: 1px solid #ccc;
}
ul.nav > li {
width: 130px;
}
ul.nav > li a{
display: block;
}
ul.nav > li a:hover{
background: #ccc;
}
<nav class="nav">
<ul class="nav">
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
<li class="nav">Home</li>
</ul>
</nav>
Related
I want the navigation bar items to align left next to the logo, but am unable to achieve this.
Does anyone know what is going on?
What it looks like:
The space I want gone:
My HTML code:
<nav id="nav-bar">
<img src="https://assets.codepen.io/7471668/logo+pic.png" id="header-img" alt="company-logo" />
<ul class="nav__menu">
<li class="nav__item">
<a class="nav-link" href="">Options</a></li>
<li class="nav__item">
<a class="nav-link" href="">How it works</a></li>
<li class="nav__item">
<a class="nav-link" href="">Sign-up</a></li
</ul>
</nav>
My CSS:
#nav-bar {
display: flex;
position: fixed;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 1);
}
.nav__menu {
display: flex;
font-size: 0.95rem;
}
.nav__item {
margin-right: 3rem;
font-family: archivo;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
box-shadow: 0 4px 0 -1px #FFF;
}
#header-img {
width: 25%;
margin-top: 6px;
margin-left: 10px;
margin-right: 0;
}
#nav-bar {
display: flex;
position: fixed;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 1);
}
.nav__menu {
display: flex;
font-size: 0.95rem;
}
.nav__item {
margin-right: 3rem;
font-family: archivo;
}
.nav-link {
color: white;
text-decoration: none;
}
.nav-link:hover,
.nav-link:focus-visible {
box-shadow: 0 4px 0 -1px #FFF;
}
#header-img {
/* from width:25% */
width: 100px; /*Use px*/
margin-top: 6px;
margin-left: 10px;
margin-right: 0;
}
<nav id="nav-bar">
<img src="https://assets.codepen.io/7471668/logo+pic.png" id="header-img" alt="company-logo" />
<ul class="nav__menu">
<li class="nav__item">
<a class="nav-link" href="">Options</a></li>
<li class="nav__item">
<a class="nav-link" href="">How it works</a></li>
<li class="nav__item">
<a class="nav-link" href="">Sign-up</a></li
</ul>
</nav>
I provided a snippet please do check if it is the output you are looking for.
Simply use "px" to resize the width of your image.
I changed width: 25%; to width: 100px;
I am trying to create a horizontal bar chart by combining an ul with a flexbox grid. For some reason, my lis are not lining up with the correct lines on the chart based on their width(it's close but slightly off):
section {
width:300px;
position:relative;
}
ul {
list-style-type:none;
padding:0;
margin:0;
padding:10px 0;
}
ul li {
background:red;
color:#fff;
font-weight:700;
margin-top:10px;
}
ul li:first-child {
margin-top:0;
}
div {
display: flex;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
flex: 1;
z-index:-1;
justify-content: space-between;
flex-wrap: nowrap;
padding:inherit;
}
div span {
width: 1px;
height: 100%;
background: grey;
position:relative;
}
<section>
<ul>
<li style="width:100%;">Lorem</li>
<li style="width:90%;">Ipsum</li>
<li style="width:30%;">Dolor</li>
<li style="width:60%;">Sit</li>
<li style="width:70%;">Emet</li>
<li style="width:10%;">Lorem</li>
<li style="width:80%;">Ipsum</li>
<li style="width:50%;">Dolor</li>
</ul>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
The li with 100% width works fine, but the others don't line up correctly on the chart.
Consider backgroud to do this instead of a lot of code:
ul {
list-style-type: none;
width: 300px;
margin: 0;
padding:0 0 10px;
overflow:auto;
background:
repeating-linear-gradient(to right,
transparent 0 calc(100% - 1px),grey calc(100% - 1px) 100%)
0 /calc(100%/10) 100%;
border-left:1px solid grey;
}
ul li {
background: red;
color: #fff;
font-weight: 700;
margin-top: 10px;
}
<ul>
<li style="width:100%;">Lorem</li>
<li style="width:90%;">Ipsum</li>
<li style="width:30%;">Dolor</li>
<li style="width:60%;">Sit</li>
<li style="width:70%;">Emet</li>
<li style="width:10%;">Lorem</li>
<li style="width:80%;">Ipsum</li>
<li style="width:50%;">Dolor</li>
</ul>
It will be responsive and you can easily scale it to any number of lines:
ul {
list-style-type: none;
width: 300px;
margin: 5px;
padding: 0 0 10px;
overflow:auto;
background:
repeating-linear-gradient(to right,
transparent 0 calc(100% - 1px),grey calc(100% - 1px) 100%)
0 /calc(100%/var(--n,10)) 100%;
border-left:1px solid grey;
}
ul li {
background: red;
color: #fff;
font-weight: 700;
margin-top: 10px;
}
<ul>
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:15;width:400px">
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:20;width:400px">
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
Here is a different syntax:
ul {
list-style-type: none;
width: 300px;
margin: 5px;
padding: 0 0 10px;
overflow:auto;
background:
repeating-linear-gradient(to right,
transparent 0 calc(100%/var(--n,10) - 1px)
,grey calc(100%/var(--n,10) - 1px) calc(100%/var(--n,10)));
border-left:1px solid grey;
}
ul li {
background: red;
color: #fff;
font-weight: 700;
margin-top: 10px;
}
<ul>
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:15;width:400px">
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
<ul style="--n:20;width:400px">
<li style="width:100%;">Lorem</li>
<li style="width:30%;">Dolor</li>
<li style="width:50%;">Dolor</li>
</ul>
Add one more pair of span tags.
Currently, there are only nine (9) white space gaps between the 10% gray horizontal bars.
This could be a simpler approach:
.container {
display: flex;
flex-flow: column wrap;
background-color: lightgray;
margin: 5%;
padding: 1%;
width: 86vw;
}
.sidebar {
background-color: lightskyblue;
flex-grow: 1;
margin: 1%;
padding: 0.5%;
height: 10vh;
text-align: center;
}
.sb1 {
flex-grow: 0;
width: 50%;
}
.sb2 {
flex-grow: 0;
width: 70%;
}
.sb3 {
flex-grow: 0;
width: 80%;
}
.sb4 {
flex-grow: 0;
width: 30%;
}
.sb5 {
flex-grow: 0;
width: 40%;
}
<div class="container">
<div class="sidebar sb1"></div>
<div class="sidebar sb2"></div>
<div class="sidebar sb3"></div>
<div class="sidebar sb4"></div>
<div class="sidebar sb5"></div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 4 years ago.
The problem is, if I put any margin on any element which is inside the product div or the slider div the whole list-items are moving down.
.product-slider {
margin-top: 16px;
text-align: center;
}
.slide-item {
list-style-type: none;
display: inline;
width: 80%;
overflow: hidden;
margin: auto;
}
.product, .slider {
height: 200px;
border: 1px solid black;
display: inline-block;
}
.product {
width: 25%;
}
.slider {
width: 5%;
}
<ul class="product-slider">
<li class="slide-item"><div class="slider"><i class="fas fa-angle-left"></i></div></li>
<li class="slide-item"><div class="product">Test</div></li>
<li class="slide-item"><div class="product">Test</div></li>
<li class="slide-item"><div class="product">Test</div></li>
<li class="slide-item"><div class="slider"><i class="fas fa-angle-right"></i></div></li>
</ul>
Also try this:
.product-slider{
margin-top: 16px;
text-align: center;
}
.slide-item{
list-style-type: none;
display: inline;
width: 80%;
overflow: hidden;
margin: auto;
}
.product, .slider{
height: 200px;
border: 1px solid black;
display: inline-block;
vertical-align:text-top;
}
.product{
width: 25%;
}
.slider{
width: 5%;
}
<ul class="product-slider">
<li class="slide-item">
<div class="slider"><i class="fas fa-angle-left"></i></div>
</li>
<li class="slide-item">
<div class="product">Test</div>
</li>
<li class="slide-item">
<div class="product">Test</div>
</li>
<li class="slide-item">
<div class="product">Test</div>
</li>
<li class="slide-item">
<div class="slider"><i class="fas fa-angle-right"></i></div>
</li>
</ul>
Try this:
.product-slider{
margin-top: 16px;
text-align: center;
}
.slide-item{
list-style-type: none;
display: inline;
width: 80%;
overflow: hidden;
margin: auto;
}
.product, .slider{
height: 200px;
border: 1px solid black;
display: inline-block;
}
.product{
width: 25%;
}
.slider{
width: 5%;
}
<ul class="product-slider">
<li class="slide-item slider"><div class="slider-left"><i class="fas fa-angle-left"></i></div></li>
<li class="slide-item product"><div class="product-item">Test</div></li>
<li class="slide-item product"><div class="product-item">Test</div></li>
<li class="slide-item product"><div class="product-item">Test</div></li>
<li class="slide-item slider"><div class="slider-right"><i class="fas fa-angle-right"></i></div></li>
</ul>
I'm looking to distribute the space between the links evenly, so each take up 1/3 of the space of the containing div. The whole reason they are within this div is because I want to line it up with the banner, and I'm unsure how to it otherwise.
Here is a fiddle:
https://jsfiddle.net/yuy84gmq/13/
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks li {
border: 1px solid black;
display: inline;
font-size: 25px;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
<!--#navBar-->
Use flexbox and set justify-content to space-between or space-around:
space-between
Flex items are evenly distributed in the line. [...]
space-around
Flex items are evenly distributed in the line, with half-size spaces on either end. [...]
.navLinks {
display: flex;
justify-content: space-around;
}
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks li {
border: 1px solid black;
display: inline;
font-size: 25px;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
.navLinks {
display: flex;
padding: 0;
justify-content: space-around;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a></li>
<li><a href='#'>Hours</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
I see a flexbox solution has been posted, so I'll post the table/table-cell solution. It's a simple but effective, and you don't have to worry about browser discrepancies.
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
/* set the container to act like a table */
.navLinks {
display: table;
table-layout: fixed; /* evenly space all elements */
/* remove default styling */
width: 100%;
margin: 0;
padding: 0;
}
.navLinks li {
display: table-cell;/* set to a table-cell */
text-align: center;
font-size: 25px;
padding: 10px;
}
.navLinks a {
border: 1px solid black;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
<!--#navBar-->
Try This code
is working for me
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto;
}
.navLinks{
padding: 0px;
}
.navLinks li {
border: 1px solid black;
display: inline-block;
font-size: 25px;
width:32%;
}
#navBar {
border: 1px solid black;
width: 553px;
margin: 0 auto;
}
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li><a href='#'>About</a>
</li>
<li><a href='#'>Hours</a>
</li>
<li><a href='#'>Contact</a>
</li>
</ul>
</nav>
hi xD
your css:
.bruceBanner img {
border: 2px solid black;
height: 172px;
width: 553px;
display: block;
margin: 0 auto; /*After setting a width this will make object sit centrally within parent container. Auto sets left and right margins equally. 0 denotes no top or bottom margin */
}
.li1 {
border: 1px solid black;
display:inline-block;
margin-right: 15%;
float: left;
}
.li2 {
border: 1px solid black;
display:inline-block;
margin-right: 17%;
margin-left: 20%;
}
.li3 {
border: 1px solid black;
display:inline-block;
float: right;
margin-right: 8%;
}
/* Adjust left/right margin as appropriate */
#navBar {
border: 1px solid black;
width:553px;
margin: 0 auto;
}
your html:
<body>
<div class="bruceBanner">
<a href="#">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
<nav id="navBar">
<ul class="navLinks">
<li class="li1"><a href='#'>About</a></li>
<li class="li2"><a href='#'>Hours</a></li>
<li class="li3"><a href='#'>Contact</a></li>
</ul>
</nav> <!--#navBar-->
</body>
When the browser page is full size, the menu is centered in the middle page (That's the correct position) but when resizing the window, the menu isn't visible anymore except by scrolling to the max right of the site. I looked it up to be a responsiveness problem, however i failed to solve it. Any ideas??
HTML:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>
css:
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style:none;
}
Add margin:0 auto; in .menu
Remove left: 725px; from .menu li
See Fiddle: https://jsfiddle.net/sachinkk/61capLqy/
lu, li{
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu{
width:150px;
height: 350px;
margin:0 auto;
}
.menu li{
position: relative;
top:150px;
bottom: 0;
right: 0;
margin: auto;
border-style:none;
}
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1"onclick="checklist(this)"><button onclick="myFunction()">AA</button></li>
<li id="item2"><button onclick="myFunction2()">A </button></li>
<li id="item3">B </li>
<li id="item4">C </li>
<li id="item5">D </li>
<li id="item6">E </li>
<li id="item7">F </li>
</ul>
</div>