I'm learning how to use Flexbox, and I can't get my boxes to do what I want. I want:
Four boxes in a row, with a small gap in between them
Each box should be the exact same size
The text inside the box should be centered horizontally and vertically, with lots of padding
Each box should be a link, and the entire box should be clickable; not just the text
The main problem I'm facing is that the boxes are not the same size when one has more text than the rest. This is happening despite the parent element having the align-items: stretch attribute, which I thought was supposed to correct that.
Thanks for any help. Here is my code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
font-size: 30px;
}
.parent {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: stretch;
gap: 5px;
}
.parent li {
list-style: none;
background: silver;
padding: 100px 10px;
text-align: center;
flex: 1 0 25%;
margin: auto;
box-sizing: border-box;
}
.parent li a {
margin: auto;
padding: 100px 10px;
text-decoration: none;
color: #000000;
}
</style>
</head>
<body>
<ul class="parent">
<li>One</li>
<li>Two</li>
<li>This is box number three, and it has a lot more content than the others.</li>
<li>Four</li>
</ul>
</body>
</html>
I added random text there, to make sure it would increase the height, and still center to the text.
So basically, what I did, was use what you did and another flexbox on the a tag, to make it center no matter the height.
body {
margin: 0;
padding: 0;
font-size: 30px;
}
.parent {
margin: 0;
padding: 0;
gap: 5px;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.parent li {
list-style: none;
background: silver;
padding: 100px 10px;
text-align: center;
flex: 1;
margin: auto;
box-sizing: border-box;
padding: 5px;
margin: 5px;
}
.parent li a {
margin: auto;
text-decoration: none;
color: #000000;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul class="parent">
<li>One</li>
<li>Two</li>
<li>This is box number three, and it has a sjdsddsd lot more content thddd dsdssdd dssd sdsdsddddddan the others.</li>
<li>Four</li>
</ul>
</body>
</html>
Related
I have a pretty simple site of 2 buttons that I need to align at the bottom of the site using grid. While justify- works properly, align- doesn't work at all. Could you please help me solve this issue? Thanks a lot in advance!
I've tried setting height to container as well as to .buttons and .next-button, .back-button. I've tried display: flex on .buttons and .next-button, .back-button too and the align- just doesn't work anyway.
Here's my HTML code:
<!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>Shopping cart</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="container">
<div class="buttons">
<a href='www.shopping.com' class="back-button">
BACK</a>
<a href='shopping-cart.php' class="next-button">
NEXT</a>
</div>
</div>
</header>
<main>
</main>
<footer>
<?php include "footer.php" ?>
</footer>
</body>
</html>
and here's my CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: white;
}
.container {
width: 75vw;
margin: 0 auto;
}
/******* Header *******/
header {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("img/macbook.jpg");
background-size: cover;
height: 100vh;
background-attachment: fixed;
color: white;
position: relative;
}
.buttons {
padding: 1vw;
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
justify-self: center;
align-self: end;
}
.next-button, .back-button {
border: 3px dotted rgba(97, 136, 150, 0.959);
border-radius: 15px;
background-color: rgba(0, 0, 0, 0.5);
text-decoration: none;
text-align: center;
color: white;
font-size: 15px;
font-family: Arial;
box-shadow: 12px 7px 12px rgba(128, 128, 128, 0.181);
border-radius: 15px;
background: linear-gradient(rgba(4, 65, 85, 0.2), #12688580);
}
.back-button:hover,
.next-button:hover,
.back-button:active,
.next-button:active {
transition: background 0.5s;
background: #6dc3e063;
}
I added height and flex to your container
.container {
width: 75vw;
margin: 0 auto;
height: 100%;
display: flex;
}
Also updated button class with 100% width.
.buttons {
padding: 1vw;
display: grid;
width: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
align-self: end;
}
here is codepen https://codepen.io/ignasb/pen/BaPYQbp :-)
I would like my nav to go on row 1/3 and column 2/4 and be horizontal. It should be next to the header (left side) on the same row. For some reasons, it is on a different cell in vertical, and I cannot make it work. I would appreciate your help. Below is what I have. In the beginning of this and not working.
<!DOCTYPE html>
<html lang="en">
<head>
<title>DS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="ud.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="header-nav">
<header>
<h1>DS</h1>
</header>
<nav>
<ul class="nav">
<li>Home</li>
<li>AT</li>
<li>Contact</li>
<li>Reservation</li>
</ul>
</nav>
</div>
<div id="photo">
</div>
</div>
Here is the CSS:
* {
box-sizing: border-box;
}
.nav
{
text-align: center;
display: inline-block;
height: 100%;
line-height: 4rem;
display: flex;
justify-content: center;
}
.header-nav
{
display: flex;
flex-direction: row;
}
h1
{
overflow: hidden;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li
{
float: left;
border-right:1px solid lightgray;
border-left:1px solid lightgray;
border-radius: 15px;
font-family: "Google Sans",Roboto,Arial,sans-serif;
}
body
{
font-family: "Google Sans",Roboto,Arial,sans-serif;
}
li a
{
color: black;
display: block;
padding: 8px;
background-color: white;
text-decoration: none;
border-radius: 25px;
}
#wrapper
{
display: grid;
grid-template:
"title nav nav"
"future future future"
width: 90%;
margin: auto;
grid-template-columns: 100px 1000px 80px;
grid-template-rows: 70px 1000px 1fr;
box-shadow: 3px 3px 3px darkblue;
}
h1
{ grid-area: title;
grid-row: 1/2 ; grid-column: 1/1
}
nav
{ grid-area: nav;
grid-row: 1/2; grid-column: 2/3;
}
I am creating a navbar, and I want to make sure that the colored box when I hover on nav items are big enough to cover the words, but not so big they expand well below the items. This can be seen in the picture above.
I have set the height at 80px; is there any way I can keep the height of the nav at 80px, but still solve this issue?
[1]: https://i.stack.imgur.com/EH8Qt.png
This will get you started. Just needs styling.
body {
padding: 0;
margin: 0;
}
.navbar {
display: flex;
background-color: #eee;
font-family: sans-serif;
height: 100px;
color: black;
border-top: 6px solid lightblue;
}
ul {
display: flex;
flex-direction: row;
list-style: none;
}
ul>li>a {
padding: 3px 12px;
color: black;
font-size: 16px;
margin: 0 24px;
text-decoration: none;
display: block;
}
ul>li>a:hover {
padding: 3px 12px;
color: white;
background: #ff6600;
font-size: 16px;
margin: 0 24px;
text-decoration: none;
display: block;
}
#media screen and (max-width: 992px) {
ul>li>a {
font-size: 12px;
margin: 0 6px;
}
ul>li>a:hover {
font-size: 12px;
margin: 0 6px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<title>home</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a class="active" href=""><strong>COLLECTIONS</strong></a></li>
<li>ANIMATIONS</li>
<li>ANIMATIONS</li>
<li>ANIMATIONS</li>
<li>ANIMATIONS</li>
</ul>
</div>
</body>
</html>
I'm trying to display a list of items in a single column. The list is long so I want it to scroll if they all don't fit.
On all browsers right and left margin not appearing
On chrome: The issue is that if the window becomes smaller, the top items start to disappear and hide as the window shrinks. Also first item top margin missing.
On IE11 sometimes the rows doesn't take 100% but shrinks to the content width. If I resize the IE window it displays properly.
Edit:
After removing justify-content: center; it solved the vertical issue on chrome, but suddenly no bottom margin appears on IE11
This is the CSS
body {
height: 100%;
width: 100%;
margin: 0pt;
padding: 0pt;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: #e6e6fa;
}
div.list {
max-height: 80%;
width: 60%;
margin: 0pt;
padding: 0pt;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
overflow-y: auto;
flex: 0 1 auto;
background-color: red;
justify-content: center;
align-items: center;
}
div.list .row {
width: 100%;
margin: 4pt 12pt 4pt 12pt;
padding: 0pt;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
flex: 0 0 auto;
box-shadow: 0 0 4px #000000;
background-color: #ffffff;
}
div.list .row .content {
width: 100%;
margin: 0pt;
padding: 0pt;
flex: 0 0 auto;
direction: rtl;
text-align: right;
}
This is the HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="list">
<div class="row">
<div class="content" style="color:#2b8ACA">title</div>
<div class="content">description</div>
<div class="content" style="color:#BABABA">date</div>
</div>
</div>
</body>
</html>
Can anyone explain what I'm doing wrong?
Thanks.
I just can't seem to figure this out. I've tried text-align: center; , display: inline-block and more but I just cant figure out how to center my navigation within the #menu-bottom-nav.
CSS
#menu-bottom-nav { width: 600px; height: 70px; margin: 0px auto;}
#menu-bottom-nav li { list-style-type: none; float: left; margin-right: 20px;}
Any help is appreciated.
Try this out:
<!DOCTYPE>
<html>
<head>
<title>Test</title>
<style type="text/css">
#menu-bottom-nav {
margin: 0;
padding: 0;
width: 600px;
text-align: center;
border: 1px solid #000;
}
#menu-bottom-nav li {
list-style-type: none;
margin-right: 20px;
border: 1px solid #ff0000;
display: inline-block;
*display: inline;
zoom: 1;
}
</style>
</head>
<body>
<ul id="menu-bottom-nav">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</body>
</html>