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
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!
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;
}
In my HTML page, I have some social media icons at the top of the page, and a logo that's supposed to be in the middle. But, after I added the icons, they're pushing the logo to the side a bit.
Here's an image of what's happening
The question mark symbol is supposed to be in the middle of the entire page (directly in between the "updates" and "archive" in the nav bar), but it's being pushed off. Is there a way I can make the logo in the center of the entire page?
In my HTML I have:
<img src="https://imgur.com/16OdDvD.png" class="sns-icon" id="ig">
<img src="https://imgur.com/nQ2aUYu.png" class="sns-icon" id="reddit">
<div class="center">
<img src="https://imgur.com/hQRzG5G.png" id="headerlg">
</div>
Then in my styles.css I have:
.center {
text-align: center;
}
#headerlg {
padding-top: 35px;
padding-bottom: 9px;
width: 80px;
position: relative;
}
.sns-icon {
width: 30px;
float: left;
margin-top: 13px;
margin-left: 13px;
padding: 1px;
}
I've also tried justify-content: center and margin: auto both of which didn't work
your source code didn't work for me, but here I write some code like yours, I solve your problem with flex box and add some visual style, I hope it's make sense to you.
.container {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container>div {
width: 33%;
height: 20px;
background-color: rgb(216, 216, 216, 0.4);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML & CSS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="social-media">
<span>instagram</span>
<span>twitter</span>
</div>
<div class="logo">
icon logo
</div>
<div class="put-nothing">
</div>
</div>
</body>
</html>
I just created 3 div 1 of them contain social media ,another contain logo , and last one left empty. all of them have same width in all device (mobile, tablet, laptop).
I am working on this website as a side project. I have been trying to make this page responsive (this is my first responsive web page). So far I figured out everything except the social media buttons. I would like to place them on the bottom right corner of the page and have it be responsive however every time I do this when I resize the window they move start to move up. I have included my HTML and CSS. Thank you for all of your help.
I have tried using flexbox, bootstrap, and grid and cant get any of them to work, I am also a bit confused about which kind of CSS to use.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Giphy Search</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2Zw1T" crossorigin="anonymous">
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v4.0">
</script>
<div id="imgLogoDiv">
<img id="imgLogo" src="/img/logo.png" alt="unable to load image">
</div>
<div id="divTxtField">
<input type="text" id="search" placeholder="Search for a gif!">
</div>
<div id="bs-divSearchButton">
<button id="bs-Button" type="button" class="btn btn-dark">Search</button>
</div>
<br>
<div id="GifDisplay">
<img id="gif">
</div>
<div id="socialMediaBottons">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-
href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
<script src="JS/script.js"></script>
</body>
</html>
CSS:
body {
background-image: url(img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#imgLogoDiv {
display: flex;
justify-content: center;
height: auto;
/*height: auto
Not sure if I should keep this since it seems to have to effect.*/
}
#imgLogoDiv #imgLogo {
width: 45%;
height: auto;
}
#divTxtField {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 1%;
}
#divTxtField #search {
border-radius: 25px;
}
#divTxtField #search:hover {
cursor: auto;
}
#bs-divSearchButton {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 20px;
}
#bs-divSearchButton #bs-Button:hover {
cursor: pointer;
}
#socialMediaBottons{
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 50vh;
}
#GifDisplay {
display: flex;
justify-content: center;
}
image of site showing buttons
This solution comes from the Bootstrap 4 page on Flex _
As recommended I added flex classes d-flex justify-content-end to the div #socialMediaBottons and removed the same from your CSS
So now the HTML section looks like this:
<div id="socialMediaBottons" class="d-flex justify-content-end">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a
target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
...while the pertinent CSS block only contains the height attribute:
#socialMediaBottons{
height: 50vh;
}
As you can see from this image the buttons are now aligned:
aligned buttons
Reference Docs:
Bootstrap 4 Flex: https://getbootstrap.com/docs/4.0/utilities/flex/
I appreciate you're trying to use Flexbox, but in this case it's not the right tool for the job.
You should use either absolute or fixed positioning (depending on what you're going for) to get the social buttons in the bottom corner. Just make sure body has position:relative.
body { position:relative }
#socialMediaBottons { position:fixed; bottom:10px; right:10px; }
#fbButton, #twitterButton { display:inline-block; }
This way, whatever height or width the viewport is, the buttons will always be a specified distance from the bottom right corner (you can adjust bottom and right to your liking).
You can use CSS as below:
.socialMediaButton{
display: inline-block;
margin: 5px;
}
.socialMediaButtons {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
}
See result here.
I've been trying to include a background I've created in illustrator. The file has been exported as a PNG but when I try to link it in the code using background-image it won't work. I've tried linking it through the files and also uploading it onto a site where it can be retrieved from.
The box I'm wanting it to go into is the "bottom-item-about"
/*Main about flex container styling*/
.grid-items {
display: flex;
flex-flow: row wrap;
}
/*Styling of items inside main about flex container */
.grid-items > div {
width: 100px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
/*The left, right & bottom box main styling*/
.grid-item {
flex: 1 calc(50% - 20px);
padding: 0 50px 40px;
box-sizing: border-box;
min-height: 650px;
position: relative;
overflow: hidden;
flex-direction: column;
justify-content: center;
display: flex;
text-align: center;
}
/*Bottom about box styling*/
.grid-item-wide {
flex: 1 100%;
min-height: 575px;
padding-bottom: 20px;
}
/*Left about box colour*/
.left-item-about {
background-color: #F2D0A4;
}
/*Right about box colour*/
.right-item-about {
background-color: #545E75;
color: #fff;
}
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://imgur.com/DWpaLxD);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<title>Hector's Portfolio</title>
<!-- CSS style sheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Font link -->
<link href="https://fonts.googleapis.com/css?family=Cardo:400,700|Montserrat:400,500,800" rel="stylesheet">
<!-- Linking social icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- Scaling debending on device -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Body with class to style what is inside of it -->
<body class="layout-portfolio">
<div class="grid-item grid-item-wide bottom-item-about"> <!-- this container needs the background -->
<!-- Services text container -->
<div class="grid-item grid-item-service-wide">
<!-- Services Title -->
<h3 class="case-item-header">Services</h3>
</div>
<!-- Services icons/info section -->
<div id="about" class="content-wrapper gridItems-peak grid-items">
<!-- Two child elements inside flex container -->
<!-- Left side icons/info -->
<div class="grid-item-services left-item-services">
</div>
<!-- Right side icons/info -->
<div class="grid-item-services right-item-services">
</div>
</div>
</body>
</html>
Just change the background image path from https://imgur.com/DWpaLxD to https://i.imgur.com/DWpaLxD.jpg for bottom-item-about class.
/*Styling of items inside main about flex container */
.grid-items > div {
width: 100px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
/*The left, right & bottom box main styling*/
.grid-item {
flex: 1 calc(50% - 20px);
padding: 0 50px 40px;
box-sizing: border-box;
min-height: 650px;
position: relative;
overflow: hidden;
flex-direction: column;
justify-content: center;
display: flex;
text-align: center;
}
/*Bottom about box styling*/
.grid-item-wide {
flex: 1 100%;
min-height: 575px;
padding-bottom: 20px;
}
/*Left about box colour*/
.left-item-about {
background-color: #F2D0A4;
}
/*Right about box colour*/
.right-item-about {
background-color: #545E75;
color: #fff;
}
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://i.imgur.com/DWpaLxD.jpg);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}
<div class="grid-item grid-item-wide bottom-item-about">
<div class="grid-item grid-item-service-wide">
<h3 class="case-item-header">Services</h3>
</div>
<div id="about" class="content-wrapper gridItems-peak grid-items">
<div class="grid-item-services left-item-services">
</div>
<div class="grid-item-services right-item-services">
</div>
</div>
</div>
.bottom-item-about {
background:url(../img/services-background.png) left top #3F826D;
color: #fff;
}
try using ../ this path its not fetching may be because you placed image in /img and your css is in /css
/*Bottom about box colour*/
.bottom-item-about {
background-image: url(https://imgur.com/DWpaLxD);
/* or can use 'url(img/services-background.png)*/
background-color: #3F826D;
color: #fff;
}
replace this line:
`background-image: url(https://imgur.com/DWpaLxD);`
with this:
`background-image: url(https://i.imgur.com/DWpaLxD.jpg);`
this is your uploaded image real url. ending with image extention (.jpg, .png, .gif, ...)
or your local file url and it should work