I am using a jQuery content rotator and I want to place a
PNG image on top of a image and on top of that text.
This is how my rotator looks like in HTML:
<div id="testimonials">
<div class="slides">
<div class = "testimonialContainer">
<div class ="leesmeer"> <img src ="http://site/afbeeldingen/test.jpg" ><div class="caption">LORUM IPSUM DOLOR SIT AMET </div></div>
</div>
<div class = "testimonialContainer">
<p class = "testimonial"> 2 </p>
<div class ="leesmeer"> <img src ="http://site/afbeeldingen/test.jpg" ></div>
</div>
</div>
</div>
Here is the CSS:
.testimonialContainer {height: 123px}
#testimonials{
width: 210px;
height: 125px;
}
.slides div{
width: 210px;
xheight: 25px;
xpadding: 5px;
.slides div.caption{
background-image: url(../images/h_contentrotator_zwart.png);
/*background-color:#000000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;*/
color: #fff;
width: 210px;
height: 41px;
position: relative;
top: -24px;
padding: 2px 20px 2px 10px;
zbehavior: url("iepngfix.htc")
}
The problem is that the PNG image doesn't appear and also the text doesn't appear.
Can someone help me out?
You need to add a dot (.) at last selector:
.slides div.caption{
Right now it's not there, but should be.
If the problem is not solved after adding a dot
then be more specific. Change
.slides div.caption
to this:
#testimonials a div.caption
And remove Z from behaviour.
And even if it is not solved then give me a link of jQuery script homepage.
Make sure that you have the right path to the background image. If the style is in the <head> of the HTML page, then the path will be relative to the HTML page. If the style is within an external stylesheet, then the path will be relative to the file location of the stylesheet.
You also might want to get it working without the Internet Explorer 6 PNG fixes first, and then add the fixes back in after you know the rest of the code is correct.
Related
I'm a new-bee and I am trying to build a web-page which has a background image throughout the application.
Problem is that when I move further in the application after login page and all, there is a page called family details which has a scroll-able content but due to the background image the scroll bar does not appear.
I've tried using image tag instead of using background image but then the content does not appear over the image, it appears below the image.
App.component.html
<div class="background-image">
<router-outlet></router-outlet>
</div>
styles.css
.background-image {
background-image: url('assets/icf.jpg');
background-position: center top;
background-size: 100% auto;
}
With image tag
App.component.html
<img src="assets/icf.jpg" alt="/">
<router-outlet></router-outlet>
You could use your image tag method, and assign a lower z-index to the img tag, than the rest of the content
<img src="assets/icf.jpg" alt="/" style="z-index: 0;">
<div class ="all-your-other-stuff" style="z-index: 1;"></>
.img{
background-image: url("https://dummyimage.com/200x200");
z-index: 0;
height: 200px;
width: 200px;
}
.content{
z-index: 1;
}
<div class="img">
<div class="content">TEXT ABOVE IMAGE</div>
body {
background-image: url('https://dummyimage.com/200x200');
height: 100%;
width: 100%;
}
<html>
<body>
<p>Test data</p>
</body>
</html>
Try adding image on Body tag using background-image and use repeat-x, repeat-y property from css.
Then the image will be at the background always.
Add the image to the index.html, and make sure that the div which houses your angular code has a higher z-index; relevant index.html below:
<div class='bkgClass'>
<div class='insideClass'>
<my-app>loading</my-app>
</div>
</div>
<style>
.bkgClass {
height: 100vh;
width: 100vw;
background: url("https://beta.akberiqbal.com/JumboMobT.JPG");
}
.insideClass {
z-index: 1;
}
</style>
No change to your app.component, or any other components;
you can check a working stackblitz here
My code is:
HTML:
<section>
<div id="banner">
<div class="container">
<p class="para">hello world</p>
</div>
<div class="container banner-bottom">
<div class="card card-primary text-center z-depth-2 contact-main-text">
<div class="card-block">
<p class="white-text">Please fill out the form below and ESC
staff will be in contact with you shortly.</p>
</div>
</div>
</div>
</div>
</section>
CSS:
.para{
color:white;
background: red;
padding:70px;
text-align:center;}
.white-text{
background:green;
padding:20px;}
Output is: Bootply
And i want:
Could anyone help me with that?
You can set negative top margin to overlay the second div, see the live example:
<div class="container banner-bottom" style="margin-top:-5%;padding:2%">
http://www.bootply.com/MorC45NB4V
PS: I have used inline css just to show, avoid inline css.
My solution uses jQuery and some calculations. My calculation works even if you move the elements around the document. I also used CSS for the margins you wanted.
jQuery
//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});
CSS
p.white-text{
margin-left:5%;
margin-right:5%;
}
Output
bootply
1) In case you want your lower banner to have a full width:
You could add position: relative; to the lower banner and position it adding a bottom value and use margin to create the same visual effect asked in the question.
.banner-bottom {
position: relative;
bottom: 45px;
margin: 0 40px;
}
2) In case you don't need to have a banner with full width and just center it, then no need to use margins. Remember to set one parent as position: relative;:
#banner { position:relative;}
.banner-bottom {
position: absolute;
top:75%;
right:0;
bottom:auto;
left:0;
}
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
Here's my solution for this.
Basically just make the position of the card block "relative", position the "top" position accordingly, then set the margin to "auto" to center it.
.card-block {
position: relative;
top: -50px;
margin: auto;
width: 80%;
}
A bit of position could help you, here's a rough version that will hopefully get you thinking what you need to do:
#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }
Heres a forked bootply: http://www.bootply.com/Imuh4wUj50
I am using this code http://cssdeck.com/labs/pa0yqlki that displays a canvas covering the size of the browser's window.
I am able to display content on top of the canvas (by using absolute positioning and z-index: -1)
What I am not able to do is add content AFTER the canvas.
Once the canvas ends, and so does the window, I want to have an <h1> lets say. So a scroll bar should appear when the page is loaded I should be able to scroll a bit more so that I see the <h1>.
Any ideas?
Okay, thanks to markE's reply I was able to achieve what I wanted.
[...] <canvas> </canvas>
<h1 id="myText"> Text </h1> [...]
this is the part of my HTML. The "myText" will be displayed under the canvas based on the size of the window.
To achieve that I added the following code in the CSS.
#myText
{
padding-top: 100vh;
}
You can achieve this with playing with CSS positions;
Try something like this:
<div>
<canvas width="300" height="200" class="custom-canvas" />
<div class="text">
<div class="main">20 %</div>
<div class="head">Completed</div>
</div>
</div>
SCSS:
.custom-canvas{
position: relative;
clear: both;
width: 450px;
height: 200px;
}
.custom-canvas {
.text {
bottom: 13px;
position: absolute;
left: 6px;
right: 0;
text-align: center;
}
.head {
margin-top: 14px;
}
}
Play with left,right,top and bottom to achieve the exact position.
I'm using the cool Felxslider to display a slideshow on a sharepoint installation.
it works quite well, but i still have two questions :
1- How to display the caption (you know, the little transparent background with title/description of the picture) not on the bottom of the image, but on the right side?
And not hover the picture, if possible.
2- I have N images to whos, but the slider always shows N+N images, the first extra ones are clones of the images, but the last is always just blank.
For example, i have 3 pictures to show, but the slider generates 6 slides : Number 4 and number 5 are clones of number 1 and number2, and number 6 is totally blank.
It displays such extra pictures no matter how many pictures I have (if i have 2 pictures to display, it will display 4).
Do you have any idea on how to get rid off all these clones?
Thanks a lot to answer, and have a nice day!
in order to have the caption appear on the right side I added some css rules and a specific HTML caption format.
Here's a jfiddle of the right caption display: http://jsfiddle.net/tyuth1sr/23/
Use the following css on your website's custom stylesheet, then use the HTML format for the captions:
CSS
/*
* flexslider slide styling
*/
.slides {
overflow: hidden !important;
}
.slides div .flex-caption {
overflow: scroll !important;
}
/*
* flexslider caption styling
*/
.flex-caption {
position: absolute;
text-align: left;
font-size: 11px;
background:rgba(255, 255, 255, 0.7);
z-index: 100;
padding: 20px 10px 35px 30px;
width: 287px;
padding-top: 100%;
bottom: 0px;
color: #000;
}
.right {
right: 0;
margin-bottom: 0px;
}
.show-caption {
position: absolute;
top: 48%;
right: 240px;
z-index: 99;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
pointer-events: none;
}
And format your flexslider captions like so:
HTML
<ul class="slides" id="slideshow" ondragstart="return false;">
<li>
<img src="https://iluvmafuckinglife.files.wordpress.com/2012/04/256989-a-sphere-sculpture-made-from-easter-eggs-is-on-display-on-the-day-of-i.jpg" />
<div class="flex-caption right">
<div class="caption-content">
<p><span class="hcaption">Caption 1</span></p>
<br /><br />
<p class="hcap">Caption 1 text goes here.</p>
</div>
</div>
</li>
<li>
<img src="http://s3-ec.buzzfed.com/static/enhanced/web05/2012/2/8/11/enhanced-buzz-wide-29760-1328717305-32.jpg" />
<div class="flex-caption right">
<div class="caption-content">
<p><span class="hcaption">Caption 2</span></p>
<br /><br />
<p class="hcap">Caption 2 text goes here.</p>
</div>
</div>
</li>
Please note that you can make the caption appear on over any side of the flexslider slide by removing the .right css position specification of "right: 0px" and adding "left: 0px", "top: 0px;" or "bottom: 0px;" depending on where you want it to appear. You would also have to tweak the text formatting/background padding CSS to make it appear properly in one of those other positions.
So, I have the same image that I need to overlap each other. The first one as you can see has an z-index:1 and the others of 0. But, as the images keep repeating I have to keep creating a new style to make the next one 115px to the right. Is there a css pseudo method to automate this or do I have to revert to using jquery or js to bump it to the right?
<style>
img.overlap{z-index:1;position:absolute;left:670px;}
img.underlap{z-index:0;position:absolute; left:785px;}
</style>
<div class="span12">
<img src="img/blue_btn.png" alt="Home" class="overlap"/>
<img src="img/blue_btn.png" alt="About" class="underlap"/>
<img src="img/blue_btn.png" alt="Services" class="underlap"/>
<img src="img/blue_btn.png" alt="Portfolio" class="underlap"/>
<img src="img/blue_btn.png" alt="Blog" class="underlap"/>
<img src="img/blue_btn.png" alt="Contact" class="underlap"/>
</div>
UPDATE: I was cropping the image as I read this post as I knew that it would be hard to visualize. Here is the nav area. I have cropped the first one and I will repeat them and later change the alpha with jquery.
http://weslice.com/images/nav_complete.jpg
You should try using float and margins instead of absolute positioning.
http://www.w3schools.com/css/css_float.asp
How about using display : inline-block to get your elements to sit next to each-other, then use margin : -*px to overlap the elements:
.span12 a {
display : inline-block;
margin : 0 0 0 -20px;/*this margin is responsible for the overlap between elements*/
/*IE 6&7 Compatibility*/
*display : inline;/*only read by IE7*/
zoom : 1;/*give the element the `hasLayout` property since you can't give it to an element directly*/
_height : 50px;/*only read by IE6, but is necessary to specify a height for IE6*/
}
Here is a demo: http://jsfiddle.net/WJKS5/2/
Update
To stack the element from left to right instead of right to left:
.span12 a {
float : right;
margin : 0 -10px 0 0;/*this margin is responsible for the overlap between elements*/
}
Here is a demo: http://jsfiddle.net/WJKS5/4/
I think this fiddle http://jsfiddle.net/2vUzp/9/ achieves the effect without the need for classes (though it does reverse the order of the menu in the html, but not in what is displayed to the average user). After looking at your sample image, you may not want the "hover" effect in my example, but that can be removed.
CSS
.span12 {
float: left;
}
.span12 a {
position: relative;
margin-right: -30px;
display: block;
float: right;
}
.span12 a:first-child {
margin-right: 0;
}
.span12 a:hover {
z-index: 1;
}
.span12 img { /*for demo*/
display: block;
width: 100px;
height: 20px;
border: 1px solid blue;
background-color: cyan;
}
HTML
<div class="span12">
<img src="img/blue_btn.png" alt="Contact"/>
<img src="img/blue_btn.png" alt="Blog"/>
<img src="img/blue_btn.png" alt="Portfolio"/>
<img src="img/blue_btn.png" alt="Services"/>
<img src="img/blue_btn.png" alt="About" />
<img src="img/blue_btn.png" alt="Home" />
</div>
Since you are trying to accomplish an overlap, floating's probably not going to work. I would recommend you use CSS sibling selectors and write rules specifically for 'img', 'img + img', 'img + img + img', etc. that would increase incrementally. I think that should be the only pure CSS way around it. Doing this with JavaScript would be a breeze.