I have some CSS right here, and the banner I put isn't showing up. Any help?
css:
.home {
display: flex;
background: url('./images/banner.jpg') no-repeat center;
height: 100vh;
}
html:
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Sefatul Bahar</div>
<div class="text-3">And I'm an <span>accountant</span></div>
</div>
</div>
</section>
This might make more sense with the HTML too. You didn't provide your HTML so I'm not exactly sure what you're going for but this is as good as i can get with just a little bit of CSS.
/*I used a different image just to see if this would work*/
.home {
display: flex;
background: url(https://wallpaperaccess.com/full/187161.jpg);
/*you were missing the -repeat and -position*/
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Help</title>
</head>
<body>
<main class="home">
<div>
<h1> Hello </h1>
</div>
</main>
</body>
</html>
/*I used a different image just to see if this would work*/
.home {
display: flex;
background: url(https://wallpaperaccess.com/full/187161.jpg);
/*you were missing the -repeat and -position*/
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
Related
I'm new in CSS/HTML and I can't make the design that I want.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/header.css">
<link rel="stylesheet" href="../css/layout.css">
</head>
<body>
<div class="header">
<div class="logo"></div>
<input type="text" class="search-bar" placeholder="Type...">
</div>
</body>
</html>
CSS:
.logo {
width: 80px;
height: 80px;
background-image: url('../assets/images/logo.jpeg');
background-size: cover;
margin-right: 20px;
}
.search-bar {
width: 50%;
height: 50%;
border: 1px solid gray;
border-radius: 20px;
padding: 10px;
margin: 0 auto;
font-size: 1em;
}
Photo (I would like the logo to be centered, next to the search bar):
Thanks!
You can use display:flex and justify-content: center in your .header div to center the elements in the center; Add a margin-right to the logo to give a space between the logo and search bar
.header {
display: flex;
justify-content: center;
}
.logo {
width: 80px;
height: 80px;
background: url('https://via.placeholder.com/80') no-repeat;
margin-right: 10px;
}
<!DOCTYPE html>
<html>
<body>
<div class="header">
<div class="logo"></div>
<input type="text" class="search-bar" placeholder="Type...">
</div>
</body>
</html>
I'm kinda new to web dev too, but this should work:
.header{
text-align: center;
}
There are many ways to achieve your desired output. One of the ways using flex. You can also have a look at FLEX: A simple visual cheatsheet for flexbox.
display: flex;
align-items: center;
justify-content: center;
Click on this CodePen to see the full code.
Besides, you can also have a look at the link below to see the issue & solution visually: StackOverFlow QA - Header in css not as expected
Happy coding :)
The problem was in the
margin: 0 auto;
Hope it helps someone!
Cannot make the logo and text appear in a row on header tag of webpage by applying flex in CSS. My code is along with this post and also attached output on web browser (Chrome) at the end..
Is this problem caused by a mistake in below code. New to webdesign, can anyone find what's wrong with my code. I want to apply flex on <header> tag so that img and <nav> content will be in a row. But that's not happening. See the webpage screenshot at the post end.
.container {
width: 1024px;
min-height: 300px;
margin-left: auto;
margin-right: auto;
}
header {
background-color: #63BC7D;
min-height: 100px;
display: flex;
}
main {
/*background-color: #179E3F; */
min-height: 300px;
display: flex;
align-items: center;
/*justify-content: space-between;*/
}
.cards {
background-color: #AC1149;
min-height: 300px;
display: flex;
justify-content: space-between;
}
.card1 {
background-color: #6EB806;
min-height: 300px;
width: 30%;
}
.card2 {
background-color: #36E059;
min-height: 300px;
width: 30%;
}
.card3 {
background-color: #00FF09;
min-height: 300px;
width: 30%;
}
.herobox1 {
flex: 2;
/*background-color: #8D4E85;*/
}
.herobox2 {
/*background-color: #684F96;*/
flex: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bike Repair Shop</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="cssReset.css">
</head>
<body>
<div class="container">
<header>
<div class="logo">
<img src="https://via.placeholder.com/140x100" alt="Website Logo">
</div>
<nav>
Book
Online
About
Contact
</nav>
</header>
<main>
<div class="herobox1">
<h1>Mobile bike repairs </h1>
<p>Many people have difficulty getting their bikes to a bike shop. We call to your office or home anywhere in greater Dublin.</p>
<p>Fast, convenient bike servicing with up-front pricing. All without the hassle of taking your bike into a shop. </p>
</div>
<div class="herobox2">
<img src="https://via.placeholder.com/140x100" alt="Person servicing bike in Dublin">
</div>
</main>
<div class="cards">
<div class="card1"></div>
<div class="card2"></div>
<div class="card3"></div>
</div>
</div>
</body>
</html>
Wrapping a div around the texts and adding a padding-top seems to resolve it.
<nav>
<div style="padding-top: 18%;">
Book
Online
About
Contact
</div>
</nav>
https://jsfiddle.net/sLmj568x/
header{ flex-direction: column; }
Add this code to your CSS code.
Yes, finally with the help from this forum I understand my mistake. As you people said cssreset caused the trouble. I need to first cssReset.css and then my custom styles.css to get the correct effect. Otherwise the effect made using styles.css is overriden by cssReset.css A simple mistakes. Thanks everyone.
I have some simple HTML and CSS written. I'd like to get a list of buttons to the right side of an image.
I've tried using float and display: inline
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
.main{
background: yellow;
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container{
background: pink;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
I've highlighted the container for everything but the footer as yellow. The container holding the buttons are pink. I've done this to help me understand what's happening to the containers as I test things out.
For float, I've tried floating the buttons-container to the right. This results in the buttons going to the right of the page, and it seems to somehow disassociate itself from the main container as it is no longer highlighted in yellow.
I've also tried floating the img to the left. This seems to be the best help so far, except that the yellow background has disappeared. What happened to the rest of my container? I've tried using margin-top to move the buttons down towards the middle of the image but both the image and the button's margins seem to be altered.
Is there a better way to do this? Thank you.
I suggest you use display: flex; to do this. It's much easier to get alignment done with flex This is a sample code.
I have added align-items: flex-start to your controls-container so that it will only take up the space from the top. If you want the container to take the full height along with your image-container feel free to remove that code. Also I have removed your ids and used classes to reference the styles and I would advise you to do the same. Hope it helps you.
HTML
<div class="d-flex flex-column">
<div class="container main">
<div class="image-container">
<img src="img/placeholder.png" />
</div>
<div class="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
<div class="footer">
<h5>
Footer
</h5>
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.main {
background: yellow;
}
.image-container {
width: 1000px;
height: 600px;
}
.controls-container {
display: flex;
flex-direction: row;
background: pink;
}
.footer {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/fq8t3ndw/
The other way around is to use position.I have just tweaked your code, below is the snippet please have a look at it.
.main {
background: yellow;
position: relative
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container {
background: pink;
position: absolute;
right: 0px;
top: 0px;
}
.controls {
display: inline;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
I tried to center "Travel Blog;View Project" with the image, so the text is in the middle of the image on the left side. Not overlapping
I tried using flexbox grid, but i dont have any clue what to do now
the html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fabian Gmeindl</title>
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
<body>
<header id="showcase">
<div class="Top-Page">
<h1>HEY,</h1>
<h2>I'm Fabian Gmeindl</h2>
<p>Skier, Writer, Entrepreneur</p>
</div>
</header>
<div id="project-home">
<!-- Top Page -->
<!-- Page Projects -->
<div class="rtro-area" class="wrapper">
<h2>Travel Blog</h2>
View Project
</div>
<img class="img-rtro" class="wrapper" src="Resources/rtro-toppage.png" alt="Rtro Blog Top Page">
<footer id="main footer">
<p>Copyright © 2019 Fabian Gmeindl</p>
</footer>
</div>
</body>
</html>
the css
*{
margin: 0;
padding: 0;
border:0;
}
h1{
color:#56A1B1;
font-size: 100px;
font-weight: bold;
}
#showcase h2{
color:white;
font-size: 80px;
text-transform: uppercase;
}
p{
color:white;
}
.Top-Page{
padding-left: 8%;
}
body{
background-color: #f4f4f4;
line-height: 1;
}
#showcase{
background-image: url('../Resources/Portrait.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display:flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
/* Project Home Page */
.img-rtro{
width: 1300px;
float: right;
margin-left: 20%;
}
#project-home{
background-image: url('../Resources/background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display:flex;
flex-direction: column;
justify-content: center;
}
When I scroll down to the second section, where the problem is, it looks like this
https://imgur.com/mt2HStK
You can align the "Travel Blog;View Project" part if you add align-items: center to the flexcontainer's CSS. (align-items — controls alignment of all items on the cross axis.) You have to center on the cross axis, as you are using "flex-direction: column".
For aligning elements with flexbox in general, I can recommend this article: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
When I set background-image to one of the div and set the background-size as contain, there will be gap between two divs.
the code is below:
<head>
<style>
.header {
height: 50px;
background: url('https://xxx.png') no-repeat;
background-size: contain;
}
.footer {
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="footer">
</div>
</div>
</body>
How to remove the gap?