I want the buttons to be positioned above the box, but i don´t know how to do it, i tried many thigs but didn´t work
Something like this, idk how to put those button above
This is my HTML Code
<div id="clockdiv">
<div id="time">
<span class="minutes"></span>
:
<span class="seconds"></span>
</div>
</div>
<div>
<div>
<img src="imgs/stop.png" class="btnStop" id="btnStop"/>
</div>
<div>
<img src="imgs/play.png" class="btnPlay" type="button" id="btnPlay"/>
</div>
<div>
<img src="imgs/pause.png" class="btnPause" type="button" id="btnPause"/>
</div>
<div>
<img src="imgs/play.png" class="btnResume" type="button" id="btnResume"/>
</div>
</div>
</body>
</html>
This is my CSS
.btnStop {
width: 30%;
height: 30%;
display: none;
}
.btnResume {
width: 30%;
height: 30%;
}
.btnPlay {
width: 30%;
height: 30%;
}
.btnPause {
width: 30%;
height: 30%;
display: none;
}
Idk what to try, because im so useless with CSS
This is a perfect use-case for css grids
With the little info you have provided I can only help you so much but I am sure you can customize my solution for your needs
#container {
display: inline-grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, max-content);
align-items: center;
align-content: center;
justify-content: center;
}
#container > button {
width: 30px;
height: 30px;
}
#timer {
grid-column: 1 / span 4;
grid-row: 2;
text-align: center;
font-size: 30px;
}
<div id="container">
<button class="btnPlay">▶️</button>
<button class="btnPause">⏸️</button>
<button class="btnStop">⏹️</button>
<button class="btnResume">⏯️</button>
<div id="timer">30:00</div>
</div>
Related
I am struggling with lining my P5.JS sliders into my CSS grid.
Unfortunately, I don't get this to showcase in the code snippet function. Therefore, I'll paste my code and show the result via an image.
Part of my HTML:
<body>
<div class="menu">
<h1>MENU</h1>
</div>
<div class="outer">
<div class="container">
<div class="temp">
</div>
<div class="draw">
<p id="canvas"></p>
</div>
<div class="label">
<label for="shapes">Shapes</label><br>
<label for="scale">Scale</label><br>
<label for="rotation">Rotation</label><br>
<label for="background">Background</label><br>
<label for="stroke">Stroke</label><br>
<label for="fill">Fill</label><br>
</div>
<div class="slider">
<p id="shape"> </p>
<p id="scale"> </p>
<p id="rotation"> </p>
<p id="background"> </p>
<p id="stroke"> </p>
<p id="fill"> </p>
<p id="position"> </p>
<p id="save"> </p>
<p id="record"> </p>
</div>
<div class="check">
<p id="checkshape"> </p>
<p id="checkscale"> </p>
<p id="checkbackground"> </p>
<p id="checkstroke"> </p>
<p id="checkfill"> </p>
<p id="checkposition"> </p>
<p id="checkpaint"> </p>
<p id="checkrecord"> </p>
</div>
</div>
</div>
</body>
</html>
Part of my CSS:
* {
margin: 0;
padding: 0;
}
.outer div {
outline: 1px solid red;
min-height: 20px;
}
body {
width: 100vw;
}
.menu {
width: 100%;
height: 60px;
}
.outer {
display: flex;
justify-content: center;
margin-top: 1vw;
}
.container {
width: 95%;
display: grid;
grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1vw;
}
.menu,
.container div {
border: 1px solid black;
box-sizing: border-box;
}
.temp {
grid-column: 1 / 2;
}
.draw {
grid-column: 2 / 3;
aspect-ratio: 1 / 1;
}
.label {
grid-column: 3 / 4;
text-align: right;
}
.slider {
grid-column: 4 / 5;
}
.check {
grid-column: 5 / 6;
}
Part of my P5.JS (only showcasing some sliders)
function setup(){
canvasForPosition = createCanvas(windowWidth, windowHeight);
canvasForPosition.parent('#canvas');
sliderSize = createSlider(10, height,height/2,0.00001);
sliderSize.parent('#scale');
checkScaleAuto = createCheckbox('Automate', false);
checkScaleAuto.parent('#checkscale');
}
Outcome:
This is how the lining should look. + I want to add additional labels on the left (The positioning here was made with p5.position):
I was wondering if I could somehow nest another grid into my columns 3/6 and if that is compatible with all browsers. Or maybe there is an option to match the hight of a checkbox with the text and sliders.
Appreciate your help.
Max
Given the structure of your HTML and the need to have things across the last 3 columns aligned the simplest thing seems to make each a one column, multi row grid. Divide each into say 31 rows of equal size.
You then can place each of the HTML elements exactly in the row you want it to be so that the labels/sliders/checks are aligned as required.
Remove the additional br elements and let the grid do the positioning.
<head>
<style>
* {
margin: 0;
padding: 0;
}
.outer div {
outline: 1px solid red;
min-height: 20px;
}
body {
width: 100vw;
}
.menu {
width: 100%;
height: 60px;
}
.outer {
display: flex;
justify-content: center;
margin-top: 1vw;
}
.container {
width: 95%;
display: grid;
grid-template-columns: 1fr 4fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 1vw;
}
.menu,
.container div {
border: 1px solid black;
box-sizing: border-box;
}
.temp {
grid-column: 1 / 2;
}
.draw {
grid-column: 2 / 3;
aspect-ratio: 1 / 1;
}
.label,
.slider,
.check {
display: grid;
grid-template-rows: repeat(31, 1fr);
grid-template-columns: 1fr;
gap: 0.25vw;
}
.label {
grid-column: 3 / 4;
text-align: right;
}
.slider {
grid-column: 4 / 5;
}
.check {
grid-column: 5 / 6;
}
.label>*,
.slider>*,
.check>* {
background: lightblue;
}
</style>
</head>
<body>
<div class="menu">
<h1>MENU</h1>
</div>
<div class="outer">
<div class="container">
<div class="temp">
</div>
<div class="draw">
<p id="canvas"></p>
</div>
<div class="label">
<label for="shapes">Shapes</label>
<label for="scale">Scale</label>
<label for="rotation">Rotation</label>
<label for="background">Background</label>
<label for="stroke">Stroke</label>
<label for="fill">Fill</label>
</div>
<div class="slider">
<p id="shape"> </p>
<p id="scale"> </p>
<p id="rotation"> </p>
<p id="background"> </p>
<p id="stroke"> </p>
<p id="fill"> </p>
<p id="position"> </p>
<p id="save"> </p>
<p id="record"> </p>
</div>
<div class="check">
<p id="checkshape"> </p>
<p id="checkscale"> </p>
<p id="checkbackground"> </p>
<p id="checkstroke"> </p>
<p id="checkfill"> </p>
<p id="checkposition"> </p>
<p id="checkpaint"> </p>
<p id="checkrecord"> </p>
</div>
</div>
</div>
</body>
</html>
I haven't done any positioning of the labels etc here because I don't know where they are to be aligned to. The 31 rows is a suggestion so you have some to leave as blank space rather than worry about which groups need extra margins as the HTML is not structured that way.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
So I've been trying to make a grid for the past 30 minutes and I can't seem to get it to work. I've tried the piece of code on a sandbox and it worked there. I don't understand why it wont work on my page. What happens is all the divs get placed under each other and I want them to be next to each other instead.
What happens:
div1
div2
div3
What I want to happen:
div1 div2 div3
<div class="jar-lists-wrapper slide-in">
#foreach($folders as $folder)
<div class="jar-lists hidden" data-name="{{$folder}}">
<div class="jar-list box" data-name="{{$folder}}">
<div class="box-header with-border">
<h1 class="box-title">{{$folder}}</h1>
</div>
<div class="box-body">
<div class="jar-children">
#foreach($jars as $jar)
#if(strpos($jar, strtolower($folder)) !== false)
<div>
<h3 class="jar-title">Version:
{{str_replace(array(strtolower($folder) . '-', '.jar'), '', $jar)}}
</h3>
<form action="{{ route('server.settings.jar.switch', $server->uuidShort) }}" method="POST">
#if(str_replace('.jar', '', $jar) == $currentJar)
<br><button class="btn btn-success" type="submit">Installed</button>
#else
<br><button class="btn btn-primary" type="submit">Install</button>
#endif
</form>
<br>
</div>
#endif
#endforeach
</div>
</div>
<div class="box-footer">
View More<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
#endforeach
</div>
And this is my css:
.main {
width: 90%;
max-width: 1300px;
margin: 0 auto;
padding: 2em
}
.jar-lists-wrapper {
position: relative;
display: block
}
.jar-lists {
position: relative;
margin-bottom: 60px;
margin-top: 30px;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 32.5%);
justify-content: space-between;
z-index: 1
}
.jar-lists.hidden {
display: none
}
.jar-list {
text-align: center;
}
.jar-title {
font-size: 16px;
color: #5e5e5e
}
.jars-more {
display: block;
width: 100%;
text-decoration: none;
text-align: center
}
.jars-more {
padding: 10px 0;
font-size: 18px;
color: gray;
cursor: pointer
}
.jars-more i {
margin-left: 10px
}
#media screen and (max-width:1250px) {
.jar-lists {
grid-template-columns: repeat(2, 47%)
}
.jar-list {
margin-bottom: 30px
}
}
#media screen and (max-width:900px) {
.jar-lists {
grid-template-columns: repeat(1, 100%)
}
}
div are block level element so they appears horizontally. So use display:inline-block and width
.child {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use flex
.parent {
display: flex;
flex-direction: row;
}
.child {
border: 2px solid green;
width: 150px;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div>
You can also use grid
.parent {
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.child {
border: 1px solid red;
}
<div class='parent'>
<div class='child'>1</div>
<div class='child'>1</div>
<div class='child'>1</div>
</div
Try specifying gird-template-spacing from 32.5% to 1fr.
I am trying to create a pinterest style board for mobile my web application which is going to be just html, css and javascript/jquery (at the moment i'm just coding them as static pages) No frameworks such as bootstrap. It needs to work on different screen dimensions therefore need to be responsive, to achieve this I tried to use flexbox however this didnt work either
I have made an initial attempt however i'm relatively new to web development and cannot get the images stay within the "board-inner" div. As the images will be different sizes, I need them to fit
/* CSS for Login-image-holder */
.main-column-holder {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(350px, 1fr));
justify-items: center;
align-items: center;
}
.column-holder {
display: flex;
flex-direction: column;
width: calc(100% - 50px);
align-items: center;
justify-content: center;
}
/* CSS for collection-holder */
.board-holder {
display: flex;
width: 100%;
border: #b2b2b2 1px solid;
height: 310px;
flex-direction: column;
}
.board {
height: 100%;
}
.board-inner {
height: 100%;
display: flex;
flex-flow: column wrap;
align-items: center;
}
.board-image {
width: 32%;
height: auto;
}
.detailer {
display: flex;
flex-direction: column;
background: white;
}
.board-inline {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.counter {
align-self: flex-start;
}
.board-author {
align-self: flex-end;
}
}
<div class="main">
<div class="main-column-holder">
<div class="column-holder">
<div class="board-holder">
<!-- Board -->
<div class="board">
<div class="board-inner">
<img class="board-image" src="https://source.unsplash.com/HtHrjExpddA" alt="">
<img class="board-image" src="https://source.unsplash.com/Y--zr3CPaPs" alt="">
<img class="board-image" src="https://source.unsplash.com/W7QkaUbYEmg" alt="">
<img class="board-image" src="https://source.unsplash.com/4dhlFpZ0dDw" alt="">
<img class="board-image" src="https://source.unsplash.com/QMRN_GX7p4I" alt="">
</div>
</div>
<!-- detail Holder-->
<div class="detailer">
<div class="board-header">
<h3 class="header">Animals</h3>
</div>
<div class="board-inline">
<div class="counter">
<p class="count_text"><span class="counter">73</span> Photos</p>
</div>
<div class="board-author">
<p class="author_text"><span class="author">Jon Bucket</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
inside the board-inner div and resize if required.
https://codepen.io/humzaysf/pen/WNvrjGJ
I am testing a website styled by Flex in CSS. The problem is the website displayed well on the laptop, but not on mobile. Please refer to the image for more detail
Test environment: Chrome/Firefox/Safari, iphone 7, Macbook.
Any suggestion is very appreciated.
P/s: If anyone needs more detail in code, please comment.
EDIT
The code:
header.html
<mat-toolbar class="mat-elevation-z6 navbar" [ngClass]="{ compact: isHandset | async }">
<div class="logo">
<img src="/assets/images/logo.png" alt="" />
</div>
<!-- <span fxFlex></span> -->
<span class="title">{{ title }}</span>
<div>
<button mat-icon-button [matMenuTriggerFor]="userMenu">
<mat-icon>person</mat-icon>
</button>
<mat-menu #userMenu="matMenu">
<mat-list>
<mat-list-item>
<b>{{ useremail }}</b>
</mat-list-item>
<mat-divider></mat-divider>
</mat-list>
<button mat-menu-item (click)="logout()" translate>{{ 'Menu.Logout' | translate }}</button>
</mat-menu>
</div>
</mat-toolbar>
header.scss
.navbar {
position: fixed;
top: $zero;
left: $zero;
right: $zero;
display: flex;
justify-content: space-between;
background-color: $header-bg;
#include set-font(
$header-font-family,
$header-font-size,
$header-font-weight,
$header-font-style,
$header-text-color
);
.logo {
min-width: $header-logo-width-mobile;
height: $header-logo-height;
width: $header-logo-width;
img {
width: $w-100;
height: $h-100;
}
}
.menu-button {
margin-right: 1rem;
}
&.compact {
.logo {
height: $header-logo-height-mobile;
width: $header-logo-width-mobile;
}
}
}
info.html
<div class="game-info">
<div class="team">
<img src={{game_info.home_logo}} alt="overlayed img" />
</div>
...
<div class="team">
<img src= {{game_info.away_logo}} alt="overlayed img" />
</div>
</div>
info.scss
.game-info {
display: flex;
align-items: center;
justify-content: space-around;
max-height: 200px;
margin-bottom: 10px;
.team {
display: inline-flex;
width: 25%;
max-width: 100px;
max-height: 100px;
img {
max-width: 80%;
max-height: 80%;
}
}
}
I also created a stakblitz to play with:
https://stackblitz.com/edit/angular-s8tudg
For image deformation problem try adding both width: XX px; and height:XX px; with some value for mobile size media query #media or vice versa in large screen.
For header problem try adding the z-index: 1000; and flex-wrap: wrap to the header container and flex-container in a row. it may help.
Heads up only been doing this for a couple days.
I have a form with one text field and one button. Trying to center the text field and button side by side inside of my form.
.row {
width: 100%;
margin-bottom: 20px;
display: flex; flex-wrap: wrap;
}
.col-6 {
width: 50%;
}
.form {
margin 0 auto;
display: block;
}
<div class='grid'>
<div class='row'>
<div class='col-6'>
<form class='form'>
<input type ='text' name='userGuess' class='userGuess'/>
<button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
</form>
</div>
</div>
</div>
I tried a lot of different things and nothing seems to work how I want it too.
Note: Not entire CSS code, just basic framework so I didn't paste all of it.
thanks.
Add justify-content: center; to your .row. Then read this article.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I added a Div to Contain the two.
Here is the updated CSS with class Container.
.row {
width: 100%;
margin-bottom: 20px;
display: flex; flex-wrap: wrap;
}
.col-6 { width: 50%; }
.form {
margin 0 auto;
display: block;
}
.container{
width:100%;
padding:1%;
}
Here is your updated HTML with the new Div in it.
<div class='grid'>
<div class='row'>
<div class='col-6'>
<form class='form'>
<div class="container">
<input type ='text' name='userGuess' class='userGuess'/>
<button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
</div>
</form>
</div>
</div>
</div>