How can I get the caption text on these images to move around when then the browser window is resized? My implementation is jicky and I need a way to keep the text from sliding around when the window is resized.
Codepen
<div class="row">
<div class="col-md-6">
<img src="http://placekitten.com/600/375" class="img-responsive" />
<h2 class="homeImageLink">
<span>Caption Text</span>
</h2>
</div>
<div class="col-md-6">
<img src="http://placekitten.com/600/375" class="img-responsive" />
<h2 class="homeImageLink">
<span>Caption Text</span>
</h2>
</div>
</div>
.homeImageLink {
position: absolute;
top: 110px;
left: 0;
text-align: center;
width: 100%;
}
.homeImageLink span {
color: red;
font-weight: 300;
font-style: italic;
text-transform: uppercase;
letter-spacing: 15px;
pointer-events: none;
}
Just add one class to parent container, make it's position relative.
.img-container {
position:relative;
}
And then make homeImageLink absolute and give top at around 45%..
It will make it vertically centered..
.homeImageLink {
position: absolute;
top: calc(50% - 24px); //24px is font size of H1 I assume
left: 0;
text-align: center;
width: 100%;
}
Demo here : http://codepen.io/anon/pen/bJadE
I came up with another solution, here's a working demo:
http://codepen.io/niente0/pen/jyzdRp
HTML:
<DIV class=wrapper>
<DIV class=divimage></DIV>
<DIV class=divtext>THIS IS A TEST</DIV>
</DIV>
CSS:
HTML,BODY {
max-width:1200px;
}
.wrapper {
position:relative;
width:100%;
max-width:1200px;
height:100%;
min-height:320px
}
.divimage { position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://thumbs.dreamstime.com/t/empty-red-banner-corners-ropes-textile-white-background-d-illustration-70434974.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}
.divtext {
position:absolute;
top:0;
left:0;
width:100%;
padding-top:13.5%;
text-align:center;
font-weight:bold;
font-size:5vw;
color:white;
font-family:arial;
}
#media (min-width: 1200px) {
.divtext{
font-size:60px;
}
}
Related
I am trying to code a pop-up that triggers when an image is clicked, and it is essentially working but the popup is aligning itself to the image that triggered it. I need to align it to the center of the overall page, I have tried messing with the margins and setting all the div class to align="center" but none of that has helped. This is inside an Elementor widget, which I believe is basically just a CSS flexbox.
<div class="popup">
<img src="image1.png">
</div>
<div class="showcompliant">
<div class="overlay"></div>
<div class="img-showcompliant" align="center">
<div align="right"><span>X</span></div>
<div class="icon">
</div>
<div class="description">
Lorem ipsum dolor amet sit.
</div>
<div class="illustrationcomplaints"></div>
<style>
.illustrationcomplaints {
background-image: url("image2.png");
background-repeat: no-repeat;
width:600px;
height: 100px;
}
</style>
<div align="center">
<div class="dismiss-btn">
</div>
</div>
</div>
</div>
<style>
.popup{
margin: auto;
text-align: center
}
.popup:hover {
position: relative;
top: -5px;
}
.popup img{
width: 390px;
height: 140px;
cursor: pointer
z-index: 75;
}
.showcompliant{
display: none;
z-index: 101;
align-self: center;
margin-left: 50%;
margin-right: 50%;
}
.showcompliant .img-showcompliant{
width:650px;
height:350px;
align-content: center;
background: #F2F2F2;
padding: 20px;
position: relative;
z-index: 100;
}
.img-showcompliant span{
position: absolute;
cursor: pointer;
}
.img-showcompliant img{
top: 0;
left: 0;
}
.description {
padding:25px;
color: #1a1a1a;
}
.overlay {
align-content: center;
}
</style>
<script>
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".showcompliant").fadeIn();
$(".img-showcompliant img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".showcompliant").fadeOut();
});
});
</script>
Good day. Try to help you...
As I understand you need to use flexbox and use "flex-direction: column;"
Please see this pretty simple html + css how to use it.
Let me know if it helps you?
html,body{
height:100%;
padding:0;
margin:0;
}
*{
box-sizing:border-box;
}
.box{
width:100px;
height:100px;
background-color:blue;
}
.container{
width:100%;
height:100%;
background-color:#ccc;
flex-direction:column;
display:flex;
justify-content:center;
align-items:center;
}
<div class="container">
<div class="box"></div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</div>
I can't sort out how to move the element, which is placed under .content-wrapper{ overflow:hidden; .content{position:absolute;} }, to the very top.
Consider a screenshot below:
An image element with man photo is placed under the .content element. But the part of his head on photo, which is highlighted with yellow (pointed with red arrow) is hidden due to the parent .content-wrapper has an overflow:hidden property. The main problem is that I can't change the hidden overflow to whatever else.
Is that actually real to solve such a problem without using a JavaScript?
==== Supplement 1 ====
To clarify the problem, I've made up a code snippet below:
.wrapper{
width:100%;
overflow:hidden;
position:initial;
padding:0 10px;
background-color:#EEEEEE;
box-sizing:border-box;
}
.content-wrapper{
position:relative;
overflow:hidden;
background-color:#DDDDDD;
margin:10px 0;
min-height:350px;
}
.content{
background-color:white;
position:absolute;
top:30px;
left:10px;
right:10px;
bottom:10px;
}
.content.grayed{
background-color:#CCCCCC;
}
.content.positioned{
top:50px;
left:180px;
bottom:-50px; //negative positioned parts supposed to be hidden
right:-50px; //as .content-wrapper has overflow:hidden;
}
.content.positioned img{
width:40%;
height:auto;
margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper
margin-left:10vw;
min-width:250px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Is there really no any solution?
I would consider adding the image outside and adjust the position to obtain this. Change the translation to adjust the position:
.wrapper {
width: 100%;
overflow: hidden;
position: relative; /*change this*/
padding: 0 10px;
background-color: #EEEEEE;
box-sizing: border-box;
}
.content-wrapper {
position: relative;
overflow: hidden;
background-color: #DDDDDD;
margin: 10px 0;
min-height: 350px;
}
.content {
background-color: white;
position: absolute;
top: 30px;
left: 10px;
right: 10px;
bottom: 10px;
}
.content.grayed {
background-color: #CCCCCC;
}
.content.positioned {
top: 50px;
left: 180px;
bottom: 0;
right: 0;
padding: 20px calc(40% - 0.4*148px) 0 20px; /* the space of the image*/
}
.content.positioned img {
position: absolute;
opacity: 0; /*Hide this one*/
}
.hack {
/*Don't use any top/bottom here !!*/
left: 190px;
right: 10px;
position: absolute;
z-index: 1;
}
.hack img {
width: 40%;
position: absolute;
right: 0;
bottom: 0;
transform: translateY(70%);
max-width:300px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="hack">
<img src="//i.imgur.com/DsOdy1V.png">
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br> ...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Add a <div> like content-wrapper-inner and move the height, position from content-wrapper into it.
.wrapper{
width:100%;
overflow:hidden;
position:initial;
padding:0 10px;
background-color:#EEEEEE;
box-sizing:border-box;
}
.content-wrapper{
overflow:hidden;
background-color:#DDDDDD;
margin:10px 0;
}
.content{
background-color:white;
position:absolute;
top:30px;
left:10px;
right:10px;
bottom:10px;
}
.content-wrapper-inner {
min-height:350px;
position:relative;
background-color: red;
}
.content.grayed{
background-color:#CCCCCC;
}
.content.positioned{
top:50px;
left:180px;
bottom:-50px; //negative positioned parts supposed to be hidden
right:-50px; //as .content-wrapper has overflow:hidden;
}
.content.positioned img{
width:40%;
height:auto;
margin-top:-40vh; //but that is not supposed to be hidden out of .content-wrapper
margin-left:10vw;
min-width:250px;
}
<div class="wrapper">
.wrapper
<div class="content-wrapper">
.content-wrapper
<div class="content grayed" style="transform: rotate(-35deg); padding:20px;">
<strong>.content</strong> with cut off edges - that is supposed behaviour
</div>
</div>
<div class="content-wrapper">
.content-wrapper
<div class="content-wrapper-inner">
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
<div class="content positioned">
<strong>.content</strong>
<img src="//i.imgur.com/DsOdy1V.png">
<br>
...and a man above is with sliced head - that is UNsupposed behaviour
</div>
</div>
</div>
Try to make overflow:visibleof the outer div of the content.
You can't have content reach out of a parent with overflow: hidden and still find a way to show the head. The question is why you need overflow hidden on the parent.
Perhaps you could use a sibling element for the image container and limit overflow on the content container.
Something like:
HTML
<div class="parent">
<div class="child-content-wrapper">
Content goes here
</div>
<div class="child-image">
Image goes here
</div>
</div>
CSS:
.parent {
position: relative;
}
.child-content-wrapper {
overflow: hidden;
}
.child-image {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
}
That should work and you'll be able to get the cut off effect on the rotated content box and the whole head.
I need to align multiple DIVs horizontally and vertically inside my main DIV divBig. Each DIV should overlap one over the other but should be in the centre of the main DIV divBig.
This is my DIV structure:
<div id="divBig">
<div class="divBigInner">
<img class="innerSub1" src="image.png" />
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
This is what I tried so far. But Does not align correctly.
#divBig {
background-color: #ff6600;
text-align: center;
}
.divBigInner{
position:relative;
height: 100%;
}
.innerSub1{
position:absolute;
max-width:550px;
width:100%;
z-index: 1;
margin: auto;
pointer-events: none;
}
.innerSub2{
position:absolute;
z-index: 2;
top:10px;
display:inline;
}
.innerSub3{
position:relative;
max-width:550px;
width:100%;
z-index:0;
margin: auto;
pointer-events: none;
}
Thank you.
like this you are asking?
<div id="divBig">
<div class="divBigInner" align="center">
<div class="innerSub1"></div>
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
Css
<style>
#divBig {
background-color: #fff;
text-align: center;
}
.divBigInner{
height: 100%;
}
.innerSub1,.innerSub2,.innerSub3{
border:1px solid #f00;
padding:10px;
margin:10px;
width:100px;
}
</style>
Can you try this:
<div id="divBig">
<div class="divBigInner" align="center">
<div class="innerSub1"></div>
<div class="innerSub2"></div>
<div class="innerSub3"></div>
</div>
</div>
Css
<style>
#divBig {
background-color: #fff;
text-align: center;
}
.divBigInner{
height: 100%;
position:relative;
}
.innerSub1,.innerSub2,.innerSub3{
border:1px solid #f00;
padding:10px;
margin:10px;
width:100px;
height:100px;
position:absolute;
margin-left:-50px; /*formula to make div center horizontal (left 50% - width/2)*/
margin-top:-50px; /*formula to make div center vertical (top 50% - height/2)*/
}
</style>
I'm trying to extend a div to the width of a browser window and it's wrapped in a relative positioned div.
Here's the HTML markup:
<section class="slider-home">
<div class="overlay"> </div>
<div class="img-product">
<div class="strapbox-product">
<h1>
Farm & Estates
</h1>
</div>
<img src="/assets/img/products/farm-estates.jpg"></img>
</div>
</section>
Here's the code for the container:
.slider-home {
height: 360px;
overflow: hidden;
position: relative;
}
And the code for the division I wish to extend
.overlay {
position: absolute;
width: 100%;
height: 360px;
z-index: 2;
}
Or is it this CSS for this division I have to extend?
.img-product {
height: 360px;
overflow: hidden;
text-align: center;
position: relative;
}
The CSS code for an image (the cows) within the img-product division.
.img-product img {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
}
And finally a screenshot of the webpage. The cows and the banner I'd like to extend to the full width of the webpage.
Look into this, may be it might help you.
HTML:
<section class="slider-home">
<div class="overlay"> </div>
<div class="img-product">
<div class="strapbox-product">
<h1>
Farm & Estates
</h1>
</div>
<img src="http://2.bp.blogspot.com/-cr_BxrxmKrE/TfjZlcf8VBI/AAAAAAAAA5g/JPv6K6XhW0c/s1600/34066_457614643272_609613272_5962233_1924402_n.jpg"></img>
</div>
</section>
CSS:
.slider-home,.img-product,.strapbox-product{
width:100%;
position:relative;
}
.strapbox-product h1{
width:100%;
text-align:center;
position:absolute;
top:100px;
z-index:999999;
display:block;
}
.img-product img{
width:100%;
height:100%;
}
.overlay{
width:100%;
height:50px;
background:black;
opacity:0.4;
position:absolute;
top:100px;
z-index:999999;
}
Fiddle Demo
So I have this template design that is currently absolutely positioned, but I'm trying to make it centered in any widescreen browser. I've tried making the width auto on the left and right side in my container, but it is still aligned with the left side.
Css
.JosephSettin_png
{
position: absolute;
left:0px;
top:0px;
width:216px;
height:40px;
background: url("JosephSettin.png") no-repeat;
}
.home_png
{
position: absolute;
left:472px;
top:16px;
width:48px;
height:16px;
}
.discography_png
{
position: absolute;
left:528px;
top:16px;
width:80px;
height:24px;
}
.purchase_png
{
position: absolute;
left:608px;
top:16px;
width:88px;
height:24px;
}
.about_png
{
position: absolute;
left:696px;
top:16px;
width:48px;
height:24px;
}
.contact_png
{
position: absolute;
left:744px;
top:16px;
width:56px;
height:24px;
}
.main__pic_png
{
position: absolute;
left:0px;
top:56px;
width:264px;
height:264px;
background: url("main_pic.png") no-repeat;
}
.footer__lines_png
{
position: absolute;
left:0px;
top:512px;
width:800px;
height:24px;
background: url("footer_lines.png") no-repeat;
}
.info__heading_png
{
position: absolute;
left:32px;
top:360px;
width:216px;
height:32px;
background: url("info_heading.png") no-repeat;
}
.info__pic3_png
{
position: absolute;
left:265px;
top:360px;
width:159px;
height:112px;
background: url("info_pic3.png") no-repeat;
}
.info__pic2_png
{
position: absolute;
left:432px;
top:360px;
width:176px;
height:112px;
background: url("info_pic2.png") no-repeat;
}
.info__pic1_png
{
position: absolute;
left:616px;
top:360px;
width:177px;
height:112px;
background: url("info_pic1.png") no-repeat;
}
.info__pane_png
{
position: absolute;
left:0px;
top:345px;
width:800px;
height:144px;
background: url("info_pane.png") no-repeat;
}
body
{
text-align: center;
background-color:maroon;
}
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#a {
text-decoration: none;
color:white;
font-weight:bold;
}
.style1 {
font-weight: bold;
color: #FFFFFF;
}
html
<body>
<center>
<div id="wrapper">
<div class="JosephSettin_png"> </div>
<div class="home_png"> Home</div>
<div class="discography_png"> Discography</div>
<div class="purchase_png"><span class="style1">Store</span></div>
<div class="about_png">About</div>
<div class="contact_png"><span class="style1"></span>Contact</div>
<div class="ad_png"> </div>
<div class="main__pic_png"> </div>
<div class="welcome__header_png"> </div>
<div class="welcome__text_png"> </div>
<div class="footer__lines_png"> </div>
<div class="footer__text_png"> </div>
<div class="info__pane_png"></div>
<div class="info__heading_png"> </div>
<div class="info__text_png"> </div>
<div class="info__pic3_png"> </div>
<div class="info__pic2_png"> </div>
<div class="info__pic1_png"> </div>
<div class="info__pic3_png"> </div>
</div>
</center>
</body>
I know the container I create works if all my div classes aren't absolutely positioned. Do I have to change the position or did I make another error?
Add position: relative; to the .wrapper definition.
http://www.w3.org/TR/CSS2/visuren.html#choose-position
An absolutely positioned item must be inside of a relatively positioned item, or it will not display as you intended.
Your main problem is that your wrapper needs to be position:relative; and margin:0 auto; will center the wrapper. also you can get rid of you HTML element its not needed.
CSS:
#wrapper {
position:relative;
width: 800px;
margin:0 auto;
text-align: left;
}
Hope this helps.
I strongly suggest using a CSS framework like "Blueprint CSS". It'll save you a lot of time and helps not just with positioning of elements but comes with a lot of nice features like typography, css reset for multi-browser support, etc.