When I run my web-page, it displays it with the header on the left and the footer on the right, even though I don't want it to. I want it to display downwards.
My HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Alan Turing</title>
<link rel="stylesheet" type="text/css" href="MyStyles.css">
</head>
<body>
<header>
<h5>Alan Turing</h5>
</header>
<nav>
Home
Biography
Quiz
About
</nav>
<article>
<h2>Alan Turing</h2>
<p>Welcome to my Alan Turing website. Click on Biography to read about him, quiz to havea test about him. Click about to see about this web page and other useful websites.</p>
<img alt="Alan turing" src="Assets/alanTuring.jpg">
<p>Above is a picture of Alan Turing, who is famous for cracking the enigma code in World War 2.</p>
<h3>An overview on who he was</h3>
<p>Alan Turing was an English mathematician and pioneer of theoretical computer science and artificial intelligence. During WW2, he was instrumental in breaking the German Enigma code, leading to Allied victory over Nazi Germany.</p>
</article>
</body>
And my CSS code:
header {
padding: 35px;
text-align: center;
background:darkgreen;
color: darkgray;
font-size: 40px;
}
nav {
padding: 20px;
background: green;
color: darkgrey;
font-size: 20px
}
article {
padding: 100px;
text-align: center;
background: lightgreen;
}
#import url('https://fonts.googleapis.com/css?
family=Source+Code+Pro&display=swap');
body {
font-family: 'Source Code Pro', monospace;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
I have tried deleting some things, like each section, however it hasn't worked.
Thanks in advance!
You have set body to display: flex. The default direction of a flexbox is row. That's why your page is displaying left to right. To change this, so your flex parent displays its children in a column, add this line to body:
body {
…
flex-direction: column;
}
Here's a little demo to help illustrate changing flex-direction from row (the default) to column.
const container = document.querySelector(".container");
document.querySelector("button").addEventListener("click", () => {
container.classList.toggle("column");
});
.container {
min-height: 100vh;
display: flex;
}
.container.column {
flex-direction: column;
}
.container > div {
flex: 1;
}
.left {
background-color: gray;
}
.right {
background-color: yellow;
}
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em 1.5em;
}
html, body { margin: 0; }
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<button type="button">Change flex direction</button>
Remove the display: flex and related properties from body
Related
I'm trying to make a base layout with a left-side menu, right-side content and a top header that scrolls with the page. The content on the right side should also scroll with the main scrollbar.
My (for me unsolvable) problem starts, when I want the left side to be full size (height 100%) because in some cases i want to subtract the header from this.
With this example (https://jsfiddle.net/5q42xvwu/) it is easier to explain. I just want to have the text "TOP SIDER" and "BOTTOM SIDER" always on the screen regardless of whether the header is on the screen or not. So the left side should change the size depending on whether the header is on visible.
I don't know if and how this is possible with CSS. I already know that it is easily possible with JS.
I hope someone can help me with this problem, I already wasted several hours with this. Thank you :)
Here the code (in the fiddle):
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.header {
background-color: red;
}
.main {
background-color: green;
display: flex;
flex-direction: row;
}
.sider {
width: 200px;
background-color: cornflowerblue;
height: 100vh; /* I think here is the problem */
position: sticky;
top:0;
align-self: flex-start;
}
.inner-sider {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="main">
<div class="sider">
<div class="inner-sider">
<div>TOP SIDER</div>
<div>BOTTOM SIDER</div>
</div>
</div>
<div class="content">
MAIN CONTENT
<!-- SIMULATE A LAGE CONTENT PAGE-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
END OF MAIN CONTENT
</div>
</div>
</body>
</html>
Edit to further clarify:
The two inner <div> are only there to represent the top and the lower part of the "Inner Sider". In the real example instead of the ".inner-sider" there should be a full hight menu.
Added classes and sticky positioning to top and bottom siders. Hope it does not break your content layout!
body {
margin: 0;
padding: 0;
}
.header {
background-color: red;
}
.main {
background-color: green;
display: flex;
flex-direction: row;
}
.sider {
width: 200px;
background-color: cornflowerblue;
height: 100vh; /* I think here is the problem */
position: sticky;
top: 0;
align-self: flex-start;
}
.inner-sider {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* new styles below: */
.inner-top {
position: sticky;
top: 0;
}
.inner-bottom {
position: sticky;
bottom: 0;
}
<html>
<head>
</head>
<body>
<div class="header">Header</div>
<div class="main">
<div class="sider">
<div class="inner-sider">
<div class="inner-top">TOP SIDER</div>
<div class="inner-bottom">BOTTOM SIDER</div>
</div>
</div>
<div class="content">
MAIN CONTENT
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>END OF MAIN CONTENT
</div>
</div>
</body>
</html>
I am trying to put together a diagram in CSS of a flow chart. I have attached below a picture. Is there a simple way to do this? I've been Googling around quite a bit looking for examples, but I don't know what to call this.
Can you please let me know how to do this? Or if this is something common, what I can Google to find more information.
By using CSS Flex you could achieve something like:
body {font: 16px/1.4 sans-serif;}
.chart-row,
.chart-col {
display: flex;
gap: 1em;
}
.chart-row {
flex-direction: row;
}
.chart-col {
flex-direction: column;
}
.chart-pill,
.chart-rect{
padding: 1em;
text-align: center;
border: 2px solid #999;
}
.chart-pill {
flex: 1;
border-radius: 1em;
border-style: dashed;
}
.chart-rect{
flex: 0;
margin: auto 0;
background: #eee;
}
.chart-line-h {
height: 2px;
min-width: 3em;
background: #999;
margin: auto -1em;
}
<div class="chart-row">
<div class="chart-pill chart-col">
<div class="chart-rect">alpha</div>
</div>
<div class="chart-line-h"></div>
<div class="chart-pill chart-col">
<div class="chart-rect">beta</div>
<div class="chart-rect">gamma</div>
<div class="chart-rect">delta</div>
</div>
<div class="chart-line-h"></div>
<div class="chart-pill chart-col">
<div class="chart-rect">gamma</div>
</div>
</div>
I'll just add an answer because I can't write any comments yet, although I'm not new at CSS...
Yes, you can use Flexbox but I will also add CSS Grid, as the combination of both can give you more flexibility if you're planning on making bigger charts...
Once you get it working, it's pretty easy to use...
Copy and paste this code in your code editor and display it in your browser.
( if you use VSCode you can use the liveServer extension)
Then go to the dev tools inside your browser (Ctrl+Shift+i) and click the icon to select an element (the one on top at the very left hand side).
Then, inside the first div, you will see a label with the word grid, click it and you'll see the grid on your screen.
Finally, you just have to fill the rows and columns with the figures as in one of those old battleship games, or a 2D Cartesian Coordinate System.
Keep in mind that when placing your items on the Grid, it's better to use the lines instead of the areas of the rows and columns, as it's much easier to understand it this way.
So for instance, in this case, connector1 goes from vertical line 9 to vertical line 10, or the first figure fills the space between line 5 and line 9, and so on.
Hope it helps!
By the way, I changed colours as it's easier for the explanation..
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">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<!-- GRID FLOWCHART -->
<div class="flowchart">
<!-- FIRST FIGURE -->
<div class="set" id="set1">
<div class="box"><p>alpha</p></div>
</div>
<!-- FIRST CONNECTOR -->
<div class="connector" id="connector1"></div>
<!-- SECOND FIGURE -->
<div class="set" id="set2">
<div class="box"><p>beta</p></div>
<div class="box"><p>gamma</p></div>
<div class="box"><p>delta</p></div>
</div>
<!-- SECOND CONNECTOR -->
<div class="connector" id="connector2"></div>
<!-- THIRD FIGURE -->
<div class="set" id="set3">
<div class="box"><p>gamma</p></div>
</div>
</div>
</body>
</html>
CSS :
body {
width: 100vw;
height: 100vh;
background-color: #d3d3d3;
}
/* ****** GENERIC SHAPES : ********** */
.flowchart {
display: grid;
grid-template-columns: repeat(24, 1fr);
grid-template-rows: repeat(12, 1fr);
width: fit-content;
height: fit-content;
grid-gap: 2px;
}
.set {
min-width: 100px;
min-height: 100px;
border: 2px dashed blue;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
width: 80%;
height: 15%;
background-color: rgb(255, 255, 255);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 4%;
padding: 6%;
border: 1px solid black;
/* border-radius: 5px; */
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.9em;
}
.connector {
width: 120%;
max-height: 3px;
background-color: black;
transform: translateX(-6%);
}
/* ************* FIGURES : ************* */
#set1 {
grid-column: 5/9;
grid-row: 5/12;
}
#set2 {
grid-column: 10/14;
grid-row: 5/12;
}
#set3 {
grid-column:15/19;
grid-row: 5/12;
}
/* ******** CONNECTORS : *********** */
#connector1 {
grid-column: 9/10;
grid-row: 8/9;
}
#connector2 {
grid-column: 14/15;
grid-row: 8/9;
}
I'm creating a div with some information, in the same way that the Coinbase website uses, but I'm facing a problem with styles, because I wanted this div to be responsive, horizontally aligned on larger devices and vertically aligned on smaller devices, but I don't know much about CSS, however, I believe that I need to use Flexbox, but I'm very new to what exactly to do
I would like this code to work exactly as it is on the Coinbase website. On larger devices the reproduction appears to be in rows, but on smaller devices it appears to be in columns, how do I do this? I use Bootstrap, is there no Bootstrap class that makes this easy?
<!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>
.container {
background: dodgerblue;
}
.section {
display: flex;
flex-shrink: 0;
width: 100%;
max-width: 1180px;
margin: 0px auto;
padding: 24px;
}
.box {
display: flex;
flex: 1 1 auto;
flex-direction: row;
justify-content: center;
color: rgb(255, 255, 255);
margin: 40px 0px;
}
h2 {
margin: 0px 0px 12px;
line-height: 48px;
font-size: 56px;
font-weight: 500;
}
.divChild {
line-height: 24px;
font-size: 16px;
opacity: 0.7;
}
.divChildBox {
flex: 1 1 0%;
text-align: center;
flex: 1 1 0%;
text-align: center;
flex: 1 1 0%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<section class="section">
<div class="box">
<div class="divChildBox">
<h2>$320B+</h2>
<div class="divChild">Total Volume Traded</div>
<div class="divChildBox">
<h2>100+</h2>
<div class="divChild">Countries supported</div>
<div class="divChildBox">
<h2>35M+</h2>
<div class="divChild">Verified users</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
I think you are looking to display your content in a row rather than a column. Using flex, simply add all your display items into div child elements. Flex by default aligns horizontally so there is no need to define a direction unless you are changing the direction. So the h2 and divs that hold the smaller text can live in a div, then the parent div should have the flex display and you can add any other flex properties to the parent element.
So on the parent class, I added display: flex; justify-content: space-around; align-content: center;. I also added p tags instead of divs as this will help to reduce any confusion in your html.
Note that by adding the class to the parent, you can reference the parent element and any of its children using CSS, this allows me to affect multiple elements with one block of code. Example .parent h2 or .parent p. the HTML looks much cleaner.
As to the responsiveness with flex... the flex value is an alternative to block elements floated and manipulated using media queries. Instead, developers can build a flexible container, flexbox for short. It's great for mobile screens and responsive content for dynamic layouts and webapps. Adding media queries in your CSS will allow your app/site to be more responsive. I suggest having a look at the following article on media queries by a well respected site called CSS Tricks, there are alot of media devices out there and building a responsive app/site will need thought out css to accommodate css media queries.
Let me know if this was not what you were looking to achieve.
* {
margin: 0;
padding: 0;
}
#main section div {
color: rgb(255, 255, 255);
margin: 40px 0px;
}
.parent {
display: flex;
justify-content: center;
align-content: center;
}
.parent h2 {
margin: 0px 0px 12px;
line-height: 48px;
font-size: 56px;
font-weight: 500;
}
.parent p {
line-height: 24px;
font-size: 16px;
opacity: 0.7;
}
#media (max-width:499px) {
#main section div {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#main {
display: flex;
flex-direction: column;
justify-content: center;
}
.parent {
flex-direction: column;
justify-content: center;
align-content: center;
}
}
<div id="main" style="background: rgb(22, 82, 240);">
<section style="width: 100vw; padding: 24px">
<div>
<div class="parent">
<div>
<h2>$320B+
</h2>
<p>
Total Volume Traded
</p>
</div>
<div>
<h2>
100+
</h2>
<p>Countries supported
</p>
</div>
<div>
<h2>
35M+
</h2>
<p>
Verified users
</p>
</div>
</div>
</div>
</section>
</div>
I also suggest separating your HTML and CSS. You have a lot of in line style that is repeating, use classes for this. You define the class once in your css file or style tag, then add the class to the class attribute in your HTML. Then if you need to change it, you're only changing it once in your CSS.
I'm trying to replicate a container image-text style for my landing page, but after hours of research I couldn't find any useful example for my problems which seems pretty basic.
Something like this
Is there a name for this type of container/header to look for them? I would love if someone could write a simple example to replicate it, because all of my solutions are not very elegant mainly because I am new to pure CSS (I'm being asked to not use any CSS libraries) I want my landing page to have multiple rows of this containers as this web page (without the animations of course) Overflow Webpage
So far I have tried something like this
HTML
<div class="header_2">
<article>
<h1>Multiples Odontólogos en todo Santiago</h1>
<p>If your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
Únete >
</article>
<span class="helper"></span>
<img src="<%= assetPath('Land1.svg') %>" alt="Odontólogos por todo Santiago">
</div>
CSS
.header_2 {
padding: 10vh 15vw;
background: #def2f1;
text-align: center;
color: #17252a;
}
.header_2 img {
max-height: 30%;
max-width: 30%;
vertical-align: middle;
}
.header_2 article{
text-align: left;
padding-right: 50vw;
}
.header_2 h1 {
font-family: 'Kanit';
color: #17252a;
font-size: 1.7vw;
}
.header_2 p {
font-family: 'Montserrat';
color: #17252a;
font-size: 1vw;
}
.header_2 a {
font-family: 'Montserrat';
color: #3aafa9;
font-size: 1vw;
}
With these results:
My Actual Webpage
I can't set the image and text in the same line and my div is huge. Which is the most elegant and simple solution fr this type of style?
There are a few ways to do this.
Using flex:
Add this code to '.header_2' and adjust your padding-right on .header_2 article:
display: flex;
flex-direction: row;
align-items: center;
Using inline-block:
Add this code to '.header_2 article' and adjust the padding-right you have on this class:
display: inline-block;
width: 40%;
vertical-align: middle;
Using float:
With this option it won't be aligned vertically so depends on what you want.
Add this code to '.header_2 article' and adjust the padding-right you have on this class:
float: left;
|HTML|
<div class="header_2">
<div class="container">
<div class="box-6">
<img src="<%= assetPath('Land1.svg') %>" alt="Odontólogos por todo Santiago">
</div>
<article class="box-6">
<h1>Multiples Odontólogos en todo Santiago</h1>
<p>If your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
Únete >
</article>
</div>
|CSS|
.header_2 {
padding: 10vh 15vw;
background: #def2f1;
color: #17252a;
margin:0;
}
.container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.box-6{
flex: 0 0 50%;
max-width: 50%;
}
I have a problem that I've been working on all day, unfortunately without success.
In Bootstrap I want a sticky footer that consists of only one row with several menu items which turns into one row for every item on screens with less then 1000px.
One Row Footer
More Row Footer
Unfortunately, I always fail because the footer is responsive and stays at the bottom of the page. I would be very happy if anyone. could send the appropriate HTML and CSS code.
Here's my code:
<style>
.footer {
position: fixed;
height: 100px;
bottom: 0;
width: 100%;
}
.footer-purple {
background-color: green;
}
.footer-content {
padding: 30px 50px 50px;
flex-direction: row;
max-width: 100%;
font-size: 14px;
display: flex;
}
.footer-navigation {
margin-left: 10px;
flex-direction: row;
display: inline;
}
.footer-link {
color: #fff;
}
</style>
<footer class="footer">
<div class="footer-content footer-purple">
<nav class="footer-navigation">
<a class="footer-link">
Test
</a>
<a class="footer-link">
Test 2
</a>
</nav>
</div>
</footer>
It looks like that: https://prnt.sc/sj02x6