msd_luke
08-20-2009, 11:09 AM
Hi All,
i am trying to show certain div contents when a "tab" div is hovered over, i have done this in js and its working fine but i need to get something working if the user has js disabled.
here is my non js test page (http://www.kernow-connect.com/Price Comparison/div2.php)
and my page code
<!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" />
<link rel="stylesheet" type="text/css" href="css/indextest_css.css" />
<title>Untitled Document</title>
<style type="text/css">
.container{
float:left;
position:relative;
width:690px;
height:300px;
margin:0 auto;
margin-top:10px;
background-color:#FFFFFF;
border:2px solid #FF6600;
padding:5px;
}
.info_container{
float:left;
position:relative;
width:675px;
height:220px;
margin:0 auto;
background-color:#99FF00;
border:2px solid #FF6600;
padding:5px;
}
.info
{
position:absolute;
display:hidden;
top:5px;
left:10px;
}
.content1
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:16px;
padding-right:15px;
}
.content1 a{
width:100%;
}
.content1 a: hover{
display:block;
}
.content2
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;}
.content3
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:14px;
padding-right:14px;}
.content4
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;}
.content5
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;}
.content6
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:16px;
}
.tab_strip{
float:left;
width:675px;
background-color:#000000;
height:40px;
padding:5px;
margin-top:10px;
border: 2px solid #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="info_container">
<div id="detail_info1" class = "info">
<p>Welcome To Kernow Connect,</p>
<p>A web site dedicated in assisting your shopping needs by
presenting the very best the web has to offer at discount prices,
with over fifty of the best online stores rated and separated into
six easy to view categories, online shopping has never been so easy.
</p>
</div>
<div id="detail_info2" class = "info" style="display:none;">
<p>Big Savings:</p>
<p>Kernow Connect provides you with the resources to make big savings
on your shopping, Our price comparison feature compares the best
online stores for the cheapest price and produces a list of products ranging
from the cheapest to the dearest with the prices clearly visible for all to see.
In some instances you can make saving of over fifty percent off R.R.P
which is a fantastic saving.</p>
</div>
<div id="detail_info3" class = "info" style="display:none;">
<p>Be Sure To Find What Your Looking For:</p>
<p>We here at Kernow Connect have tried to make online shopping
as easy as possible for you, for each of our extensive range of
categories on this site we have listed the Best Selling,
New Releases and Most Gifted products helping you keep up to date
with the latest trends, you will ever be short of a gift idea again.</p>
</div>
<div id="detail_info4" class = "info" style="display:none;">
<p>Discount Codes:</p>
<p>Kernow Connect provides you with some fantastic Discount Codes
which can be used at the stores check out to give you a discount
on your purchase, these can include free delivery, to money off
your order. All our discount codes from every store listed on this site
can be found on the Discount page.</p>
</div>
<div id="detail_info5" class = "info" style="display:none;">
<p>Product Search:</p>
<p>Our Product Search function allows you to search for a particular
item, and it will return a list of stores which sells that item and
the price of that item, this feature is still in its early stages of
design and there are still a few errors with it which we hope to iron out soon. </p>
</div>
<div id="detail_info6" class = "info" style="display:none;">
<p>Store Rating:</p>
<p>Kernow Connect gives you the opportunity to rate any of the stores
listed on this site, there are a total of four categories in which you
can rate a store, Value for money, Ease Of Use, Delivery Time, and Delivery
Cost. each of these ratings are then added together and given an average
rating which is then displayed next to the store so that you are given an
indication of how well that store has faired in the past.</p>
</div>
</div>
<div class="tab_strip">
<a href="#"><div class="content1"
id = "tab1">
Welcome
</div></a>
<div class="content2"
id = "tab2" >
Big Savings
</div>
<div class="content3"
id = "tab3" >
Best Sellers
</div>
<div class="content4"
id = "tab4" >
Discount Codes
</div>
<div class="content5"
id = "tab5" >
Product Search
</div>
<div class="content6"
id = "tab6" >
Store Rating
</div>
</div>
</div>
</body>
</html>
i have tried to add some css to my content1 by adding a and a: hover but nothing happens when i hover over the div? can anyone please advise me how i can achieve this?
many thanks
Luke
i am trying to show certain div contents when a "tab" div is hovered over, i have done this in js and its working fine but i need to get something working if the user has js disabled.
here is my non js test page (http://www.kernow-connect.com/Price Comparison/div2.php)
and my page code
<!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" />
<link rel="stylesheet" type="text/css" href="css/indextest_css.css" />
<title>Untitled Document</title>
<style type="text/css">
.container{
float:left;
position:relative;
width:690px;
height:300px;
margin:0 auto;
margin-top:10px;
background-color:#FFFFFF;
border:2px solid #FF6600;
padding:5px;
}
.info_container{
float:left;
position:relative;
width:675px;
height:220px;
margin:0 auto;
background-color:#99FF00;
border:2px solid #FF6600;
padding:5px;
}
.info
{
position:absolute;
display:hidden;
top:5px;
left:10px;
}
.content1
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:16px;
padding-right:15px;
}
.content1 a{
width:100%;
}
.content1 a: hover{
display:block;
}
.content2
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;}
.content3
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:14px;
padding-right:14px;}
.content4
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;}
.content5
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:15px;}
.content6
{
float:left;
margin-right:5px;
top:100px;
background-color:#FFFFFF;
color:#000000;
padding-top:10px;
padding-bottom:10px;
padding-left:15px;
padding-right:16px;
}
.tab_strip{
float:left;
width:675px;
background-color:#000000;
height:40px;
padding:5px;
margin-top:10px;
border: 2px solid #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="info_container">
<div id="detail_info1" class = "info">
<p>Welcome To Kernow Connect,</p>
<p>A web site dedicated in assisting your shopping needs by
presenting the very best the web has to offer at discount prices,
with over fifty of the best online stores rated and separated into
six easy to view categories, online shopping has never been so easy.
</p>
</div>
<div id="detail_info2" class = "info" style="display:none;">
<p>Big Savings:</p>
<p>Kernow Connect provides you with the resources to make big savings
on your shopping, Our price comparison feature compares the best
online stores for the cheapest price and produces a list of products ranging
from the cheapest to the dearest with the prices clearly visible for all to see.
In some instances you can make saving of over fifty percent off R.R.P
which is a fantastic saving.</p>
</div>
<div id="detail_info3" class = "info" style="display:none;">
<p>Be Sure To Find What Your Looking For:</p>
<p>We here at Kernow Connect have tried to make online shopping
as easy as possible for you, for each of our extensive range of
categories on this site we have listed the Best Selling,
New Releases and Most Gifted products helping you keep up to date
with the latest trends, you will ever be short of a gift idea again.</p>
</div>
<div id="detail_info4" class = "info" style="display:none;">
<p>Discount Codes:</p>
<p>Kernow Connect provides you with some fantastic Discount Codes
which can be used at the stores check out to give you a discount
on your purchase, these can include free delivery, to money off
your order. All our discount codes from every store listed on this site
can be found on the Discount page.</p>
</div>
<div id="detail_info5" class = "info" style="display:none;">
<p>Product Search:</p>
<p>Our Product Search function allows you to search for a particular
item, and it will return a list of stores which sells that item and
the price of that item, this feature is still in its early stages of
design and there are still a few errors with it which we hope to iron out soon. </p>
</div>
<div id="detail_info6" class = "info" style="display:none;">
<p>Store Rating:</p>
<p>Kernow Connect gives you the opportunity to rate any of the stores
listed on this site, there are a total of four categories in which you
can rate a store, Value for money, Ease Of Use, Delivery Time, and Delivery
Cost. each of these ratings are then added together and given an average
rating which is then displayed next to the store so that you are given an
indication of how well that store has faired in the past.</p>
</div>
</div>
<div class="tab_strip">
<a href="#"><div class="content1"
id = "tab1">
Welcome
</div></a>
<div class="content2"
id = "tab2" >
Big Savings
</div>
<div class="content3"
id = "tab3" >
Best Sellers
</div>
<div class="content4"
id = "tab4" >
Discount Codes
</div>
<div class="content5"
id = "tab5" >
Product Search
</div>
<div class="content6"
id = "tab6" >
Store Rating
</div>
</div>
</div>
</body>
</html>
i have tried to add some css to my content1 by adding a and a: hover but nothing happens when i hover over the div? can anyone please advise me how i can achieve this?
many thanks
Luke