I am trying to place a Divider with some skies at the bottom of my background image (class="divider-clouds"). For some reason, they just won't show - Seems like the clouds are hidden behind the background-image.
I've been playing around with z-index in order to get the clouds on top of the background-image. But didn't seem to help either. What am I missing??
HTML:
<!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>TurboTobias</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="hero-section">
<div class="row">
<div class="column hjemmeside-til-skyerne">
<h1>Vil du have
<div class="h1-enhanced">raketfart</div>
<div class="h1-smaller">på din hjemmeside?</div>
</h1>
<span class="sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
<div class="column">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="divider-clouds"></div>
</div>
</section>
</body>
</html>
CSS:
body {
background: #fff;
color: #333333;
height: 100vh;
margin: 0;
box-sizing: border-box;
font-family: open sans,Arial,sans-serif;
}
#hero-section {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
z-index: 1;
position: relative;
}
.row {
height: 100vh;
width: 80%;
max-width: 1080px;
margin: auto;
display: flex;
z-index: 1;
}
.hjemmeside-til-skyerne {
display: flex;
align-self: center;
align-items: center;
flex-direction: column;
}
.hjemmeside-til-skyerne h1 {
font-weight: 700;
font-size: 60px;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
.h1-enhanced {
font-weight: 900;
font-size: 120%;
}
.h1-smaller {
font-size: 70%;
}
.sub-h1 {
font-size: 24px;
color: #303030;
font-weight: 400;
}
.divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
height: 100px;
position: absolute;
z-index: 10;
}
Code snippet
I would expect the clouds showing at the bottom with a height of 100px.
You should add a with of 100% on your .divider-clouds element style.
You div isn't showing because it has no width attribute, add that to your styling:
.divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
height: 100px;
position: absolute;
z-index: 10;
width: 500px;
}
What Martin Choraine said.
.divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
height: 100px;
width: 100%;
position: absolute;
z-index: 10;
}
updated the fiddle https://jsfiddle.net/w6g9eqo2/
If you want to learn more about SVG and scaling, I can recommend this article:
https://css-tricks.com/scale-svg/
Related
Everything is pretty much ready, the only issue I have is that bottom circle does not want to hide beyond body borders, even though the property is set to hidden. Could anyone take a look at the code and explain it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
<title>Profile card component</title>
</head>
<body>
<div class="gradient-top">
</div>
<div class="gradient-bottom">
</div>
<div class="container">
<!-- BACKGROUND THROUGH CSS -->
<div class="personal">
<div class="background">
<img src="images/bg-pattern-card.svg" alt="">
</div>
<img class ="victor" src="images/image-victor.jpg" alt="personal photo">
<h1>Victor Crest <span>26</span> </h1>
<h2>London</h2>
</div>
<div class="properties">
<div class="followers">
80K
<span class="property">Followers</span>
</div>
<div class="likes">
803K
<span class="property">Likes</span>
</div>
<div class="photos">
1.4K
<span class="property">Photos</span>
</div>
</div>
</div>
</body>
</html>
:root {
font-size: 62.5%;
font-family: "Kumbh Sans", sans-serif;
box-sizing: border-box;
}
body {
background-color: #19a1ae;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
position: relative;
}
/* MAIN CARD SECTION */
.container {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
border-radius: 20px;
margin-right: 2.5rem;
margin-left: 2.5rem;
box-shadow: 5px 5px 20px 10px rgba(0, 0, 0, 0.1),
-5px -5px 20px 10px rgba(0, 0, 0, 0.1);
}
.personal {
background-color: #ffffff;
}
.personal .victor {
display: inline;
margin-top: -55px;
border: 6px solid #ffffff;
border-radius: 50%;
}
h1 {
color: #2e3349;
}
h1 span {
font-weight: 400;
color: #6b7082;
}
h2 {
font-size: 1.4rem;
font-weight: 400;
color: #6b7082;
padding-bottom: 1em;
}
/* STAT SECTION */
.properties {
display: flex;
justify-content: space-around;
align-items: center;
padding: 1.3em 1em;
background-color: #ffffff;
width: 100%;
font-size: 1.8rem;
font-weight: bold;
color: #2e3349;
border-top: 1px solid #e8e9ec;
}
.property {
display: flex;
flex-direction: column;
color: #6b7082;
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.15em;
padding-top: 0.8em;
}
/* CIRCLES */
.gradient-top {
z-index: -10;
position: absolute;
background-image: url("images/bg-pattern-top.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
top: -35%;
left: -31.5%;
}
.gradient-bottom {
z-index: -10;
position: absolute;
background-image: url("images/bg-pattern-bottom.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
bottom: -50%;
right: -31%;
}
}
/* the bottom one causes the problem fsr*/
Repo link: https://github.com/ViyanMd/personal-card
Pages link: https://viyanmd.github.io/personal-card/
The issue was fixed by wrapping the whole content in another div, applying to it properties, that were applied to body before. For some reason the child element started to behave differently and the issue was solved.
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
CSS center display inline block?
(9 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I've tried to put a minimal solution together for this. I want to be able to center a span that has a background image (svg) within a div that has the border radius set to give a rounded icon effect.
This looks like the following:
This has been put together with the following:
body {
background-color: greenyellow;
}
.demo-icon {
display: inline-block;
border-radius: 50%;
background-color: white;
position: relative;
overflow: hidden;
height: 64px;
width: 64px;
}
.demo-icon .icon {
text-align: center;
vertical-align: middle;
}
.icon {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
height: 48px;
width: 48px;
background-color: red;
vertical-align: middle;
}
.icon-form {
background-image: url(./form.svg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align you £!£!££</title>
</head>
<body>
<div class="demo-icon">
<span class="icon icon-form"></span>
</div>
</body>
</html>
What do I need to do to get the span containing the svg to align in the center middle?
You can try with display:inline-flex;
body {
background-color: greenyellow;
}
.demo-icon {
/* added */
display: inline-flex;
justify-content: center;
align-items: center;
/****/
border-radius: 50%;
background-color: white;
position: relative;
overflow: hidden;
height: 64px;
width: 64px;
}
.demo-icon .icon {
text-align: center;
vertical-align: middle;
}
.icon {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 48px;
width: 48px;
background-color: red;
vertical-align: middle;
}
.icon-form {
background-image: url(./form.svg);
}
<div class="demo-icon">
<span class="icon icon-form"></span>
</div>
you can try flex box because it mostly used in layouts of element and make it easy
body {
background-color: greenyellow;
}
.demo-icon {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: white;
position: relative;
overflow: hidden;
height: 64px;
width: 64px;
}
.demo-icon .icon {
text-align: center;
vertical-align: middle;
}
.icon {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
height: 48px;
width: 48px;
background-color: red;
vertical-align: middle;
}
.icon-form {
background-image: url(./form.svg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align you £!£!££</title>
</head>
<body>
<div class="demo-icon">
<span class="icon icon-form"></span>
</div>
</body>
</html>
In my app I have image and text under the pic - in media queries. I want to display the text after the pic, but somehow it overlaps:
jsFiddle: https://jsfiddle.net/orbwthma/
#media only screen and (max-width: 614px) {
#page-content {
position: absolute;
top: 0;
right: 0;
margin-top: 0 !important;
padding: 0 !important;
}
#main-pic {
position: absolute;
top: 0;
background-size: contain;
background-image: url('../assets/feev-cropped.png');
background-repeat: no-repeat;
margin-bottom: 0 !important;
}
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
}
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
float: right;
margin: 20px 0px 120px 0;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
float: right;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row" style='float:right;'>
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried many things but nothing helped. I think this might have some connections to the position: abolute of the image, but after a while I can't see anything that could help this and prevent overlaping.
EDIT: Try to resize window of the snipped to see overlapping
Please do not use float for layout purposes. There are other solutions for that ( grid or flexbox )
Use flexbox by adding display:flex on #page-content and make use of the flex-direction property. On > 414px use flex-direction: column and then in the media query reverse the order of the text/image by adding flex-direction: column-reverse .
Check below or jsFiddle
body {
background-color: #ff0000 !important;
padding: 0px;
margin: 0px;
overflow-x: hidden;
}
#page-start {
height: 100vh;
}
#page-content {
padding-top: 68px !important;
}
#lower-text {
color: #fff;
font-size: 68px;
font-weight: 500;
margin: 20px 0px 120px 0;
}
#page-content {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#main-pic {
background-image: url('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
width: 100%;
height: 920px;
background-size: cover;
background-repeat: no-repeat;
margin-right: auto;
margin-bottom: 50px;
}
#media only screen and (max-width: 414px) {
#info {
position: relative;
font-weight: 500;
line-height: 1.29;
}
#lower-text {
font-size: 21px;
width: 305px;
height: 178px;
margin-top: 0 !important;
line-height: 1.29;
margin-bottom: 10px;
}
#page-start {
height: 60vh;
}
#page-content {
flex-direction: column-reverse;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>FEEV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/queries.css">
</head>
<body>
<div class="container-fluid" style="margin: 0">
<div id="lower-text">
<div class="row">
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-10 col-md-10" id="page-content" style="margin: 0px; padding: 0px">
<span id="info">
some text1 some text2 some text3 some text4 some text5 some tex6 some text7 some text8 some text9 some text10 some text11 some text12 some text13
</span>
<div id="main-pic"></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
min-height: 200px;
max-height: 500px;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
max-width: 1440px;
margin: auto;
height: 100%;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
How I Can vertically align center this container, considering header height and footer (position: absolute and height). I think, what this we can do with display: flex, are how?
I use Bootstrap 3 grid
Example jsbin: http://jsbin.com/timatozuco/edit?html,output
Here try.. Just configure updated code based on your adjustment..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
height: 100%;
}
.container {
display: -ms-flexbox;
display: flex;
top: 10%;
left: 50%;
position: absolute;
box-sizing: border-box;
}
header, footer {
height: 150px;
background: #ccc;
}
footer {
position: absolute;
width: 100%;
height: 50px;
bottom: 0;
}
</style>
</head>
<body>
<header></header>
<div class="container">
content blah blah blah
</div>
<footer>
fsdfsdfsdfsdfsdffdsadsfasd
</footer>
</body>
</html>
If I understand your question correctly, then I guess you want to make the whole container in the center of the page on the basis of header and footer size.
So below code is the solution
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #000;
line-height: 22px;
text-decoration: none;
}
.wrapper {
width: 100%;
background: #fff;
margin: -128px auto 0;
height: 100%;
text-align: left;
clear: both;
display: table;
position: relative;
z-index: 1;
}
header {
width: 100%;
margin: auto;
background: #ccc;
height: 66px;
position: relative;
z-index: 2;
border-bottom: 20px solid #fff;
}
footer {
background: #ccc;
width: 100%;
margin: auto;
height: 22px;
clear: both;
border-top: 20px solid #fff;
position: relative;
z-index: 2;
}
.container {
vertical-align: middle;
display: table-cell;
padding: 128px 0 0;
}
.container .content {
text-align: center;
background: yellow;
padding: 0 10px;
width: 300px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header>
Header content
</header>
<div class="wrapper">
<div class="container">
<div class="content">
Container content
</div>
</div>
</div>
<footer>
Footer content
</footer>
</body>
</html>
or you can also visit this link : Codepen - centered container based on header & footer
I'm creating a banner at the top of my page. It's built using 3 banners that will have content. When I horizontally shrink the browser window, my green banner component(on the right) moves with the edge of the screen eventually overlapping or going under my blue banner component (on the left).
How do I set a browser(body?) width at which the banner on the right stops moving with the shrinking browser and instead enable the browser scroll bars so the page stops shrinking?
If there's an entirely different/better way to approach this please throw all suggestions at me. Trying to learn as much as possible.
Your help is much appreciated. My code is as follows.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
position: absolute;
top: 0;
height: 27px;
background-color: orange;
}
.rightBanner
{
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
display: block;
}
.leftBanner
{
white-space: nowrap;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
display: block;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
When you absolutely position elements you take them out of the flow of the page. You can instead use floats.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
height: 27px;
background-color: orange;
}
.rightBanner
{
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
float: right;
}
.leftBanner
{
white-space: nowrap;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
float: left;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
min-width: 960px;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
You need to remove the position:absolute . Then you could put it all in a container div and float the banners left and right with the body in the middle . That's how I'd do it.