so I was making this layout and i can't get the header to be aligned properly
I want to move the button and heading to the red boxes
enter image description here
The code is as follows:
<div class="main">
<div class="header">
<h1 class="notes__title">Notes</h1>
<button class="notes__create">Create</button>
</div>
<div class="notes">
<div class="note">
<h3 class="note__title">Note Title</h3>
<div class="note__body">Text....</div>
</div>
</div>
and the CSS
.main {
display: flex;
width: 100%;
align-items: center;
flex-direction: column;
}
.header {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
margin: 10px 0px;
}
.notes__title {
color: #fff;
}
.notes {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
please help
You're using space-around which is what causes the effect you are seeing.
Try:
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
max-width: 1200px;
}
ok so i did this and it worked
although I am not happy with the solution, i wanted to achieve it with flex box only#
.main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}
The easiest solution I can think of is using bootstrap cols and use the space-between for Notes and Button to got to the right place
Related
I have a simple web based text adventure which could be played using a screen reader. What I want is that when I navigate to the next page the content is read in DOM structure and then the focus is set to the button. So it should read the title, text and buttons. When I use the screen reader the focus then should be on the first button so that I don't have to navigate through the whole page to get to the button.
Is this possible?
Here is a really simple example of what I have:
* {
box-sizing: border-box;
}
html, body, tw-passage, aside, .container {
height: 100%;
}
a {
cursor: pointer;
text-decoration: underline;
}
body {
margin: 0;
}
div, p {
text-align: center;
}
.title {
font-size: 2em;
line-height: 1em;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.container div:nth-of-type(2) {
display: flex;
flex-flow: row wrap;
overflow: scroll;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.contentImg {
max-height: 50vh;
max-width: 100%;
margin-bottom: 10px;
}
.content {
order: 2;
display: flex;
flex-direction: column;
}
.content a {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background-color: #eee;
padding: 10px;
margin: 5px;
}
.content p {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
<main class="container">
<div id="title_Start" class="title">Title</div>
<div>
<span class="content">
<span id="content_Start" class="LANG">
Text...
</span>
<span class="choices">
<a>Link 1</a>
<a>Link 2</a>
</span>
</span>
<img class="contentImg" src="https://www.pngkey.com/png/detail/233-2332677_image-500580-placeholder-transparent.png"/>
</div>
</main>
I have a grid on my page but it doesn't seem to be doing what I'm asking of it (as usual haha). There are two main issues which I can't seem to solve.
Number 1: The right side of the grid (recent articles) seems to take up too much space. Ideally I'd want the grid to be centred so both halves are equal sizes
Number 2: When resizing, the left part of the grid gets compressed while the right side doesn't. If possible I'd like the left side to stay constant and have the right side of the 'recent articles' list be compressed
The code used is here:
HTML:
<div class="homepage">
<div class="topics">
<div class="homepage-topics-title">
Explore some topics:
</div>
<div class="individual-topics">
Productivity
Orginisation
Time-Management
</div>
</div>
<div class="recent">
<div class="homepage-recent-title">
Recent articles
</div>
<div class="hompage-recent-articles">
{{{body}}}
</div>
</div>
</div>
CSS:
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding: 6rem 0;
}
#media (max-width: 767px) {
.site-content {
padding: 3rem 0;
}
}
/* Homepage code */
.homepage{
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: 3rem;
}
.homepage-recent-title{
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
padding-left: 3rem;
line-height: 1;
}
.homepage-topics-title{
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
margin-left: 3rem;
line-height: 1;
}
.individual-topics{
position: relative;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 5rem;
padding-right: 50%;
font-size: 1.6rem;
font-weight: 400;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 3;
}
If you adjust you grid-template-columns, I think you get what you need.
/* Homepage code */
.homepage{
display: grid;
grid-template-columns: min-content 1fr;
margin-top: 3rem;
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex-grow: 1;
padding: 6rem 0;
}
#media (max-width: 767px) {
.site-content {
padding: 3rem 0;
}
}
/* Homepage code */
.homepage {
display: grid;
grid-template-columns: min-content 1fr;
margin-top: 3rem;
}
.homepage-recent-title {
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
padding-left: 3rem;
line-height: 1;
}
.homepage-topics-title {
font-size: 3rem;
position: relative;
align-self: center;
overflow: hidden;
margin-left: 3rem;
line-height: 1;
}
.individual-topics {
position: relative;
display: grid;
grid-template-rows: 1fr 1fr 1fr;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
padding-left: 5rem;
padding-right: 50%;
font-size: 1.6rem;
font-weight: 400;
align-items: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 3;
}
<div class="homepage">
<div class="topics">
<div class="homepage-topics-title">
Explore some topics:
</div>
<div class="individual-topics">
Productivity
Orginisation
Time-Management
</div>
</div>
<div class="recent">
<div class="homepage-recent-title">
Recent articles
</div>
<div class="hompage-recent-articles">
{{{body}}}
</div>
</div>
</div>
I am trying to move my button on bottom (some pixel above bottom).so it always be in bottom whether it contend is less or large. I tried using flex-box also not able to do that.Container have min-height : 500px
here is my code
https://jsbin.com/joyalosate/edit?html,css,output
Expected output :: Explore products move bottom with some pixel above bottom .
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
HTML
<div class="rh02w2">
<div class="bottom__block">
<button class="rh02-pcontent" data-lbl="panel2-home-apps-content-area">
<h1 class="rh02-ttl">Tetst <b>Applications</b></h1>
<div class="rh02-sub">Complete Suite of Apps</div>
<div class="rh02-leadin">
<p>Streamline your enterprise business process. With ERP Financials, Procurement, Project Portfolio Management and more, you can increase productivity, lower costs, and improve controls.</p>
</div>
</button>
<div class="rh02w4">
<div class="rh02-cta">
<div class="obttns">
<div>
<a data-lbl="panel2-home-apps-learn-more">Explore products</a>
</div>
</div>
</div>
</div>
</div>
</div>
css
.rh02w2 {
background-color: #325C72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #FBF9F8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height:500px;
}
.obttns {
width: 100%;
font-size: 1.4rem;
margin-bottom: -1.6rem;
display: -ms-flexbox;
display: flex;
flex-flow: row wrap;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-align: stretch;
align-items: stretch;
}
.obttns>div>* {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
}
Replace your CSS with this.
.rh02w2 {
background-color: #325c72;
height: calc(100vh - 60px);
transform: translateY(60px);
left: 0;
min-width: 100%;
position: absolute;
margin-top: -60px;
color: #fbf9f8;
}
.bottom__block {
position: absolute;
bottom: 20px;
padding: 0 40px;
/* display: flex;
flex-direction: column; */
border: 1px solid;
min-height: 500px;
}
.rh02w4 {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.obttns {
width: 100%;
font-size: 1.4rem;
}
.obttns > div > * {
color: #161513 !important;
background: #fff;
}
.obttns a {
font-size: 1em;
font-weight: 500;
font-family: inherit;
line-height: 1.2;
padding: 10px;
border-radius: 4px;
cursor: pointer;
position: relative;
border: 0;
min-height: 30px;
height: 100%;
text-align: center;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
}
If you want to display your button about 10% above the bottom of the screen you can use the margin-top: 90%; in css. Here is the entire code alongside a button:
<button style="margin-top: 90%;">hi</button>
You can edit the 90% depending on how far down the button is on your screen. Since the code is also using the percentage instead of pixels, it will adjust depending on your screen size.
I have a Flexbox container with the following SCSS:
.picker {
height: 75px;
width: 100%;
display: flex;
flex-flow: column wrap;
}
My flex items have the following SCSS:
.pickeritem {
height: 25px;
width: 130px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
}
The problem I'm having is that the container is wrapping the items to the center of the div rather than next to the other items like so:
How do I make items 3 to 8 wrap next to each other leaving all of the white space to the right of the div?
Can this be achieved without using any sort of row and column methodology?
Try using the align-content property. I also made some other minor changes and added color and border for better visualization.
.picker {
height: 75px;
width: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
border: 1px solid black;
}
.pickeritem {
height: 25px;
width: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
background-color: #fbbdbd;
}
<div class='picker'>
<div class='pickeritem'>1</div>
<div class='pickeritem'>2</div>
<div class='pickeritem'>3</div>
<div class='pickeritem'>4</div>
<div class='pickeritem'>5</div>
<div class='pickeritem'>6</div>
<div class='pickeritem'>7</div>
<div class='pickeritem'>8</div>
<div class='pickeritem'>9</div>
<div>
You can use
.picker {
height: 75px;
width: 100%;
display: flex;
flex-direction: row;
justify-content:flex-start;
}
.pickeritem {
height: 25px;
flex-shrink: 0;
display: flex;
align-items: center;
margin: 0 10px;
}
I've successfully coded a CSS/JS hamburger menu which has a transforming icon when clicked. However, I've just discovered a bug where, when the hamburger 'close' button is clicked, the nav menu cuts behind the header making it look messy.
Currently, the menu opens correctly when the hamburger is clicked - at 100vh - but when it closes, it appears that it cuts behind the header, so it looks like it's at about 80vh. When it's closing, I'm wanting it to remain at 100vh.
Apologies in advance for the lengthy code.
Here's my code:
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 99;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
}
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
Thanks in advance.
Think this is easiest edit to make it work?
Changed the position: absolute / flex
Also the order of DOM elements changed around (most important)
Hope it didnt break anyting :)
// Variables
let line1 = document.getElementById("hamburger-line-1");
let line2 = document.getElementById("hamburger-line-2");
let hamburger = document.getElementById("hamburger");
let navList = document.getElementById("hamburger-nav-list");
// Function
function hamburgerActive() {
line1.classList.toggle("active");
line2.classList.toggle("active");
navList.classList.toggle("active");
}
// Event Listener
hamburger.addEventListener("click", hamburgerActive);
.universal-header-section {
height: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-container {
height: 90%;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
}
.universal-header-hamburger {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-start;
}
#hamburger {
height: 20px;
width: 40px;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: column;
cursor: pointer;
z-index: 9999;
}
.hamburger-span {
height: 5px;
width: 30px;
background-color: #342b38;
transition: all .2s ease-in-out;
cursor: pointer;
}
#hamburger-line-1.active {
transform: translateY(7.5px) rotate(-45deg);
}
#hamburger-line-2.active {
transform: translateY(-7.5px) rotate(45deg)
}
.universal-header-logo {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: center;
}
.universal-header-basket {
height: 100%;
width: 33.33%;
display: flex;
align-items: center;
justify-content: flex-end;
}
#hamburger-nav-list {
height: 100vh;
width: 0;
top: 0;
align-items: center;
justify-content: space-around;
flex-direction: column;
background-color: yellow;
transition: all 0.5s ease-in-out;
position:absolute;
}
#hamburger-nav-list.active {
height: 100vh;
width: 30%;
position: fixed;
z-index: ;
display:flex;
}
<div id="hamburger-nav-list">
<div class="hamburger-container">
</div>
</div>
<header class="universal-header-section">
<div class="universal-header-container">
<div class="universal-header-hamburger">
<div id="hamburger">
<span id="hamburger-line-1" class="hamburger-span"></span>
<span id="hamburger-line-2" class="hamburger-span"></span>
</div>
</div>
<div class="universal-header-logo">
<a href="index">
<h2>Logo</h2>
</a>
</div>
<div class="universal-header-basket">
<a href="basket">
<i class="fas fa-shopping-cart fa-2x"></i>
</a>
</div>
</div>
</header>