I have been trying to create a website divided into 3 Columns of unequal length, being more specific two of 15% in the sides, and one of 70% in the centre. However I am not being able to manage that the 3 columns take 100% width of the space of my wesbite.
Here's my code:
body {
width: 100%;
max-width: 960px;
margin: 0;
}
div.content {
width: 100%;
display: flex;
}
div.column1 {
width: 15%;
background-color: aqua;
}
div.column2 {
width: 70%;
background-color: green;
}
navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 0.5rem 1rem;
}
.navbar-text {
display: inline-block;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.nav {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
<body style="padding-top: 70px">
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<img class="navbar-brand" src="img/logo.png" width="80" height="50" alt="" />
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon">2</span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Classes</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Gallery</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Location</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="content">
<div class="column1">
<h1> this is column 1</h1>
tting, remairem</div>
<div class="column2">
<h1> this is column 2</h1>
Lorem Ip Lorem</div>
<div class="column1">
<h1> this is column 1</h1>
Lorem Ipsum ing Lorem</div>
</div>
As you can see I have on top of my body a fixed navbar that was imported from bootstrap from dreamweaver,
and the a new div containing the three columns.
With this code I get the following output:
Do you guys know why the columns are not taking 100% width of the website?
Width of 100% wont work here, because parent of div.content is page body. Width of any % works, if the parent has already some width set, so the CSS has some value to calculate the % of. In this case, since you want it to cover the whole page, and the div does not have a parent, the easiest thing to do is to change % to vw.
vw stands for viewport-width and represents % of the whole page width (not parent).
div.content{
width:100vw;
display:flex;
}
Related
I've was trying to change the display of the nav bar list with media query when the page width shrinks. I put on the padding in between the lists and it's not appearing somehow. I wonder if it's because of flexbox or something else.
HTML CODE
<header id="header">
<h1><img id="header-img" src="https://cdn-icons-png.flaticon.com/512/4907/4907546.png" alt="cat tower">Aristocat Tower</h1>
<nav id="nav-bar">
<ul id="nav-list">
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#howItWorks">How It Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
CSS CODE
#header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#nav-list {
list-style: none;
display: flex;
flex-direction: row;
}
.nav-link {
margin: 1em 1em;
}
#media (max-width: 750px) {
#header {
display: flex;
flex-direction: column;
align-items: center;
}
#nav-list {
list-style: none;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-link {
padding: 5px;
}
}
PAGE PICTURE
You should be applying the padding to <li>, not to <a>. If you change your code to this:
<ul id="nav-list">
<li class="nav-link">Features</li>
<li class="nav-link">How It Works</li>
<li class="nav-link">Pricing</li>
</ul>
The padding should be working properly. If you wanna keep the <a> tags with their classes, you can directly apply the style to the list tags like this:
#nav-list li {
padding: 5px;
}
Also, take a look at this link here.
You're using bootstrap classes here.
You can simply use bootstrap padding classes for padding or if you want margin you can use margin classes.
Use px for horizontal padding, py for vertical padding.
Use mx for horizontal margin, my for vertical margin.
Following with the values (mx-1 to mx-5) or (px-1 to px-5).
<ul class="nav">
<li class="nav-item px-4">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item px-4">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
I've been trying to spread out my navigation bar I just can't seem to do it, I have display: flex; on, with justify-content: space-around, but it doesn't seem to do anything.
https://codepen.io/picklemyrickle/pen/XWjzyvb
Thanks in advance.
<nav id="nav-bar">
<ul>
<li> <a
class="nav-link"
href=#Programs
id="Programs">
Programs </a></li>
<li> <a
class="nav-link"
href=#Results
id="Results"
>Results</a></li>
<li><a
class="nav-link"
href=#Pricing
id="Pricing">
Pricing</a></li>
</ul>
nav > ul {
display: flex;
justify-content: space-around;
}
Here it is:
.navbar{
width: 100%;
position: static;
z-index: 1;
white-space: nowrap;
}
z index makes sure it stays on top, static makes sure it's static to the div,
width 100% make sure it's always the maximum length
I am having trouble creating a consistent flexbox between Chrome, Edge, IE and Firefox in my VUE application. The css I have works great in Chrome, Edge and Firefox but fails for Internet Explorer 11 .
I have a header in which I show two containers, one of them wrapping two logos and the other container wraps a list of links and dropdowns with links.
here a simplified outline of my template
<template>
<div>
<div>
<header>
<nav class="navbar navbar-expand-lg navbar-light header" v-if="!paymentIsSelected">
<div class="branding-wrapper">
<a v-bind:href="this.url">
<div class="logo-icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114.4 129.32"></svg>
</div>
<div class="logo-text">
<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278.41 53.09"></svg>
</div>
</a>
</div>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav menu">
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
</ul>
</div>
</nav>
</header>
</div>
</div>
</template>
and here's mi css
.header {
display: flex;
justify-content: space-between;
align-items: baseline !important;
flex-wrap: nowrap;
align-items: flex-end;
margin-left: auto;
margin-right: auto;
padding-left: 1.75rem;
padding-right: 1.75rem;
width: 100vw;
max-width: 1200px;
}
.branding-wrapper {
display: block;
padding-top: 1rem;
padding-bottom: 2rem;
}
.branding-wrapper a {
text-decoration: none;
}
.branding-wrapper .logo-icon {
width: 60px;
margin-right: -25px;
}
.branding-wrapper .logo-text {
width: 150px;
}
.branding-wrapper .logo-icon,
.branding-wrapper .logo-text {
display: inline-block;
}
.branding-wrapper .logo-icon svg,
.branding-wrapper .logo-text svg {
display: block;
max-width: 100%;
fill: $secondaryColor;
}
in addition to not applying the "align-items: baseline" In the "branding-wrapper" container, I apply an inline-block to both logos and they are shown aligned at the bottom in all browsers except IE.
I have searched for other references to the subject and I have tried to declare a height to the header as indicated but it doesn't work and also to include a script in the index.html but it doesn't work either.
What am I doing wrong?
Thanks for your time and help.
I am using the CSS framework Bulma (first time), though my question might not be Bulma specific, I thought I'd include that just be clear.
I have a navigation bar that has a centered set of links, but also right-align elements. Here is a screenshot:
You can ignore the fixed leaves on the left. I want to know how I can get the cart and the login button to be right aligned whilst having the other bits centre aligned.
Here is a codepen of what I have tried. I just do not know of the proper way to have the car and the login right aligned. I mean I can position absolute them, but that sounds silly.
HTML CODE
<nav class="navbar is-fixed-top">
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
</nav>
CSS CODE
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
How can I get my navigation like that?
Bulma has two regions in its navbar called navbar-startand navbar-end for control of alignment. Just add an additonal class (in my example: navbar-start--centered) to adapt the "start region" to your needs:
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
Here a codepen to play with.
Look at it with a wide viewport - it is desktop only. If you want the start region in the viewports center, you could additionally position the "end region" absolutely.
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start navbar-start--centered">
<a class="navbar-item" href="">Products</a>
<a class="navbar-item" href="">Our Story</a>
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a class="navbar-item" href="">Blog</a>
<a class="navbar-item" href="">Contact Us</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
<span>Cart</span>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
You can add an empty element to the left (as a placeholder) and one to the right (to hold the links) and set them to be flex:1.
Then use normal flex positioning to set the contents of the second (right) container to be right aligned.
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
.nav-container{
display:flex;
flex:1;
justify-content: flex-end;
}
.nav-container a {
margin:0 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<nav class="navbar is-fixed-top">
<div class="nav-container"></div>
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
<div class="nav-container">
🛒
Login
</div>
</nav>
I'm trying to align "Previous" to the left, align "Next" to the right, and figure out how to center the page numbers.
I've been looking at tutorials and articles on flexbox but I'm having a hard time understanding it.
.nav-links {
display: flex;
}
.prev.page-numbers {
justify-content: flex-start;
}
.next.page-numbers {
justify-content: flex-end;
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>
It seems you want to "push" flex items in one direction or another. To do that, you should use auto margins instead of justify-content.
.nav-links {
display: flex;
}
.prev.page-numbers {
margin-right: auto; /* Push to the left */
}
.next.page-numbers {
margin-left: auto; /* Push to the right */
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>
The remaining flex items will be centered between the first and last ones, not necessarily centered relatively to the container. If you want the latter, you can make the first and last flex items be equally wide.
.nav-links {
display: flex;
}
.prev.page-numbers, .next.page-numbers {
flex: 1; /* Disttribute remaining space equally */
}
.next.page-numbers {
text-align: right;
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>
The justify-content property applies only to flex containers, although it aligns flex items.
In your code, because you're applying justify-content to flex items, it is being ignored.
Here are two working examples:
Example 1 - justify-content
.nav-links {
display: flex;
justify-content: space-between;
background-color: lightgray;
}
a {
flex: 0 0 10%;
text-align: center;
border: 1px solid black;
background-color: yellow;
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class=" page-numbers">1</a>
<a class="page-numbers">2</a>
<a class=" page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>
Example 2 - auto margins
.nav-links {
display: flex;
background-color: lightgray;
}
a {
flex: 0 0 10%;
text-align: center;
border: 1px solid black;
background-color: yellow;
}
a:first-child { margin-right: auto; }
a:last-child { margin-left: auto; }
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<a class=" page-numbers">1</a>
<a class="page-numbers">2</a>
<a class=" page-numbers">3</a>
<a class="next page-numbers">Next</a>
</div>
More details:
Methods for Aligning Flex Items along the Main Axis
justify-content only works in parents, not in children, so if you can wrap your .page-numbers then you just can simply set display:flex to parent and child div and flex:1 + justify-content to div child, which is parent of .page-numbers
div {
display: flex;
}
div div {
flex: 1;
justify-content: center
}
<div class="nav-links">
<a class="prev page-numbers">Previous</a>
<div>
<a class="page-numbers">1</a>
<a class="page-numbers">2</a>
<a class="page-numbers">3</a>
</div>
<a class="next page-numbers">Next</a>
</div>