I have a div of an aeroplane inside parent div with overflow: hidden, so it looks as though the aeroplane div is flying from under an element on the page and dragging a banner with it.
See my diagram here:
The css code I have already is:
#plane{
width: 195px;
background-image: url(images/plane.png);
background-repeat: no-repeat;
height: 444px;
float: left;
position: relative;
top: 0px;
left: 0px;
}
#plane-holder {
height: 569px;
width: 960px;
overflow: hidden;
z-index: 2200;
display: inherit;
}
And the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Netball Plane</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="header"><div id="topbar"><img src="images/contact-us-bar.gif" width="960" height="45" /></div>
</div>
<div id="content"><div id="mainbody"><div id="menubar"><div id="logo"><img src="images/logo.gif" width="284" height="103" /></div>
<div class="menu">
Menu to go here
</div>
</div>
</div><div id="hero"><div id="information-that"><h1>Hello welcome to the site</h1>
<p></p><p>Some more text here.</p>
<p><img src="images/netball.png" alt="Rollover the netball for more information" width="187" height="46" border="0" /></p>
</div>
</div><div id="hero-shadow"></div><script type="text/javascript">
$(function(){
var iCounter = 1;
var iMaxCounter = 4;
$( '#plane' ).animate({
top: "-=450px",
left: "+=857px"
}, 30000, function(){
}
);
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
after:onAfter
});
});
</script>
<div id="plane-holder"><div id="plane"></div>
</div><div id="base-content"><div id="footer"></div>
</body>
</html>
but this is displaying as a block pushing the other elements below these divs down the page.
Do you know of a way to fix this so the plane and it's containing div is floating above my site? I've tried setting the z-index, but that doesn't seem to work.
probably you should use position relative+absolute setting position: relative on the container and absolute (with a defined z-index) for the #plane
place the #plane with top/left/right/bottom properties
at the begin you have bottom : -<somepixels>, left : 0
at the end you have top : 0, right : 0
Doing so other elements won't be affected by the presence of the plane, staying where you placed them
Use also pointer-events: none if you want to allow click/hover events behind the plane: see https://developer.mozilla.org/en/CSS/pointer-events (unfortunately it's not supported by IE<=8although some js workarounds have been published, e.g. by Lea Verou)
Related
I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
I am new to HTML , CSS and I want to add two vertical lines on the both sides (left and right) of the html page.
A bit of help would be very much appreciated...Thanks very much indeed
Edit: the code has now been added
<!doctype html>
<html lang="en">
<head>
<style>
#button1{
width: 300px;
height: 40px;
}
#button2{
width: 300px;
height: 40px;
}
#link1{
font-size: 33px;}
#pic1 {
position:fixed;
left:30%;
top:30%;
margin-left:-382px /*half the width*/
margin-top:-370px /*half the height*/
}
</style>
<meta charset="utf-8">
<meta name="Homepage" content="Starting page for the survey website ">
<title> Survey HomePage</title>
</head>
<body>
<img src="kingstonunilogo.jpg" alt="uni logo" style="width:180px;height:160px">
<button type="button home-button" id="button1" >Home</button>
<button type="button contact-button" id="button2">Contact Us</button>
LogIn
<img src="homepagepic.jpg" alt="homepagepic" id="pic1" style="width:400px;height:350px">
</body>
</html>
You can try creating a div container in your body and setting the borders, something along these lines:
<body style="width:100%">
//you can set the div-width to 100% too, I'm setting it to 95% so you can see it.//
<div style="width:95%;border-left:1px solid #000;border-right:1px solid #000;">
Page contents go here
</div>
</body>
Preview: http://jsfiddle.net/pbj4xxh0/
I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges).
I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.
Here's what it looks like right now: (it's just a test page for the layout)
Here is the code for it:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Baileysaurus -- Dinosaurs && Logic in your face!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
<LINK href="header.css" rel="stylesheet" type="text/css">
<LINK href="forum.css" rel="stylesheet" type="text/css">
<!-- jQuery (Bootstrap requires jQuery!) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Bootstrap -->
<LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- A file of PHP utility functions -->
<?php
include 'functions.php';
?>
</head>
<body>
<!-- Bootstrap -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<div id='background' class='row-fluid'>
<div class='span12'>
<div id='site-column' class='row-fluid span10 offset1 column-wrap'>
<img src="/PipeDog.jpg" alt="ARGUMENT INVALID" />
<hr>
<p>
Put a blog here!
</p>
</div> <!-- END of outermost span12 div -->
</div> <!-- END - "site-column" div -->
</div> <!-- END - "background" div -->
</body>
</html>
CSS
html, body
{
height: 100%;
margin: 0;
}
#background
{
position: absolute;
top:0;
bottom: 0;
min-height: 100%;
min-width: 100%;
background-color: Gainsboro;
}
#site-column
{
top: 0;
bottom: 0;
min-height: 100%;
border-left: 2px solid;
border-right: 2px solid;
background-color: white;
}
.column-wrap
{
overflow: hidden;
}
I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
Anyone have any ideas on what I'm missing?
You should also be able to add the following CSS:
.span12 {
height:100%;
}
Try to make your outer <div> to extend to the bottom of the page.
So try this in the css:
.row-fluid
{
position:absolute;
bottom:0;
}
And I'm not sure but you may have to move your
<script src="bootstrap/js/bootstrap.min.js"></script>
line to the <head> part of your page.
I do have div with a fixed height, containing an Image higher than the div's height.
I want to position this image in the middle of the div, and I use jquery-ui position().
However the image is clipped, the contents outside the div is not shown. I tried the overflow-y: visible (overflow-x must be hidden). I want the image to be completely visible I think I'm missing something trivial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Jeroen's Plaatjes Presentator</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
$('#focus_img').position({my: 'center center', at: 'center center', of: '#panel_1'});
});
</script>
</head>
<body>
<div id="wrapper">
<div class="scroll">
<div class="panel" id="panel_1">
<img src="images/middle/kameleon.png" alt="kameleon" id="focus_img" style="{width:239 height:160}"/>
</div>
</div>
</div>
</div>
<div id="content" style="margin-top:50px;margin-left:auto;">
<table width="100%">
<tr><td id="left" width="50%"><div class="stage"></div>
</td><td id="bright" width="50%"></td></tr>
</table>
</div>
</body>
</html>
the css looks like:
#wrapper {
padding-top: 150px;
}
#slider {
position: relative;
}
.scroll {
overflow-x: hidden;
overflow-y: visible;
width: 100%;
margin: 0 auto;
position: relative;
border: 2px solid black;
height: 50px;
}
Overflow is tricky business. One option is to increase the div height to fit your image, then either display: block; or float it.
Have you tried setting the overflow for panel_1?
We have a strange problem with the new Bing Maps.
When positioning the map in a div further down on the page, the popup menu (mouse over "birds-eye view") popups up much further down on the page.
Any ideas how we can fix this code to make it work:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script>
$(document).ready(function(){
//console.debug('Map', ($("#map"))[0]);
var location = new Microsoft.Maps.Location(-8.59838423, 115.33570617, 0),
map = new Microsoft.Maps.Map(($("#map"))[0], {
credentials: '<removed credentials>',
disableUserInput: false,
showCopyright: false,
showDashboard: true,
showLogo: false,
showScalebar: false,
mapTypeId:Microsoft.Maps.MapTypeId.birdseye
}
);
map.setView({
animate: false,
center: location,
zoom: 12
});
//map.entities.push(Microsoft.Maps.Pushpin(location));
});
</script>
</head>
<body>
<div style="position: relative;">
<div style="width:200px; height: 1000px; background: #eee; position: relative;">Some long content</div>
<div style="position: relative;">
<div id="map" style="width: 600px; height: 300px; "></div>
</div>
<div style="width:200px; height: 1000px; background: #eee;">Some long content</div>
</div>
</body>
</html>
You need to add a DOCTYPE declaration to the top of your document, before the opening tag, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Described here: http://msdn.microsoft.com/en-us/library/gg427624.aspx
(As a side note, I also suggest that you edit your question to remove the "credentials" line - this is your own personal application key that you should try to protect)
I looked into this and found that when the menu was triggered before I scrolled down, the menu appeared in its correct position. However, if I first scrolled down the page, the menu would appear off by X pixels, where X is equal to the number of pixels scrolled.
My diagnosis is that Microsoft are calculating the offset from the scrolled viewport (idiotically) rather than the top of the actual page. I think the only way to fix this is for Microsoft to correct their mistake.