I was trying to create my portfolio page. I have 4 subheadings (About, Resume, Blog and Portfolio).
So I wanted to put these headings on top center of my div. So what I did was created an unordered list gave it property to display inline. Now all headings come to the same list.
Now I want to give spacing between the headings. Of course margin and padding options are there but is there any way in which I can avoid margin/paddings and do this directly by flex?(I wanted to reduce load on media queries for small screen)
The ul can be the flex container, and you can spread the elements evenly using justify-content: space-between:
.header {
display: flex;
width: 50%;
margin: 0 auto;
padding: 0;
justify-content: space-between;
list-style: none;
}
<ul class="header">
<li class="header__item">About</li>
<li class="header__item">Resume</li>
<li class="header__item">Blog</li>
<li class="header__item">Portfolio</li>
</ul>
you may use justify-content and eventually pseudo elements to squeeze elements to middle
nav {
display:flex;
justify-content:space-around;
}
/*increase space from side at first and last child */
nav:before,
nav:after {
content:'';
width:25vw;/* or % . tune this or remove pseudo if unneeded */
}
a {
margin:0 1em;
}
<nav>
About
Resume
Blog
Folio
</nav>
Related
I have a navigation column on the left side of the window and I need to position the last navigation item at the bottom of the column. However, I need that item also move up to its normal position below the second to last list item if the window is resized and the height decreases.
I'm using React and Material-UI's List and ListItem components to create this navigation column. They render as a <ul> with <li> tags inside.
I've tried using position: fixed, bottom: 0 on the last <li> tag which positions it correctly at the bottom, but when the window is resized, it overlaps the other list items.
I've also tried setting the <ul> to display: flex, flex-direction: column and then setting the last <li> margin-top to some value...but I really don't want to set a value for this because it's supposed to be responsive.
This is as close as I've made it - CodeSandbox. What CSS can I use to make the last list item at the bottom and move it up when the screen/window is resized?
You're almost there with flex. Use margin-top:auto on the last <li>:
html {height:100%}
body {
width: 50%;
height: 100%;
}
ul {
height:100%;
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-direction: column;
}
li {
border: solid;
padding: 0.5rem;
}
li:last-of-type {margin-top:auto}
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li class="right">THIS ONE FLEX END</li>
</ul>
I am learning css these days. I am designing a navbar by using css flexbox. Here is my html and css code, but they are not working on my browser.
Can anybody find any problem?
* {
margin: 0px;
padding: 0px;
}
/* Navigation Bar */
#navbar {
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Website Page</title>
<link rel="stylesheet" href="/originals/style.css">
</head>
<body>
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</body>
</html>
The display: flex property only applies to the direct children elements within the flex container. I'm guessing that you want the list items to also be "flexed" so in order to do that - you need to apply display flex to the ul as well as the nav.
In other words - the nav bar applies display flex to ONLY the div containing the image image and the ul. In order to align and space out the list items - the ul needs to also be a flex container. I am using space-around to space out the list items - but obviously you might need to alter the styling to suit your needs.
*{
margin: 0px;
padding: 0px;
}
/* Navigation Bar */
#navbar{
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
}
#navbar ul{
display: flex;
align-items: center;
flex-direction: row;
top: 0px;
list-style: none;
flex-grow: 1;
justify-content: space-between;
margin-left: 32px
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
I am not sure what you are trying to achieve, I suppose you need all items in the navbar evenly distributed on a horizontal line on top of the page. If that is what you need, a few indications:
The main problem is that display: flex will distribute only the immediate children of the box with that property. In your case it means that your flex items are the logo div and the ul as a whole, and it will not distribute the items inside the ul. To achieve the latter effect, you would also need to set the ul display to flex.
You are using the align-items property to configure flex items alignment, but this property aligns items in the direction opposite to the flex direction. As your flex direction is row, align-items: center aligns them in center vertically, from top to bottom. You won't notice its effects here because your container by default has the same height as its content, so items can't be assigned different vertical positions. But if you specify a larger height for your flex container, you will notice that all flex items will appear in the middle of the flex container's height; that could be useful in the outer flex container to align the ul items in the middle of the logo's height.
You should try the property justify-content to align your flex items in the same direction of your flex container, in this case horizontally. Try checking different values for this property, like space-around or space-evenly to achieve the distribution you need.
The top property is not needed here, unless you use it with a positioned element. You need to use it together with some value for the position property.
A CSS flexbox handles the row and column alignment of direct children elements to the parent in which flexbox has been applied. For Example, In your code:
<nav id="navbar"> is the parent which contains direct children elements, <div id="logo"> and <ul>, anything inside <div id="logo"> and <ul> are not the direct children to <nav id="navbar">. So, if you observe the <div> containing logo and the <ul> containing list of links are aligned horizontally beside each other due to #navbar ul{ display: flex;}
In order to make your list of links appear beside each other horizontally much alike your logo and list, you will need to give <ul> element display flex because <ul> acts as the direct parent element to <li> elements ; and since default value of flex-direction is row you may or may not set the value for it, as you like.
Hope this helps clarifying your concepts. Keep Learning!
#navbar{
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar > ul{
display: flex;
justify-content: space-between;
align-items: center;
}
#navbar > ul > li{
margin-right: 0.875rem;
list-style-type: none;
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="MyOnlineMeal.com">
</div>
<ul>
<li class="item">Home</li>
<li class="item">Services</li>
<li class="item">Our Clients</li>
<li class="item">Contact Us</li>
</ul>
</nav>
I'm working on CSS on webshop https://amres.manoverskis.lt/. And having a bad time with the menu bar. First of all, I can't centre it out. And the 2nd problem I have is that when you hover on the first menu item (PAVEIKSLAI) sub-menu appears and the first item in that menu is more left than the 2nd one. I can't seem to find what is wrong with it.
Thanks.
Try to add:
#hor-menu {
display:flex;
justify-content:center
}
and
#hor-menu>.grid_60 {
display:flex;
justify-content:center
}
to center the menu
and to remove the left gap in sub-menu, reset margins in ul:
.fs2 {
margin:0;
}
Add:
#hor-menu {
padding-left: 25%;
}
and change the class of UL for the second submenu (fs2 grid_12 omega submenu-2-column submenu-2-column-2) to > (fs2 grid_12 alpha submenu-2-column submenu-2-column-1)
I have created 2 examples for you. I hope it'll help you out.
1 - If you want navigation left align in your content area.
#hor-menu {
display: flex;
justify-content: center;
}
2 - If you want the navigation to align in the center on your screen.
#hor-menu {
display: flex;
justify-content: center;
}
and changes grid class name in your HTML from <div class="grid_60"> to <div class="grid_0">.
#main-menu { /* center menu */
display: flex;
justify-content: center;
}
#content-wrap ul#main-menu li a {
text-align: left; /* fix menu item */
}
To center menu you can simply make it flex, now most browsers support it.
And in your navigation second item was just aligned center so it looked like margin.
I have a div that has a table inside it, and it uses to create the links to it. So far, that's all I have done for the website. I'm attempting to space out the rows so that I can implement jQuery into it, however, I haven't started that yet.
My problem is that I can't get the rows to space evenly throughout the div. I've tried padding-left/right, however, that doesn't work with width and height, and margin-left/right aren't working. Is there a way to do this? Or, should I just get rid of the idea of using a table and create divs for each nav option?
Code
Here's one possible solution using lists and display:flex for positioning. Your updated example: https://repl.it/Hj62/6.
HTML part:
<div id="header-nav-content">
<ul class="table-nav-content">
<li class="nav-home">Home</li>
<li class="nav-about">About</li>
<li class="nav-contact">Contact</li>
</ul>
</div>
CSS part:
.table-nav-content {
text-align: center;
margin: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
padding: 0;
}
.table-nav-content li {
list-style: none;
}
You can also check if:
justify-content: space-between;
doesn't suit you better. You can find more about flex positioning, for example: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would recommend that you use the HTML list approach, https://www.w3schools.com/html/html_lists.asp. You might want to use margin not padding to space out each item evenly, When to use margin vs padding in CSS.
<ul style="list-style:none;">
<li style="display:block;float:left;margin:5px" class="nav-home">Home</li>
<li style="display:block;float:left;margin:5px" class="nav-about">About</li>
<li style="display:block;float:left;margin:5px" class="nav-contact">Contact</li>
</ul>
I'm a novice, trying to create my own website. I have a menubar on top of the page, and I'd like the menu items to be centered instead of left-justified. Please note: I'm trying to center 2 things. First is the text within the menu item, and the second is the entire group of menu items.
The link is located here:
http://www.martyversusaig.com
My menu-bar code is here:
<ul id="nav">
<li id="nav-home">Home</li>
<li id="nav-about">Your Story</li>
<li id="nav-archive">Florida Law</li>
<li id="nav-lab">Lab</li>
<li id="nav-reviews">Reviews</li>
<li id="nav-contact">Contact</li>
</ul>
I've tried entering 'center' html tags, but it doesn't center anything and really fouls up the menu.
Any help is greatly apprecaited!
Thanks,
Marty
I've made a fiddle of your nav bar so you can see how it would work. You can access it here: http://jsfiddle.net/BQj3P/
To center the #nav element, the easiest thing to do is to wrap it in a div. Creat a #nav-wrapper element and style it in the same way as you had previously styled #nav:
#nav-wrapper {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
float:left;
border:1px solid #42432d;
text-align: center;
}
You'll notice one important difference: text-align: center. This will help you center the #nav ul.
The #nav itself is now styled like this:
#nav {
margin: 0;
padding: 0;
display: inline-block;
}
The display: inline-block was the final piece you needed to center the entire set of navigation buttons.
To center the text inside the buttons themselves, your original code had this line to style the #nav list items: padding:20px 40px 4px 10px;
In other words, the right padding was set to 40px and the left was set to 10px. Simply changing the line to padding:20px 20px 4px 20px; will center your text.
Check out the fiddle for more details.
It helps to use css. I have a separate style sheet.
You will want to nest so that the outside one centers all elements inside of it and then internal menu items have a specific width, so they don't end up all together.
<div class="centre">
<div class="block">
<li id="nav-home">Home</li>
</div>
<div class="block">
<li id="nav-about">Your Story</li>
</div>
MY CSS:
.centre
{
text-align: center;
margin: 0 auto;
}
.block {
width: 100px;
display:inline-block;
}