I've been having a problem with a new website theme I'm creating, this didn't occur to me before until I scrolled down.
Here is the problem. I created a fixed menu (which will stick to the top of the page wherever you are on the page). When you scroll down, the menu goes UNDER the content box instead. I couldn't find a solution to this either. I'm not a professional html or css web developer anyway.
Source:
File: Header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface/css/style.css">
</head>
<script type="text/javascript" src="interface/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
$('#header-container > a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('#header-container > a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
});
</script>
<div id="header-container">
<div id="header-image" align="center"><img src="interface/images/interface/header.png" title="Home"></div>
<div id="header-social">
<a id="icon" href="#"><img src="interface/images/icons/facebook.png" title="Facebook"></a>
<a id="icon" href="#"><img src="interface/images/icons/twitter.png" title="Twitter"></a>
<a id="icon" href="#"><img src="interface/images/icons/blog.png" title="Blog"></a>
</div>
<div id="header-bottom"></div>
<div id="menu">
<ul><a class="text" href="#" title="">Home</a></ul>
<ul><a class="text" href="#" title="">About</a></ul>
<ul><a class="text" href="#" title="">Articles</a></ul>
<ul><a class="text" href="#" title="">Videos</a></ul>
<ul><a class="text" href="#" title="">Tutorials</a></ul>
<ul><a class="text" href="#" title="">Downloads</a></ul>
<ul><a class="text" href="#" title="">Contact</a></ul>
<ul><a class="text" href="#" title="">Help</a></ul>
</div>
</div>
<body>
<div id="main-container">
File: index.php
<div id="container">
<div id="content-container">
lorem ipsum
</div>
</div>
File: Footer.php
<!--Footer Container-->
</body>
</div>
</html>
The CSS Styles: style.css:
#font-face { font-family: myriad; src: url('../font/MYRIADPRO-REGULAR.OTF'); }
/*HTML Ententites*/
html{
margin:0;
left: 0;
right: 0;
top:0;
bottom: 0;
position: absolute;
font-family: myriad;
color: white;
}
body{
background:white;
}
a{
text-decoration: none;
color: white;
}
/*Containers*/
#header-container{
background:#202020;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 100px;
}
#header-bottom{
height: 1px;
width: auto;
background:#8A8A8A;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0 0 50px 5px rgba(255,255,255,.5);
}
#header-image{
position: absolute;
top:70px;
left:300px;
cursor: pointer;
opacity: .7;
}
#header-social{
position: absolute;
right:0px;
top:50px;
}
#header-social > #icon{
opacity: .7;
}
#header-social > #icon:hover{
background: url('../images/icons/icon-hover.png') no-repeat;
opacity: 1;
}
#main-container{
background:#454545;
margin-left: -10px;
margin-right: -8px;
height: 1500px;
}
#menu{
position: fixed;
top:0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
}
#menu > ul{
display: inline-block;
background: rgba(10,174,254,.8);
height:40px;
cursor: pointer;
margin: 5px 0px 10px 0px;
width: 100px;
text-decoration: none;
font-size: 20px;
font-family: myriad;
}
#menu > ul:hover{
background: rgba(10,174,254,1);
}
#menu > ul > .text{
text-align: left;
color: white;
text-decoration: none;
opacity: .7;
}
#container{
position: absolute;
right: 500px;
left: 10px;
margin-top:250px;
background-clip: content-box;
}
#content-container{
background:#646464;
padding: 20px;
height: 200px;
overflow: auto;
border-bottom:3px solid #2B312D;
border-left:3px solid #2B312D;
border-right:3px solid #2B312D;
box-shadow: inset 0 0 10px 0px rgba(0,0,0,0.5);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#content-header{
}
I suppose the problem must be somewhere in my CSS for the menu. I don't think it's layered correctly in the html, but again, I suck at layering, I'm still learning. :)
Thanks in advance.
LIVE VIEW
Scroll down over the content box.
Set the z-index to 2.
#menu {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
z-index: 2;
}
Just add z-index in your menu.
CSS
#menu {
z-index: 99999;
}
Related
So I've been testing how my website looks with different screen sizes and I noticed my footer is positioned correctly at the bottom right of the screen for resolutions 800x600 to 1920x1080 BUT on 2560x1600 it does NOT position at the bottom right
/w h y/ ?
Im using CrossBrowserTesting
Here's my code:
body {
font-family: 'Courier New', Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
max-width: 100%;
min-height: 100%;
min-width: 960px;
margin: 0 auto;
}
#wrapper {
position: relative;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
#verr {
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
right: 10px;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 93%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<div id="manyarms">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" style="width:310px; height:250px;">
<p style="color: #6458b7;" id="verr">Here comes a very special boi!</p>
</div>
<div id="sensible">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;">
<p style="color:#6458b7;">He loves to pose for photos!</p>
</div>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Is this an error in my code or this a bug in CrossBrowserTesting?
Any assistance is greatly appreciated!
If you replace your :
#footer {
padding-left: 93%;
}
with
#footer {
float: right;
margin-right: 10px;
}
You will fix your div on the right and that regardless if the screen is large, medium or small.
your #wrapper streches and its css is - max-width: 100%;and your #footer is inside the #wrapper
soo maybe your content doesnt stretch the wrapper to full width and thats why the #footer isnt in the far right of screen(because its in far right of #wrapper)try to take #footer out of #wrapper OR make #wrapper width:100% and body and html width:100%
I'm making this site and there's a blank space between the image and the table I want to put, i tried to find if there was a code making that space but found nothing. where can be the problem??
Thanks!
<style>
body {
padding: 0;
margin: 0;
background-color: #F0F0F0;
}
#nav {
font-family:sans-serif;
background-color:#F0F0F0;
position: fixed;
top: 0;
width: 100%;
color: #383838;
height: 27px;
text-align: center;
padding-top: 9px;
z-index: 999;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 0px 0px #FFA600;
-moz-box-shadow: 0px 0px 0px 0px ##FFA600;
box-shadow: 0px 0px 0px 1px #FFA600;
}
#nav a {
font-size: 14px;
padding-left: 70px;
padding-right: 50px;
color: #383838;
text-decoration: none;
z-index: 999;
}
#nav a:hover {
color: #FCC772;
z-index: 999;
}
header{
position: relative;
width: 390px;
top: 80px;
padding-bottom:20px;
z-index: 1;
margin:0 auto;
}
#hd2{
padding-top:90px;
position: relative;
padding-bottom:15px;
}
.wbox {
position: relative;
top: -370px;
opacity: 0.6;
width:750px;
height:280px;
z-index: 1;
margin:0 auto;
}
#textini {
top: -570px;
height: 150px;
position: relative;
padding-bottom:0px;
margin:0 auto;
z-index: 3;
}
#textini p{
padding-bottom:0px;
padding-top:0px;
font-family:sans-serif;
text-align: center;
font-weight:normal;
font-size: 28px;
z-index: 3;
color:#383838;
}
.s3{
margin-top:50px;
margin:0 auto;
position: relative;
}
.font_8{
font-family:sans-serif;
color:#ffffff;
font-size:18px;
font-weight:normal;
margin:0 auto;
text-align:center;
}
footer {
background-color:rgba(56, 56, 56, 1);
clear:both;
padding:30px;
border-top: 0px solid rgba(146, 146, 146, 1);
border-bottom: 0px solid rgba(146, 146, 146, 1);
}
</style>
</head>
<html>
<head>
<meta charset="UTF-8">
<title>Números & Vírgulas</title>
<link rel="stylesheet" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div id="page-wrap">
<div id="nav" style="overflow:hidden">
INÍCIO
ATUAÇÃO
QUEM SOMOS
CONTATOS
</div>
<header>
<img src="http://i61.tinypic.com/2vjwxv5.png" style="width:100%;height:100%" alt="" />
</header>
<div id="hd2">
<img src="http://i61.tinypic.com/fn4n6q.png"; style="width:100%;height:424px"; alt="" />
</div>
<div class="wbox">
<img src="http://i60.tinypic.com/2ypel9c.png" style="width:100%; height:100%" alt="" />
</div>
<div id="textini">
<p>Os Números constituem uma linguagem universal mas <br> uma Vírgula pode mudar tudo.</p>
<p style="margin-left:350px;font-size:15px">Por: Dr. Sérgio Rosa</p>
</div>
<table style="width:100%:">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</div>
</table>
<div style="width:330px; top:55px;" class="s3">
<p style="line-height: 1.6em;" class="font_8"><span style="line-height:1.6em;">© 2013 Números & Vírgulas</span></p>
</div>
<!--
<div class="in" style="width:0 auto; padding-left:0px; right:300px;">
<a href="https://www.linkedin.com/company/n%C3%BAmeros-&-v%C3%ADrgulas---contabilidade-gest%C3%A3o-e-forma%C3%A7%C3%A3o-unipessoal-lda-?trk=top_nav_home">
<img src="http://i59.tinypic.com/jphpix.png" alt=" " style="width:24px;height:24px;margin:0 auto;float:right">
</a>
</div>
-->
<footer>
<br>
</footer>
</body>
</html>
your space is taken up by <div class='wbox'></div> and <div class='textini'></div> they have a set height but you are positioning them by using negative top values.
Here is the site without the 2 elements fixed
So you are going to need to restructure your site.
Try to change relative position to absolute for .wbox & #textini : Demo
CSS:
.wbox {
position: absolute;
top: -370px;
opacity: 0.6;
width:750px;
height:280px;
z-index: 1;
margin:0 auto;
}
#textini {
top: -570px;
height: 150px;
position: absolute;
padding-bottom:0px;
margin:0 auto;
z-index: 3;
}
You can fix the issue by updating your css with the below one
#textini {
top: -215px;
height: 150px;
position: relative;
padding-bottom: 0px;
margin: 0 auto;
z-index: 3;
}
.wbox {
position: relative;
top: -370px;
opacity: 0.6;
width: 750px;
height: 280px;
z-index: 1;
margin: 0 auto;
margin-bottom: -370px;
}
I am having trouble with my footer menu links and social icon buttons. I created the footer so that it will stretch across the entire browser window. However now when I lay the menu links and social media icons inside the div they are moving whenever the page is re-sized. What do I need to do in order to make the placement of the menu links and social media links stay in the proper place?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MECA Basketball Club</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1">
</script>
<script type="text/javascript" src="jQuery/infinite-rotator.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-2.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-3.js"></script>
<script type="text/javascript" src="jQuery/infinite-rotator-4.js"></script>
<style type="text/css">
body
{
background-image: url(img/backgroundimg.png);
background-repeat: repeat-x;
/*background-color:white;*/
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
}
#header
{
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 47px;
background-image: url(img/headerimg.png);
}
#headerlogo
{
position: absolute;
top: 0;
width: 201px;
height: 118px;
background-image: url(img/headerlogo_padding.png);
}
#header-nav-menu
{
position: relative;
left: 580px;
top: 0px;
width: 400px;
list-style-type: none;
}
.nav-button-header-menu-1
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 125px;
}
.nav-button-header-menu-2
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 104px;
}
.nav-button-header-menu-3
{
float: right;
font-family: Calibri;
color: white;
text-decoration: none;
width: 105px;
}
.nav-button-header-menu-1:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-2:hover
{
color: #d4d3d2;
}
.nav-button-header-menu-3:hover
{
color: #d4d3d2;
}
#main-nav-container
{
width: 197px;
height: 500px;
float: left;
margin-top: 95px;
}
#mainnav
{
position: relative;
top: 0px;
left: 0px;
list-style-type: none;
margin: 0;
padding-left: 8px;
}
.navbutton-red-top
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 10px 10px 0px 0px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: #c41002;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #a30e03;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
box-shadow: 0px 3px 8px #515050;
}
.navbutton-black-bottom
{
/*Button Style*/
display: block;
height: 40px;
width: 193px;
background-color: black;
padding-top: 20px;
border-bottom: 1px solid;
border-color: #515050;
/*Text Style*/
font-family: Calibri;
font-weight: 800;
color: white;
text-align: center;
text-decoration: none;
/*Making Button Fancy*/
border-radius: 0px 0px 10px 10px;
box-shadow: 0px 3px 8px #515050;
}
.navbutton-red-top:hover
{
background: #e91101;
}
.navbutton-red:hover
{
background: #e91101;
}
.navbutton-black:hover
{
background: #2c2b2b;
}
.navbutton-black-bottom:hover
{
background: #2c2b2b;
}
#content
{
background-color: white;
width: 1024px;
float: left;
box-shadow: 0px 3px 20px #515050;
}
#rotating-item-wrapper
{
position: relative;
margin-left: 240px;
margin-top: 20px;
padding: 150px;
}
.rotating-item
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#placeholderdiv
{
padding-left: 40px;
padding-top: 10px;
}
#slideshow
{
padding-left: 40px;
padding-top: 10px;
}
#video1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
.stats-offense
{
padding-left: 10px;
padding-top: 10px;
float: left;
}
#events1
{
padding-left: 40px;
padding-top: 10px;
float: left;
}
#rotating-item-wrapper-2
{
position: relative;
left: 455px;
top: 281px;
}
.rotating-item-2
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#rotating-item-wrapper-3
{
position: relative;
left: 240px;
top: 532px;
padding: 300px;
}
.rotating-item-3
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
.stats-defense
{
position: relative;
left: 766px;
top: -68px;
overflow: auto;
padding-bottom: 206px;
}
#rotating-item-wrapper-4
{
position: relative;
left: 240px;
top: -260px;
padding: 35px;
}
.rotating-item-4
{
display: none;
position: absolute;
top: 0;
left: 0px;
}
#footer-home
{
position: absolute;
bottom: -600px;
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#footer-nav-menu-left
{
position: absolute;
left: 0px;
list-style-type: none;
margin-left: 430px;
}
#footer-nav-menu-right
{
position: absolute;
list-style-type: none;
margin-left: 550px;
}
.nav-button-footer
{
font-family: Calibri;
color: white;
text-decoration: none;
}
.nav-button-footer:hover
{
color: #c5c5c4;
}
#SocialMedia
{
font-family: Calibri;
color: white;
}
#Facebook-icon
{
}
#Twitter-icon
{
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="headerlogo"></div>
<ul id="header-nav-menu">
<li><a class="nav-button-header-menu-3" href="#RegisterLeague">Login</a></li>
<li><a class="nav-button-header-menu-2" href="#RegisterLeague">Join The
Club</a></li>
<li><a class="nav-button-header-menu-1" href="#RegisterLeague">Register
League</a></li>
</ul>
<div id="content">
<div id="main-nav-container">
<ul id="mainnav">
<li><a class="navbutton-red-top" href="#stats">STATS</a></li>
<li><a class="navbutton-red" href="#stats">EVENTS</a></li>
<li><a class="navbutton-red" href="#stats">FIND A LEAGUE</a></li>
<li><a class="navbutton-red" href="#stats">SCHEDULE</a></li>
<li><a class="navbutton-black" href="#stats">BECOME A REFEREE</a></li>
<li><a class="navbutton-black" href="#stats">REGISTER LEAGUE</a></li>
<li><a class="navbutton-black-bottom" href="#stats">JOIN THE CLUB</a>
</li>
</ul>
</div>
<div id="rotating-item-wrapper">
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd1.png" />
<img class="rotating-item" src="img/ContentArea1/AdOne/MainAd2.png" />
</div>
<div id="video1">
<img src="img/ContentArea1/Video/video1img.png" />
</div>
<div class="stats-offense">
<img src="img/ContentArea1/Stats/stats1img.png" />
</div>
<div id="events1">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-2">
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad2Img.png" />
<img class="rotating-item-2" src="img/ContentArea1/AdTwo/Ad23Img.png" />
</div>
<div id="rotating-item-wrapper-3">
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad3Img.png" />
<img class="rotating-item-3" src="img/ContentArea1/AdThree/Ad4Img.png" />
</div>
<div class="stats-defense">
<img src="img/ContentArea1/Events/events1.png" />
</div>
<div id="rotating-item-wrapper-4">
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner1img.png"
/>
<img class="rotating-item-4" src="img/ContentArea1/VBanner/vbanner2img.png"
/>
</div>
</div>
<div id="footer-home">
<ul id="footer-nav-menu-left">
<li><a class="nav-button-footer" href="#RegisterLeague">About</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Contact Us</a></li>
<li><a class="nav-button-footer" href="#RegisterLeague">Press Inquiry</a>
</li>
</ul>
<ul id="footer-nav-menu-right">
<li><a class="nav-button-footer" href="#RegisterLeague">Terms of Use</a>
</li>
<li><a class="nav-button-footer" href="#RegisterLeague">Privacy Policy</a>
</li>
</ul>
<div id="SocialMedia">Follow Us</div>
<div id="Facebook-icon">
<img src="img/SocialMediaIcon/FB_icon.png" alt="Facebook" /></div>
<div id="Twitter-icon">
<img src="img/SocialMediaIcon/Twitter_icon.png" alt="Twitter" /></div>
<div id="Instagram-icon">
<img src="img/SocialMediaIcon/IG_icon.png" alt="Instagram" /></div>
<div id="YouTube-icon">
<img src="img/SocialMediaIcon/YouTube_icon.png" alt="YouTube" /></div>
</div>
</div>
</body>
</html>
Click the link below to see how it currently looks:
http://www.micre8tivegroup.com/default.html
As I was writing on the comments section, this is not a single thing issue. This is a problem with many things being done incorrectly. But mainly:
The structure of the page is poorly designed. I understand that this page is more of testing, but creating a web site is not directly getting into coding but analyzing and designing a solution. Coding may be the "fun part", but it's not the most important.
The positioning of the elements is incorrect. As a personal recommendation: avoid using position:absolute for controls. In your page, the logo is a good example of position absolute (although it could be done in other ways), all the rest absolute positioning shouldn't be there and breaks the page.
Here you have a link to a version the solves the position problems that you commented about: http://muzaw.com/test.html. Test it, and let me know if that's what you were aiming for (I know not everything will fit perfectly but that's just a matter of changing some values in the CSS).
The changes that I made:
Removed the position absolute for the header and footer (or changed to position:relative)
Restructured the page to fit a "more convenient" web page design.
Changed the CSS of some of the elements.
I understand you are learning, that I sound patronizing, and that my comments and answer may frustrate you; but if you start learning bad things from the beginning, it will be worse later.
I've found a way to do what you want, but the header and the footer will be the same width as your mainContainer.
Just change your CSS to :
#footer-home
{
position: absolute;
bottom: 0; /* Put it back to 0 */
left: 0;
min-width: 100%;
height: 200px;
background-image: url(img/footerimg.png);
}
#maincontainer
{
width: 1024px;
margin: 0 auto;
/* Add the code below */
left: 0;
right: 0;
position: absolute;
}
That way, the footer will always stay at the bottom.
I'm sitting and playing around with an idea about that when you hold the mouse over an image then there comes a little icon up over the image. I've tried to do like this:
HTML:
<figure>
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;">
<img src="/indhold/img/sog/sog.png" class="iconIMG">
<p><?php echo date("d-m-Y", strtotime($dag));;?></p>
</div>
</figure>
CSS:
.lukIMG {
position: relative;
}
.lukIMG p {
position:absolute;
bottom: -4px;
right: 1px;
padding: 5px 10px;
background-color: #002855;
color: #FFF;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.lukIMG .iconIMG { position: absolute; display: none; }
EIDT HTML AND CSS:
HTML
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;" class="cl1">
<img src="/indhold/img/sog/loading.gif" class="cl2" width="25px;" height="25px;">
<p>dato</p>
</div>
CSS
.lukIMG {
position: relative;
}
.lukIMG p {
position:absolute;
bottom: -4px;
right: 1px;
padding: 5px 10px;
background-color: #002855;
color: #FFF;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.cl1:hover+img
{
position:absolute;
left:0;
top:0;
z-index:3;
}
.cl1
{
z-index:2;
}
.cl2
{
z-index:1;
}
Check the DEMO or the following code:
<html>
<head>
<script>
</script>
<style>
img
{
position:absolute;
}
img.cl1:hover+img
{
position:relative;
left:0;
top:0;
z-index:3;
}
img.cl1
{
z-index:2;
}
img.cl2
{
z-index:1;
}
</style>
</head>
<body>
<img src="1.jpg" width=200 height=200 class="cl1"/>
<img src='2.gif' class="cl2"/>
</body>
</html>
this should be work,please test it:
.lukIMG .iconIMG:hover { position: absolute; display: block; z-index:999}
add the code to your css file
I am trying to create an overlay box and want the whole background to be masked.
However, the mask is only covering the body of the page. I want the mask to extend to the edge and top of the page.
Is there a way to manually position the mask to cover the entire page?
Thank you.
CSS:
body
{
background-color: #C75656;
text-align:center;
font-size:16px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
text-decoration: none;
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px;
}
#middleContainer {
width:780px;
margin: 5px auto;
padding: 10px 0;
}
.box {
background:white;
border-style:solid;
border-width:1.5px;
border-color:#071419;
border-radius: 12px;
-moz-border-radius: 12px;
}
.modal {
background-color:#fff;
display:none;
width:700px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>mySITE</title>
<!-- Meta tags go here -->
<!-- Links to Icon, favicon, css, jquery, ajax, etc. -->
<link rel='stylesheet' type='text/css' href='default.css' />
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.5,
},
});
$("#login form").submit(function(e) {
triggers.eq(1).overlay().close();
var input = $("input", this).val();
triggers.eq(1).html(input);
return e.preventDefault();
});
});
</script>
</head>
<body>
<span><h1>my<font color="red">SITE</font></h1></span>
<a class="modalInput" rel="#login">Login</a>
<div id="middleContainer" class="box">
<div id="title">Content</div>
</div>
<div class="modal" id="login">
<h2>Login or Regester.</h2>
<form>
<input />
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
<br />
</div>
</body>
</html>
This is what i am using for all my projects
<style>
.mask {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:1000;
opacity: 0.5;
}
.overlay {
position: absolute;
width: 300px;
height: 200px;
top: 100px;
left: -50%;
margin-left: -150px;
background: white;
z-index: 1001
}
</style>
<div class="mask"></div>
<div class="overlay"></div>
Put this in the head of your document
<style type="text/css" media="all">
.mask {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2000px;
background: black;
opacity: 0.5;
}
</style>
And then put
<div class="mask"></div>
anywhere in your html, but I would put it at the top or the bottom. Because it is absolutely positioned, it really doesn't matter.