I'm not able to figure out how to "hide" the main body content behind my header on this site. It's still a work-in-progress. The header appears to be transparent, even when I set it to z-index:10 and position:fixed. Any help would be greatly appreciated.
https://gbears96.github.io/bigStart/
Here's the code:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<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>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Default value of background-color is transparent, it just wasn't noticeable until it overlaps with other elements, you have to give it another value if you want it not to be (i.e. add background-color: #fff on your header). See the snippet below:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fff;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<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>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Reference from w3schools.
I think it is very important to add to #Yong's answer that background-color does not inherit. Therefore the default background-color value for ALL elements is transparent regardless of parent background-color.
So setting your HTML element background-color to
html {
:
background-color: #fffcf6;
}
does not then set the body and all other enclosing elements to this color, they will all remain transparent.
The way to solve your problem is to change the value of the header background-color; as #Yong said it is defaulting to transparent when you run your code. Giving it any other value will solve it. E.g to have it same color as the rest of the page:
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fffcf6;
}
Here are some useful references from developer.mozilla and w3schools about the background-color property.
Related
I want to get this effect:
https://zapodaj.net/b589e3e13aade.png.html
But unfortunately something like this comes out to me, I am already tired of it with 3 hours someone can help?
body {
list-style: none;
}
.wrapper {
display: flex;
justify-content:center;
}
.wrapper3 {
display: flex;
}
.click {
border-radius: 4px;
background-color: red;
padding: 19px 24px;
cursor: pointer;
text-decoration: none;
color: white;
font-size: 15px;
font-weight: 600;
line-height: 19px;
text-align: center;
text-transform: uppercase;
}
.content {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content2{
display:flex;
align-items:center;
}
<div class="wrapper">
<div class="content">
<li class="click"> <a class="box" href="#">Skorzystaj z ofert! </a></li>
<div class="wrapper3">
<li class="click2"> <a class="box" href="#">Informacje | </a></li>
<li class="click3"> <a class="box" href="#">Kontakt</a></li>
</div>
</div>
<div class="content2">
<li class="click4"> <a class="box" href="#">Zaloguj</a></li>
</div>
</div>
The "Login" button does not center as it should
Just give some height to the div with class name wrapper. As shown in the code below.
body {
list-style: none;
border: 1px solid black;
}
.wrapper {
/* Give Some height to this wrapper */
height: 125px;
border: 1px solid green;
display: flex;
justify-content: center;
}
.wrapper3 {
display: flex;
}
.click {
border: 1px solid blue;
border-radius: 4px;
background-color: red;
padding: 19px 24px;
cursor: pointer;
text-decoration: none;
color: white;
font-size: 15px;
font-weight: 600;
line-height: 19px;
text-align: center;
text-transform: uppercase;
}
.content {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.content2 {
display: flex;
align-items: center;
}
<!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>
</head>
<body>
<div class="wrapper">
<div class="content">
<li class="click"> <a class="box" href="#">Skorzystaj z ofert! </a></li>
<div class="wrapper3">
<li class="click2"> <a class="box" href="#">Informacje | </a></li>
<li class="click3"> <a class="box" href="#">Kontakt</a></li>
</div>
</div>
<div class="content2">
<li class="click4"> <a class="box" href="#">Zaloguj</a></li>
</div>
</div>
</body>
</html>
Good morning,
I am having a challenge with centering a flexbox container itself. I have managed to center all 5 elements within the flexbox but cannot actually get the container itself to center horizontally into the middle of the page.
I have watched a tutorial after getting stuck on this and can see my code is the same except for the naming of containers. Timestamp provided for the exact second where you can see their code: https://youtu.be/fJc18fT4T3s?t=542. In their tutorial, the "trend-container" which is my "image-container" is centered whereas mine is not. I have tried using margin: 0 auto; but this does nothing and the container stays on the left side of the page.
I have had to add text-align: center to mine as the text was not aligning.
If anyone can advise what I have done wrong to not allow this flexbox container to center that would be great as I am a bit stumped!
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
Changing display: inline-flex to display: flex and adding margin: 0 auto to the <div class="image-container"> container fixes the center alignment issue for that section of the page.
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
}
.mission h2,
#featured h2 {
margin: 10px 0px 5px 0px;
text-align: center;
}
.mission h4,
#featured h4 {
margin: 15px 0px 10px 0px;
text-align: center;
}
/* ---------------Navigation ----------------*/
.navbar {
height: 69px;
width: 100%;
border-bottom: 1px seashell solid;
background-color: black;
position: fixed;
z-index: 10;
align-items: center;
left: 0;
top: 0;
}
.logo {
height: 50px;
margin-left: 0.45rem;
position: relative;
top: 5px;
}
.navlist {
position: relative;
float: right;
margin-right: 0.45rem;
}
.navlist a {
color: seashell;
}
.navbar .navlist ul {
list-style: none;
position: relative;
}
.navbar .navlist ul li {
display: inline-block;
text-decoration: underline;
padding: 0px 10px;
}
/* ------------------Banner Section --------------*/
#mission {
width: 1200px;
height: 700px;
background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
margin: 70px auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mission {
width: 100%;
background-color: black;
margin: 0 auto;
text-align: center;
}
/*---------------Tea of the Month ------------------*/
.image-container {
display: flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
margin: 0 auto;
}
.image img {
height: 200px;
width: 300px;
padding: 10px 10px;
}
<html>
<head>
<title>Tea Cozy</title>
<link href="C:\Users\Jason\Desktop\Coding\Projects\teacosy\global.css" type="text/css" rel="stylesheet">
</head>
<body>
<!-----------------Nav Bar--------------------->
<nav class="navbar">
<img class="logo" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-logo.png" alt="Tea Cozy logo">
<div class="navlist">
<ul>
<li>Mission</li>
<li>Featured Tea</li>
<li>Locations</li>
</ul>
</div>
</nav>
<!-------------------Banner--------------------->
<div id="mission">
<div class="mission">
<h2>Our Misson</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</div>
<!-------------------Tea of the Month-------------------->
<div id="featured">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="image-container">
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg">
<h4>Fall Berry Blitz Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-spiced-rum.jpg">
<h4>Spiced Rum Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-donut.jpg">
<h4>Seasonal Donuts</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-myrtle-ave.jpg">
<h4>Myrtle Ave Tea</h4>
</div>
<div class="image">
<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg">
<h4>Bedford Bizarre Tea</h4>
</div>
</div>
</body>
</html>
for "image-container" the parent that is "body" is not a flex or grid item. quick fix set: body to be a flex container and "flex-direction to column, then for "image-container" set "align-self: center;" like so:
body {
font-family: "helvetica", sans-serif;
font-size: 22px;
color: seashell;
opacity: 0.9;
background-color: black;
display: flex;
flex-direction: column;
}
.image-container {
display: inline-flex;
max-width: 1000px;
height: auto;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
align-self: center;
}
when i resize the window the header moves to the left. And the flexbox dont stay in the center.And sorry im new to stackoverflow so i forgive my mistakes.see this image for a better understanding
(Please skip this text cause stackoverflow is blocking my post jdjdjd sksjdhd sisjjdjd didjjd sidjf sijdjd sidjjd idjdjd idjdjjd)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Md Hasan</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<div class="header-left">
<a href="#"
><img
class="logo"
src="gallery/received_344045126587298.jpeg"
width="100px"
height="70px"
alt="logo"
/>
</a>
<a href="#">
<h1>Md Hasan</h1>
</a>
</div>
<div class="header-right">
Contact
Gallery
</div>
</header>
<div class="container">
<section id="about">
<div class="aboutText">
<div class="f1">
<h1>Who Is Hasan</h1>
<p>
Hasan is a Business man. He runs a Rubber Factory. He is a Good
person with a kind Heart. This website is just a gift for him
</p>
</div>
<div class="f2">
<a
href="https://www.facebook.com/messages/t/100011445344575"
target="_blank"
><button id="btn" onmouseout="btnf()" onmouseover="btnfuc()">
DM Hasan on FB
</button></a
>
</div>
</div>
<div class="aboutImg">
<img src="gallery/hasan.jpg" alt="About Hasan" class="aboutImg" />
</div>
</section>
<hr />
<section id="gallery">
<h1>Gallery</h1>
<p>Here you can see some rare pictures of Living Legend Md Hasan</p>
<div class="flex">
<img src="gallery/IMG20180305171539.jpg" alt="" />
<img src="gallery/IMG20180616172814.jpg" alt="" />
<img class="im3" src="gallery/IMG_20190404_201412.jpg" alt="" />
</div>
</section>
<hr />
<section id="contact">
<h1>Contact Us</h1>
<p>
<i>Need Hasan's Facebook Id? ok here you go.</i>
<a href="https://www.facebook.com/profile.php?id=100011445344575">
<img
class="fbLogo"
src="gallery/Facebook-logo-768x538.png"
alt="fb-link"
/>
Md Hasan
</a>
</p>
</section>
</div>
<footer class="footer">
<em class="em1"
>Created by - Ahmed Rafin | I'm a professional. Please give me Job.</em
>
<em class="em2">
<a href="https://facebook.com/psycho.rafin"
>Contact Me on
<img
class="fbLogo"
src="gallery/Facebook-logo-768x538.png"
alt="" /></a
></em>
</footer>
<script>
btnfuc = () => {
console.log('button hovered');
document.getElementById('btn').style.backgroundColor = 'red';
};
btnf = () => {
document.getElementById('btn').style.backgroundColor = 'blueviolet';
};
</script>
</body>
</html>
now this is the css part . you can check this . and again sorry if my mistakes guys
* {
margin: 0;
padding: 0;
}
/* Header section start from here */
header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: black;
overflow: auto;
}
header .header-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-basis: 50%;
}
header .logo {
border-radius: 50%;
margin: 10px;
}
.header-left a {
text-decoration: none;
color: white;
}
header a:hover {
color: grey;
}
.header-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-right a {
margin: 10px;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
color: white;
padding: 10px;
}
.header-right a:hover {
color: black;
background-color: yellowgreen;
}
/* Header section end */
/* Container and after that about hasan section */
.container {
width: 90%;
margin: auto;
}
#about {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px;
}
.aboutText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section .aboutImg {
width: 500px;
height: auto;
border-radius: 10px;
}
section .aboutText {
width: 50%;
}
#about h1 {
font-size: 50px;
text-align: center;
margin-bottom: 15px;
}
#about p {
font-size: 18px;
font-style: italic;
}
#about button {
padding: 10px 30px;
background-color: rgb(61, 61, 230);
margin: 25px auto;
font-size: 18px;
}
/* About section end */
/* Gallery section starts */
#gallery h1 {
font-size: 50px;
text-align: center;
margin: 25px 0;
}
#gallery p {
font-size: 18px;
font-style: italic;
text-align: center;
margin: 25px 0;
}
section .flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex img {
margin: 5px;
width: 300px;
height: 300px;
border: 2px solid black;
border-radius: 5px;
}
.flex img:nth-child(3) {
transform: rotate(-90deg);
}
/* Gallery section end */
/* Contact us page */
#contact h1 {
font-size: 50px;
text-align: center;
margin: 25px 0;
}
#contact p {
font-size: 18px;
font-style: italic;
text-align: center;
margin: 25px 0;
}
#contact img {
width: 50px;
height: auto;
position: relative;
top: 13px;
}
#contact a {
text-decoration: none;
color: rgb(70, 21, 21);
}
#contact a:hover {
color: green;
}
/* now the last foooter area */
footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: black;
}
footer em {
color: white;
font-size: 15px;
padding: 30px;
}
footer img {
width: 30px;
height: auto;
position: relative;
top: 5px;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
color: green;
}
/* end for computers and now media queries */
#media screen and (max-width: 1200px) {
header {
flex-direction: column;
justify-content: center;
/* align-items: center; */
}
}
Please try this code, To Why flexbox is moving left when i resize the window
html {
background-color: #141E30;
margin: 0;
padding: 0;
}
.sidebar {
display: flex;
flex-direction: column;
width: 300px;
top: 0;
bottom: 0;
position: fixed;
overflow: auto;
background: #0a0c0f;
color: #EAE9E9;
}
.sidebar__profile {
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
}
.sidebar__menuitem {
padding-bottom: 10px;
display: flex;
align-items: center;
flex-shrink: 0;
height: 30px;
}
.count {
margin-left: auto;
margin-right: 20px;
border-radius: 6px;
padding: 2px 5px;
background-color: #EAE9E9;
color: #0a0c0f;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
</head>
<body>
<div class="sidebar">
<div>
<div class="sidebar__profile">
<img src="http://chittagongit.com//images/avatar-icon/avatar-icon-4.jpg" height=50px alt="image" class="sidebar__profile__avatar" />
<div class="sidebar__profile__name">User Name</div>
</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 1</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 2</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 3</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 4</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 5</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 6</div>
<div class="count">2</div>
</div>
<div class="sidebar__menuitem">
<div>Menu Item 7</div>
<div class="count">2</div>
</div>
</div>
</body>
</html>
I hope this code will be useful to you.
Thank you.
this is your code. What exactly is the problem? looks good from here.
btnfuc = () => {
document.getElementById('btn').style.backgroundColor = 'red';
};
btnf = () => {
document.getElementById('btn').style.backgroundColor = 'blueviolet';
};
* {
margin: 0;
padding: 0;
}
/* Header section start from here */
header {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: black;
overflow: auto;
}
header .header-left {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-basis: 50%;
}
header .logo {
border-radius: 50%;
margin: 10px;
}
.header-left a {
text-decoration: none;
color: white;
}
header a:hover {
color: grey;
}
.header-right {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-right a {
margin: 10px;
font-size: 20px;
text-transform: uppercase;
text-decoration: none;
color: white;
padding: 10px;
}
.header-right a:hover {
color: black;
background-color: yellowgreen;
}
/* Header section end */
/* Container and after that about hasan section */
.container {
width: 90%;
margin: auto;
}
#about {
display: flex;
justify-content: space-between;
align-items: center;
margin: 25px;
}
.aboutText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section .aboutImg {
width: 500px;
height: auto;
border-radius: 10px;
}
section .aboutText {
width: 50%;
}
#about h1 {
font-size: 50px;
text-align: center;
margin-bottom: 15px;
}
#about p {
font-size: 18px;
font-style: italic;
}
#about button {
padding: 10px 30px;
background-color: rgb(61, 61, 230);
margin: 25px auto;
font-size: 18px;
}
/* About section end */
/* Gallery section starts */
#gallery h1 {
font-size: 50px;
text-align: center;
margin: 25px 0;
}
#gallery p {
font-size: 18px;
font-style: italic;
text-align: center;
margin: 25px 0;
}
section .flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex img {
margin: 5px;
width: 300px;
height: 300px;
border: 2px solid black;
border-radius: 5px;
}
.flex img:nth-child(3) {
transform: rotate(-90deg);
}
/* Gallery section end */
/* Contact us page */
#contact h1 {
font-size: 50px;
text-align: center;
margin: 25px 0;
}
#contact p {
font-size: 18px;
font-style: italic;
text-align: center;
margin: 25px 0;
}
#contact img {
width: 50px;
height: auto;
position: relative;
top: 13px;
}
#contact a {
text-decoration: none;
color: rgb(70, 21, 21);
}
#contact a:hover {
color: green;
}
/* now the last foooter area */
footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background-color: black;
}
footer em {
color: white;
font-size: 15px;
padding: 30px;
}
footer img {
width: 30px;
height: auto;
position: relative;
top: 5px;
}
footer a {
color: white;
text-decoration: none;
}
footer a:hover {
color: green;
}
/* end for computers and now media queries */
#media screen and (max-width: 1200px) {
header {
flex-direction: column;
justify-content: center;
/* align-items: center; */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Md Hasan</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<div class="header-left">
<a href="#"
><img
class="logo"
src="gallery/received_344045126587298.jpeg"
width="100px"
height="70px"
alt="logo"
/>
</a>
<a href="#">
<h1>Md Hasan</h1>
</a>
</div>
<div class="header-right">
Contact
Gallery
</div>
</header>
<div class="container">
<section id="about">
<div class="aboutText">
<div class="f1">
<h1>Who Is Hasan</h1>
<p>
Hasan is a Business man. He runs a Rubber Factory. He is a Good
person with a kind Heart. This website is just a gift for him
</p>
</div>
<div class="f2">
<a
href="https://www.facebook.com/messages/t/100011445344575"
target="_blank"
><button id="btn" onmouseout="btnf()" onmouseover="btnfuc()">
DM Hasan on FB
</button></a
>
</div>
</div>
<div class="aboutImg">
<img src="gallery/hasan.jpg" alt="About Hasan" class="aboutImg" />
</div>
</section>
<hr />
<section id="gallery">
<h1>Gallery</h1>
<p>Here you can see some rare pictures of Living Legend Md Hasan</p>
<div class="flex">
<img src="gallery/IMG20180305171539.jpg" alt="" />
<img src="gallery/IMG20180616172814.jpg" alt="" />
<img class="im3" src="gallery/IMG_20190404_201412.jpg" alt="" />
</div>
</section>
<hr />
<section id="contact">
<h1>Contact Us</h1>
<p>
<i>Need Hasan's Facebook Id? ok here you go.</i>
<a href="https://www.facebook.com/profile.php?id=100011445344575">
<img
class="fbLogo"
src="gallery/Facebook-logo-768x538.png"
alt="fb-link"
/>
Md Hasan
</a>
</p>
</section>
</div>
<footer class="footer">
<em class="em1"
>Created by - Ahmed Rafin | I'm a professional. Please give me Job.</em
>
<em class="em2">
<a href="https://facebook.com/psycho.rafin"
>Contact Me on
<img
class="fbLogo"
src="gallery/Facebook-logo-768x538.png"
alt="" /></a
></em>
</footer>
</body>
</html>
The CSS display: works for the text elements, but it is not doing anything for <i> element. I am able to move it with float: right which is where I need it to be on my div but then the padding is off and a headache to deal with! Any feedback would be greatly appreciated :)
Part of my code is below:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
CSS:
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
display: inline-block;
}
I feel like I am missing some detail here when I use display: inline-block on element arrow. I know the .arrow works because float: right; works for it. I don't know what I am missing here. I need the text to be on left of div and the arrow to be on the right.
if I understand you correctly, this will solve your problem :
Css:
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
/* You can solve the problem with Display flex. */
display: flex;
justify-content: space-between;
align-items: center;
}
Could you please try the following codes?
What I added are:
Add float: left; in the css class .content;
Add float: right; in the css class .arrow;
body {
background-color: #333;
font-family: sans-serif;
font-size: 10px;
}
.container {
margin: 0 auto;
width: 420px;
}
nav {
box-sizing: border-box;
background-color: #000;
padding: 10px 0 15px 15px;
width: 100%;
}
.restaurant-list {
margin: 0 auto;
width: 100%;
}
.location {
box-sizing: border-box;
background-color: #aaa;
border: .02px solid #333;
margin: 0%;
padding: 10px 10px 0 10px;
width: 100%;
float: left;
}
.location:hover {
background-color: #888;
}
.content {
float: left;
display:block;
}
.content h1 {
font-size: 18px;
font-weight: bolder;
}
.content h3 {
font-size: 12px;
padding-top: 5px;
}
.arrow {
float: right;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://use.fontawesome.com/37471687aa.js"></script>
</head>
<body>
<section class="container">
<nav>
<div class="arrow-left">
<i class="fa fa-chevron-left fa-inverse fa-2x" aria-hidden="true"></i>
</div>
</nav>
<section class="restaurant-list">
<div class="location">
<div class="content">
<h1>Bakalaki Greek Taverna</h1>
<h3>Seng Poh Road 3, Singapore</h3>
</div>
<div class="arrow">
<i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
</div>
</div>
</section>
</section>
</body>
</html>
I have an H2 (id=cover) which I'd like to stay centered and higher up in a background image, but as the page size shrinks it eventually drops to the bottom of the image, then falls off of it on my mobile android phone. Any help would be appreciated. Here is the code
<!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>Johnson Landscaping</title>
<link rel="stylesheet" href="style.css">
</head>
<div id="container">
<header>
<h1>Johnson Landscaping</h1>
<nav>
<ul class="menu">
<li>home</li>
<li>contact us</li>
</ul>
</nav>
</header>
<div>
<div class="image">
<img src="images/background-backlight-blur-color-262713.jpg" alt="" />
<h2 id="cover"><span>Quality Garden Care on the North Shore</span></h2>
</div>
<h2>Services</h2>
<div class="Services">
<h4>Garden Maintenance</h4>
<img src="images/person-holding-a-green-plant-1072824.jpg" alt="person holding green
plant">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Garden Design</h4>
<img src="images/blade-of-grass-depth-of-field-environment-garden-580900.jpg" alt="blades of
grass">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Tree and Shrub Pruning</h4>
<img src="images/apple-tree-6035.jpg" alt="apple tree">
<p>Enter Details</p>
</div>
<div class="Services">
<h4>Pressure Washing</h4>
<img src="images/photography-of-bricks-covered-with-moss-1089280.jpg" alt="bricks
covered in moss">
<p>Enter Details</p>
</div>
</main>
</div>
<footer>
<nav>
<ul>
<li>home</li>
<li>contact us</li>
</ul>
</nav>
</footer>
</body>
</html>
and css to go with it
html {
background: #f7f7f7;
color: #7cae49;
font-family: 'garamond', sans-serif;
}
body {
background: white;
margin: 0 auto;
font-family: 'garamond', sans-serif;
color: rgb(49, 46, 46);
text-align: center;
}
h1 {
float: none;
display: inline-block;
color: #5c7e3a;
width: 100%;
font-size: 50px;
text-align: center;
}
nav, li {
display: inline-block;
}
header, footer {
background: #DAF7A6;
color: #7cae49;
border-radius: 10px;
}
footer {
text-align: center;
padding: 30px 20px;
}
li {
list-style: none;
line-height: 20px;
font-size: 40px;
padding-right: 20px;
padding-top: 5px;
}
.image {
position: relative;
height: 60;
width: 100%;
margin: 0 auto;
border-radius: 10px;
}
#cover {
position: absolute;
top: 200px;
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
display: flex, inline-block;
font-size: 20px;
}
a {
text-decoration: none;
color: inherit;
}
a:hover {
color: #0e69e9;
}
h2 {
color: #7cae49;
text-align: center;
font-size: 30px;
}
.Services {
box-sizing: border-box;
width: 90%;
margin: 5px;
padding: 5px;
vertical-align: top;
text-align: center;
display: inline-block;
color: #7cae49;
}
img {
max-height: 60%;
max-width: 90%;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
Thanks for looking. Cheers!
Try this.
inside your style.css in #cover, change the top value to 0px;
#cover {
position: absolute;
top: 0px;
width: 100%;
color: white;
text-align: center;
vertical-align: middle;
display: flex, inline-block;
font-size: 20px;
}