iframe and sprys

**anarchos78** · May 2, 2011 02:17

Hello to everybody,
I have to create a menu tied with some content on a single page (not load new page on every single link). The result that I need is similar to Olives .
The problem is that I don’t want to use sprys menus. The reason is that if I scroll to the bottom of tab 1, then select tab 2, the scrollbar remains at the bottom (or wherever it was last positioned on tab 1. You can see the problem on Olives .

So I came up with the following:
Index.html:

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" />
<title>any</title>

<style type="text/css">
body {
    height: 1200px;
    padding: 0px;
    background: #ffffff;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#e6f3ea), to(#ffffff)) no-repeat;
    background: -moz-linear-gradient(top, #e6f3ea, #ffffff 100%) no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6f3ea', endColorstr='#ffffff',GradientType=0);
    background-image: -o-linear-gradient(#e6f3ea, #ffffff 100%);
}

#menu {
    clear: none;
    float: left;
    margin-top: 40px;
    height: 320px;
    width: 160px;
    margin-left: auto;
    background-color: #667C26;
    
}
#menu a {
    height: 40px;
    width: 160px;
    display: block;
    text-decoration: none;
    color: #000;
    line-height: 40px;
    font-size: 16px;
    font-weight: 400;
    text-indent: 20px;
}

a:hover { 
    background: #e3fe03;
}


#menu a:focus {
    z-index: 900;
    background-image: url(images/button_selected.jpg);      
    background-repeat: no-repeat;
    outline: none;
}


body iframe {
    clear: none;
    float: left;
    width: 670px;
    height: 320px;
    margin-top: 40px;
    margin-left: 10px;
    overflow-x: hidden;
    background: #e6f3ea;
}
#content {
    height: auto;
    width: 850px;
    margin: 0px auto;
    padding: 0px;
    background: #e6f3ea;
}
</style>


</head>

<body>
<div id="content">
<div id="menu">
<a target="test2" href="olivegrove.html">Olive Grove</a>
<a target="test2" href="harvest.html">Harvest</a>
</div>

<iframe src="olivegrove.html" name="test2" frameborder="0"> </iframe> 
</div>

</body>
</html>

--------------------------------------------------------------------------------------------------------------------------
olivegrove.html:

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" />
<title>tata</title>
<link href="olivegrove.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
    background: #e6f3ea;
    margin: 0px auto;
    padding:0px;
}

#content {
    clear: none;
    float: left;
    width: 650px;
    height: 700px;
    background-color: #C60;
} 
</style>

</head>

<body>

<div id="content"></div>

</body>
</html>

--------------------------------------------------------------------------------------------------------------------------
harvest.html:

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" />
<title>papa</title>
<link href="olivegrove.css" rel="stylesheet" type="text/css" />

<style type="text/css">
body {
    background: #e6f3ea;
    margin: 0px auto;
    padding:0px;
}

#content {
    clear: none;
    float: left;
    width: 650px;
    height: 700px;
    background-color: #C60;
} 
</style>


</head>

<body>

<div id="content"></div>

</body>
</html>

As you can see at the above code I can get the “hover” effect that I need and the “focus” effect but I want the “focus” to stay still –indicate to the visitor what tab she/he had selected- (to disable the previous and enable the next when and if clicked only, not disabled when I click anywhere in the page).

Any help will be appreciated.

Thank you in advance,
Tom

User Tag List

Thread: iframe and sprys

Thread Tools

Display

Threaded View

iframe and sprys

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions