Struggling here. I've got a lovely fullscreen image, and a lovely image rotator, but can I get the two to marry? No! No matter what I try with the rotator I can't get the images to stretch. I'm trying to get the screen height from Javascript inline, but even if that works it probably won't fix width issues.
I'm including all of the current code, but without the rotator elements, as none of the methods I've tried work properly anyway!!
Development is taking place @
I'm including all of the current code, but without the rotator elements, as none of the methods I've tried work properly anyway!!
Code:
<!DOCTYPE html>
<head>
<title>NABDH - Web Concept 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"[/URL] type="text/javascript"></script>
<script src="[URL unfurl="true"]http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>[/URL]
<script type="text/javascript">
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: 'contab.jpg', //path to the image for the tab //Optionally can be set using css
imageHeight: '181px', //height of tab image //Optionally can be set using css
imageWidth: '40px', //width of tab image //Optionally can be set using css
tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '100px', //position from the top/ use if tabLocation is left or right
leftPos: '20px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<STYLE>
<!--
body, html {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #00121E url("nabdh_bg.jpg") no-repeat left center fixed;
-webkit-background-size: cover; /*for webKit*/
-moz-background-size: cover; /*Mozilla*/
-o-background-size: cover; /*opera*/
background-size: cover; /*generic*/
overflow: hidden;
}
#bg_menu_bar {
z-index: 3;
height: 160px;
margin:0 auto 0 auto;
width: 100%;
background-color: #FFF;
opacity: 1;
}
#left_menu_bar {
z-index: 4;
height: 160px;
margin:0 auto 0 auto;
width: 1200px;
background-color: #FFF;
opacity: 1;
}
.logo{
width: 329px;
position: relative;
margin: 0 0 0 106px;
z-index:10;
opacity: 1;
float:left;
}
.left_menu {
width: 173px;
margin: 56px 50px 0 130px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
float:left;
position: relative;
}
.middle_menu {
width: 160px;
margin: 56px 50px 0 0;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
float:left;
position: relative;
}
.right_menu {
width: 160px;
margin: 56px 0 0 0;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
float:left;
position: relative;
}
a:link {text-decoration:none; color:#FFF;}
a:visited {text-decoration:none; color:#FFF;}
a:hover {text-decoration:none; color:#5283CA;}
a:active {text-decoration:none; color:#FFF;}
#wrapper{
z-index: 1;
width: 1051px;
margin:0 auto 0 auto;
}
#wraphead {
z-index: 19;
position: absolute;
top: 370px;
}
#wrapcontent {
z-index: 28;
width: 520px;
margin: 0 auto 0 auto;
padding: 15px;
font-family: Arial, Helvetica, sans-serif;
min-height: 320px;
text-align: left;
color: #FFF;
position: relative;
background-color:#333;
opacity: 0.8;
}
.slide-out-div {
padding: 20px;
width: 250px;
height: 181px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
color: #FFF;
position: relative;
background-color:#000;
z-index:100;
}
</style>
</head>
<body>
<div id="bg_menu_bar">
<div id="left_menu_bar">
<div class="logo"><img src="nabdh_logo.jpg" alt="NABDH Logo" border="0" /></div>
<div class="left_menu"><strong>Address</strong><br/>Clocktower Roundabout<br/>Dubai</div>
<div class="middle_menu"><strong>Telephone</strong><br/>+97155 66812 7346</div>
<div class="right_menu"><strong>Email</strong><br/>sales@nadbh.ae</div>
</div>
</div>
<div id="wrapper">
<div id="wraphead"><img src="nabdh_solar.png" alt="NABDH Solar Specialists" border="0" /></div>
</div>
</body>
</html>Development is taking place @