I wrote html & css like below.
* {
padding: 0;
margin : 0;
box-sizing: border-box;
}
header {
height: 40px;
background-color: skyblue;
margin-right: 0;
width: 100%;
}
.container{
display: flex;
}
aside {
background-color: yellow;
min-width: 200px;
}
main {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.content {
height: 300px;
min-width: 500px;
background-color: red;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title>My test page</title>
</head>
<body>
<header>
header
</header>
<div class="container">
<aside>side menu</aside>
<main>
<div class="content">
content
</div>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>
then, I resize browser size less than 700px(aside width + content width.) width.
as result, header width is less than contents like below(scroll to the far right).
I guess this because of contents has min-width property.
Then, I want to manage header width based on contents width.
do you know any idea?
thanks.
Not an ideal solution. But if you want to maintain a min-width of 200px for the aside and a min-width of 500px for the content (with 10px padding), you can provide a min-width of 720px (200px+500px+10px+10px) for the header.
* {
padding: 0;
margin : 0;
box-sizing: border-box;
}
header {
height: 40px;
background-color: skyblue;
margin-right: 0;
width: 100%;
min-width: 720px;
}
.container{
display: flex;
}
aside {
background-color: yellow;
min-width: 200px;
}
main {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.content {
height: 300px;
min-width: 500px;
background-color: red;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title>My test page</title>
</head>
<body>
<header>
header
</header>
<div class="container">
<aside>side menu</aside>
<main>
<div class="content">
content
</div>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>
Related
I'm designing a dashboard using Chart.js graphs and Canvases. Please see the dashboard below:
The design is exactly what I want until I resize the page to make it smaller and then resize it again to make it bigger. When I do this I end up with the following:
This did not occur until I added the second chart and made the div element containing them both a flexbox. Before making the div a flexbox I had the following layout:
This can easily be resized into the following form for a smaller window:
and then resized again into the larger form from the previous image. What change has flexbox made that stops the automatic resizing of the charts?
My code is below. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css_styles/main.css">
<title>Plus UI Design</title>
</head>
<body>
<div class="overview_container">
<div id="plusPointsContainer" class="points_container-main">
<div id="plusPointsDoughnut" class="doughnut_holder">
<canvas id="plusPoints" height="400" width="400"></canvas>
</div>
<div class="points_display-horizontal">
<div class="points_display-vertical">
<div>
<div class="points_header">Today:</div>
50
</div>
<div class="points_display-yesterday">
<div class="points_header-smaller">Yesterday:</div>
60
</div>
</div>
</div>
</div>
<div class="bar_chart_container">
<canvas id="overviewBarGraph" height="400" width="600"></canvas>
</div>
</div>
</body>
</html>
CSS:
.overview_container {
display: flex;
}
.bar_chart_container {
max-width: 600px;
max-height: 400px;
}
.points_container-main {
position: relative;
display: flex;
justify-content: center;
flex-direction: column;
max-width: 400px;
min-width: 250px;
max-height: 400px;
min-height: 250px;
margin-right: 5vw;
}
.points_display-horizontal {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
}
.points_display-vertical {
position:relative;
top: 8%;
font-family: Helvetica Neue;
font-size: 70px;
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.points_display-yesterday {
font-size: 30px;
text-align: center;
margin-top: -10px;
color: rgba(0, 0, 0, 0.4);
}
.points_header {
font-size: 10px;
margin-bottom: -10px;
}
.points_header-smaller {
font-size: 10px;
margin-bottom: -3px;
}
I have only included the html and css parts as I don't think Javascript is the issue here, but I can update the code section if anyone thinks it is the issue.
Try to remove from .points_container-main and .bar-chart-container max-width, min-width styles. Add them styles in flex world:
.points_container-main{
flex: 0 0 auto;
width: 25%;
}
.bar-chart-container{
flex: 0 0 auto;
width: 75%;
}
I am working on a simple code editor application and I stumbled upon a visual bug, basically the textarea is a little bit taller than the container.
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
This is the index.css:
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
I have tried everything but cannot find a solution, searched around Stackoverflow but could not find an answer I thought it was caused by the resize, border and outline, but appearently those are not the problem.
Add box-sizing: border-box; to your textarea styles
I need help fixing this issue. I am trying to create a webpage that has two images within a div. I want it to be centered on the screen. I have done that but I don't want it to scroll. I just want to see the full image regardless of the desktop screen size without having to scroll and also still have equal margin around the div. I am working in VScode but below is a link to what I have done so far. I will really appreciate any solution.
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
width: auto;
height: auto;
margin: 70px;
display: flex;
}
.path {
width: 50%;
height: 100vh;
background-color: black;
}
img {
width: 100%;
height: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section id="welcome-page">
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/92/98/oK5D1Z.jpg" alt="">
</div>
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/58/1/NOdDwR.jpg" alt="">
</div>
</section>
</body>
</html>
https://codepen.io/Mike-Olas/pen/zYNVvWr
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
height: 100vh;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
width: auto;
height: auto;
display: flex;
padding: 70px;
height: 100%;
box-sizing: border-box;
}
.path {
width: 50%;
background-color: black;
}
img {
width: 100%;
height: 100%;
}
https://codepen.io/pauan8/pen/KKajVpw
Make your <section id="welcome-page"> occupy all screen with defined padding
Center both .path using flex (row)
Make them occupy full height (but unset their background so you don't see black bleed when the images are too short in height) but max 50% width
Center images within each using flex
Constrain image sizes with max-width and max-height
Snippet below rendered better in full page mode (padding appears too big on small view)
html, body {
margin: 0;
padding: 0;
}
body {
font-family: poppins;
background-color: #131313;
}
#welcome-page {
position: relative;
background-color: rgb(12, 78, 136);
box-sizing: border-box;
/*width: auto;*/
height: 100vh;
padding: 70px;
display: flex;
align-items: center;
justify-content: center;
}
.path {
/*background-color: black;*/
max-width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<section id="welcome-page">
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/92/98/oK5D1Z.jpg" alt="">
</div>
<div class="path">
<img src="https://mcdn.wallpapersafari.com/medium/58/1/NOdDwR.jpg" alt="">
</div>
</section>
</body>
</html>
I want to make 3 column layout with flex box. The goal is to make first and last div widths dynamic. But the 2nd div max-width is static.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
min-height: 100% !important;
height: 100%;
}
body{
margin: 0;
background-color: #ddd;
display: flex;
justify-content: space-between;
}
.left , .center, .right{
height: 100%;
}
.left{
width: auto;
background-color: antiquewhite;
}
.center{
display: flex;
min-height: 100vh;
flex-direction: column;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right{
width: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>
Now I am getting the center max width is constant that I expected. But left & right div's not appear always. I want to make right & left div appear with dynamic width that based on browser window size.
Update - current layout:
Expected layout:
How can I make it work?
Here you go.
Just apply flex:1 to all of the divs but flex: 1 0 100%; to the center div so it defaults to as wide as it can before hitting the max-width you wanted.
html,
body {
min-height: 100% !important;
height: 100%;
}
body {
margin: 0;
background-color: #ddd;
display: flex;
}
.left,
.center,
.right {
flex: 1;
height: 100%;
}
.left {
width: auto;
background-color: red
}
.center {
display: flex;
min-height: 100vh;
flex-direction: column;
flex: 1 0 100%;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right {
width: auto;
background-color: blue;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
does this help?
.flex-container {
display: flex;
justify-content: space-between;
background-color: DodgerBlue;
}
.flex-container > .side {
background-color: green;
width: 100%;
}
.flex-container > .center {
background-color: #f1f1f1;
color: green;
max-width: : 100%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="side"></div>
<div class="center">
this will expand as your content grows
</div>
<div class="side"></div>
</div>
</body>
</html>
I'm trying to get a navigation bar to work. I have <a> tags in <p> tags, I want the <a> tags to be taking up the entire width of the navigation bar, in a way that it is clickable in all the vertical space of that specific element.
My Code:
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
}
.navlink {
margin: auto 10px;
height: 40px;
text-align: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
But my problem is that the text inside the a tag isn't vertically centered. I can't put it down with
transform: translateY(), as that would offset the link way too low.
I am really new to both CSS and HTML, so don't judge me if I don't have the most efficient code, or not the best way of doing something.
How do I get this to center align vertically? And if my code is bad, I would appreciate it if any improvements could be suggested.
Instead of implicitly defining the height of the links, use padding to get the desired height:
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
position: relative;
}
.flexmaker {
display: flex;
}
.navlink {
padding:16px 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
align-items: center;
}
.navlink {
margin: auto 10px;
height: 40px;
display: flex;
justify-content: flex-start;
align-items: center;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
Add 'align-items: center;' to '.flexmaker'
And navlink stay clear.
* {
margin: 0;
padding: 0;
}
#navbar {
display: flex;
background-color: dodgerblue;
height: 50px;
position: relative;
}
.flexmaker {
display: flex;
align-items: center;
}
.navlink {
margin: auto 10px;
}
<!DOCTYPE html>
<html>
<header>
<meta charset="utf-8">
<link href="./stylesheets/main.css" rel="stylesheet" type="text/css">
<title>Test Website v9</title>
</header>
<body>
<div id="navbar">
<p class="flexmaker"><a class="navlink"href="./formpage.html">Form Page</a></p>
</div>
</body>
</html>
update your css code to this for center align vertical.
* {
margin: 0;
padding: 0;
}
#navbar {
background-color: dodgerblue;
height: 50px;
position: relative;
}
.navlink {
margin: auto 10px;
text-align: center;
position: absolute;
top: 50%;
left: 0%;
transform: translate(0%,-50%);
}
for both horizontal and vertical center change left to 50% and translate(-50%, -50%).