I am learning (teaching myself) HTML and CSS, I came with the idea of creating the following, a little complex, page layout using only HTML and CSS FlexBox:
Here is what I get:
My CSS and HTML code snippet files:
/*
I gave background-color to the left-menu and right-text
to show their position in the flex container.
*/
* {
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
border: 2px solid blue;
}
#h1-title {
font-family: 'Tangerine', serif;
font-size: 3em;
/* 48px */
}
nav>#div-left {
background-color: white;
color: blue;
justify-content: center;
}
nav>#div-left>a {
text-decoration: none;
display: block;
padding: 0px 15px;
margin: 10px auto;
}
nav>#div-left>a:hover {
background-color: yellow;
color: blue;
}
main {
background-color: silver;
}
.row-display-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.container-border {
border: 2px solid gray;
}
#vertical-menu {
padding: 0px 20px;
align-content: flex-start;
}
.left-menu {
height: 300px;
justify-content: center;
align-items: flex-start;
}
.column-right,
.column-center {
height: 300px;
padding: 0px 10px;
}
#article-right>#div-right,
#article-center>#div-center {
background-color: white;
padding: 10px;
width: 100;
margin: 0 20px;
}
.width-10-p {
width: 10%;
}
.width-37-50-p {
width: 37.5%;
}
.width-100-p {
width: 100%;
}
.width-50-p {
width: 50%;
}
.height-50px {
height: 50px;
}
.height-50-p {
height: 50%;
}
footer {
text-align: center;
font-family: 'Sofia';
font-size: 22px;
border: 2px solid blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Binyamin (Benny) Regev">
<meta name="course" content="Web App Dev - July 2019">
<title>M8E4-Extra</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 id="h1-title">Making A Beautiful Page</h1>
</header>
<main class="row-display-flex align-items-center container-border">
<article class="row-display-flex align-items-center width-10-p left-menu container-border">
<nav id="vertical-menu">
<div id="div-left">
☰
File
Edit
View
Tools
Window
Help
</div>
</nav>
</article>
<article id="article-center" class="row-display-flex align-items-center column-center width-37-50-p container-border">
<div id="div-center">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</article>
<article id="article-right" class="row-display-flex align-items-center column-right width-37-50-p container-border">
<div id="div-right">
<!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
<div class="row-display-flex align-items-center container-border height-50-p">
<p class="width-100-p">
Parent: Row-1_Column-Right, First-Row (top-row)
</p>
</div>
<!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
<div class="row-display-flex align-items-center height-50-p">
<div class="row1-col3-row2 width-50-p container-border">
Parent: Row-1_Column-Right, This: 2nd-Row_left-column
</div>
<div class="row1-col3-row2 width-50-p container-border">
Parent: Row-1_Column-Right, This: 2nd-Row_right-column
</div>
</div>
</div>
</article>
</main>
<footer>
<h3>Footer Text</h3>
</footer>
</body>
</html>
header and footer are not a problem, took some fonts from Google©.
I created a ROW flex-container with 3 columns. The Left column I used for nav element, a vertical menu. The center column is used to display whatever text I will have to display. In the right column, I created 2 rows flexboxes: The top row's width is 100% of its parent and the bottom row is divided into 2 columns and here is my problem: I want the 2 rows to stretch to the entire area of the right column.
I would appreciate assistance in stretching the flex-items of the right column of the main row to match the page design.
Just tell those 2 columns to grow:
#article-right, #article-center {
flex-grow: 1;
}
/*
I gave background-color to the left-menu and right-text
to show their position in the flex container.
*/
* {
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
border: 2px solid blue;
}
#h1-title {
font-family: 'Tangerine', serif;
font-size: 3em;
/* 48px */
}
nav>#div-left {
background-color: white;
color: blue;
justify-content: center;
}
nav>#div-left>a {
text-decoration: none;
display: block;
padding: 0px 15px;
margin: 10px auto;
}
nav>#div-left>a:hover {
background-color: yellow;
color: blue;
}
main {
background-color: silver;
}
.row-display-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.container-border {
border: 2px solid gray;
}
#vertical-menu {
padding: 0px 20px;
align-content: flex-start;
}
.left-menu {
height: 300px;
justify-content: center;
align-items: flex-start;
}
.column-right,
.column-center {
height: 300px;
padding: 0px 10px;
}
#article-right>#div-right,
#article-center>#div-center {
background-color: white;
padding: 10px;
width: 100;
margin: 0 20px;
}
.width-10-p {
width: 10%;
}
.width-37-50-p {
width: 37.5%;
}
.width-100-p {
width: 100%;
}
.width-50-p {
width: 50%;
}
.height-50px {
height: 50px;
}
.height-50-p {
height: 50%;
}
footer {
text-align: center;
font-family: 'Sofia';
font-size: 22px;
border: 2px solid blue;
}
#article-right, #article-center {
flex-grow: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Binyamin (Benny) Regev">
<meta name="course" content="Web App Dev - July 2019">
<title>M8E4-Extra</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 id="h1-title">Making A Beautiful Page</h1>
</header>
<main class="row-display-flex align-items-center container-border">
<article class="row-display-flex align-items-center width-10-p left-menu container-border">
<nav id="vertical-menu">
<div id="div-left">
☰
File
Edit
View
Tools
Window
Help
</div>
</nav>
</article>
<article id="article-center" class="row-display-flex align-items-center column-center width-37-50-p container-border">
<div id="div-center">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</article>
<article id="article-right" class="row-display-flex align-items-center column-right width-37-50-p container-border">
<div id="div-right">
<!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
<div class="row-display-flex align-items-center container-border height-50-p">
<p class="width-100-p">
Parent: Row-1_Column-Right, First-Row (top-row)
</p>
</div>
<!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
<div class="row-display-flex align-items-center height-50-p">
<div class="row1-col3-row2 width-50-p container-border">
Parent: Row-1_Column-Right, This: 2nd-Row_left-column
</div>
<div class="row1-col3-row2 width-50-p container-border">
Parent: Row-1_Column-Right, This: 2nd-Row_right-column
</div>
</div>
</div>
</article>
</main>
<footer>
<h3>Footer Text</h3>
</footer>
</body>
</html>
Thank you BugsArePeopleToo for the tip but, it wasn't the solution. It was my fault that my code didn't work as I had mistakes in the CSS. Now it works as shown in the screenshot:
Here's the corrected code snippet:
/*
I gave background-color to the left-menu and right-text
to show their position in the flex container.
*/
* {
margin: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
header {
text-align: center;
border: 2px solid blue;
}
#h1-title {
font-family: 'Tangerine', serif;
font-size: 3em; /* 48px */
}
nav>#div-left {
background-color: white;
color: blue;
justify-content: center;
}
nav>#div-left>a {
text-decoration: none;
display: block;
padding: 0px 15px;
margin: 10px auto;
}
nav>#div-left>a:hover {
background-color: yellow;
color: blue;
}
main {
background-color: silver;
}
.row-display-flex {
display: flex;
}
.container-border {
border: 2px solid gray;
}
#vertical-menu {
padding: 0px 20px;
align-content: flex-start;
}
.left-menu {
height: 300px;
justify-content: center;
align-items: flex-start;
}
.column-right, .column-center {
height: 300px;
}
.row1-col3-row {
align-items: flex-start;
}
#article-center>#div-center, #article-right>#div-right {
background-color: white;
width: 100;
}
.width-10-p {
width: 10%;
}
.width-37-50-p {
width: 37.5%;
}
.width-100-p {
width: 100%;
}
.height-50-p {
height: 50%;
}
footer {
text-align: center;
font-family: 'Sofia';font-size: 22px;
border: 2px solid blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Binyamin (Benny) Regev">
<meta name="course" content="Web App Dev - July 2019">
<title>M8E4-Extra</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1 id="h1-title">Making A Beautiful Page</h1>
</header>
<main class="row-display-flex align-items-center container-border">
<article class="row-display-flex align-items-center width-10-p left-menu container-border">
<nav id="vertical-menu">
<div id="div-left">
☰
File
Edit
View
Tools
Window
Help
</div>
</nav>
</article>
<article id="article-center"
class="row-display-flex align-items-center column-center width-37-50-p container-border">
<div id="div-center">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</article>
<article id="article-right"
class="row-display-flex column-right width-37-50-p container-border">
<div id="div-right">
<!-- Row 1 Column-3 (Right), Row 1 (Top) 100% of 37.5% -->
<article class="row-display-flex container-border height-50-p">
<p class="width-100-p">
Parent: Row-1_Column-Right, First-Row (top-row)
</p>
</article>
<!-- Row 1 Column-3 (Right), Row 2 (Bottom) 2 columns each 50% of parent width -->
<article class="row-display-flex row-1-col-3-row height-50-p">
<div class="row1-col3-row container-border">
Parent: Row-1_Column-Right,
This: 2nd-Row_left-column
</div>
<div class="row1-col3-row container-border">
Parent: Row-1_Column-Right,
This: 2nd-Row_right-column
</div>
</article>
</div>
</article>
</main>
<footer>
<h3>Footer Text</h3>
</footer>
</body>
</html>
Related
I am a newbie with HTML CSS and here is my problem.
I coded a very simple HTML CSS program and here is my HTML CSS program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.col {
text-align: center;
background-color: #ccc;
background-clip: content-box;
margin-top: 8px;
margin-bottom: 8px;
}
body {
margin: 0;
}
.container {
text-align: center;
}
.course-item {
background-color: orange;
height: 260px;
}
h1 {
color: #fff;
line-height: 260px;
}
</style>
</head>
<body>
<div class="grid wide container">
<div class="row">
<div class="col l-3">
<div class="course-item">
<h1>course 1</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 2</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 3</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 4</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my css program
.grid {
width: 100%;
display: block;
padding: 0;
}
.grid.wide {
max-width: 1200px;
margin: 0 auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -4px;
margin-right: -4px;
}
.row.no-gutters {
margin-left: 0;
margin-right: 0;
}
.col {
padding-left: 4px;
padding-right: 4px;
}
.row.no-gutters .col {
padding-left: 0;
padding-right: 0;
}
My problem is, I want the block to be row, not to be vertical, as you can see in this picture
Here is my design, as you can see, the block is horizontal
So, could you please help me to solve this problem? How can I make it to be horizontal? Thank you very much for your time.
Define a width for your course-items and it should work just fine. I made it the same width as your height, for a perfect square.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.col {
text-align: center;
margin-top: 8px;
margin-bottom: 8px;
}
body {
margin: 0;
}
.container {
text-align: center;
}
.course-item {
background-color: orange;
height: 260px;
width: 260px;
}
h1 {
color: #fff;
line-height: 260px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-left: -4px;
margin-right: -4px;
}
.row.no-gutters {
margin-left: 0;
margin-right: 0;
}
.col {
padding-left: 4px;
padding-right: 4px;
}
</style>
</head>
<body>
<div class="grid wide container">
<div class="row">
<div class="col l-3">
<div class="course-item">
<h1>course 1</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 2</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 3</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 4</h1>
</div>
</div>
</div>
</div>
</body>
</html>
(probably optional, but as it isn't clear how it is currently configured, in .row { ... } use flex-flow: row wrap; instead of flex-wrap: wrap;).
In .col { ... } add flex: 1 0 auto;.
Experiment with the 1 0 in there to adjust the grow/shrink (1 1 or 0 0 may be preferable depending on your desires).
I am trying to make a simple webpage however I am stuck on one problem. As soon as I add more text underneath the four boxes unequally the position of these boxes messes up. I was trying adding the height and width in .content .text in CSS and it seems to work when I specify height 150px or any positive integer(however the text moves out from the parent div) but I want to achieve the result in a flexible way. Rather than defining the height, I want to implement the height so that no matter how long the text I add the container's height expands rather than moving the blue box up or down.
* {
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: white;
box-sizing: border-box;
}
.header {
background-color: rgb(13, 13, 83);
padding: 0 200px;
}
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.header-links {
display: flex;
padding-top: 10px;
}
.right-links {
margin-left: auto;
}
.right-links ul li {
padding-left: 20px;
}
.container {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 90px 0px;
}
.container .image {
margin-left: auto;
}
img {
height: 200px;
width: 400px;
}
button {
border: 2px solid rgb(68, 68, 211);
margin-top: 10px;
padding: 10px 20px;
font-size: large;
font-weight: 700;
background-color: rgb(68, 68, 211);
border-radius: 5px;
cursor: pointer;
color: white;
}
/* Section of thw code that i causing problem*/
.info {
color: black;
background-color: rgb(235, 195, 195);
padding: 30px 200px;
text-align: center;
}
.cards {
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 30px 0;
}
.card {
height: 150px;
width: 150px;
border: 3px solid rgb(48, 15, 235);
border-radius: 10px;
display: flex;
flex-direction: row;
}
.content .text {
max-height: auto;
width: 150px;
}
<!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="/portfolio css/portfolio.css">
<title>My Portfolio</title>
</head>
<body>
<div class="header">
<div class="header-links">
<div class="left-links">
<ul>
<li>Header Logo</li>
</ul>
</div>
<div class="right-links">
<ul>
<li>Header Link one</li>
<li>Header Link two</li>
<li>Header Link three</li>
</ul>
</div>
</div>
<div class="container">
<div class="someInfo">
<h1>This website is awesome.</h1>
<p>The website has some subtext that goes here.</p>
<button>Sign Up</button>
</div>
<div class="image"><img src="https://media.istockphoto.com/photos/minar-e-pakistan-picture-id899141640" alt="Minar-e-Pakistan"></div>
</div>
</div>
</div>
<div class="info">
<h1>Some random information.</h1>
<div class="cards">
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
<div class="content">
<div class="card"></div>
<div class="text">Some random text will go here.</div>
</div>
</div>
</div>
<div class="quote"></div>
<div class="callToAction"></div>
<div class="footer"></div>
</body>
</html>
Try using the following style on .cards
.cards {
display: flex;
justify-content: space-evenly;
/* start works, but doesn't have full browser support */
/* align-items: start; */
align-items: flex-start;
padding: 30px 0;
}
.cards {
display: flex;
justify-content: space-evenly;
align-items: flex-start;
padding: 30px 0;
}
You set the align-items to center instead of flex-start.
Now it will align the items on the top line.
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
Is it possible to add a red border around a flex box when the cursor hovers over the flex box?
If so, please could you modify the code. Thank you.
If there is a border animation or something that will look good please post your ideas.
.container {
width: 80%;
margin: 0 auto;
font-size: 14;
text-align: center;
}
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
}
.green {
background-color: darkgreen;
}
.blue {
background-color: cornflowerblue;
}
.navy {
background-color: navy;
}
.gray {
background-color: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Flexbox</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="grid-item navy">
<h2 style="color:white">
Box 1
</h2>
</div>
<div class="grid-item gray">
<h2 style="color:white">
Box 2
</h2>
</div>
<div class="grid-item green">
<h2 style="color:white">
Box 3
</h2>
</div>
<div class="grid-item blue">
<h2 style="color:white">
Box 4
</h2>
</div>
</div>
</body>
yes it is, you can add hover selector to the corresponding div into your css so it looks like:
.container {
width: 80%;
margin: 0 auto;
font-size: 14;
text-align: center;
}
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
}
.green {
background-color: darkgreen;
}
.blue {
background-color: cornflowerblue;
}
.navy {
background-color: navy;
}
.gray {
background-color: gray;
}
.grid-item:hover {
border: 5px solid red;
-webkit-transition: 1s; /* Safari */
transition: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content ="ie=edge">
<title>Flexbox</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="grid-item navy">
<h2 style="color:white">
Box 1
</h2>
</div>
<div class="grid-item gray">
<h2 style="color:white">
Box 2
</h2>
</div>
<div class="grid-item green">
<h2 style="color:white">
Box 3
</h2>
</div>
<div class="grid-item blue">
<h2 style="color:white">
Box 4
</h2>
</div>
</div>
</body>
.grid-item {
width: 200px;
height: 200px;
display: inline-block;
margin: 4px;
font-size: 1rem;
vertical-align: top;
padding: 16px;
border: 5px solid transparent;
transition:1s;
}
.grid-item:hover{border: 5px solid red;
transition:1s;}
Try this
So I'm making a basic layout. Which I usually take a creative commons layout but this time I decided to build my own.
So basically I am making a very basic page where there is a top section 100% width.
Then under that we have a display:table-cell section to place the two sections side by side.
This seems to work but my <h1></h1> is being placed at the bottom portion of the area. I want the content to be at the very top.
Here is my code:
section
{
display: block;
}
#instructions
{
width: 100%;
background-color: bisque;
height: auto;
padding: 20px;
}
#picture
{
width: 100% auto;
height: auto;
background-color: aliceblue;
padding: 30px;
border: 10px solid #000;
display: table-cell;
}
#content
{
width: 100%;
display: table-cell;
padding: 25px;
position: relative;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Alberta Map</title>
<meta name="description" content="Learning Alberta's Geography">
<link rel="stylesheet" href="main.css">
</head>
<body>
<section id="instructions">
<h1>Learning Altberta's Geography</h1>
<p>bla bla bla bla</p>
</section>
<section id="picture">
<img src="alberta.jpg"></img>
</section>
<section id="content">
<h1> Lake....</h1>
</section>
</body>
What this outputs is the following problem:
Ultimately I want the text on the content id to start at the top portion of the section.
What should I have done and why is the at the lower bottom of the section?
Thanks
I think all you need is vertical-align:top
#instructions {
background-color: bisque;
padding: 20px;
}
#picture {
background-color: aliceblue;
padding: 30px;
border: 10px solid #000;
display: table-cell;
}
#content {
display: table-cell;
padding: 25px;
font-size: 16px;
vertical-align: top;
}
<section id="instructions">
<h1>Learning Altberta's Geography</h1>
<p>bla bla bla bla</p>
</section>
<section id="picture">
<img src="http://lorempixel.com/output/city-h-c-100-200-6.jpg" />
</section>
<section id="content">
<h1> Lake....</h1>
</section>
add
vertical-align:top;
to
#content
That's right add vertical-align:top;