I built a ad format for my website and it works well but I am unable to click the actual ad element. It seems the layering / positioning I have used to achieve the affect, does not allow my to click the elements that need to be clicked i.e. the actual ad.
Below is the main html that positions the ad with some inline css
<div id="inter-outer" class="interscroller-wrapper" style="height: 667px; right: 14.7031px; width: 375px;">
<div id="intscdiv" class="interscroller-bg-wrapper" style="height: 667px; right: 0px; clip: rect(0px 375px 677px 0px); width: 375px;">
<div id="nxtads" class="interscroller-bg" style="height: 667px; width: 375px; padding: 0px; overflow: hidden; text-align: center;">
<div style="color: rgb(0, 0, 0);font-weight: bold;margin: auto;padding: 0px;text-align: center;font-family: arial;width: 320px;/* display: none; */">ADVERTISEMENT</div>
<div id="smt-130304454" style="margin: 0px auto;width: 320px;height: 480px;/* position: absolute; *//* z-index: 1000000000; */">
<a href="http://google.com">
<img src="https://support.inmobi.com/ui/uploads/Interstitial-1.png" width="320" height="480"/>
</a>
</div>
<div style="color: rgb(0, 0, 0);font-weight: bold;margin: 0px;padding: 0px;text-align: center;font-family: arial;position: fixed;width: 375px;bottom: 20px;/* display: none; */">SCROLL TO CONTINUE</div>
</div>
</div>
</div>
Below is some external css that is included.
.interscroller-wrapper {
position: relative !important;
cursor: pointer !important;
background: #ffffff !important;
z-index:10000000 !important;
}
.interscroller-bg-wrapper {
position: absolute !important;
width: 100% !important;
left:0 !important;
}
.interscroller-bg {
position: fixed !important;
height: 100% !important;
top: 2% !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
border:0 !important;
}
Here is a js fiddle with demo https://jsfiddle.net/kw80z7cL/
I cant work it out.
Related
In my photographic portfolio, I display a series of images of different ratio in tracks that automatically fill the width of the display. That is working perfectly... after receiving some help.
My ultimate objective is to permanently display a little heart over the top-left corner of each image AND display a semitransparent strip over the bottom of each image containing the caption only on mouseover the image.
I have almost achieved that result but I can not figure out after hours of trying how to overlay the 2 elements as explained above... so for now trhey are together on top of the image... which is not optimal.
So I would appreciate some help to achieve that result if possible.
Here is part of the code in question and a sample can be found on my website : TwoOverlaysOnImage.
CSS code
.my-flex-item {
background-color: #1d1d1d;
border: 2px solid #1d1d1d;
height: 100px;
}
.img-holder {
position: relative;
display: inline-block;
}
.img-holder p {
position: absolute;
display: inline-block;
text-align: left !important;
font-size: 0.7em !important;
width: 100%;
}
.img-holder:hover > p {
background-color: rgba(60,60,60,0.7);
text-align: center !important;
}
.img-holder span {
margin-top:40px;
color: white !important;
left: 30px;
}
HTML code
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="img-holder">
<p>
<img src="heart0.png" style="margin-left:6px; margin-top:4px;"/>
<span class="thumbCaption">caption</span>
</p>
<a href="modal...">
<img class="my-flex-item" src="imagepath..." alt="caption..." />
</a>
</div>
</div>
Try this:
html:
<div style="width: 100%; display: flex; justify-content: center;">
<div id="img-cont" class="img-cont">
<img class="heart" src="path/to/heart/icon">
<div class = "hover">
<p>Sample Text</p>
</div>
</div>
</div>
CSS:
.img-cont{
position: relative;
width: 420px;
height: 300px;
cursor: pointer;
background-size: cover;
background-image: url("https://images.unsplash.com/photo-1588876315093-ce09afb34028?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80")
}
.img-cont .heart{
position: absolute;
color: white;
top: 15px;
left: 15px;
cursor: pointer;
}
.hover{
clip-path: url(#img-cont);
position: absolute;
height: 0;
width: 100%;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.img-cont:hover .hover{
height: 50%;
}
.hover p{
color: white;
}
I am trying the create a search page, where when i add text in search panel the images of those text will display. The issue I am facing is that the images are overlapping on the search div even though I have positioned it well.
I don't want to fix it using top values as I want the page to be responsive and the top values will be changing based on the width of the page. Is there a cleaner way to do it ?
<div class="jumbotron text-center">
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}">
</div>
css:
#body {
width: 100%;
}
#search {
position: absolute;
top: 174px;
left: 0px;
width: 100%;
height: 30%;
background-color: rgba(0, 0, 0, 0.7);
opacity: 10;
}
#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
}
.card {
position: absolute;
}
You can set the overflow on the card class to hidden(to hide the overlapping content) Or you can set it to auto( scroll bars appear if overlapping).
.card{
overflow: hidden;
}
Well you haven't positioned anything well there. Does everything really need the position property set to absolute? If so, try using JavaScript to get the search area's height (or set a fixed one) & apply it to the "top" property in the card.
.image_main_div{
position:relative;
}
.image_main_div .image_overlay_div{
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: rgba(0, 0, 0, 0.4);
z-index:1000;
position:absolute;
border:thin black solid;
}
.image_main_div .image_overlay_div .image_div{
}
img{
position: relative;
height: 175px;
}
img:before{
content: ' ';
display: block;
height: 175px;
width: auto;
background: url(https://d28hsb6vkzynsw.cloudfront.net/assets/images/No_Image.png);
background-repeat: no-repeat !important;
background-size: 100% 100%;
background-position: center center;
}
<div class="image_main_div">
<div class="image_overlay_div">
<p>Some text</p>
</div>
<a class="image_div">
<img alt="" class="img-full img-responsive" height="175px" width="437px"src="https://d28hsb6vkzynsw.cloudfront.net/assets/images/no_image_upload1235.png">
</a>
</div>
Hello,
I have a strange issue in Google Chrome.
What I do is , When there is no image in the server then the div gets default image from the server. I do that using before in img.
Now, there is no image in the div. still I get image icon and default image. and there is a border around the div.
It works fine in IE, Mozilla. but it looks like this in the Google Chrome.
How can I solve it?
That is the default behavior in Chrome. Instead, assign the fallback image in the onerror handler.
<img src="https://d28hsb6vkzynsw.cloudfront.net/assets/images/no_image_upload1235.png"
onerror="this.src='https://d28hsb6vkzynsw.cloudfront.net/assets/images/No_Image.png'">
It's come from direct server see remove it
https://d28hsb6vkzynsw.cloudfront.net/assets/images/no_image_upload1235.png
.image_main_div{
position:relative;
}
.image_main_div .image_overlay_div{
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: rgba(0, 0, 0, 0.4);
z-index:1000;
position:absolute;
border:0px;
}
.image_main_div .image_overlay_div .image_div{
}
img{
position: relative;
height: 175px;
}
img:before{
content: ' ';
display: block;
height: 175px;
width: auto;
background: url();
background-repeat: no-repeat !important;
background-size: 100% 100%;
background-position: center center;
background: url(https://d28hsb6vkzynsw.cloudfront.net/assets/images/No_Image.png);
}
<div class="image_main_div">
<div class="image_overlay_div">
<p>Some text</p>
</div>
<a class="image_div">
<img alt="" class="img-full img-responsive" height="175px" width="437px"src="">
</a>
</div>
Please look at the code below. If you look at the diagram of the body, each colour represents different content on the right. However, these links won't work in IE, I assume due to the CSS I have written.
Can anyone shed some light on how I can replicate this in IE?
HTML:
<div id="male">
<img src="male1.png" alt="male1 Compensation Calculator" title="male" width="130" height="300" class="alignleft size-full wp-image-117" /></p>
<div class="head"><span class="whole fakelink"></span></div>
<div class="neck"><span class="whole fakelink"></span></div>
<div class="arm1"><span class="whole fakelink"></span></div>
<div class="arm2"><span class="whole fakelink"></span></div>
<div class="torso"><span class="whole fakelink"></span></div>
<div class="legs"><span class="whole fakelink"></span></div>
</div>
CSS:
div.head {
position: absolute;
width: 70px;
margin-left: 31px;
height: 70px;
}
div.neck {
position: absolute;
height: 6px;
width: 18px;
margin: 70px 0px 0px 56px;
}
div.arm1 {
position: absolute;
height: 105px;
width: 30px;
margin: 77px 0px 0px 100px;
}
div.arm2 {
position: absolute;
height: 105px;
width: 30px;
margin: 77px 0px 0px 0px;
}
div.torso {
position: absolute;
height: 118px;
width: 70px;
margin: 77px 0px 0px 31px;
}
div.legs {
position: absolute;
height: 105px;
width: 69px;
margin: 195px 0px 0px 31px;
}
.whole {
width:100%;
height:100%;
display:block;
}
.fakelink {
color:white;
font-weight:bold;
}
.fakelink:hover {
cursor: pointer;
text-decoration:none;
}
I know of only two solutions to fix this issue, though they both ultimately come down to needing a background:
Option 1
Set a background-color on .fakelink that is not transparent. Whilst clearly in your case this wouldn't be very helpful it will illustrate the need for a background.
If you were only needing to support IE9, I would suggest using rgba with a low alpha opacity:
.fakelink{ background-colour: rgba(255,255,255,0.01) }
Option 2
Use a small transparent .png or .gif and tile it as the background-image for .fakelink
I have a CSS problem that I'm not able to figure out. I'm not even sure it is possible. What I want is the following:
I have three buttons/tabs like this http://sv.tinypic.com/r/21cf85t/6 and when you click one tab a different div should show for each tab like this http://sv.tinypic.com/r/21l5y85/6 or http://sv.tinypic.com/r/2dbrv5u/6.
I know how to show/hide the divs with jQuery but the problem is that the divs will increase in height http://sv.tinypic.com/r/k2xxfb/6 and then they will push the other tabs and divs down. Is there a way to create what I am trying to do?
I'm not a guru in CSS so if you have an example to look at or can post code here I would be very very thankful!
This is the HTML I'm using for my tabs:
<div class="MainContent">Content</div>
<div class="TabsHolder">
<div id="Tab1">
<div style="width:200px">
Content Tab 1
</div>
</div>
<a class="Button1" href="#Tab1"></a>
<div class="clearer"></div>
<div id="Tab2">
<div style="width:200px">
Content Tab 2
</div>
</div>
<a class="Button2" href="#Tab2"></a>
</div>
CSS:
.MainContent {
float: left;
}
.TabsHolder
{
float: left;
}
.Button1
{
float: left;
margin: 100px 0px 20px 0px;
background: url(images/Button1.png) no-repeat 0 0;
height: 79px;
width: 27px;
}
#Tab1
{
width: 200px;
margin: 80px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
.Button2
{
float: left;
margin: 0px 0px 20px 0px;
background: url(images/Button2.png) no-repeat 0 0;
height: 97px;
width: 27px;
}
#Tab2
{
width: 200px;
margin: 0px 0px 20px 0px;
border: solid 1px #ACCD45;
position: relative;
float: left;
overflow: hidden;
padding: 20px;
}
div.clearer
{
clear: both;
margin: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding: 0px;
line-height: 0px;
height: 0px;
width: 0px;
overflow: hidden;
}
Here is what I put together using pure CSS - Tested in Firefox, IE8 and Chrome (not sure about others). Try out a demo here.
Note: I wanted to make a comment about one thing in your original HTML - you can't add a background image to a link <a> tag.
CSS
.MainContent {
float: left;
width: 400px;
height: 400px;
background: #444;
}
.buttons {
float: left;
margin: 10px 0 10px 0;
width: 27px;
clear: both;
}
.Button1 {
background: #555 url(images/Button1.png) no-repeat 0 0;
height: 79px;
}
.Button2 {
background: #555 url(images/Button2.png) no-repeat 0 0;
height: 97px;
}
.Button3 {
background: #555 url(images/Button3.png) no-repeat 0 0;
height: 127px;
}
.tabsHolder {
float: left;
position: relative;
}
.tabs {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
border: solid 1px #ACCD45;
background: #444;
overflow: hidden;
padding: 20px;
display: none;
position: absolute;
left: 0;
}
#tab1 { top: 0; }
#tab2 { top: 98px; }
#tab3 { top: 215px; }
a:hover .tabs {display: block;}
HTML
<div class="MainContent">Content</div>
<div class="tabsHolder">
<a href="#tab1"><div class="buttons Button1">1</div>
<div id="tab1" class="tabs">
Content tab 1
</div>
</a>
<a href="#tab2"><div class="buttons Button2">2</div>
<div id="tab2" class="tabs">
Content tab 2
</div>
</a>
<a href="#tab3"><div class="buttons Button3">3</div>
<div id="tab3" class="tabs">
Content tab 3
</div>
</a>
</div>
</div>
You will need to define the pages (divs to hide/show) and tabs in two separate divs.
These will want to be floated next to each other, so you will have something like
<div class="pages">
<div class="page" id="tab1">....</div>
<div class="page" id="tab2">....</div>
</div>
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
</div>
You can then set a min-height on pages (height for IE6, put into a conditional stylesheet), set pages and tabs to both float left, both with fixed widths.
Finally when you attach your event to $('#tab a'), make sure you iterate over all the pages hiding the non-relevant ones.
Without JavaScript, you cannot hide one of your divs, you can only have an HTML page per tab (like this or this).
If you want something more dynamic, you should use JavaScript. The tabs system is a built-in component of jQuery, for instance. (Homepage, live demo).
Hope that'll help you.