I'm trying to have the elements in the middle 1240px of the screen using a wrapper, however, when I add the wrapper, the .space <li> element stops shrinking when I shrink down the page making my sign in button and sign out button disappear in the right side of the page. Also I've been wondering whether using an empty <li> with flex: 1 is the correct way of creating the space in between the first 3 <li> elements and the last 2.
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
You need to use percent to make it responsive.
Or, add max-width: 100%; if you want to maintain width: 1240px;
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 100%;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
Use width: 100%; to nav and wrapper
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
width: 100%;
}
nav{
width: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
Related
Here is my code:
.row {
width: 800px;
}
.menu {
display: inline-block;
display: flex;
list-style: none;
padding: 0;
}
li {
width: 100%;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
I want the menu to fill the full width of the div. The distances are the same and the elements are to coincide with the edges of div test.
This is what it would look like:
Test
Best Regards and Thank You
justify-content is what you probably look for : see https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
demo
.row {
width: 800px;
}
.menu {
display: flex;
list-style: none;
padding: 0;
justify-content:space-between;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
.row {
width: 800px;
overflow-x: hidden;
}
.menu {
display: inline-block;
display: flex;
list-style: none;
width: 100%;
padding: 0;
}
li {
width: 100%;
text-align: center;
}
.test {
width: 100%;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
<div class="test">
<p> </p>
</div>
</div>
Try this😊
.menu {
display: inline-block;
display: flex;
list-style: none;
padding: 0;
width: 100%;
}
This should fix your problem
display: flex; and justify-content: space-between; get you there.
I also added:
* {
margin: 0;
padding: 0;
}
I also removed (commented):
li {
width: 100%;
}
to get rid of the default margin and padding on the body element.
* {
margin: 0;
padding: 0;
}
.row {
width: 800px;
}
.menu {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
}
/*
li {
width: 100%;
}
*/
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
You need to configure your flex better. Here is a solution
* {
margin: 0;
padding: 0;
}
.row {
width: 800px;
}
.menu {
display: flex;
list-style: none;
padding: 0;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: stretch;
justify-content: space-between;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
Hi guy i'm working on a portfolio for my freecodecamp responsive web design project i already made my wireframe as you can see above but im kind of stuck using flexbox to make a sticky side menu i can't get the 100% height for my main-menu secton here is what i wrote
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav,
ul,
#main-menu {}
.box {
height: 100%;
background: #DDD;
width: 15%;
display: flex;
flex-direction: column;
}
.menu-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
<main>
<section id="main-menu" class="menu">
<nav>
<ul class="box">
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
</ul>
</nav>
</section>
<section id="main"></section>
</main>
use min-height: 100vh; this will change the height of the element to the height of the available viewport (visible area in the page). check the snippet below:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav,
ul,
#main-menu {
min-height: 100vh;
}
.box {
height: 100%;
background: #DDD;
width: 15%;
display: flex;
flex-direction: column;
}
.menu-item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
text-align: center;
border: 1px solid black;
}
<main>
<section id="main-menu" class="menu">
<nav>
<ul class="box">
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
<li class="menu-item"></li>
</ul>
</nav>
</section>
<section id="main"></section>
</main>
I am try to put the div nav2 on the same line as nav 1 but it just not going up what is the problem i even try float but it not working also
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display:
}
#navbar ul {
list-style: none;
}
#navbar ul li {
display: inline-block;
padding: 10px 5px 0px 20px;
}
#nav2 {
float: right;
}
<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get stated</li>
<li>Log in</li>
</ul>
</div>
</div>
<div id="head">
<div>
<h3>Company</h3>
</div>
<div>
<h1>Invert Like a idiot</h1>
</div>
<div>
<p>because money is lame</p>
</div>
</div>
</div>
I expect that Both "nav1" and "nav2" on the name line just like normal navbar but i want "nav2" on the right side that why i make it div "nav2"
This is probably what you want to do :
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100vh;
}
#navbar {
position: fixed;
width: 100%;
display: grid;
grid-template-columns: auto auto;
height: 50px;
}
#nav1 ul, #nav2 ul {
display: grid;
grid-gap: 20px;
grid-auto-columns: minmax(min-contant, max-content);
grid-auto-flow: column;
height: 100%;
align-items: center;
list-style: none;
}
#nav1 ul {
padding-left: 20px;
justify-content: left;
}
#nav2 ul {
padding-right: 20px;
justify-content: right;
}
#head {
padding: 50px 20px 0 20px;
}
<html>
<head></head>
<body>
<div id="main">
<div id="navbar">
<div id="nav1">
<ul>
<li>How it works</li>
<li>Why Company?</li>
<li>Pricing</li>
<li>About us</li>
<li>Resource center</li>
</ul>
</div>
<div id="nav2">
<ul>
<li>Get stated</li>
<li>Log in</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I want something like this:
+-------------------------------------------------------------------+
| |
| LOGO Search_box... ITEM_1 ITEM_2 ITEM_3 |
| |
+-------------------------------------------------------------------+
The LOGO is an image. Search_box is an input text and ITEM_X an orizontally list item.
I tried this, but the logo doesn't stay where I want: https://jsfiddle.net/mna4de2n/
Note: I did not implement the input text yet.
CSS:
header{
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a{
display: inline-block;
color: #262626;
text-align: center;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 10%;
}
HTML:
<header>
<div class="left">
<li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</header>
Why not use flexbox?
header {
width: 100%;
height: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
header img {
width: 50%;
}
header .left {
width: 30%;
}
header .right {
width: 70%;
display: flex;
justify-content: flex-end;
}
header ul {
list-style-type: none;
padding: 0.5vw;
overflow: hidden;
display: flex;
}
header li a {
color: #262626;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header input {
height: 30px;
align-self: center;
}
<header>
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
<div class="right">
<input type="search">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</header>
<header>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div class=""> <!-- You do not need this class here, now all you need to do is work on centering your menu. -->
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
I moved your logo after the right floated menu. and removed the li tag from the logo and the class for that div (float left is not needed.).
You need to set the image width to pixels, instead of percentage, this is making the parent of the image to take the full width of the header. Which is causing the issue. Also removing the li tag wrapping the image, since it is of no use.
Before:
header img {
width: 10%;
}
<div class="left">
<li><img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png"></li>
</div>
After:
header img {
width: 100px;
}
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
Note: Please view the demo in full screen to see the change.
header {
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a {
display: inline-block;
color: #262626;
text-align: center;
padding: 0.5vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 100px;
}
<header>
<nav>
<div class="left">
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
</header>
I have kept the li under ul, instead of div and changed the image size to pixels.
<div class="left">
<ul>
<li>
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</li>
</ul>
</div>
header {
width: 100%;
height: auto;
text-align: center;
display: inline-block;
}
.left ul{
padding:0;
}
header ul {
list-style-type: none;
text-align: center;
padding: 0.5vw;
overflow: hidden;
}
header li {
display: inline;
}
header li a {
display: inline-block;
color: #262626;
text-align: center;
padding: 3vh 0.5vw;
text-decoration: none;
}
header .left {
padding-left: 15%;
float: left;
}
header .right {
float: right;
padding-right: 25%;
}
header img {
width: 80px;
}
<header>
<nav>
<div class="left">
<ul>
<li>
<img src="http://logok.org/wp-content/uploads/2017/05/YouTube-logo-2017-logotype.png">
</li>
</ul>
</div>
<div class="right">
<ul>
<li><a class="active" href="#home">Matcha</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</nav>
</header>
I have a page that has a dark grey sidebar that has a ul in it that is holding some navigation. Currently the UL is getting pushed over within the side bar.
Fiddle: http://jsfiddle.net/PWZJd/
I would like the UL to be pressed up against the left side of the sidebar. Then I can add some padding to move it over as I see fit.
HTML:
<div class="content">
<header id="myNav" class="top_block navbar-fixed-top" >
<ul>
<li>Home</li>
<li>4Tell</li>
<li>Console 1</li>
<li>Console 2</li>
<li>About</li>
</ul>
</header>
<aside class="background sidebar">
<div class="sidenav">
<ul class="menu side-menu">
<li>NCR at your service</li>
<ul class="sub-menu">
<li>My Support Link</li>
<li>My Asset List</li>
<li>My Invoices</li>
<li>My Somthing Else</li>
</ul>
<li>Q2C MAC</li>
<ul class="sub-menu">
<li>Move</li>
<li>Add</li>
<li>Change</li>
<li>Swap</li>
</ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</aside>
<div class="left_block sidebar">
</div>
<div class="bottom_block footer">
<p class="text-center">Designed by Steve Wilson <br>With contributions from Alex Cronon and Robert Moua</p>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content {
min-height: 100%;
position: relative;
overflow: auto;
z-index: 0;
}
.background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.top_block {
width: 100%;
display: block;
}
.bottom_block {
position: absolute;
width: 100%;
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
}
.background.sidebar {
height: auto !important;
padding-bottom: 0;
left: 0;
width: 200px;
background-color: #33404c;
margin-top: 50px;
margin-bottom: 50px;
border-right: 1px solid;
}
.sidebar {
height: auto;
width: 20%;
padding-bottom: 75px;
}
.footer {
width: 100%;
height: 50px;
background-color: #e3e6ea;
padding-top: 5px;
}
.sidenav {
margin-top: 10px;
color: #f9fafb;
}
.side-menu {
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
list-style: none;
line-height: 2em;
}
*Note: I have cut some of the code for Stack Overflow, see the fiddle for a more complete version.
adjust the padding and margin on your side-menu to 0.
See: http://jsfiddle.net/PWZJd/2/
The default padding on the ul element is what's moving it to the right. Just update the padding and you can dock the ul up against the left side of the side-bar as close as you want.
Demo: http://jsfiddle.net/PWZJd/3/