I am having two images. I want to insert 2nd image on top of 1st image. 1st image is larger than the 2nd image. So I want my 1st image fully cover the div tag and 2nd image should place in the center of the 1st image. I had tried many css code but didn't get success.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="A.aspx.cs" Inherits="A" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.fishes { position: relative; top: 0; left: 0; } .fish { position: absolute; top: 60px; left: 80px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="position: relative; left: 0; top: 0;">
<center> <img src="cropped-longheaderbog1.jpg" class="fishes"/>
<img src="bannerfans_17362179.png" class="fish"/> </center>
</div>
</form>
</body>
</html>
HERE IS THE OUTPUT OF THE CODE :
output
I want to place the upper image in the center. But don't know how to do?
There are multiple ways to do this. Here is the simplest in my opinion
https://jsfiddle.net/45gtzmho/
div {
width: 1280px;
}
img:first-of-type {
width: 800px;
}
img:last-of-type {
margin-left: -600px;
margin-top: 100px;
position: absolute;
z-index: 1;
}
Related
I have overlaid previous and next arrows on an image placeholder for a slideshow, but I cannot get the placeholder to resize in relation to the screen size. I thought the solution would be as simple as nesting the placeholder in another div and using CSS margins, percentages, etc., but this does not seem to work. My code is below, with CSS styles in the header for convenience, and it should look like the image (see link below), but the buttons have to be working and not just for show - hence the overlaid arrows. Any help would be appreciated.
Slideshow Placeholder
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Image Placeholder with Direction Arrows</title>
<style>
#placeholder-image-container {
position: relative:
top: 0;
left: 0;
}
#placeholder-image {
position: relative;
top: 0;
left: 0;
}
#left {
position: absolute;
left: 0px;
top: 300px;
}
#right {
position: absolute;
left: 884px;
top: 300px;
}
</style>
</head>
<body>
<div id="slideshow-placeholder-container">
<img src="placeholder-image.jpg" id="coutts" />
<img src="left-pointer.jpg" id="left" />
<img src="right-pointer.jpg" id="right" />
</div>
</body>
</html>
This is my CSS
.test {
background-image:url('images/smiley.gif');
background-repeat:repeat;
}
This is my HTML:
<div class="test" id="xyz">some code which should come background to image</div>
The code that I have written sets a background image.
But I want to put an image on top of the text, instead of behind it, so that it covers the text. (I also want it to automatically repeat to fill the element, which could be any size.)
How can I do that?
This should do the trick. the :before selector creates a fake div with the given content (here a space, because without the content attribute, and I think with an empty string content, the fake div isn't created), and which can be styled. So the fake div is created, and styled with a background-image, a given height and width, and a z-index of 1, while the real div has a z-index of zero and appears below.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
.test:before {
content: " ";
position: absolute;
width: 100px; height: 100px;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/a/a4/Smiley_transparent.png');
background-repeat:repeat;
z-index: 1;
}
.test {
z-index: 0;
}
</style>
</head>
<body>
<div class="test" id="xyz">some code which should come background to image</div>
</body>
</html>
Combining this with Paul D. Waite's answer avoids having an explicit span in the code.
I thought the :before had to be applied to .test :first-child:before, so it would be a child of the xyz div, instead of being a sibling, but it seems it is not necessary (though it escapes me why).
You can test the result live on jsfiddle.
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
.test {
position: relative;
}
.test:before {
content: " ";
position: absolute;
top: 0;
bottom: 0;
height: auto;
left: 0;
right: 0;
width: auto;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/a/a4/Smiley_transparent.png');
background-repeat:repeat;
}
</style>
</head>
<body>
Some text before.
<div class="test" id="xyz">some code which should come background to image</div>
Some text after.
</body>
</html>
Interesting task. I think this should do it, if you’re willing to put in an extra HTML element. (Alternatively, use .test:before instead of .test .foregroundImage, like in Georges’ answer).
HTML
<div class="test" id="xyz"><span class="foregroundImage"></span>some code which should come background to image</div>
CSS
.test {
position: relative;
}
.test .foregroundImage {
position: absolute;
top: 0;
bottom: 0;
height: auto;
left: 0;
right: 0;
width: auto;
background-image:url('images/smiley.gif');
background-repeat:repeat;
}
See http://jsfiddle.net/RUJYf/ for a working example.
CSS
<style type="text/css">
.test { position: relative; }
.test img, .test p { position: absolute; top: 0; }
.test img { z-index: 10; }
.test p { margin: 0; padding: 0; }
</style>
HTML
<div class="test">
<img src="images/smiley.gif" />
<p>some code which should come background to image</p>
</div>
I am trying to position an image to be at the top of the page and stretching to both sides of the page with a height of 51px. However, there is a gap between the image and the top of the page and both sides of the page. Please can you tell me what I am doing wrong?
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
#twitter {
background: url(http://maxk.me/test/img/twitterbg.png) repeat;
height: 51px;
width: 100%;
position: fixed;
}
HTML
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="background">
<img src="...." class="stretch" alt="" />
</div>
<div id="twitter">
</div>
</body>
</html>
You need to remove the default margin on body:
html, body {
margin: 0;
padding: 0
}
You should also add a valid doctype as the very first line:
<!DOCTYPE html>
Without this, your page will be very broken in Internet Explorer, and generally inconsistent between different browsers.
Example - http://appdist.me
What I'd like to do is have the keyboard SVG fixed to the bottom of the screen and take up half the screen height, with the Facebook logo always overlaying the 'Q' key, no matter how the window is resized.
I've been trying to do this for days. What am I doing wrong? Thanks.
Here's my HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
<title>CSS Layout Problem</title>
</head>
<body>
<div id="svg">
<embed src="keyboard-gray.svg" id="keyboard"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="fb.svg" id="facebook"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<embed src="frame.svg" id="frame"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"/>
</div>
</body>
Here is my CSS:
body{
background-color: #333;
}
#svg{
}
#facebook{
position: fixed;
width: 6%;
height: 6%;
}
#frame{
position: fixed;
width: 100%;
height: 47%;
top: 2%;
left: 0;
}
#keyboard{
position: fixed;
width: 100%;
height: 50%;
bottom: 2%;
left: 0;
}
If you want to merge the images and make the SVG interactive, then you can use <a> tags in your xml (instead of <g>). Check out this IBM link for some ideas on how to achieve different types of interactivity.
Good luck - it looks like you have a fun project to play with.
Position the #facebook absolutely too and set the z-index so that it shows above the keyboard.
#facebook{
position: absolute;
height: 12%;
bottom: Y%;
right: X%;
z-index: 99;
}
Change X and Y so that it's above the Q key.
how to vertical centering in gwt by using vertical panel.. or pls sugest me is there any way for doing vertical cetering
If you want to directly use the VerticalPanel from code, you need to use the setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE)
You can also use the UiBinder approach
<g:VerticalPanel verticalAlignment='ALIGN_MIDDLE' horizontalAlignment='ALIGN_CENTER' width="100%" height="500px">
<g:cell></g:cell>
</g:VerticalPanel>
Take a look to DevGuideUiPanels for examples and documentation
I can give you an example on how we did it with css (to implement a popup like behaviour).
If you google for it there are dozens of solutions on how to achieve vertical centering. This example worked for us, so no guarantee if it's of any help for you.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0 auto;
}
.popup {
border-color:#ff4f00;
border-style:solid;
border-width:5px;
background-color: #ffffff;
text-align: left;
}
#wrapper, #container {
height: 150px;
width: 550px;
}
#wrapper {
bottom: 50%;
right: 50%;
position:
absolute;
}
#container {
left: 50%;
position: relative;
top: 50%;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>vertical centering</title>
</head>
<body>
<div style="width: 965px; height: 515px;"></div>
<div id="wrapper">
<div class="popup" id="container">
some content
</div>
</div>
</body>
</html>
EDIT: check also this question out.