Solved

Problem with TAB

Posted on 2014-09-11
7
153 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Poster Video HTML 5 Scale to fit video 3 37
Connection String 16 43
form button worked now it doesnt anymore 9 41
Not seen Link button 5 15
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

911 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

22 Experts available now in Live!

Get 1:1 Help Now