...

View Full Version : can css do this?



begeiste
09-26-2006, 05:03 AM
hi:
I copied the css of tab trying to make a selection of tab staying what they are, but the problem is the selected tab cannot be making any hyper links to go to another page. Can you please tell me how do I overcome this problem? Thanks million!!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to Cotytech.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
<!--
body {
background-color: #ededed;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#homecontainer {
background-image: url(images/dot_bg.jpg);
background-repeat: repeat;
background-position: left top;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#topcontent {
width: 766px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 45px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #9DA092;
}
#header {
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #D3D8CF;
background-color: #E3E6DF;
width: 766px;
background-image: url(images/logo.jpg);
background-repeat: no-repeat;
background-position: 20px 20px;
}
.top_nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin-left: 20px;
padding-top: 50px;
list-style-type: none;
}
.shadetabs{
padding: 3px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
list-style-type: none;
text-align: left;
text-transform: capitalize;
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding-right:7px;
color: #2d2b2b;

}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: none;
color:#000000;
padding-top:5px;

padding-right:7px;
padding-bottom:4px;
}
.shadetabs li.selected{
position: relative;
/*top: 1px;*/
}

.shadetabs li.selected a{
background-color:#6699FF;
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:4px;
color:#FFFFFF;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #333333;
border-right-color: #333333;
border-left-color: #333333;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

.tabcontentstyle{ /*style of tab content container*/
border-top: 1px solid black;
margin-bottom: 1em;
margin-right:20px;

}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
}
.left {
float: left;
margin-left: 20px;
}
.kuang {
border: 1px solid #000000;
}
#topwhite {
width: 766px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 20px;
background-color: #FFFFFF;
height: 200px;
}
.right {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
width: 450px;
float: left;
margin-left: 20px;
}
#Graphicarea {
width: 766px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 20px;
background-color: #E3E6DF;
height: 350px;
background-image: url(images/index_monitor.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.mailarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
width: 300px;
float: left;
margin-left: 20px;
margin-top: 200px;
}
.secondnav {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
width: 120px;
margin-left: 50px;
padding-right: 50px;
}
.secondnav a{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration:none;
}
#s-nav {
margin-top: 20px;
margin-left: 20px;
}
#bottom {
width: 766px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 20px;
height: 10px;
background-image: url(images/shadow1.jpg);
background-repeat: repeat-x;
background-position: 15px top;
}
#footer {
width: 766px;
margin-right: auto;
margin-bottom: 30px;
margin-left: auto;
padding-top: 20px;
height: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
text-decoration: none;
text-align: center;
}
-->
</style>
<script type="text/javascript" src="js/tabcontent.js"></script>
</head>

<body>
<div id="homecontainer">
<!--top starts here-->
<div id="topcontent">

<div id="header">
<div class="top_nav">
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">home</a></li>
<li><a href="#" rel="tcontent2">TV mounts</a></li>
<li><a href="#" rel="tcontent3">LCD/flat panel mounts</a></li>
<li><a href="#" rel="tcontent4">speakers stands</a></li>

<li><a href="#" rel="tcontent5">speakers mounts</a></li>
<li><a href="#" rel="tcontent6">projectors mounts</a></li>
<li><a href="#" rel="tcontent7">A/V furniture</a></li>
<li><a href="#" rel="tcontent8">support</a></li>
</ul>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent"></div>

<div id="tcontent2" class="tabcontent"></div>
<div id="tcontent3" class="tabcontent"></div>
<div id="tcontent4" class="tabcontent"></div>
<div id="tcontent5" class="tabcontent"></div>
<div id="tcontent6" class="tabcontent"></div>
<div id="tcontent7" class="tabcontent"></div>
<div id="tcontent8" class="tabcontent"></div>
</div>
</div>
</div>

</div>
<!--top ends here-->
<!--midddle starts here-->
<div id="topwhite">
<div class="left"><img src="images/index_product.jpg" class="kuang"></div>
<div class="right">
<ul>
<li>
<p>For nearly 20 years, Vantage Point has been a leading manufacturer of television mounts, speaker mounts, television swivels, and modular audio/video furniture. Made of the finest materials, Vantage Point's products are known for their superior construction and ease of installation.</p>
<p> Vantage Point does not sell direct to the public, please contact consumer support for a dealer near you, or call 888-TV-MOUNT</p>

</li>
</ul>
</div>
</div>
<!--middle ends here-->
<!--graphic area starts here-->
<div id="Graphicarea">
<div id="s-nav"><span class="secondnav"><a href="">ABOUT US</a></span><span class="secondnav"><a href="">OUR MISSION </a></span></div>
<div class="mailarea">

<ul>
<li>
<p> Vantage Point does not sell direct to the public, please contact consumer support for a dealer near you, or call 888-TV-MOUNT</p>
<form action="" method="get"><input name="email" type="text"><input name="Submit" type="button" id="Submit" value="Submit">
</form>
</li>
</ul>
</div>

</div>
<!--graphic area ends here-->
<!--shadow area starts here-->
<div id="bottom"></div><div id="footer">&copy;2006 Cotytech Inc.<br>All rights reserved.</div><p>&nbsp;</p>
<!--shadow area ends here-->
</div>
<script type="text/javascript" src="js/maintab.js"></script>
</body>
</html>

ronaldb66
09-26-2006, 10:45 AM
Could you please clarify what it is you are after: provide a link to the page you copied this from, and describe in detail how you want its behaviour altered from what it currently is?

jeff100
09-26-2006, 07:15 PM
Hi,

