Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts

    can css do this?

    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!!

    Code:
    <!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>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Clarification?

    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?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Banned
    Join Date
    Sep 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Interesting Proposal

    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!
    Last edited by rmedek; 09-26-2006 at 08:21 PM.

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by begeiste View Post
    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.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by begeiste View Post
    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?

  • #7
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Richard. Even I put the url in the a href code, it didn't go anywhere once I click on the tab.

  • #9
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by begeiste View Post
    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:

    Code:
    <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>

  • #10
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you try one more time, Richard?

    Thanks.

  • #11
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Well, you're close…

    Code:
    <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:

    Code:
    <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…

  • #12
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...?
    Code:
    <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>

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #14
    Senior Coder
    Join Date
    Apr 2005
    Posts
    1,051
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.
    public string ConjunctionJunction(string words, string phrases, string clauses)
    {
    return (String)(words + phrases + clauses);
    }
    <--- Was I Helpfull? Let me know ---<

  • #15
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys. Great tutorial site.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •