I'm laying out the layout Figma Layout. This page has a background image and additional
Background
Additional - logo
and a hamburger
There is html code of the page
:root {
--my-screenwidth: 1366px;
--my-screenheight: 768px;
--layout-screenwidth: 1441px;
--layout-screenheight: 811px;
}
._container {
--layout-containerwidth: 1111px;
--layout-containerheight: 43px;
max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth));
margin: 0px auto;
box-sizing: content-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Webovio</title>
</head>
<body>
<div class="wrapper">
<main class="page">
<div class="page__main-block main-block">
<div class="main-block__container _container">
<div class="margin-block__header">
<div class="main-block__nav">
<!--
<img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
<img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
-->
<!--<div class="main-block__header_image_1">-->
<img src="https://i.stack.imgur.com/oB0ua.png" class="main-block__logo_name" alt="logoname">
<!--</div>-->
<!--<div class="main-block__header_image_2"></div>-->
<img src="https://i.stack.imgur.com/hO056.png" class="main-block__logo_hamburger_icon" alt="menulogo">
<!--</div>-->
</div>
</div>
<div class="main-block__body">
<div class="main-block__smalltitle">A place where</div>
<div class="main-block__title">A creative agency for redemptive brands</div>
<!--
<div class="main-block__text">
Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
</div>
-->
<div class="main-block__items">
<!--Get in touch link-->
</div>
</div>
</div>
<div class="main-block__image _ibg">
<img src="https://i.stack.imgur.com/Tju6g.png" alt="cover">
</div>
</div>
</main>
</div>
</body>
</html>
The css contains the dimensions of the header containing the logo and the hamburger. Here is the max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth)); which calculates the maximum width of the header given the width values my screen and the layout screen, as well as the width of the header on the layout, taken from the figma layout (the header consists of a logo and a hamburger).
Tell me how to layout the layout so that so that the logo and the hamburger in the header take their places on the background image, and so that the text (headings A place where and A creative agency for redemptive brands) becomes left horizontally and in the middle vertically of the image, and also to be able to proportionally scale the background image as in Proportional scaling tools. It should be like on Layout from Figma. I tried to style but couldn't get the text, logo and hamburger on the background image.
P.S. Exact indents are not needed. Tell me how to layout so that the background image has the content of the page, including text, logo and hamburger.
Section is set to be height: 100vh; width: 100vw and then display: grid.
The background image will always fill it's container and you can control the image cropping by adding style="--imgPosition: <X> <Y>", which is just laying out to object-position so you can check MDN for potential values.
Content in the main block is using display: grid as well and all set to occupy the same space. The links have an explicit z-index set so they will be above the content. The content will always be vertically centered unless it has more content than screen height, at which point padding: 6rem 0 will add 6rem above and below the section
*, *::before, *::after { box-sizing: border-box } body { color: white; font: 16px "Poppins", sans-serif; margin: 0 }
section.custom {
display: grid;
height: 100vh; width: 100vw;
place-items: center;
}
section.custom > * {
grid-area: 1/1/-1/-1;
height: 100%; width: 100%;
}
section.custom .back { position: relative }
section.custom .back > * {
display: block;
height: 100%; width: 100%;
object-fit: cover;
object-position: var(--imgPosition, center center);
position: absolute;
}
section.custom .fore {
display: grid;
gap: 1rem;
max-width: 1200px;
padding: 1rem;
place-items: center;
z-index: 1;
}
section.custom .fore > * { grid-area: 1/1/-1/-1 }
section.custom .fore .navLink { align-self: start; z-index: 1 }
section.custom .fore #logo { justify-self: start }
section.custom .fore #menuToggle { justify-self: end }
section.custom .fore .block { padding: 6rem 0; width: 100% }
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<section class="custom">
<div class="back" style="--imgPosition: top left"><img src="https://i.stack.imgur.com/Tju6g.png"></div>
<div class="fore">
<a class="navLink" id="logo" href="#"><img src="https://i.stack.imgur.com/oB0ua.png"></a>
<a class="navLink" id="menuToggle" href="#"><img src="https://i.stack.imgur.com/hO056.png"></a>
<div class="block">
<p>A place where</p>
<h1>A creative agency for redemptive brands</h1>
<p>Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.</p>
</div>
</div>
</section>
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
I've created a carousel of images inside of a flexbox, and given each of them a width of 200px. I'd like the images to resize at the same rate when I shrink the window, so I gave them each a flex-shrink value of 1.
However, as you can see from the gif, only the second image resizes when I shrink the window (the others stay the same width). I checked the original file sizes and noticed that the second image also has the smallest width (so I assume this could be causing the issue?)
However, I'm not exactly sure how to fix this. Any help would be appreciated.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>your page title goes here</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<h1>My Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="img/dog1.jpeg" alt="first dog">
<figcaption>Example Photo</figcaption>
</figure>
<div class="slider">
<img src="img/dog2.jpeg" alt="second dog"/>
<img src="img/dog3.jpeg" alt="third dog"/>
<img src="img/dog4.jpeg" alt="fourth dog"/>
<img src="img/dog5.jpeg" alt="fifth dog"/>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
background-color: rgb(46, 46, 46)
}
h1 {
font-family: helvetica;
color: white;
}
.container {
padding: 30px 20px;
text-align: center;
max-width: 1000px;
min-width: 500px;
background-color: rgb(66, 66, 66);
margin: 0 auto;
}
figure {
text-align: left;
}
figcaption {
color: white;
}
img {
width: 100%;
}
.gallery {
display: flex;
flex-flow: column;
}
.slider{
margin-top: 32px;
display: flex;
justify-content: space-between;
}
.slider img {
display: block;
width: 200px;
max-height: 200px;
object-fit: cover;
flex-shrink: 1;
}
In this case if you don't want to add any extra markup just replace width:200px; in .slider img to min-width:200px;.
If you want to maintain a completely fluid layout you could replace min-width:200px; with something like min-width:25%.
As I mentioned in my other answer if you're willing to add a container to each of these images you'll have a bit more control as you can make the image expand to fill the container, regardless of what its dimensions are.
Try using a media query
example:
#media(max-width:700px){
.slider img {
width: 100px;
height: auto;
}
}
Just as i added position:absolute; to my h3 inside .panel class (which has a postion: relative;), everything starts to fall apart.
when i refresh i still get blank page , i tried to inspect my elements from dev tools, and when i decreased the viewport width, suddenly it appears from nowhere. Also i noticed that .panel's width is now 0, but how?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
display: flex;
max-width: 90vw;
}
.panel {
height: 80vh;
border-radius: 50px;
margin: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: flex 0.8s ease-in;
flex: .5;
cursor: pointer;
position: relative;
}
.panel h3 {
position: absolute;
font-size: 1.5rem;
bottom: 20px;
left: 20px;
}
<!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>Day-1 Expanding cards</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="container">
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1619994948937-ef1e758d46ca?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=890&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1621335819647-09d00a452430?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=668&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1615653051647-321e464edc86?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1606170034762-cbe66ccabbf8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=750&q=80');">
<h3>Some Heading</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1568056308658-aa380181da25?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1037&q=80');">
<h3>Some Heading</h3>
</div>
</div>
</body>
</html>
Try adding a width to your .panel class, with an actual value (not auto or a %). You have a set height, but height alone will not make the element take up any width on the page.
The reason this issue appeared when you changed .panel h3 elements to position: absolute is because it was these h3 elements that were giving .panel its width before. When they were switched to absolute, they were taken out of the flow of the document and their widths no longer impacted the .panel elements.
Exact fix : changed the max-width:90vw on the .container to width:90vw and this solved the issue.
This issue happened because, i didn't had the width property set, and hence the container gets a 0 width, and therefore, nothing is shown. Also Max-width pertains to a limitation, and not setting the width.
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).