for now i have generated the menu in this way:
nav{
width:1024px;
margin: 0 auto;
}
ul{
display: flex;
justify-content: space-between;
}
li {
border-right: 1.1px solid #333333;
margin: 0 auto;
padding: 0 1em;
text-align: center;
flex-grow: 1;
flex-basis: initial;
text-align: center;
}
the html is:
<nav id="menu">
<ul>
<li>Home</li>
<li>Training & Support</li>
<li>Templates & Forms</li>
<li>Policy Documents</li>
<li>Payment Administration</li>
<li>Tax Compliance</li>
<li>News</li>
</ul>
</nav>
The result is:
But i want that the first and last child are aligned at the start and at the end of the ul container like in the image below
How can i do this?
Have you tried removing text-align: centre; ???Or in li try something like padding-right: 0;Tell me how it works out.
Related
I've been trying to write a menubar that has two groupings in the same row across the top of a webpage: on the left is the site name and in the center should be the menu options (a ul/li). So far, following similar issues, I've written the following, which appears on first glance to do exactly what I'm seeking.
HTML:
<div class="menubar">
SITE NAME
<ul class="ul">
<li>MENU 0</li>
<li>MENU 1</li>
<li>MENU 2</li>
<li>MENU 3</li>
</ul>
</div>
CSS:
.menubar {
width: 100%;
height: 50px;
line-height: 50px;
vertical-align: middle;
background-color: #fff;
border-bottom: 1px solid #f5f5f5;
position: fixed;
top: 0;
display: flex;
flex-flow: row nowrap;
}
.logo {
width: 33.33%;
float: left;
margin-left: 20px;
font-size: 24px;
}
.ul {
font-size: 18px;
list-style: none;
padding: 0;
margin: 0;
}
.ul li {
margin-left: 15px;
margin-right: 15px;
display: inline-block;
}
However, if you look carefully in the JSFiddle (more apparent when widening browser windows or shrinking the window down just before the items begin wrapping), the 'centered' ul/li is not actually centered—it's closer to the left side of the browser window than the right. How do I fix this so that the ul/li remains truly centered in the menubar (as if the site name doesn't exist) with the left-aligned site name, regardless of what the browser window's width is? (I'm assuming within non-wrapping reason, since I plan to adjust sizes and behavior for smaller devices.)
JSFiddle
You're using a lot of margins, width and stuff. Check out flex here and you can get the same thing, properly aligned using flex and directions.
<!-- NEW CODE -->
<nav>
<div class="logo">
<span>Your Company</span>
</div>
<ul class="nav-items">
<li class="nav-item"> Menu 1 </li>
<li class="nav-item"> Menu 2 </li>
<li class="nav-item"> Menu 3 </li>
<li class="nav-item"> Menu 4 </li>
</ul>
</nav>
<!-- OLD CODE -->
<nav>
<div class="logo">
<img src="https://placehold.it/200x200" alt="logo">
</div>
<div class="menu-items">
<div class="menu-item"> Menu 0 </div>
<div class="menu-item"> Menu 1 </div>
<div class="menu-item"> Menu 2 </div>
<div class="menu-item"> Menu 3 </div>
</div>
</nav>
and the css
// MORE PROPERTIES
nav {
align-items: center;
}
nav div.logo {
position: absolute;
}
// OLD-NEW CSS
nav {
display: flex;
border: 1px solid pink;
}
nav div.logo {
border: 1px solid green;
display: flex;
align-items: center;
}
nav div.logo span {
padding: 0 0.5rem;
}
ul.nav-items {
border: 1px solid red;
display: flex;
flex-direction: row;
list-style-type: none;
margin: 0 auto;
padding: 0;
}
ul.nav-items li {
margin: 0 0.25rem;
padding: 0.5rem;
border: 1px solid blue;
}
// OLD CSS
nav {
display: flex;
}
nav div.menu-items {
display: flex;
flex-direction: row;
margin: 0 auto;
}
nav div.menu-items div.menu-item {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
Fiddle:
NEW: https://jsfiddle.net/vzgn0Lju/1/
OLD: https://jsfiddle.net/kp9nsmah/1/
I added some margins between menu options and you can tweak a little bit more but flex is way easier than using lists and lots of things. You could use spans instead of div.menu items, can remove the container for items and such. But the general idea is there.
I need to have image on left side and navbar on right side... but the navbar must be vertically centered with image.. On jsfiddle I made it up to set navbar vertically to center but I am not able to put it on the right side... I will be glad for any help.
JSFiddle: https://jsfiddle.net/polluxik/0Lqubpe6/20/
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
}
ul img {
height: 100px;
}
li a {
display: block;
color: #262353;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
*in jsfiddle I used random image from google as a placeholder
One approach is below, with corrected HTML (the only valid child of a <ul> or <ol> is an <li>, so the <img> is now appropriately wrapped):
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
/* aligning the content of the <ul> to the end
of the inline axis: */
justify-content: end;
}
ul img {
height: 100px;
}
li a {
display: block;
color: #262353;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li:first-child {
/* setting the margin of the inline-end of the
first-child <li> element to 'auto', in order
to push the first-child away from the rest of
the content: */
margin-inline-end: auto;
}
<ul>
<!-- wrapped the <img> in another <li> element for validity: -->
<li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png"></li>
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
JS Fiddle demo.
References:
justify-content.
margin-inline-end.
We can define the image and navbar items in different div and then using flexbox we can align the two div horizontally using justify-content:space-between.
ul {
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
align-items: center;
}
.nav {
display: flex;
gap: 10px;
}
ul img {
height: 50px;
}
<ul>
<div class='logo'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Google_Images_2015_logo.svg/640px-Google_Images_2015_logo.svg.png">
</div>
<div class='nav'>
<li><a class="active" href="#">test</a></li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</div>
</ul>
I got 2 lists with different class but they dont work independent, both lists are unordered, class "menu" list is : list-style-type: none; which is fine as it is my nav bar, but my second list which is "habilidades" doesnt show the little dots to the left, the only one that changed is the font family on my "Habilidades" class but I cant make the dots to appear
PS: Im starting to learn
.menu {
display: flex;
list-style-type: none;
justify-content: space-around;
width: 50%;
text-align: center;
align-items: center;
margin-left: auto;
height: 20%;
margin-top: 20px;
}
.menu li a {
color: black;
text-decoration: none;
font-size: 20px;
}
.habilidades li {
font-family: cursive;
list-style-type: disc;
}
<nav>
<ul class="menu">
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
<section>
<ul class="habilidades">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
This question already has answers here:
Keep the middle item centered when side items have different widths
(12 answers)
Closed 2 years ago.
I have the following code snippet (only HTML and CSS)
.container {
display: flex;
justify-content: space-between;
border: 1px solid black;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0;
}
nav ul li {
list-style: none;
padding: 0 5px;
}
<div class="container">
<nav class="menu1">
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</nav>
<nav class="menu2">
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
</nav>
<nav class="menu3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
<li>3.5</li>
<li>3.6</li>
<li>3.7</li>
<li>3.8</li>
<li>3.9</li>
</ul>
</nav>
</div>
As you notice, the middle menu (the nav with class .menu2) is equally spaced between .menu1 and .menu3 because of the CSS property justify-content: space-between; in .container. This is correct.
What I need however, is to make sure that .menu2 is in the center of .container. In other words, it will NOT be equally spaced between .menu1 and .menu3. I want it dead center inside .container (and do not worry about menu items overlapping; I will have less menu items in each menu, so they will not overlap. I just added a lot of them here to demonstrate the spacing issue). Also, .menu1 should be also left aligned, and .menu3 should be right aligned (as they are right now).
How do I do that?
Thanks.
it seems like a grid would be better than a flex in my opinion.
you can then change the initial and last ul to display: inline-flex
then, for the last ul to be aligned to the end, you add to its nav element (class='menu3') a property text-align=end
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid black;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0;
}
.menu1 ul{
display: inline-flex;
}
.menu3{
text-align: end;
}
.menu3 ul{
display: inline-flex;
}
nav ul li {
list-style: none;
padding: 0 5px;
}
Do you have to use flex? Otherwise it is possible to move menu 2 to the center with position absolute.
.container {
display: flex;
justify-content: space-between;
border: 1px solid black;
position: relative;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0;
}
nav ul li {
list-style: none;
padding: 0 5px;
}
.menu2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<html>
<body>
<div class="container">
<nav class="menu1">
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</nav>
<nav class="menu2">
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
</nav>
<nav class="menu3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
<li>3.5</li>
<li>3.6</li>
<li>3.7</li>
<li>3.8</li>
<li>3.9</li>
</ul>
</nav>
</div>
</body>
</html>
I know it is not Flexbox but you may want to look at CSS grid-layout.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid black;
}
nav ul {
padding: 0;
}
nav ul li {
display: inline-block;
list-style: none;
padding: 0 5px;
}
<html>
<body>
<div class="container">
<nav class="menu1">
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</nav>
<nav class="menu2">
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.5</li>
<li>2.9</li>
</ul>
</nav>
<nav class="menu3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
<li>3.5</li>
<li>3.6</li>
<li>3.7</li>
<li>3.8</li>
<li>3.9</li>
</ul>
</nav>
</div>
</body>
</html>
I would set the .menu1-3 to different flex rules, having those on the outside trying to talk equally much of the space while the one in the middle takes just what it needs.
The overflow: hidden is important to make sure content doesnt over-span the flex-base. But there are other rules with same effect depending on what behaviour of the items you want (like flex-wrap to wrap the items to the next line)
Depending on what you want you can consider giving the middle column a specific flex-base like fixed pixel or percentage (like all 3 .menu get 33.33%). Add margin (to middle column) as well if needed.
The solution with grid and the absolute positions might also do the job depending on that you want. Position: absolute has the best browser support, my flex solution works on most browsers these days. Grid also should but has the worst coverage as far as i know
.container {
display: flex;
justify-content: space-between;
border: 1px solid black;
}
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
padding: 0;
}
nav ul li {
list-style: none;
padding: 0 5px;
}
.menu1, .menu3 {
flex: 1 1 50%;
overflow: hidden;
}
.menu1 ul {
justify-content: flex-start
}
.menu2 ul {
justify-content: flex-end
}
.menu2 {
flex: 0 0 auto;
}
<html>
<body>
<div class="container">
<nav class="menu1">
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</nav>
<nav class="menu2">
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
</nav>
<nav class="menu3">
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
<li>3.4</li>
<li>3.5</li>
<li>3.6</li>
<li>3.7</li>
<li>3.8</li>
<li>3.9</li>
</ul>
</nav>
</div>
</body>
</html>
The copyright info comes as next menu item, but I want it to come on the next row inside the footer as a centered text so tell me please how I can achive this. Please help. thanks in advance.
/* ----- FOOTER ----- */
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
background-color: #333;
padding: 50px;
font-size: 80%;
}
.footer-nav li{
flex-grow: 100%;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"blah</a></li>
<li>blah</li>
<p class = "copyright">aaa</p>
</ul>
</div>
Take out background color from your ulr tag and add it to .wrapper
Also remove the p tag from your ul list and place in outside the list but inside the wrapper
Apply a text-align:center to you p tag
remove padding-top and padding-bottom from your footer for a nice fitting
Snippet below
/* ----- FOOTER ----- */
p{
text-align:center;
}
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
padding: 50px;
padding-top:0;
padding-bottom:0;
font-size: 80%;
}
.footer-nav li{
flex-grow: 100%;
}
.wrapper{
background-color: #333;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"blah</a></li>
<li>blah</li>
</ul>
<p class = "copyright">aaa</p>
</div>
I, you should try using footer element and put <ul> inside and <p> outside of <ul> with a special class to center the text.
CSS :
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
padding: 50px;
font-size: 80%;
}
footer{
background-color: #333;
}
.copyright{
text-align: center;
color: white;
}
.footer-nav li{
flex-grow: 100%;
}
and HTML :
<div class="wrapper">
<footer>
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"</a>blah</li>
<li>blah</li>
</ul>
<p class="copyright">aaa</p>
</footer>
</div>
https://jsfiddle.net/nesquimo/u1pq6xvq/
A bunch of ways you could do it. If you want the copyright in your list, you need to wrap it in an li as only an li can be a child of a ul. Then just give that li a width: 100% or flex-basis: 100% and set the parent to flex-wrap: wrap
.footer-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
background-color: #333;
padding: 50px 50px 25px;
font-size: 80%;
}
.footer-nav li {
flex-grow: 100%;
}
.copyright {
flex-basis: 100%;
margin-top: 25px;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li class="copyright"><p>aaa</p></li>
</ul>
</div>