My name is Jeff. I am a massive tool, and tried to spam this forum. Therefore, my message was edited by the moderator, and I'll be banned soon from Coding Forums. Have a great day!

begeiste
09-26-2006, 07:46 PM
Thanks for your asking Mr. Ronaldb66. Here is the link: www.cotytec.com/index.html
My question was that the top nav tab will be staying in blue once I click on them. But they didn't go to the page that I made a link for each tab by <a href="www.nba.com">. Do not know why those hyper links aren't working?
Since the codes too long, I didn't past it inside of code brackets, you can view the page source code thru a browser.

rlemon
09-26-2006, 07:56 PM
Thanks for your asking Mr. Ronaldb66. Here is the link: www.cotytec.com/index.html
My question was that the top nav tab will be staying in blue once I click on them. But they didn't go to the page that I made a link for each tab by <a href="www.nba.com">. Do not know why those hyper links aren't working?
Since the codes too long, I didn't past it inside of code brackets, you can view the page source code thru a browser.

few possible solutions.

some you may like, some you may not.

first. use ajax to load the content in dynamically.

second. pass a url variable to the page and load the 'selected' tab from that.

third. use a cookie or session variable to store the selected page and use that to determine the selected tab.

fourth. hard code in the selected tab on each page. then you don't have to worry about this mess.

rmedek
09-26-2006, 08:02 PM
But they didn't go to the page that I made a link for each tab by <a href="www.nba.com">. Do not know why those hyper links aren't working?

Maybe I'm missing something here, but the links don't point anywhere… they are all "<a href="#">"…Is that the issue you're talking about? :confused:

begeiste
09-26-2006, 09:14 PM
Thanks guys. I am the design guy not sure what exactly I need to modify something on the javascript file until I have seen the modification on the file that will help me to understand what was the problem?

Best Regards.

begeiste
09-26-2006, 09:16 PM
Thanks Richard. Even I put the url in the a href code, it didn't go anywhere once I click on the tab.

rmedek
09-26-2006, 10:39 PM
Even I put the url in the a href code, it didn't go anywhere once I click on the tab.

Errr… but there's still no url in the anchor tag:


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">home</a></li>
<li><a href="#" rel="tcontent2">TV mounts</a></li>
<li><a href="#" rel="tcontent3">LCD/flat panel mounts</a></li>
<li><a href="#" rel="tcontent4">speakers stands</a></li>
<li><a href="#" rel="tcontent5">speakers mounts</a></li>
<li><a href="#" rel="tcontent6">projectors mounts</a></li>
<li><a href="#" rel="tcontent7">A/V furniture</a></li>
<li><a href="#" rel="tcontent8">support</a></li>
</ul>

begeiste
09-27-2006, 05:30 AM
Can you try one more time, Richard?

Thanks.

rmedek
09-27-2006, 05:45 AM
Well, you're close…


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="/" rel="tcontent1">home</a></li>
<li><a href="www.nba.com" rel="tcontent2">TV mounts</a></li>
<li><a href="www.nba.com" rel="tcontent3">LCD/flat panel mounts</a></li>
<li><a href="www.nba.com" rel="tcontent4">speakers stands</a></li>
<li><a href="www.nba.com" rel="tcontent5">speakers mounts</a></li>
<li><a href="www.nba.com" rel="tcontent6">projectors mounts</a></li>
<li><a href="www.nba.com" rel="tcontent7">A/V furniture</a></li>
<li><a href="www.nba.com" rel="tcontent8">support</a></li>
</ul>

Should be:


<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">home</a></li>
<li><a href="http://www.nba.com" rel="tcontent2">TV mounts</a></li>
<li><a href="http://www.nba.com" rel="tcontent3">LCD/flat panel mounts</a></li>
<li><a href="http://www.nba.com" rel="tcontent4">speakers stands</a></li>
<li><a href="http://www.nba.com" rel="tcontent5">speakers mounts</a></li>
<li><a href="http://www.nba.com" rel="tcontent6">projectors mounts</a></li>
<li><a href="http://www.nba.com" rel="tcontent7">A/V furniture</a></li>
<li><a href="www.nba.com" rel="tcontent8">support</a></li>
</ul>

Then we'll have somewhere to start… :)

begeiste
09-28-2006, 06:43 AM
Hi Richard:
They are still not going anywhere, this is the code that I modified in the index.html. Not sure what can we do any further...?

<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">home</a></li>
<li><a href="page1.html" rel="tcontent2">TV mounts</a></li>
<li><a href="page2.html" rel="tcontent3">LCD/flat panel mounts</a></li>
<li><a href="page3.html" rel="tcontent4">speakers stands</a></li>
<li><a href="page4.html" rel="tcontent5">speakers mounts</a></li>
<li><a href="page5.html" rel="tcontent6">projectors mounts</a></li>
<li><a href="http://www.nba.com" rel="tcontent7">A/V furniture</a></li>
<li><a href="http://www.nba.com" rel="tcontent8">support</a></li>
</ul>

_Aerospace_Eng_
09-28-2006, 07:45 AM
Do you only intend on having 8 pages? Just hard code the selected class into the html for each page. Read this as well as it might interest you. http://bonrouge.com/br.php?page=current2

rlemon
09-28-2006, 05:21 PM
Do you only intend on having 8 pages? Just hard code the selected class into the html for each page. Read this as well as it might interest you. http://bonrouge.com/br.php?page=current2

thats what i said.

begeiste
09-30-2006, 04:24 AM
Thanks guys. Great tutorial site.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum