So I'm having some issues with putting a some content with putting some content below my hero / jumbotron image. The underline stuff is not important! It is animtated on load with some jquery. Code Below:
JSFiddle
I want to "What we do" content below the jumbotron image
HTML:
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
<div id="underline-1"></div>
<div id="underline-2"></div>
<div id="underline-3"></div>
<div id="underline-4"></div>
</div>
<img class="hero-img" src="img/city-night.png" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
CSS:
.hero{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: absolute;
width: 640px;
height: 125px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: relative;
height: 30%;
background-color: #eeeeee;
z-index: 100;
}
This will solve your problem, however as your screen gets vertically smaller you will notice the text at the bottom slowly disappearing. This is because you are using %'s to define the dimensions of the elements, as the screen shrinks the box will be smaller relative to your screen size. To solve this, change the 10% I used for .wwd-main to 90px.
body {
margin: 0;
padding: 0;
}
.hero{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: absolute;
width: 640px;
height: 125px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: fixed;
bottom:0;
width:100%;
height: 10%;
background-color: #eeeeee;
z-index: 100;
}
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
</div>
<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
edit: What I did to solve the issue was change .wwd-main from position:relative; to position:fixed; and added bottom:0; This ensures the text will always be fixed to the bottom of your screen with a 0px offset.
You could just remove position: fixed; from .hero.
And add this to your CSS, to collapse the margins:
.wwd-main > h1
{
margin: 0;
}
You have defined the Height and Width of the text twice.
Here is the changed version of the code.
You can now customize your styling to make it look the way you want.
PS: I would recommend you to use Bootstrap or any other libraries.
body {
margin: 0;
padding: 0;
}
.hero{
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-family: 'Lato', sans-serif;
}
.hero-text {
position: fixed;
width: 640px;
height: 125px;
top: 20%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.hero-text h1{
position: absolute;
width: 640px;
height: 125px;
font-size: 7.1em;
z-index: 1;
margin-top: -15px;
}
.hero-img {
width: 100%;
height: 100%;
}
.wwd-main {
position: relative;
height: 20%;
background-color: #eeeeee;
z-index: 100;
}
<div class="hero">
<div class="hero-text">
<h1 class="invis-selection">Header Text</h1>
</div>
<img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" />
</div>
<div class="wwd-main">
<h1>What we do</h1>
</div>
JSFiddle Link
Related
In the mobile device,
when the user touches the (.menu-btn), (.menu) is shown and the (body) is locked to scroll.
But the problem is (.menu) was also looked too.
How can I make (.menu) is possible to scroll even though the (body) is looked to scroll?
https://jsfiddle.net/n17qw8sb/
I know there is body-scroll-lock. : https://github.com/willmcpo/body-scroll-lock
Unfortunately, I'm not allowed to use webpack for this one :(
<body>
<header>
<h2> Top area </h2>
<div class="menu-btn">
</div>
<div class="menu">
<h2> Hamburger menu area </h2>
</div>
</header>
<section class="contents">
<h2> Contents area </h2>
</section>
</body>
$('.menu-btn').on('click', function() {
$('.menu').toggleClass('active');
$('body').toggleClass('lock-scroll');
$('html').toggleClass('lock-scroll');
})
body {
width: 100%;
background-color: lavender;
}
body.lock-scroll {
overflow: hidden;
}
html.lock-scroll {
overflow: hidden;
}
header {
width: 100%;
height: 3em;
position: fixed;
top: 0;
background-color: beige;
z-index: 100;
}
.menu-btn {
width: 1em;
height: 1em;
background-color: lightseagreen;
position: fixed;
z-index: 300;
top: 1em;
right: 1em;
}
.menu {
width: 100%;
height: 130vh;
position: fixed;
top: 0;
z-index: 200;
padding-top: 40%;
background-color: rgba(255,255,255, .5);
transform: translateX(100%);
transition: all .5s ease;
}
.menu.active {
transform: translateX(0%);
}
.contents {
width: 100%;
padding-top: 50%;
height: 150vh;
background-color: lightblue;
}
h2 {
text-align: center;
}
add a .menu-content element and place the content of .menu element inside that.
And also add this style to end of your style
.menu {
height: 100%;
overflow: scroll;
}
.menu-content {
height: 130vh;
}
https://jsfiddle.net/dm8zrabx/
$('.menu-btn').on('click', function() {
$('.menu').toggleClass('active');
$('body').toggleClass('lock-scroll');
$('html').toggleClass('lock-scroll');
})
body {
width: 100%;
background-color: lavender;
}
body.lock-scroll {
overflow: hidden;
}
html.lock-scroll {
overflow: hidden;
}
header {
width: 100%;
height: 3em;
position: fixed;
top: 0;
background-color: beige;
z-index: 100;
}
.menu-btn {
width: 1em;
height: 1em;
background-color: lightseagreen;
position: fixed;
z-index: 300;
top: 1em;
right: 1em;
}
.menu {
width: 100%;
height: 130vh;
position: fixed;
top: 0;
z-index: 200;
padding-top: 40%;
background-color: rgba(255,255,255, .5);
transform: translateX(100%);
transition: all .5s ease;
}
.menu.active {
transform: translateX(0%);
}
.contents {
width: 100%;
padding-top: 50%;
height: 150vh;
background-color: lightblue;
}
h2 {
text-align: center;
}
/* newly added style */
.menu {
height: 100%;
overflow: scroll;
}
.menu-content {
height: 130vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<h2> Top area </h2>
<div class="menu-btn">
</div>
<div class="menu">
<div class="menu-content">
<h2> Hamburger menu area </h2>
</div>
</div>
</header>
<section class="contents">
<h2> Contents area </h2>
</section>
</body>
Note: See the result in full-page view
I have an extremely simple issue. I have nested divs. where I am trying to center a div(.gridcontainer) in div(.main). If you run the below snippet, you can see that the div does center full in the main div. It leaves the spaces uneven on the either side horizontally and vertically.
I have tried a lot of fixes and even tried dynamically centering them on load through JS. But, somehow it does not achieve the results.
I just want it to be the exact size of the parent but have little spaces left on each sides evenly.
body {
margin: 0;
padding: 0;
}
.tops {
position: fixed;
background: rgba(0,0,0,0.70);
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
min-height: 100vh;
min-width: 100vw;
height: auto;
width: auto;
overflow: hidden;
}
.top_menu {
position: relative;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 70px;
background-color: green;
overflow: hidden;
}
.welcome {
position: relative;
top: 0;
bottom: 0;
left: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.welcome_message {
font-family: 'Palanquin Dark', sans-serif;
font-size: calc(2.5vw + 3vh);
position: relative;
top: 30%;
left: 50%;
margin: 0;
float: left;
color: white;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -30%);
}
.app_name {
font-size: calc(1.5vw + 2vh);;
}
.gradientText {
background: -webkit-linear-gradient(#FFA07A, #8B0000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.downloadButton{
position: absolute;
top: 75%;
left:50%;
background-color: white;
width: 225px;
height: 50px;
border-radius: 25px;
border-width: 0px;
display: inline-block;
overflow: hidden;
transform: translate(-50%, -75%);
transition: all .2s ease-in-out;
}
.downloadButton:hover
{
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: translate(-50%, -75%) scale(1.1);
}
.downloadText {
position: relative;
text-align: center;
top: 50%;
transform: translateY(-50%);
font-size: 1.4em;
font-weight: bold;
color: black;
}
.iphone {
position: relative;
top: 0;
bottom: 0;
right: 0;
min-height: 100vh;
min-width: 50%;
height: auto;
width: auto;
}
.iXFrame {
position: absolute;
height: 700px;
width: 350px;
top: 45%;
left: 50%;
transform: translate(-50%, -45%);
}
.main {
position: absolute;
display: block;
margin-top: 75px;
height: auto;
overflow: hidden;
width: auto;
min-width: 100vw;
min-height: 50vh;
}
.gridcont{
position : absolute;
/*height: auto;*/
width: auto;
/*min-height: 95vh;*/
min-width: 95vw;
margin: 0;
border-radius: 20px;
display: inline-block;
background-color: whitesmoke;
/*overflow: hidden;*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover-min.css">
<link href="https://fonts.googleapis.com/css?family=Changa+One|Montserrat|Palanquin+Dark|Paytone+One|Rubik|Rubik+Mono+One" rel="stylesheet">
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<section class="mains ui">
<div
class="tops"></div>
<!--.top_menu-->
<div class="ui grid marg-reset">
<div class="doubling two column row">
<div class="ui column welcome">
<h1 class="welcome_message"><span class="app_name">Example</span><br>we will<br>rock <br>you<br><span class="gradientText">Text</span></h1>
<a class="downloadButton" type="button" href="/app">
<div class="downloadText">Download Spotmi</div>
</a>
</div>
</div>
</div>
<div class="main">
<div class="ui grid gridcont">
<div class="doubling two column row">
<div class="ui column show_text">
<h1 class="emotion_message">Hello world</h1>
</div>
<div class="ui column emotion_show"></div>
</div>
</div>
</div>
</section>
This also poses an issue in the responsive nature of the site. Below are two screenshots. one of a HiDPI Laptop screen and other is a iphone X simulator. This even poses an issue there.
iPhoneX size screen.
Laptop Screen.
How exactly can I solve this?
Have you tried giving the giving the internal div that you want to center CSS properties:
position: relative;
top: 50%;
left 50%;
transform: translate(-50%, -50%);
this usually solves my balancing issues xD
I have the following arrangement:
I have parent div with class container with width: 100%; and also both html and body have width: 100%, and so far it is working as expected.
But inside div with class container, i have two divs, one div with width: 300px,
and other div with width: calc(100% - 300px),
where parent with class mainpage has width: calc(100% - 300px), and child div with class page has width: 100%;
but width: 100% is not working on this div?
even though parent div width is determinant.
code: https://jsfiddle.net/tj8k0nnw/1/
.container {
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer {
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer {
position: relative;
width: 100%;
height: 100%;
}
.sidebar {
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage {
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page {
width: 100%;
width: 100%;
background-color: white;
}
.footer {
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1 {
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2 {
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<!--
-->
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
The code provided is working. You have not specified a height for page so the height is 0. Giving it a height causes it to become visible: https://jsfiddle.net/kvjw9vhm/
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height: 100%; /* was width: 100%; */
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1{
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2{
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
Above provided code is working , just add some height in page class.
.page{
width: 100%;
height:100px;
background-color: green;
}
By default height is 0 ,if there's no content .Below is demonstration, check it out:
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height:100px;
background-color: green;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
Looks like there is not much problem with your code and you did a typo by mentioning width twice in the .page class. Changing one of them to height worked fine for me and should work for you too.
Let me know if you face any problem.
Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?
http://cichyone.linuxpl.eu/ranestwen/ex/
I've tried text-align, margin auto etc and nothing works.
When I set it in the middle using margin-left and margin-top it is working only for one resolution.
Just Use following css
.slider .polygon_container {
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin: auto;
color: white;
height: 500px;
text-align: center;
width: 500px;
z-index: 99999;
}
.slider .polygon {
color: white;
height: 500px;
margin: auto;
position: absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
width: 500px;
z-index: 99999;
}
You can easily use flexbox.
.owl-item > div {
display: flex;
justify-content: center;
align-items: center;
}
You can Center the polygon div using tansform:
I created the following HTML:
<div class="polygon_container">
<div class="polygon">
<h1>hello</h1>
</div>
</div>
And for that I´m using this css:
body
{
margin: 0;
padding: 0;
}
.polygon_container
{
width: 100%;
height: 100%;
background: red;
}
.polygon
{
width: 50%;
height: 50%;
background: white;
transform: translateX(50%) translateY(50%);
}
Hope this is a solution for you.
Yes it is possible. Try this.
.polygon_container {
position: absolute;
height: 500px;
width: 500px;
top: 50%;left: 50;
margin-left: -250px;
margin-top: -250px;
}
html, body {
height: 100%;width: 100%;
margin: 0;padding: 0;
}
.container {
height: 100%;width: 100%;
background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
background-size: cover;
}
.polygon_container {
position: absolute;
height: 100px;
width: 100px;
left: 50%;top: 50%;
margin-top: -50px;
margin-left: -50px;
}
.polygon_container .polygon {
background: #fff;
height: 100%;
width: 100%;
transform: rotate(45deg);
}
<div class="container">
<div class="polygon_container">
<div class="polygon"></div>
</div>
</div>
.slider .polygon_container {
width: 500px;
height: 500px;
position: absolute;
z-index: 99999;
text-align: center;
color: white;
margin: 0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Updated your class.
I'm trying to add a fading gradient over an image in a slideshow, so that, when viewing a certain picture (my slide shows 3 pics, one middle & then a small portion of the first & prev pic), the pictures on the sides will have this gradient over them, so the previous pic on the left will have it's left side fading out, and vice versa. If you get me? Similar to what was commented here: How do you apply a fading overlay to an image in CSS? I have 2 .png's, one that fades left, one that fades right. Where do I apply these in terms of HTML & .css? You'll see them at the very bottom of the .css, however they are not applied correctly and does not have corresponding divs in html (needed?). When you hover over the next & prev image, they should also lighten up a bit (lose some of their fade-effect). Example: http://www.deadmau5.com
HTML
<div class="hero">
<div class="hero-carousel">
<article>
<img src="images/deadmau5/slide1.jpg" />
</article>
<article>
<img src="images/deadmau5/slide2.jpg" />
</article>
<article>
<img src="images/deadmau5/slide3.jpg" />
</article>
<article>
<img src="images/deadmau5/slide4.jpg" />
</article>
</div>
</div>
javascript
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
CSS
.hero {
width: 1366px;
height: 340px; position:absolute;top:270px;
overflow: hidden;
margin-bottom: 48px;
margin: 0 auto;
border-top:9px solid rgba(51, 51, 51, .15);
border-bottom: 9px solid rgba(51, 51, 51, .15);
padding: 0 0 12px 0;
}
.hero-carousel article {
width: 970px;
margin: 0 auto;
height: 470px;
display: block;
float: left;
position: relative;
}
.hero-carousel-container article {
float: left;
}
.hero-carousel article img{
border-style:solid;border-width:6px;color:#000; position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.hero-carousel article .contents {
position: relative;
z-index: 2;
top: 72px;
left: 48px;
list-style: none;
color: #000;
width: 556px;
padding: 20px;
background: rgba(255,255,255,0.8);
-pie-background: rgba(255,255,255,0.8);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(/assets/PIE.htc);
}
.hero-carousel-nav {
width: 980px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -490px;
z-index: 2;
}
.hero-carousel-nav li {
position: absolute;
bottom: 48px;
right: 48px;
list-style: none;
}
.hero-carousel-nav li.prev {
left: -50px;
right: auto;
bottom: 100px;
}
.hero-carousel-nav li.next {
right: -30px;
left: auto;
bottom: 100px;
}
.hero-carousel-nav li a {
background: none repeat scroll 0 0 #D21034;
color: #FFFFFF;
display: block;
float: left;
}
.hero-carousel-nav li.next a {
background: url('../images/deadmau5/large-arrow-right.png'),
-5px -7px no-repeat;
display: inline-block;
width: 105px; /*width of your img*/
height: 105px; /*height of your img*/
font-size: 0px;
right: -15px; /*this is better than 1px*/
bottom: 100px;
overflow:hidden;
outline:none;
}
.hero-carousel-nav li.prev a {
background: url('../images/deadmau5/large-arrow-left.png'),
-7px -7px no-repeat;
display: inline-block;
width: 105px; /*width of your img*/
height: 105px; /*height of your img*/
font-size: 0px; /*this is better than 1px*/
left: -50px;
bottom: 100px;
overflow:hidden;
outline:none;
}
There are several ways to handle this, but this is a simplistic example of how this site is laying everything out.
CSS
#container {
position: relative;
width: 504px;
margin: 0 auto;
}
#slide-container {
width: auto;
}
.article {
display: inline-block;
}
.article img {
width: 165px;
height: auto;
}
#overlay-left {
position: absolute;
width: 165px;
height: 60px;
top: 0;
left: 0;
background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-left.png') no-repeat top left;
z-index: 2;
}
#overlay-right {
position: absolute;
width: 165px;
height: 60px;
top: 0;
right: 0;
background: url('http://www.deadmau5.com/wp-content/themes/deadmau5/images/slider-fade-right.png') no-repeat top right;
z-index: 2;
}
#overlay-left:hover, #overlay-right:hover {
opacity: 0.8;
}
HTML
<div id="container">
<div id="slide-container">
<div class="article">
<a href="">
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" />
</a>
</div>
<div class="article">
<a href="">
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" />
</a>
</div>
<div class="article">
<a href="">
<img src="http://www.deadmau5.com/wp-content/uploads/2012/06/slide1.jpg" />
</a>
</div>
</div>
<div id="overlay-left"></div>
<div id="overlay-right"></div>
</div>
Here is a JSFiddle of this if you want to play with it.