Web Analytics Made Easy -
StatCounter can css do this? - CodingForum

Announcement

Collapse
No announcement yet.

can css do this?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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

    Comment


    • #3
      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 Forum. Have a great day!
      Last edited by rmedek; Sep 26, 2006, 03:21 PM.

      Comment


      • #4
        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.

        Comment


        • #5
          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 ---<

          Comment


          • #6
            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?
            drums | web

            Comment


            • #7
              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.

              Comment


              • #8
                Thanks Richard. Even I put the url in the a href code, it didn't go anywhere once I click on the tab.

                Comment


                • #9
                  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>
                  drums | web

                  Comment


                  • #10
                    Can you try one more time, Richard?

                    Thanks.

                    Comment


                    • #11
                      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…
                      drums | web

                      Comment


                      • #12
                        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>

                        Comment


                        • #13
                          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!||||

                          Comment


                          • #14
                            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 ---<

                            Comment


                            • #15
                              Thanks guys. Great tutorial site.

                              Comment

                              Working...
                              X