I'm trying to achieve an effect when one div with png img inside (this img has hole in it) is over another div with img inside that will appear in hole of image over it, but for now it still is over instead of being under img with "window". And I still want to keep div that has to be under img ("iphone-screen") inside div with image with window ("iphone") because of responsive issues (percentage width of inner div is related to width of outer div). How to achieve that? Here's link to my website (go to page "Kontakt"):
CLICK
And here's my HTML markup:
<div id="slide6" class="slide">
<h1 class="big">Kontakt</h1>
<h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2>
<h2 class="mail">
Napisz: <span class="thick">biuro#dentmedica.pl</span>
</h2>
<div id="iphone">
<img src="img/iphone.png" alt="" />
<div id="iphone-screen">
<img src="img/iphone-screen.png" alt="" />
</div>
</div>
</div>
And CSS:
#slide6 #iphone{
position:absolute;
bottom:0;
right:0;
width:40%;
z-index:600;
}
#slide6 #iphone > img{
width:100%;
height:auto;
z-index:600;
}
#slide6 #iphone #iphone-screen{
position:absolute;
width:44.1%;
overflow:hidden;
bottom:24%;
left:15%;
z-index:100;
}
#slide6 #iphone #iphone-screen > img{
width:100%;
height:auto;
z-index:100;
}
Thanks for any help!
I guess it's the issue with the div tag iphone-screen..remove it
Related
I was wondering if there was a way to make the div, upon resize, extend PAST the vertical screen size?
The div resizes (somewhat) but it will not resize beyond the screen.
My current way of resizing that div (the parchment-coloured box) is:
div.mainBack{
position:absolute;
display:inline-block;
top:50%;
right:5%;
transform:translate(0, -50%);
border-style:outset;
border-color:#B57F00;
border-width:5px;
background-color:#FCDD92; /* PARCHMENT - kind of*/
}
div.mainWrapper{
position:relative;
top:3%;
left:50%;
transform:translate(-50%,0%);
max-width:90%;
}
#imgWrapper{
position:relative;
padding-left:12%;
}
The body for the page I'm talking about is as follows:
<body>
<h1 id="pageHead">The Astantos Armoury</h1>
<p id="subhead">A Simple Introduction to Bladed Weaponry</p>
/* The images have a "href" because I have simple javascript that makes an
image gallery i.e. when you click the image you get a full size version */
<div id="gallery">
<div class="mainWrapper">
<p id="galleryHeading">Image Gallery</p>
</div>
</br>
<div class="mainWrapper" id="imgWrapper">
<img class="gallery"
src="images\sword_thumb.jpg"
href="images\sword.jpg"
data-caption="wallpaper-gallery.net/single/sword-wallpaper/sword-wallpaper-9.html"
alt="dao.jpg">
<img class="gallery"
src="images\dao_thumb.jpg"
href="images\dao.jpg"
data-caption="https://www.aliexpress.com/item/Top-quality-of-Ba-Gua-Dao-Wushu-BroadSwords-with-free-shipping/32439115049.html?spm=2114.40010208.4.111.gVLuZw"
alt="dao.jpg">
<img class="gallery"
src="images\guandao_thumb.jpg"
href="images\guandao.jpg"
data-caption="https://aliexpress.com/item/Damasucs-Steel-Kwan-Dao-Dadao-Guan-Gong-Dao-Master-Dao-Heavy-Duty/32612836207.html?spm=2114.40010208.4.22.j1tTli"
alt="guandao.jpg">
<img class="gallery"
src="images\jian_thumb.jpg"
href="images\jian.jpg"
data-caption="https://au.pinterest.com/pin/325385141814676112/"
alt="jian.jpg">
<img class="gallery"
src="images\spear_thumb.jpg"
href="images\spear.jpg"
data-caption="http://kung-fu-weapons.com/wp-content/uploads/2017/01/sp3-3.jpg"
alt="spear.jpg">
</div>
<div class="mainWrapper" id="homeButton"><p id="welcome">HOME</p></div>
</div>
I've attached images to clarify my point.
I have a section inside which there is an image of a fixed height and a div which has some text and a background color in it. I want to make the height of the div and the image same and the div with the background color to overlap the image so that only text and background color are seen and not the image but the height should be of the image.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section>
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
<div style="background-color:blue">
<h2>ABCD</h2>
</div>
</section>
The image has a bootstrap class of img-responsive so that on resize it shrinks and also the div along with it. How can I do this?
position properties will work same as you want. section will take img's height and by setting height:100%; and position:absolute to div, it will take same height as img
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
section {
position: relative;
}
div {
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
}
</style>
<section>
<img src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" class="img-responsive">
<div style="background-color:blue">
<h2>ABCD</h2>
</div>
</section>
Please have a link of your solution
http://codepen.io/santoshkhalse/pen/pNWpYd
<section>
<img class="img-height" src = "https://openclipart.org/image/2400px/svg_to_png/28688/skotan-Thumbs-up-smiley.png" class = "img-responsive">
<div class="content-text">
<h2> Your text will render here </h2>
</div>
</section>
.img-height{
height:100px;
position:absolute;
}
.content-text{
width:100%;
height:100px;
background:green;
padding-left:120px;
}
img{ display:block; max-width:100%; height:auto;}
section{ position:relative}
.overlap-text{background:rgba(0,0,0, 0.5); color:#fff; position:absolute; left:0; top:0; height:100%; width:100%;}
<section>
<img src="https://s-media-cache-ak0.pinimg.com/originals/2a/94/e3/2a94e33f7afe6600fe9c97eda3a386b3.jpg" class="img-responsive"/>
<div class="overlap-text">
<h2>Lorem Ipsum dummy text</h2>
</div>
</section>
I am using a SVG image over that image I need to have a div over the image to set a button area over the image. I have placed a div content in my html file but my image file hides the div content. How to make it?
This my html code:
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>// this is my image over this I need to place the div content
This is my CSS file:
#nav {
line-height:30px;
background-color:#00FF66;
height:400px;
width:200px;
float:left;
padding:9px;
}
.fancybox{
position:relative;
height://height go image
width:// of image
}
.fancybox img{
position:absolute;
height://height go image
width:// of image
z-index:-1;
}
.myDiv{
position:absolute;
width:// width of dive
z-index:1;
left://margin from left
right://margin right
top:margin from top
bottom:margin from bottom
}
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>
<div class="myDiv"></div>
</div>
<div class="outerBoxContent">
<div class="fancybox" id="nav" href="#inline1"/>
<img src="billing.svg" id="my_image" class="gold1"/>// this is my image over this I need to place the div content
</div>
css
.outerBoxContent{position: relative;}
.outerBoxContent .fancybox{position: absolute;top: 0px;left: 0px;height: 100%;width: 100%:z-index:123}
This is how you can place the content over a div.
This is my code which is working fine but when i change my headline2text to "Sale Price $25 . This is a sample text. $244" then auto logo image changes its position. I do not want logo to change its position but it should remain on its place and should not be affected by the headline2Txt. How to fix this issue?
<div id="wrapper">
<div id="mainContainer">
<p class="copyrights" id="copyrights"></p>
<div>
<img id="Image_Car" src="http://i.share.pho.to/25a090ef_c.png" />
</div>
<div id="headlineText">
<p id="headline1Txt" >Sample bag1</p>
<p id="headline2Txt" >Sale Price $25 </p>
</div>
<div id="disclaimer" >
Details*
</div>
<div id="Image_logo">
<img id="Imglogo" src="http://i.share.pho.to/93578bd4_o.png" />
</div>
<div >
<button class="btn btn-primary" type="button" id="ctaBtn"><div id="fadeIn" > Learn More Now </div></button>
</div>
</div>
#Image_logo img
{
position:relative;
width:140px;
height:30px;
top:-3px;
left:390px;
}
</div>
I may not understand what you're asking, but I think the lack of a float is throwing you. Adding some css like this..
<style>
#Image_logo img {
width:140px;
height:30px;
}
#wrapper {
float:left;
}
</style>
...should work. It should be in a separate .css file of course.
You have position: relative; on #Image_logo img yet you try to position it the "absolute way". Try to change your CSS like this:
#Image_logo img {
position:absolute;
width:140px;
height:30px;
top:40px;
left:390px;
}
Try giving your #Image_logo img position: absolute instead of relative, then modify top, left etc. Then it should be always in the same place;
I have 1 div wrapping h2 and image wrapped in div with class img. h2 is float:left and img float:right.
img div has image inside. What I want is
if image is height and width 100px than its not vertical-align:middle. Help please.
Tested with vertical-align:middle
CSS
.ver-mainbox{float:left; width:898px; border:1px solid #c3c3c3; padding:0px; height:122px; margin-bottom:15px; background-color:#ffffff;}
.ver-mainbox h2{font-size:18px;color:#000; padding-left:10px; margin:0px; vertical-align:middle; width:500px; float:left; padding-top:42px;}
.ver-mainbox .img{float:right; padding:0px; width:186px; height:122px;}
HTML
<div class="mainbox-area">
<!-- Box start v1 -->
<div class="ver-mainbox">
<h2>Immunizations</h2>
<div class="img"><img src="../../Content/images/v1.gif" alt="" title="" /></div>
</div>
<!-- Box start v1 -->
</div>
vertical-align is only applicable to table cells. You'll need to rethink how you go about this or use the display:table-* properties.
<div style="display:table">
<h2 style="display:table-cell;vertical-align:middle">Immunizations</h2>
<div style="display:table-cell;vertical-align:middle">
<img src="../../Content/images/v1.gif" alt="" title="" />
</div>
</div>