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;
}
Related
I used :before and :after to create a custom shape navbar, but now my navbar elements are spilling out when resizing to smaller widths, and also I am now limited to single colors for backgrounds to avoid pseudo elements from revealing themselves.
*,
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
background-color: #FFFFFF;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Libre Baskerville', serif;
}
nav {
background-color: #351152;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
padding: 1.2em 0 .5em 0;
}
nav::after,
nav::before {
position: absolute;
content: '';
width: 35%;
height: 1rem;
background: white;
}
nav::before {
right: -5%;
transform: skew(-40deg, 0);
top: 35;
}
nav::after {
left: -5%;
transform: skew(40deg, 0);
top: 35;
}
nav ul {
display: inline-flex;
justify-content: center;
width: 100%;
gap: 1.5em;
}
nav ul li {
list-style: none;
font-size: 1rem;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
transition: .2s ease-in-out;
color: #E09419;
}
<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">
<script src="https://kit.fontawesome.com/20c9245509.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap"
rel="stylesheet">
<title>My Portfolio</title>
<link rel="stylesheet" href="resources/style.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Is there any other way to create this kind of shape without having these problems?
Use clip-path;
*,
html,
body {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
background-color: #FFFFFF;
min-height: 100vh;
display: flex;
flex-direction: column;
font-family: 'Libre Baskerville', serif;
}
nav {
background-color: #351152;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 1.2em 0 0 0;
}
nav ul {
display: inline-flex;
justify-content: center;
gap: 1.5em;
}
nav ul li {
list-style: none;
font-size: 1rem;
}
ul li a {
text-decoration: none;
color: #FFFFFF;
}
ul li a:hover {
transition: .2s ease-in-out;
color: #E09419;
}
.nav-before-after {
width: 25%;
height: 25px;
flex: 1 1 0;
}
.nav-before-after > div {
height: 100%;
width: 100%;
background: white;
}
<nav>
<div class="nav-before-after">
<div style="clip-path: polygon(0% 50%, 80% 50%, 100% 100%, 0% 100%, 0% 60%);"></div>
</div>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div class="nav-before-after">
<div style="clip-path: polygon(0% 100%, 20% 50%, 100% 50%, 100% 100%, 0% 100%);">E</div>
</div>
</nav>
Adjust the values to your liking
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'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>
I have a working code for flex in css. Although the buttons are realigning but the blue bars is not moving. Due to this changing the screen size make it seem that all the buttons have disappeared.
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
height:30px;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 5px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 700px){
.toggle-button{
display:flex;
}
.menu-bar-links{
/* display:none; */
width:100%;
}
.menu-bar{
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul{
width:100%;
flex-direction: column;
}
.menu-bar-links li{
text-align: center;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
This is my HTML Code:
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- <div class= "grid">
</div> -->
</body>
</html>
This is how it looks when in full screen:
When i rearrange the screen it looks like this:
As you can see all the buttons seems to have disappeared except the one which is hovered over
It is also not centering even with
.menu-bar-links li{
text-align: center;
The problem you have is that you have a fixed height on your .menu-bar, namely height: 30px. You're better off removing that, adding some padding for presentation and making the .menu-bar element a flex container.
Link to CodePen:
https://codepen.io/thechewy/pen/QWQQMjg
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.menu-bar {
background: #273044;
text-align: center;
/* height: 30px; */
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.menu-bar ul {
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 120px;
place-items: center;
display: grid;
padding: 5px;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
}
.active,
.menu-bar ul li:hover {
background-color: #0b56ab;
height: auto;
height: 30px;
}
.toggle-button {
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 700px) {
.toggle-button {
display: flex;
}
.menu-bar-links {
/* display:none; */
width: 100%;
}
.menu-bar {
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul {
width: 100%;
flex-direction: column;
}
.menu-bar-links li {
text-align: center;
}
}
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<body>
<div class="menu-bar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
I'm trying to learn flexbox and I am struggling with centering the text in a div in the header. I have an image on the left and then a dif with a text_box and I'm trying to center the h1 using justify-content: center but no matter what I put there it will not mvoe the text. The only way I can get the text to center is by using margin: 0 auto; but that seems to be more to the right as well.
Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1em;
line-height: 1.7;
color: #777;
padding: 20px;
}
.header {
display: flex;
flex-wrap: wrap;
height: 60vh;
background-image: linear-gradient(
to right bottom,
rgba(12, 186, 186, 0.5),
rgba(56, 0, 54, 0.5)),
url(../img/code.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 55vh, 0 100%);
/* Defines how to distribute the empty space between child elements */
color: #fff;
padding: 40px;
}
.header_img img {
display: flex;
width: 100%;
border-radius: 82%;
padding: 0;
}
.header_text {
justify-content: center
}
hr {
display: flex;
}
#media screen and (max-width: 576px) {
.text_box h1 {
font-size: 1.4em;
}
.text_box h2 {
font-size: 1.2em;
}
.header {
justify-content: center;
}
.header_img {
display: flex;
}
}
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header class="header">
<div class="header_img">
<img src="assets/img/stephen_moore_london_2012.jpg" alt="">
</div>
<<div class="header_text">
<h1>My Name</h1>
<hr>
<h2>Something Here</h2>
</div>
</header>
</body>
</html>
Update the header_text class:
.header_text {
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
You can center the text for a given element. Here I removed all the excess just to show the text - I added borders for clarity on what is where and to show the content can get out with what you have
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1em;
color: #777;
padding: 20px;
}
.header {
display: flex;
justify-items: center;
height: 60vh;
padding: 2rem;
border: 1px solid blue;
}
.header-text {
display: flex;
flex-direction: column;
justify-items: center;
border: 1px solid lime;
width: 100%;
}
.header-text h1 {
text-align: center;
}
<body>
<header class="header">
<div class="header_img">
<img src="assets/img/stephen_moore_london_2012.jpg" alt="I do not exist">
</div>
<div class="header-text">
<h1>My Name</h1>
<hr>
<h2>Something Here</h2>
</div>
</header>
</body>
</html>