Solved

Problem with TAB

Posted on 2014-09-11
7
157 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 80

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 80

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html fieldset fix its height and width 4 33
Sending an input value from a view to a controller in MVC 3 23
Name Space error VS2015 1 27
VS 2017 18 57
This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

820 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