Solved

Problem with TAB

Posted on 2014-09-11
7
150 Views
Last Modified: 2014-09-12
Hi,
Using these codes
    <style type="text/css">
        .body {background-color:#BBAEBF;font-family: 'Segoe UI';} 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_act
        {
        width: 36px;
        height: 30px;
        font-weight:bold;
        }    
        .lb_log{
        top: 30px;
        left: 1185px;
        width: 36px;
        height: 30px;
        font-size:large;
        font-weight:bold;
        }    
        .left {
         position:absolute;
         left:10px;
         border:Groove 1px #ccc;
         width:55px;
         right:10px;
        }

        .right {
         position:absolute;
         left:60px;
         border:none 1px #c00;
         width:65%;
        }
        .topnav{ margin: 102px auto;
        width: 70%;}
    </style> 
    ...
    <div style="background-color:green; position: fixed;left: 0;top: 0; width: 100%; height:100px">
        <div style="position: fixed; left: 0; right: 0; width: 91%; height:80px; margin:auto;">
            <div style="position:absolute; width: 100px; top:5px; height: 30px; background-color: green; right: 0%;">
            <table width="100%">
                    <tr>
                        <td align="right" >
                            <asp:LinkButton ID="lb_act" 
                               Text = "Test1"
                               CssClass="lb_act"
                               Font-Names="Times New Roman" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_act_Click"
                               runat="server"/>
                               &nbsp;|&nbsp; 
                            <asp:LinkButton ID="lb_ite_acc" 
                                Text = "Test2"
                               CssClass="lb_log" 
                               Font-Names="Arial" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_log_Click" 
                               runat="server"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="background-color:white; position: fixed; left: 0; right: 0; top: 10px; width: 63%; height:67px; margin:auto;">
            </div>
            <div class="topnav">
                <ul>
                    <li><a href="#" class="active">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                    <li><a href="#">Test 4</a></li>
                </ul>    
            </div>
        </div>
    </div>

Open in new window

I don't know why nothing happens, when I click the TABs there, or when mouse is hovering the TABs.
0
Comment
Question by:HuaMinChen
  • 4
  • 2
7 Comments
 
LVL 78

Accepted Solution

by:
David Johnson, CD, MVP earned 500 total points
ID: 40316431
http://screencast.com/t/v3E4EvWl  The tabs change with mouse over for me
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40316507
Did you use my codes and have you got no problem at all in there? Thanks a lot.
0
 
LVL 78

Expert Comment

by:David Johnson, CD, MVP
ID: 40316528
I copied and pasted your code into an empty webpage and the screencast is the results that I got
http://problemwithtab.azurewebsites.net/
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 10

Author Comment

by:HuaMinChen
ID: 40316553
Sorry, I don't know why nothing happens when the mouse is hovering the TAB, within Chrome and IE.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40316555
When running the page having the above codes.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 40316653
please provide a link to your page
if your code work somewhere else, we need to see your page
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 40318426
Thanks. I did not deploy it to outside yet and it has been deployed on the local server. Here is the whole project.

<%@ Page Title="Test" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="App5._Default" ValidateRequest="false" %>

<!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 runat="server">
    <meta http-equiv="Refresh" content="120" />
	<title>Test</title>
    <style type="text/css">
        .body {background-color:#BBAEBF;font-family: 'Segoe UI';} 
        ul {border-bottom:2px solid #757575; margin:0px; padding:0px; }
        ul li { display: inline-block;  }
        ul li a { display:block; padding:5px 10px 5px 10px; text-decoration:none; color:#333; }

        ul li a:hover {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .active {
            background-color: #757575; color:#fff;
            border-top-left-radius:7px;
            border-top-right-radius:7px;
        }
        .lb_act
        {
        width: 36px;
        height: 30px;
        font-weight:bold;
        }    
        .lb_log{
        top: 30px;
        left: 1185px;
        width: 36px;
        height: 30px;
        font-size:large;
        font-weight:bold;
        }    
        .left {
         position:absolute;
         left:10px;
         border:Groove 1px #ccc;
         width:55px;
         right:10px;
        }

        .right {
         position:absolute;
         left:60px;
         border:none 1px #c00;
         width:65%;
        }
        img.background {
            position: absolute;
            z-index: -1;
            width: 100%;
            top: 0;
            left: 0;
        }
        #wowslider-container1 .ws_images{
	        position: relative;
	        left:0;
	        top:0;
	        width:100%;
	        height:100%;
	        overflow:hidden;
        }
        ul.imagesList {
             display: block;
             list-style-type: none;
             margin: 0;
             padding: 0;
             overflow: hidden;
         }
         ul.imagesList li {
             display: block;
             position: relative;
             float: left;
             width: 17%;
             height: 237px;
             box-sizing: border-box;
             padding: 3px;
             margin: 0;
    
         }
         ul.imagesList .imagesList-item-frame {
             border: solid 1px #dcdcdc;
             position: absolute;
             padding: 3px;
             top: 3px;
             right: 3px;
             bottom: 3px;
             left: 3px;
         }
         ul.imagesList li img {
             width: 100%;
             height: 140px;
         }
         ul.imagesList li .legend {
             width: 100%;
             margin: 3px 3px 0 3px;
         }
         .shadow {
             -moz-box-shadow: 0 0 5px #888;
             -webkit-box-shadow: 0 0 5px#888;
             box-shadow: 0 0 5px #888;
         }
        .dia {
        display:none;
        }
        .content {
            position: relative;
            width: 1220px;
            height: 780px;
            color:  #fff; /* Text color for content div. */
        }
        #wrapper {width: 1180px; margin-left: auto; margin-right: auto;}
        .topnav{ margin: 102px auto;
        width: 70%;}
    </style> 
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
        $('#first').hover(function () {
            // show the class first element
            $('.first').show();
        });

        $('#second').hover(function () {
            // show the class second element
            $('.second').show();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="background-color:#8E6ACC; position: fixed;left: 0;top: 0; width: 100%; height:100px">
        <div style="position: fixed; left: 0; right: 0; width: 91%; height:80px; margin:auto;">
            <div style="position:absolute; width: 100px; top:5px; height: 30px; background-color: #8E6ACC; right: 0%;">
            <table width="100%">
                    <tr>
                        <td align="right" >
                            <asp:LinkButton ID="lb_act" 
                               Text = "Test1"
                               CssClass="lb_act"
                               Font-Names="Times New Roman" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_act_Click"
                               runat="server"/>
                               &nbsp;|&nbsp; 
                            <asp:LinkButton ID="lb_ite_acc" 
                                Text = "Test2"
                               CssClass="lb_log" 
                               Font-Names="Arial" 
                               Font-Bold="true"
                               Font-Size="10pt" 
                               ForeColor="White"
                               OnClick="lb_log_Click" 
                               runat="server"/>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="background-color:white; position: fixed; left: 0; right: 0; top: 10px; width: 63%; height:67px; margin:auto;">
            </div>
            <div class="topnav">
                <ul>
                    <li><a href="#" class="active">Test 1</a></li>
                    <li><a href="#">Test 2</a></li>
                    <li><a href="#">Test 3</a></li>
                    <li><a href="#">Test 4</a></li>
                </ul>    
            </div>
        </div>
    </div>
    <div class="content" id="wrapper" >
        <table width="100%">
            <tr>
                <td>
                    <asp:Image ID="img1" ImageUrl="~/../pict/ID-10028343.jpg" CssClass="background" Height="780px" Width="1220px" runat="server"/>
                </td>
            </tr>
        </table>
    </div>
    <br />
    </form>
</body>
</html>

using System;
using System.IO;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections.Generic;
using System.Globalization;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
using System.Data.OleDb;
using System.Xml;
using System.Windows;
using System.Drawing;
using System.Text;
using System.Security.Cryptography.X509Certificates;
using System.Net;
using System.Web.UI.HtmlControls;
using System.Net.Security;

namespace App5
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
        protected void lb_reg_Click(object sender, EventArgs e)
        {

        }
        protected void lb_log_Click(object sender, EventArgs e)
        {

        }
    }
}

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now