I am currently using Wordpress to build a website and have used an image as the background of my home page but want to add text over the top which also links to another page on my site. Do I need to amend the coding or can this simply be done when editing the page on visual mode? If I need to amend the coding can someone please help??
This is the idea how the text should look over an image. You can easily manipulate the text using CSS.
HTML:
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>A Movie in the Park:<br />Kung Fu Panda</h2>
</div>
CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Final result:
Reference: http://css-tricks.com/text-blocks-over-image/
Related
I'm using Ionic 3 to make a website which will be part of another native app in a webview so I don't user cordova or any native plugins.
I have a form with an embedded Google Map View above the elements and here is my HTML :
<div style="height: 40%; width: 100%">
<div id="map_loader" *ngIf="showMapLoader">
<div class="sk-wave">
<div class="sk-rect sk-rect1"></div>
<div class="sk-rect sk-rect2"></div>
<div class="sk-rect sk-rect3"></div>
<div class="sk-rect sk-rect4"></div>
<div class="sk-rect sk-rect5"></div>
</div>
</div>
<div #mapCanvas style="width: 100%; height: 100%;"></div>
</div>
<form (ngSubmit)="submit()" padding>
<ion-list>
......
......
.....
</ion-list>
</form>
and here is my CSS :
#map_loader {
margin:auto;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 1000;
position: absolute;
}
.scroll-content {
top: 38%;
position: absolute;
margin-top: 32px;
}
Now once the user open the website on his phone and start filling the form the keyboard shifts the map out of the screen ( Up ) and it stays that way and a blank empty space shows bellow the form.
Am I doing it right? Is that happening because of my CSS? and what is the best way to make a div takes a specific percentage of the screen height? I tried ion-grid but it seems that it can't help me for this case.
it's bug in ionic, once you focus on any input the keyboard will show up and will add padding-bottom for the scroll-content class to lift the for above the keyboard and it doesn't remove the padding-bottom after you close the keyboard.
I tried to check if I have any JS event on the mobile keyboard but we don't so my work around is to set a fixed padding-bottom for the scroll-content class to prevent changing it on the runtime.
.scroll-content {
padding-bottom: 0 !important;
}
Change in the AndroidManifest.xml file did the trick for me. android:windowSoftInputMode="adjustPan"
Yes, You can avoid this issue by using Ionic grid.You need to set CSS as shown below.
your-page.scss
ion-grid {
min-height: 100%;
}
I am trying to modify the z-index of the http://tympanus.net/Development/ScatteredPolaroidsGallery/ . The demo I am refering to is in the third / final example shown.
When the polaroid is flipped I am unable to select the text in chrome or Safari, but I can in firefox.
Chrome and Firefox
I just need a way to be able to select the text in chrome/safari. This way I can then be able to add hyperlinks and call to action buttons that are currently hidden behind the z-index.
The div in question is 'photostack-back'
HTML
<section id="photostack-1" class="photostack photostack-start">
<div>
<!-- Polaroid with backside -->
<figure>
<a href="http://goo.gl/fhwlSP" class="photostack-img">
<img src="img/2.jpg" alt="img02"/>
</a>
<figcaption>
<h2 class="photostack-title">Happy Days</h2>
<!-- optional backside -->
<div class="photostack-back">
<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
</div>
</figcaption>
</figure>
</div>
</section
CSS
.photostack-back {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
font-family: "Give You Glory", cursive;
color: #a7a0a2;
padding: 50px 40px;
text-align: left;
font-size: 22px;
line-height: 1.25;
z-index: 1;
}
Here is the tutorial Scattered Polaroids Gallery
I figured out that this was not a z-index issue but a backface-visibility issue.
I used veinjs to inject the following code in photostack.js
vein.inject('figure', {'backface-visibility' : 'visible !important'});
and the css
figcaption {
backface-visibility: hidden;
}
<iframe src="http://osu.ppy.sh/u/516595" style= width:100%;height:100% frameborder="0">
</iframe>
<style type="text/css">
body {
background-color: #d8da3d
.iframe {position: relative;}
.iframe:<iframe> {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000;}
</style>
<div style="position:absolute;top:020px;left:000px;z-index:10;" >
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
<div style="position:absolute;top:020px;right:001px;z-index:10;">
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
That's my code all in one. What I want is that I can click through the "Nieve.gif" I don't know what is wrong and what I could or must do to make possible click trough the gif.
And can be possible to make all the site cover of snow gif or better with rain gif?
How Can I "erase" that White parts that appear? :(
The site it's not mine that's why I use iframe
Please people help me :( I don't speak english
Try This.Add pointer-events:none; style to your div. Tested on chrome.
<div style="position:absolute;top:020px;left:000px;z-index:10;pointer-events:none" >
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
<div style="position:absolute;top:020px;right:001px;z-index:10;pointer-events:none">
<img src="http://images.wikia.com/inciclopedia/images/3/32/Nieve.gif" >
</div>
Check out this answer to on this post:
https://stackoverflow.com/a/4839672/589909
It seems to do what I understand what you want to achieve using a pure cross browser CSS approach.
pointer-events:none;
I copy the anser from Jquery pass click through element
How could I show the thumbnail images align properly on the top left for each news feed?
this is the codes for each item's feed, I couldn't alter the format below because it's was rss feed from external site
<style>
img{
float: left;
width: 100px;
height: auto;
}
.feed-item-title{
clear:right;
}
</style>
<div class="feed-item">
<h3 class="feed-item-title">
Rihanna Hug During VMA Show
</h3>
<div class="feed-item-body">
Former couple share embrace on night when both won major awards.<br />By Hosten
<a href="">
<img type="photo" src="281x211.jpg" />
</a>
<br />
</div>
</div>
Thanks alot.
If you use floats you should clear them.
.feed-item-body:after{
content: '';
display:block;
clear:both;
}
Later Edit: Few extra changes added, here is the working example.
lets say we have
<div class="picture"><img class="picture_thumb" src="path" /> </div>
And i'd like to use CSS to add an image z-index higher to .picture (it's basically an magnifying glass Icon so I can see it on top of .picture_thumb)
Any chance?
Thanks a lot
PD: it would be like instead of a background, a Front-ground
-EDIT-
An image so you can understand better
There's no such thing as front-ground.
You'd have to do something like this:
<div class="picture">
<img src="images/picture.jpg" alt="Picture" />
<img class="magnifier" src="images/magnifier.jpg" alt="Maginfy" />
</div>
.picture {
position: relative;
width: 100px;
height: 100px;
}
.magnifier {
position: absolute;
bottom: 0px;
right: 0px;
z-index: 1000;
}
You could also do it with javascript if you didn't want to add the magnifier image to each picture div.