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.
Related
I'm probably missing something obvious, but is it possible to have on-image navigation, but still allow the visitor to right-click-save the image in Firefox? I'm using a very simple, absolutely positioned overlay to handle the previous/next duties, but that makes it impossible to right-click and save the image in Firefox. Firefox offers to save the link, but not the image itself. In Chrome and Edge, it's not a problem.
Stripped down, the code is very simple:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<style>
#slide {
position: relative;
width: 1344px;
height: 900px;
}
#prev {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 40%;
}
#next {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 60%;
}
</style>
</head>
<body>
<div id='slide'>
<a href='a01.html' id='prev' title='Previous image'></a>
<a href='a03.html' id='next' title='Next image'></a>
<img src='a02.jpg' width='1344' height='900' alt=''>
</div>
</body>
</html>
Changing browser settings, or using an add-on, is not an option - this is directed at site visitors, whose settings I can't change.
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;
}
I want to create a header bar at the top of the web-page, give it a background color and then add a logo on it.
So the problem is:
The width of the bar should be the width of the page. Its height
should be the size of the logo (plus some padding added around the
logo image).
Or is there a way to make the bar as big as its
content plus the padding added to the content?
I actually searched SO and found this, I tried to reproduce it into my code but it does not seem to help me.
I have also seen this and this.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div {
position: absolute;
height: auto; //**** When changed to a percent value, it displays
width: 100%;
top: 0px;
left: 0px;
float: left;
background: #000029;
}
.logo {
position: fixed;
top: 5px;
left: 12px;
bottom: 4px;
}
</style>
</head>
<body>
<div class="div">
<img src="http://********Header.svg" alt="Logo" class="logo" >
</div>
</body>
</html>
It just does not display the background color at all, and when I change the value of height to some value in percent, it displays.
So what I want is that the height of the bar should fit to its content i.e. the logo image.
EDIT:-
Remove virtually all of your CSS rules and just use something as basic as:
.div {
background: #000029;
}
.logo {
vertical-align:top;
}
jsFiddle example
change you css code like below:
.div {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding:5px;
}
.logo {
}
see the demo here ---->http://jsfiddle.net/4A7Q9/1/
The style can be something along these lines:
<style>
.div {
width: 100%;
background: #000029;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}
.logo {
}
</style>
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.
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.