I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533
Related
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 am trying to place a div which contains a clickable picture on a div which contains a background. However, this keeps happening:
http://gyazo.com/2144dfe91b46898e125787b2f5249542
It goes below the image and I don't understand why.
here is my code:
!DOCTYPE html>
<html>
<head>
<title>SlammedPK</title>
<link rel="shortcut icon" href="dragonclaws.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="style.css">
<style type"text/css">
#title{
height:100%;
width:100%;
display:inline-block;
}
#forum{
height:10%;
width:10%;
background-image:forum.png;
display:block;
}
</style>
</head>
</body>
<div id="container">
<div id="title" style="position:relative" alt="title">
<img src='fulltitle.png' style='width:100%;height:100%' alt='[]' />
</div>
<div id="forum" style="position:absolute" alt="forum">
<IMG SRC="forum.png" ALT="forum">
</div>
</div>
</body>
</html>
if you could help that would be wonderful.
I made this JsFiddle: http://jsfiddle.net/2c7eQ/
Make both #forum and #title are position: absolute
HTML:
<div id="container">
<div id="title">
div1
</div>
<div id="forum">
div2
</div>
</div>
CSS:
#title{
position: absolute;
border: 1px solid;
background-color: blue;
height:100%;
width:100%;
}
#forum{
position: absolute;
left: 100px;
top: 100px;
border: 1px solid;
background-color: green;
height:10%;
width:10%;
}
First off, your format for the background image is incorrect, you need background-image: url(forum.png); and the same thing for #title. I'm not sure why you give it a background image when you also have an img within it though
As for your issue, you need to give #container position:relative; or position:absolute. Absolutely positioned elements have to be a child or a relatively positioned parent
i want the part with the border to be centered on all screen resoultions. is this possible with the margin-top and margin-bottom properties?
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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>
<body>
<div id="container">
<div id="body">
<img src="2.png" width="1000" height="100" />
<center>
<ul class="navbar">
<li>Home</li><li>About</li><li>Contact</li><li>Services</li><li>Biography</li>
</ul>
</center>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
html {
text-align: center
}
#container {
margin-left:auto;
margin-right:auto;
margin-top:50 auto;
margin-bottom:50 auto;
width:960px;
background-color:#666666;
}
#body {
background-color:#666666;
width:1000px;
height:1000px;
border:3px solid #FFFFFF;
margin-top:50px auto;
}
.navbar {
margin:0px;
background-color:#66FF33;
text-align:center;
list-style:none;
border-bottom:none;
padding-left:0px;
}
ul.navbar li {
width:20%;
display:inline-block;
}
ul.navbar a {
display:block;
width:100%;
margin:0px;
padding:10px 0px;
text-decoration:none;
}
ul.navbar a:hover {
background-color:#33FFD7;
}
body {
background-color:#333333;
}
Try:
#container{
width:960px;
margin:0 auto;
/*more CSS*/
}
You can change 0 to whatever, like 50px. Your image width is larger than 960px though.
Maybe you want something like this:
var pre = onload; // window is implicit
onload = function(){ // I personally don't indent directly inside the onload
if(pre)pre(); // execute old window.onload if it existed
var doc = document, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
function E(e){
return doc.getElementById(e);
}
function alignTop(id){
var e = E(id), w, h;
if(IE){
h = parseInt(e.currentStyle.height);
}
else{
h = parseInt(getComputedStyle(e).getPropertyValue('height'));
}
w = innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;
e.style.marginTop = w/2-h/2+'px';
}
alignTop('container');
}
You should put your script tag in the head so the body is defined in some older Browsers. I would use external JavaScript, so it's cached, like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>Your Title Here</title>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='some words to help SEO here' />
<style type='text/css'>
#import 'common.css'; #import 'thisPage.css';
</style>
<script type='text/javascript' scr='someName.js'></script>
</head>
<body>
<div>
<div id='container'>Example Only</div>
</div>
</body>
</html>
To see a working model, visit http://jsfiddle.net/MeMQz/2/ .
i know that centers it but i want the top to be equal to the bottom by centering the whole page.not just left and right – HeyItsProdigy
Based on your comment above I guess you are trying to make the height of the content is 100% equal based on the height of the browser. You can use this trick:
html, body{
height: 100%;
}
#container{
display: block;
height: 100%;
}
Have a look at the result here http://jsfiddle.net/qiqiabaziz/GB4W2/1/
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.
I just used the following technique:
http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
to try to get a background picture to be the exact size of the page no matter what I do, it works fine in Google Chrome but not it IE. The example that they provide works fine in IE and GC but I see no differences in the two sites. Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <title> National Balloon Festival! </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <style type="text/css"> html, body {
height: 100%;
margin: 0;
padding: 0; } img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%; } #content {
position:relative;
z-index:1;
top:0px;
left:0px; } </style> <!--[if IE 6]> <style type="text/css"> html { overflow-y: hidden; } body { overflow-y: auto; } img#bg { position:absolute; z-index:-1; } #content { position:static; } </style> <![endif]--> </head> <body style=''> <body> <img src="images/Field1.jpg" alt="background image" id="bg" /> <div id="content">All your content here - including headers, paragraphs, etc.</div> </body>
</body> </html>
Hmm, when i use your code (with a picture of my own) everything seems to be fine. I'm curious, what version of IE are you using?
Hmm... Apparently changing the positioning to "absolute" allowed it on top.