I have set the following style settings to create an overlay effect. However, I am not really getting the desired overlay effect, have I done anything wrong. Could anyone please help.
Code:
<head>
<style>
//Set Overlay Image for Roller and Scroll
#roller{
position:relative;
z-index:3;height:70px;width: 100%;
}
#scroll{
position:absolute;
z-index:4;height:650px;width: 550px;
}
</style>
</head>
<body>
<img id="roller" src="Image/Roller.png">
<img id="scroll" align="center" src="Image/Scroll.png">
</body>
You're getting the wrong approach to this:
You shall firstly make a wrapper element that literally wraps first image, then the second image within will be positioned to this wrapper and automatically to first image, have a look below:
<div class="img-wrapper">
<img src="http://www.bajiroo.com/wp-content/uploads/2013/01/Funny-Baby-kids-child-images-fun-bajiroo-photos-3.jpg" alt="">
<img src="http://www.avsworldgroup.com/wp-content/uploads/2014/12/finger.png" alt="">
</div>
.img-wrapper {
overflow:hidden;
position:relative;
display:inline-block;
}
.img-wrapper img {
width:400px;
height:auto;
}
.img-wrapper img + img {
width:100px;
height:auto;
position:absolute;
left:40%;
bottom:0;
}
http://jsfiddle.net/3m7dad1o/
And besides: #roller is not a parent of #scroll which can't be positioned relatively to it.
Its easier to use a container around the elements you want to position.
So there is a container that has position: relative;
Inside is the image roller, and the other one which will be placed on top with the styles:
<style>
.container {
position:relative;
}
#scroll{
position:absolute; top: 0; right: 0; bottom: 0; left: 0;
}
</style>
<div class="container">
<img id="roller" src="Image/Roller.png">
<img id="scroll" align="center" src="Image/Scroll.png">
</div>
If you want these images to be Background Images, you could use multiple background images aswell:
background-image: url(front.png), url(back.png);
Related
I created app with below code in html file
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg>
<div class="header-social">
<img style="width:18%; margin-right:3vw src="assets/img/love-btn.png">
<img style="width:40%; src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw src="assets/img/chat-btn.png">
<div>
<div class="profile>
<img src="assets/img/profile-pic.png">
</div>
<div>
</ion-content>
and css is as below
.header-parent{
position: relative;
text-align: center;
}
.header-social{
position: absolute;
bottom: 0px;
text-align: center;
margin-top: -5.5vh;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
This shows the page as
My Question is red heart button, blue friend button and green chat button should display below the background image as per the css…but why are they displaying above image? bg2.jpg image is inside the div and all those 3 buttons are given position absolute and bottom:0 so they should display below image as div containing image should end at image.
What is wrong in my understanding? Please clarify…I have spent hours to understand this but still no luck why is it behaving like this?
First you should write your html code properly there is lots of syntax error in ur html code.
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg">
<div class="header-social">
<img style="width:18%; margin-right:3vw" src="assets/img/love-btn.png">
<img style="width:40%;" src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw" src="assets/img/chat-btn.png">
<div>
<div class="profile">
<img src="assets/img/profile-pic.png">
</div>
</ion-content>
And try this css
.header-parent{
text-align: center;
}
.header-social{
position:fixed;
width:100%;
bottom: 0px;
text-align: center;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
Negative margin of -5.5vh is causing the .header-social to move up and overlap on the profile pic. Here's how your CSS should be to get the desired output.
.header-parent{
background-image:('assets/img/bg2.jpg'); //bg image would be a better option rather than an img tag
position:relative; //for positioning profile div relatively
}
.header-social{
position:absolute;
bottom:0;
}
.profile{
width: 25%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//this will position the profile pic centered both horizontally & vertically.
}
I am having an issue with my divs moving when the page is resized. If you look at the plunker you will see a Header with boxes below. If you resize the workspace by dragging the scroll bar to the left you will see how the page should be. I tried wrapping all items in 1 div named wrapper and tried both relative and absolute positioning with a min-width. I also did the same for body. After inspecting the page with firebug looks like the html tag should have sizing or positioning. That didn't work either (see below). I would like to be able to minimize my screen to 50% and maximize to 250% and keep the same initial layout as if my screen is at 95% based on the wrapper. Any ideas?
Here's plnkr
<html>
body, html{margin:0px; padding:0px; width:100%; min-width: 900px; position:relative}
div.wrapper{ width:95%; min-width: 900px; padding-left: 6px; padding-top:5px; position: relative; }
<body>
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left"></div>
<div class="right"></div>
</div> <!--end wrapper -->
</body>
</html>
you could use percentage and fix min-wheight + set overflow to auto (looks like frameset .. not so nice actually)
Or you could try to relay on box-sizing and use vertical padding on percentage value(it will use parent's width as reference).
floatting pseudo can then, be used and will allow divs to grow taller instead showing a scrollbar.
. {
box-sizing:border-box;
}
.wrapper {
max-width:1300px;
margin:auto; /* ?*/
}
.wrapper #header ~ div {
border:double;
margin:0.4% 0.2%;
padding:5px;
}
#header, .right, .rightbottom {
overflow:hidden;
}
.left {
float:left;
width:30%;
}
.left:before {
content:'';
float:left;
padding-top:204.5%;
}
.right:before, .rightbottom:before {
content:'';
padding-top:30%;
float:left;
}
.wrapper #header ~ div.rightbottom {
border:solid 1px;
}
.rightbottom:before {
padding-top:60%;
}
<div class="wrapper" >
<div id="header">
<img align="left" style="padding-left:10px; padding-top:5px; width: 80px; height: 65px"><h1> Header</h1>
</div>
<div class="left">
</div>
<div class="right" >
<div class="gridStyle" data-ng-grid="gridOptions1">grid</div>
</div>
<div class="rightbottom">right bottom</div>
</div>
http://plnkr.co/edit/K1yOpBOfX3ukqHX7f2oa?p=preview
I'm not too sure of what kind of behavior you look for once there is real stuff in your pages.
If you want the header and the two divs to always have their own row, perhaps you could contain them each in divs that are set to width: 100%?
i've some problem with the z-index property:
This is the code:
<div id="sidebarCont">
<div id="avatarCont" class="mask">
<img id="" class="" src="img.jpg" alt=""/>
</div>
and the css:
#avatarCont{
overflow:hidden;
height:160px;
width:160px;
margin:0px auto;
background:url('../img/mask.png') no-repeat;
position:relative;
z-index:70;
}
#avatarCont img{
position:absolute;
top:0px;
left:0px;
z-index:50;
}
i whant to have a mask on the image, someone have ideas to solve the problem?
You need to have the mask on top of the image. Make the image the background of the outer container and the mask a background on an inner container. The browser will render the outer container first (the image) and then it will render the inner container (the mask) on top. If you are trying to do alpha transparency, then the web cannot do that for you.
Structure:
<div class="image">
<div class="mask"/>
</div>
CSS:
.image, .mask {
height:160px;
width:160px;
}
.image {
margin:0px auto;
position:relative;
z-index:70;
}
.mask {
background:url('img.jpg') no-repeat;
}
You can use the :after pseudo element, in this way you have a mask after the container: http://jsfiddle.net/7Fx7W/2/
In my HTML5 document I want to display an image on the far left and right of the page, and then centered inbetween them have my text. I can't for the life of me get the syntax correct. I've been looking at tons of answers for this and but I'm missing something.
My right side image is placed on the next "line" and so the text isn't centered properly.
In my index.html I put this:
<header>
<img class="logo floatLeft" alt="Logo" />
<h1 class="logoHeader">Text Here</h1>
<img class="logo floatRight" alt="Logo" />
</header>
and for my CSS I have this:
.logo {
width: 150px;
height: 120px;
content: url(logo.jpg);
}
.logoHeader {
height: 120px;
vertical-align: middle;
text-align: center;
}
.floatLeft { float: left; }
.floatRight { float: right; }
You need to put both images before ´h1´ element
<header>
<img class="logo floatLeft" alt="Logo" />
<img class="logo floatRight" alt="Logo" />
<h1 class="logoHeader">Text Here</h1>
</header>
It works, here is jsFiddle
EXPLANATION:
If you put div (or h1 or any block element) between two floating elements, its the same as you did clear:both between them, so they will never appear in the same horizontal level.
Also, off-topic here, but if you are using alt="" attribute, due to accessibility issues, if you don't have anything reasonable or descriptive to write, better off leave it empty (but still to keep the attribute) so like this alt="" is fine! The screen reader of a blind person will then skip this image because it is irrelevant for him, instead of bothering him reading "logo graphics"..who cares?. If you don't put alt attribute at all, then it will read image name, so alt="" is great if nothing more descriptive is needed.
Could your header have the 2 logos as background images, leaving the h1 to be the only semantic element in the header?
<header>
<h1>Headline</h1>
</header>
header {
background: url(logo1.png) left top no-repeat,
url(logo2.png) right top no-repeat;
}
h1{
text-align:center
}
See fiddle
In h1 selector at margin-top and margin-bottom
you just need to put 0
header{
border:1px solid black;
}
img, h1{
float:left;
height:100px;
text-align:center;
}
.logo1 {
content: url(logo.jpg);
width: 25%;
}
.logo2 {
content: url(logo.jpg);
width: 25%;
}
h1{
width:50%;
margin-top:0;
}
}
You float the images left & right, and put your text between the two image, like this.
<div class="container">
<div class="left-image">
</div>
This text is centered
<div class="right-image">
</div>
</div>
Jsfiddle
header{
border:1px solid black;
}
img, h1{
float:left;
height:100px;
text-align:center;
}
.logo1 {
content: url(logo.jpg);
width: 25%;
}
.logo2 {
content: url(logo.jpg);
width: 25%;
}
h1{
width:50%;
}
}
UPDATED
This has got to be simple but I can't see my mistake.
I have a div with an image inside it. The div has the style display:none. The div disappears, but the image stays put. Here's the plunk:
http://plnkr.co/edit/R3i7GZKOiiSvEj3vEuIE?p=preview
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#loading {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: white;
opacity:0.2;
filter:alpha(opacity=20); /* For IE8 and earlier */
overflow: hidden;
}
.centered {
position:absolute;
top: 50%;
left: 50%;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id="loading hide">
<img class="centered" src="http://www.woldsvets.co.uk/runnerapeman.gif" width="60px" border="0"/>
</div>
</body>
</html>
Why doesn't the image also get hidden when inside an hidden element?
Thanks!
You have the wrong HTML. It should be:
<div id="loading" class="hide">
In your CSS, you have rules for #loading and .hide. Your HTML, <div id="loading hide">, has an ID that's invalid because of the space. You probably meant to have the HTML I suggest above. plinkr example
Your .hide class should be either a class in the markup, or an ID in your css.
You have two ids. Either use classes or a single id