Develop Reference

Trying to understand the CSS controlling a section of a website [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So i've forked a section on another website and I've looked through all the CSS and js and tried to recreate it on my website. I've been at it for an hour and i still can't figure out what's missing.
My question is what is the easiest way to find out what CSS is controlling a certain section?
Also what is missing from the CSS in my fiddle which is the reason my version of the html looks different to the one on the website mentioned above (you will have to scroll down on the website mentioned above to reach the section i'm trying to recreate).
Here is my fiddle of where I'm at https://jsfiddle.net/hLkyLqyd/
CSS:
.grab-section{
background-color:#fff;
width:100%;
overflow:hidden;
position:relative;
}
.grab-section .holder{
width:1104px;
margin:0 auto;
overflow:hidden;
padding:83px 0 123px;
}
.grab-section h2{
text-align:center;
font-size:58px;
line-height:70px;
margin:0 0 19px;
color:#2b3e51;
}
.grab-section .intro{
display:block;
font-weight:normal;
color:#bdc3c7;
text-align:center;
margin:0 0 67px;
}
.license-list{
margin:0 0 41px;
overflow:hidden;
text-align:center;
list-style: none;
}
.license-list li{
float:left;
width:50%;
}
.license-list span{
display:block;
padding:16px 10px 18px;
background:#ecf0f1;
border-radius:0 5px 5px 0;
color:#9fa6ac;
font-size:18px;
line-height:24px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list span:hover{
text-decoration:none;
cursor:pointer;
background:#f9f9f9;
}
.license-list li:first-child span{border-radius:5px 0 0 5px;}
.license-list strong{
display:block;
font-size:24px;
line-height:28px;
margin:0 0 4px;
color:#2c3e50;
font-weight:600;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}
.license-list .active span{
box-shadow:inset 0 2px 0 0 rgba(0,0,0,0.2);
background:#1abc9c;
color:#dff3ed;
cursor:default;
}
.license-list .active span strong{color:#fff;}
.grab-section .boxes{
width:100%;
overflow:hidden;
text-align:center;
color:#bdc3c7;
}
.grab-section .box{
width:312px;
position:relative;
padding:26px 17px 39px 18px;
border:3px solid #ebedee;
border-radius:5px;
float:left;
margin:0 0 0 22px;
}
.grab-section .box.bndl:before{
position:absolute;
right:-5px;
top:20px;
content:'';
background:url(../images/sprite.png) no-repeat -180px 0;
width:65px;
height:41px;
}
.grab-section .boxes .box:first-child{margin:0;}
.grab-section .box h3{
font-size:22px;
line-height:28px;
color:#2c3e50;
margin:0 0 8px;
opacity:0.95;
}
.grab-section .box .title{
display:block;
font-weight:normal;
font-size:18px;
line-height:24px;
color:#bdc3c9;
padding:0 0 27px;
margin:0 0 20px;
border-bottom:2px solid #ecf0f1;
}
.grab-section .box .list{margin:0 0 29px;}
.grab-section .box .list strong{color:#7f8c8d;}
.grab-section .box .btn{
display:inline-block;
vertical-align:top;
width:190px;
color:#fff;
font-size:17px;
line-height:21px;
font-weight:bold;
background:#1abc9c;
border-radius:3px;
padding:11px 0 12px 0;
font-weight:500;
border-bottom: 2px solid #16a085;
}
.grab-section .box .btn:hover {
text-decoration:none;
opacity:0.8
}
.grab-section .box .btn:active {
opacity:1;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
#media screen and (max-width: 1108px){
.grab-section .intro,
.license-list{
padding:0 !important;
margin:0 !important;
}
.grab-section .holder {
margin:0 2% !important;
}
.grab-section .box{
width: 27%;
padding: 26px 1.7% 32px;
margin: 0 0 0 3%;
}
.grab-section .box .title{
padding:0 0 10px;
margin:0 0 10px;
opacity:0.9;
}
.grab-section .box.bndl:before { background:none;}
.grab-section .box .list {font-size:16px;}
.grab-section .box .list{margin:0 0 10px;}
}
#media screen and (max-width: 768px){
.grab-section .intro,
.license-list
{margin:0 0 15px;}
.grab-section .box{
float:none;
display:block;
overflow:hidden;
width:auto;
margin:0 0 30px !important;
}
.grab-section .box .title{
font-size:14px;
line-height:16px;
opacity:0.9;
}
.grab-section .box.bndl:before{top:-8px;}
.grab-section .box .bndl { display:none}
}
HTML:
<script type='text/javascript' src='http://designmodo.com/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<section class="grab-section" id="buy">
<div class="holder">
<h2>Ready to grab this Sweety?</h2>
<strong class="intro">These are probably the best prices ever offered.</strong>
<ul class="license-list">
<li class="active">
<span class="per-lic">
<strong>Personal License</strong>
For Personal Projects (from $39)
</span>
</li>
<li>
<span class="dev-lic">
<strong>Developers License</strong>
For Business Projects (from $149)
</span>
</li>
</ul>
<div class="boxes developer hidden">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector-Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $249
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $149
</div>
</div>
<div class="boxes personal">
<div class="box">
<h3>Flat UI PSD</h3>
<strong class="title">For Designers</strong>
<ul class="list">
<li><strong>Photoshop 5.5+</strong> PSD File</li>
<li><strong>Organized</strong> Layers and Folders</li>
<li><strong>Vector Based</strong> Graphics</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
<div class="box bndl">
<h3>Flat UI PSD & HTML</h3>
<strong class="title">For Professional Front-Enders</strong>
<ul class="list">
<li>Features from <strong>PSD&HTML</strong></li>
<li><strong>Smart Way</strong> to Use Kit</li>
<li><strong>Low Price</strong> Deal</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $69
</div>
<div class="box">
<h3>Flat UI HTML</h3>
<strong class="title">For Coders</strong>
<ul class="list">
<li><strong>Bootstrap-Based</strong> Layout</li>
<li><strong>Retina Ready</strong> Icons & Graphics</li>
<li><strong>Responsive</strong> Layout</li>
<li><strong>Documentation</strong></li>
<li><strong>Free Fonts</strong></li>
</ul>
Buy for $39
</div>
</div>
</div>
</section>
<script type="text/javascript">
jQuery('.license-list li span').click(function(){
if (jQuery(this).parent().attr('class') != 'active'){
jQuery('.license-list li.active').removeClass('active');
jQuery(this).parent().addClass('active');
jQuery('.boxes.developer').slideToggle(300);
jQuery('.boxes.personal').slideToggle(300);
jQuery('.boxes.personal').before( jQuery('.boxes.developer') );
}
});
</script>
help will be appreciated
Thanks in advance

Try using the devtools of a browser such as Chrome to select the element. There should be a pane, usually on the right side, that shows you the CSS rules applied.

just right-click on the element you want to know the css or js controlling it and select Inspect Element.
FIRST EDIT
Alternatively, saving a page locally downloads all the css and js used by the page. Then, you can just copy the css styles from the downloaded folder.

Creating A Responsive Menu with HTML, CSS & jQuery

I'm making a responsive menu following this guide http://demos.inspirationalpixels.com/responsive-menu/ everything's working fine when the width is less than 980px, the menu (the three dash) is showing but not opening.
What am I doing wrong? Can anyone tell me?
It's not working on my website:
Here's my HTML Code
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body {
margin: 0;
padding: 0;
background-image: url("img-bg-mobile.jpg");
background-repeat: no-repeat;
font-family: open sans;
}
.toggle-nav {
display: none;
}
#media screen and (min-width: 1000px) {
nav {
height: auto;
width:auto;
margin-left:17%;
}
nav ul{
list-style: none;
margin:0px;
padding:0px;
}
nav ul li {
float: left;
margin: 2%;
}
nav ul li a{
transition:all linear 0.15s;
text-decoration: none;
font-family: open sans;
color: white;
font-size: 1.5em;
text-align: center;
}
nav ul li a:hover {
color: black;
}
nav ul li ul {
display: none;
}
nav ul li ul a {
color: #ff3c1f;
}
nav ul li:hover ul
{
display:block;
height:auto;
width: 110px;
position:absolute;
margin:0;
}
}
#media screen and (max-width: 980px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul.active {
display:none;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
font-size:20px;
transition:color linear 0.15s;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
article {
clear: both;
font-family: open sans;
font-size: 1em;
}
article p {
color: white;
margin-left: 10%;
margin-right: 10%;
}
footer {
color: white;
margin-left: 10%;
margin-right: 10%;
}
.arrow {
font-size: 11px;
margin-left: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Yoo Free Recharge App That gives talktime for trying out cool appps">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1" maximum-scale=2.0">
<title>Yoo Get Free Recharge</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- header start from here-->
<header>
<nav class="menu">
<ul class="active">
<li class=logo>
<img class=yoologo src="yoosmall.png" title="Yoo Get Free Recharge">
</li>
<li class="mainmenu">
HOME
</li>
<li class="mainmenu">
ADVERTISE
</li>
<li id="mainmenu" class="sub-menu">
WHO WE ARE<span class="arrow">▼</span>
<ul>
<li>About Us</li>
<li>Vision</li>
<li>Team</li>
</ul>
</li>
<li class="mainmenu">
PRICING
</li>
<li class="mainmenu">
CONTACT
</li>
</ul>
<a class="toggle-nav" href="#">&#9776</a>
</nav>
</header>
<article>
<p>Yoo Free Recharge App - Yoo is an app that gives free recharge/talktime for trying out new and cool apps you can also refer your friends and get money for that too you can get upto 125Rs. Per Friend Download Now</p>
</article>
<footer>
<div style="font-family:'open sans';" > © Yoo Infotech. All right reserved. </div>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

You left this out of your css
#media screen and (max-width: 980px) {
....
.menu ul {
width: 100%;
position: absolute;
top: 120%;
left: 0px;
padding: 10px 18px;
box-shadow: 0px 1px 1px rgba(0,0,0,0.15);
border-radius: 3px;
background: #303030;
}
...
}

You can use some framework like bootstrap or material design
http://getbootstrap.com/components/#navbar-default
http://www.getmdl.io/components/index.html#layout-section

I followed this tutorial and made my responsive header menu
Here it is

How can i make these tabs Responsive

When I open the site on a mobile then last tab merge with others tabs, and last tab will have a linebreak.
But I am not expert in media Query in CSS3. How do I apply this code, if there is some other way then mine give your best solution regarding my issue.
I don't want to use Bootstrap because my website consists of custom designing in html and css.
document.getElementById('content_4').style.display = 'none';
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById(new_tab).className = 'activy';
}
function tabSwitch_2(activy, number, tab_prefix, content_prefix) {
for (var i=1; i < number+1; i++) {
document.getElementById(content_prefix+i).style.display = 'none';
document.getElementById(tab_prefix+i).className = '';
}
document.getElementById(content_prefix+activy).style.display = 'block';
document.getElementById(tab_prefix+activy).className = 'activy';
}
#tabbed_box {
margin: 0px auto 0px auto;
width:300px;
}
.tabbed_box h4 {
font-family:Arial, Helvetica, sans-serif;
font-size:23px;
color:#ffffff;
letter-spacing:-1px;
margin-bottom:10px;
}
.tabbed_box h4 small {
color:#e3e9ec;
font-weight:normal;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
position:relative;
top:-4px;
left:6px;
letter-spacing:0px;
}
ul.tabs {
margin:0px; padding:0px;
text-align: center;
}
ul.tabs li {
list-style:none;
display:inline;
}
ul.tabs li a {
background-color:#F7F7F7;
color:black;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
border:1px solid #F4FBFF;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 1px 2px #ccc; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 1px 1px 2px 1px #ccc; /* Firefox 3.5 - 3.6 */
box-shadow: 1px 1px 2px 1px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
ul.tabs li a:hover {
background-color:#3498DB;
color:#fff;
border-color:#3498DB;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
ul.tabs li a.activy {
background-color:#3498DB;
color:#fff;
border:1px solid #3498DB;
}
.content {
background-color:#fff;
padding:10px;
}
#content_2, #content_3 { display:none; }
ul.tabs {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li:last-child {
border-bottom:none;
}
ul.tabs li a {
background-image:url(images/tab_off.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<br>
<ul class="tabs">
<li>Text</li>
<li>Email</li>
<li>Facebook</li>
<li>Social Media</li>
</ul>
<div id="content_1" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-0011.png"/ style="float:left; width:320px; height:250px; ">
<p style="float:left; text-align:center; font-style:italic; padding-top:80px; padding-left:30px; font-size:20px;"><b>"Nothing delivers<br/> your message <br/> like a text message."</b></p>
</div>
<div id="content_2" class="content greybg">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-002.png"/ style="float:left; margin-right:30px; width:250px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;"><i>How effective is email?</i></p>
<p style="font-style:italic;font-weight:bold;">Spam filters and an overwhelmed inbox means only 1 out of 5 emails are opened. And, of those only 1 out of 7 generates a response. </p>
</p>
</div>
<div id="content_3" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-003.png"/ style="float:left; margin-right:30px; width:260px; height:220px; margin-bottom:30px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:5px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>How about Facebook?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Facebook lost its immediacy years ago. Organic reach has dropped to less than 2% which means you have to pay-to-play to reach more fans and at Facebook's pace.</p>
</p>
</div>
<div id="content_4" class="content">
<img src="http://www.reputationbeast.com/wp-content/uploads/2015/05/Image-004.png"/ style="float:left; margin-right:70px;width:220px; height:180px; margin-top:30px; margin-bottom:40px;">
<p style="float:left; text-align:center; font-style:italic; padding-left:8px;">
<p style="margin-left:20px; font-size:20px; font-weight:bold;color:#2072bf; margin-top:30px;" ><i>...and other Social Media?</i></p>
<p style="margin-left:20px;font-style:italic;font-weight:bold;">Twitter, Google+, Instagram, Pinterest, and every other Social Media site controls access to your fans, most offer a pay option. The best option - your own Text lists.</p>
</p>
</div>
</div>
</div>

Add display: inline-block; for ul.tabs li a this will help
See fiddle : http://jsfiddle.net/sachinkk/1b2m3rsq/

How to put container div under menu using CSS

I have a problem, how can i make container div to be under menu, when i put container background it go beside a header and menu... Could someone help me to fix my problem?
My HTML and CSS bellow...
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Рено Клуб Македонија - Добредојдовте</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="web">
<div id="header">
<div class="logo">
<img src="images/logo.png" alt="Logo"/>
</div> <!-- logo end -->
<div class="menu">
<ul>
<li class="active">Почетна</li>
<li>Форум</li>
<li>Клуб</li>
<li>Членство</li>
<li>Галерија</li>
<li>Огласник</li>
<li>Контакт</li>
</ul> <!-- main menu end -->
</div>
</div> <!-- header end -->
<div class="container">
<p id="petrol">Превземено од Макпетрол *цените се изразени во денари / литар </p>
</div>
</div><!-- web end -->
#charset "utf-8";
body {
margin:0;
padding:0;
width:960px;
background:#e2e2e2;
}
a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}
a:hover {
text-decoration:none;
color:#a6a5a5;
}
a:active {
text-decoration:none;
color:#ecd302;
}
.web {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
background-repeat:no-repeat;
display:block;
margin:auto;
padding:0px;
height:110px;
background:#ecd302;
position:absolute;
top:0;
left:0;
right:0;
}
.logo {
background-repeat:no-repeat;
width:305px;
height:85px;
float:left;
margin:10px 0 0 202px;
}
.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
position:absolute;
top:105px;
left:0;
right:0;
}
ul {
}
li {
display:inline;
}
.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;
}
If my question is not understood please contact me... i will give more information.

Note, that using position: absolute stops an element from taking up any space, which is why other elements come to that position. The result is multiple elements being at the same place, which is what you mostly don't want. So only use position: absolute, when really necessary.
I removed position: absolute from #header and .menu. Now you also don't need top, left and right anymore.
You also don't need to define the width of the body, since it is already defined for .web. Additionally, I removed some styles from .logo and #header to get the result shown in the screenshot.
Updated Code:
http://jsfiddle.net/azq50bsd/5/
body {
margin:0;
padding:0;
background:#e2e2e2;
}
a {
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px #000000;
}
a:hover {
text-decoration:none;
color:#a6a5a5;
}
a:active {
text-decoration:none;
color:#ecd302;
}
.web {
width:960px;
margin-left:auto;
margin-right:auto;
}
#header {
background:#ecd302;
}
.logo {
background-repeat:no-repeat;
width:305px;
height:85px;
margin:10px;
}
.menu {
background:#4b4b4b;
text-transform:uppercase;
word-spacing:32px;
font-size:20px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:1px solid #000;
border-top: 1px solid #000;
display:block;
}
ul {
}
li {
display:inline;
}
.container {
background:#929191;
left:0px;
right:0px;
text-align:right;
width: 960px;
font-size:12px;
}

web page displays abnormally on google-chrome

The photo slideshow can't display on google-chrome, but it looks perfect on firefox. The code is here:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxxxxxx</title>
<meta name="keywords" content="xxxxxxxxx" />
<meta name="description" content="xxxxxxx, New York" />
<link rel="shortcut icon" href="css/favicon.ico">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link type="text/css" rel="stylesheet" href="css/tn3e/tn3e.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tn3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var tn1 = $('.mygallery').tn3({
skinDir:"css",
autoplay:true,
width:768,
delay:5000,
skin:"tn3e",
imageClick:"url",
image:{
crop:true,
transitions:[{
type:"blinds",
duration:300
},
{
type:"grid",
duration:160,
gridX:9,
gridY:7,
easing:"easeInCubic",
sort:"circle"
},{
type:"slide",
duration:430,
easing:"easeInOutExpo"
}]
}
});
});
</script>
</head>
<body>
<figure class="logo">
<img src="css/vbccr.jpg" alt="logo" />
</figure>'
<div class="nav_example">
<div class="menu">
<span>'
<ul id="nav">
<li>主页<br />Home
<div class="subs">
<div>
<ul>
<li><h3>关于我们<br />About Us</h3>
<ul>'
<li>陈述</li>
<li>历史沿革</li>
<li>联系我们</li>
</ul>
</li>
<li><h3>冯师<br />Feng</h3>
<ul>'
<li>简介</li>
<li>寄语</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li>主拜<br />Sunday
<div class="subs">
<div class="wrp2">
<ul>'
<li><h3>时间地点<br />Time & Location</h3></li>
<li><h3>师道<br />Sermons</h3>
<ul>'
<li>2012</li>
<li>2011</li>
<li>2010</li>
<li>2009</li>
<li>2008</li>
</ul>
</li>
</ul>
<p class="sep"></p>
<ul>
<li><h3>人学<br />School</h3>
<ul>'
<li>新班</li>
<li>门班</li>
</ul>
</li>
</ul>
</div>
</div>
</li>
</ul>
</span>
</div>
</div>
<script type="text/javascript">
jQuery(window).load(function() {
$("#nav > li > a").click(function () { // binding onclick
if ($(this).parent().hasClass('selected')) {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
} else {
$("#nav .selected div div").slideUp(100); // hiding popups
$("#nav .selected").removeClass("selected");
if ($(this).next(".subs").length) {
$(this).parent().addClass("selected"); // display popup
$(this).next(".subs").children().slideDown(200);
}
}
});
});
</script>
<!-- This is gallery setting -->
<div class="mygallery">
<div class="tn3 album">
<h4>Large Images</h4>
<div class="tn3 description">Large Images</div>
<div class="tn3 thumb">images/114x72/3.jpg</div>
<ol>
<li>
<h4>Hdfae</h4>
<div class="tn3 description">daa</div>
<img src="images/114x72/1.jpg" alt="demo" />
</li>
<li>
<h4>Isolated</h4>
<div class="tn3 description">island</div>
<img src="images/114x72/2.jpg" alt="demo" />
</li>
<li>
<h4>Town</h4>
<div class="tn3 description">Herceg</div>
<img src="images/114x72/3.jpg" alt="demo" />
</li>
</ol>
</div>
<div class="tn3 album">
<h4>Fixed</h4>
<div class="tn3 description">Images</div>
<div class="tn3 thumb">images/114x72/1.jpg</div>
<ol>
<li>
<h4>Wall</h4>
<div class="tn3 description">Jai</div>
<img src="images/114x72/6.jpg" alt="demo" />
</li>
<li>
<h4>City</h4>
<div class="tn3 description">Ne</div>
<img src="images/114x72/7.jpg" alt="demo" />
</li>
</ol>
</div>
</div>
</body>
</html>
tn3e.css:
#charset "utf-8";
.tn3e-gallery {
position:relative;
width: 960px;
height: 550px;
background-color:#c5c5c5;
background-image: url('grad.jpg');
background-position:center center;
background-repeat:no-repeat;
line-height: normal;
}
.tn3e-image {
position:absolute;
left: 20px;
top: 20px;
width: 920px;
height: 360px;
background-color: #000000;
}
/*
.tn3e-full-image {
box-shadow: 0 0 5px rgba(40, 40, 40, 1);
-webkit-box-shadow: 0 0 5px rgba(40, 40, 40, 1);
-moz-box-shadow: 0 0 5px rgba(40, 40, 40, 1);
}
*/
.tn3e-control-bar {
position:absolute;
background: url('bg.png') repeat;
width:243px;
height:80px;
}
.tn3e-thumbs ul, .tn3e-thumbs li {
margin: 0;
}
.tn3e-thumbs {
position:absolute;
width:920px;
height:80px;
bottom:20px;
left:20px;
background-image: url('thumb_bg.png');
background-repeat:repeat-x;
padding-top:2px;
}
.tn3e-thumb {
padding: 2px;
cursor:pointer;
}
.tn3e-thumb-selected {
cursor:default;
}
.tn3e-thumb img {
width: 114px;
height:72px;
}
.tn3e-next {
position:absolute;
background-image:url('tn3e.png');
background-position:-20px -3px;
width: 13px;
height: 17px;
right:33px;
bottom:126px;
cursor:pointer;
}
.tn3e-next:hover {
background-position:-20px -23px;
}
.tn3e-prev {
position:absolute;
background-image:url('tn3e.png');
background-position:-2px -3px;
width: 13px;
height: 17px;
left:30px;
bottom:126px;
cursor:pointer;
}
.tn3e-prev:hover {
background-position:-2px -23px;
}
.tn3e-preloader {
position:absolute;
width: 22px;
height: 8px;
right:5px;
top:5px;
}
.tn3e-text {
position: absolute;
left: 64px;
bottom: 110px;
width: 832px;
height: 40px;
vertical-align:middle;
overflow: hidden;
}
.tn3e-image-title {
font-family: Tahoma, Helvetica, sans-serif;
color:#3f4146;
font-size:12px;
width:100%;
text-align:center;
font-weight:bold;
}
.tn3e-image-description {
font-family: Tahoma, Helvetica, sans-serif;
color:#3f4146;
width:100%;
text-align:center;
font-size:10px;
}
.tn3e-timer {
position:absolute;
width: 100%;
height: 4px;
bottom: 0px;
background: url('bg.png') repeat;
background: rgba(0, 0, 0, 0.3);
}
.tn3e-play {
position:absolute;
background-image:url('tn3e.png');
background-position:-2px -80px;
left:94px;
top:12px;
width:57px;
height:57px;
cursor:pointer;
}
.tn3e-play:hover {
background-position:-64px -80px;
}
.tn3e-play-active {
background-position:-2px -139px;
}
.tn3e-play-active:hover {
background-position:-64px -139px;
}
.tn3e-show-albums {
position:absolute;
background-image:url('tn3e.png');
background-position:-35px -39px;
top:22px;
left:23px;
width:37px;
height:36px;
padding:0;
margin:0;
cursor:pointer;
}
.tn3e-show-albums:hover {
background-position:-76px -39px;
}
.tn3e-fullscreen {
position:absolute;
background-image:url('tn3e.png');
background-position:-35px -1px;
top:22px;
right:23px;
width:37px;
height:36px;
cursor:pointer;
}
.tn3e-fullscreen:hover {
background-position:-76px -1px;
}
.tn3e-albums {
position:absolute;
width: 920px;
height: 510px;
left:20px;
top:20px;
font-family: Arial, Helvetica, sans-serif;
color:#ffffff;
background-image:url('bg.png');
background: rgba(0, 0, 0, 0.8);
}
.tn3e-albums h4 {
position: absolute;
margin-top: 1.33em;
font-weight: bold;
left: 34px;
top: 10px;
font-size: 18px;
color: #c7c8c9;
}
.tn3e-inalbums {
position:absolute;
top: 80px;
width: 920px;
height: 350px;
padding: 20px;
}
.tn3e-album {
position:absolute;
width: 420px;
height: 66px;
background-color:#111111;
overflow: hidden;
cursor:pointer;
font-size: medium;
}
.tn3e-album-over {
background-color:#222;
}
.tn3e-album-selected {
background-color:#cdcdcd;
color:#111214;
cursor:default;
}
.tn3e-album-image {
height: 100%;
margin-right: 1em;
overflow:hidden;
float: left;
}
.tn3e-album-title {
font-size:13px;
font-weight:bold;
margin-top: 1em;
}
.tn3e-album-description {
font-size:0.6em;
height: 3em;
line-height: 1.6em;
overflow: hidden;
}
.tn3e-albums-next {
position:absolute;
background-image:url('tn3e.png');
background-position:-217px -1px;
width: 97px;
height: 37px;
right:20px;
bottom:20px;
cursor:default;
}
.tn3e-albums-next-over {
background-position:-217px -40px;
cursor:pointer;
}
.tn3e-albums-prev {
position:absolute;
background-image:url('tn3e.png');
background-position:-117px -1px;
width: 97px;
height: 37px;
left:20px;
bottom:20px;
cursor:default;
}
.tn3e-albums-prev-over {
background-position:-117px -40px;
cursor:pointer;
}
.tn3e-albums-close {
position:absolute;
background-image:url('tn3e.png');
background-position:-125px -80px;
width: 27px;
height: 27px;
right:31px;
top:30px;
cursor:pointer;
}
.tn3e-albums-close:hover {
background-position:-155px -80px;
}
/* when javascript is disabled */
.tn3.album, .tn3.album li {
float:left;
list-style-type: none;
margin:4px;
}
.tn3.album div, .tn3.album li h4, .tn3.album li div{
display:none;
}
style.css:
body {
background:white;
margin:0px auto;
padding:0;
width: 768px;
color:#eee;
font-size:medium;
font-family:Tahoma,Arial,Verdana,sans-serif;
}
.logo {
padding:inherit;
margin:inherit;
}
.logo > img {
width: 768px;
display:block;
}
.nav_example {
background:url(navigation_bar.gif) no-repeat;
width:100%;
height:60px;
margin:inherit;
/* border:1px #000 solid; */
/* border-radius:3px; */
/* -moz-border-radius:3px; */
/* -webkit-border-radius:3px; */
}
/* main menu styles */
.menu {
padding-top:9px;
text-align:center;
width:100%;
}
.menu > span {
display:inline-block;
margin:10 auto;
}
#nav {
display:inline;
text-align:center;
/* text-align:left; */
position:relative;
list-style-type:none;
}
#nav > li {
float:left;
padding:0;
position:relative;
}
#nav > li > a {
/* border:1px solid transparent; */
color:#eee;
display:block;
font-size:1.05em;
padding:3px 10px;
position:relative;
text-decoration:none;
}
#nav > li > a:hover {
color:#fefefe;
background-color:#d10e15;
/* border-color:#999 */
}
#nav > li.selected > a {
background-color:#d10e15;
color:#fefefe;
z-index:0;
}
#nav li div {
position:relative;
}
#nav li div div {
background-color:#1a1a1a;
display:none;
font-size:1em;
margin:0;
padding:0;
position:absolute;
top:5px;
z-index:1;
width:200px;
}
#nav li div div.wrp2 {
width:400px;
}
#nav .sep {
left:200px;
border-left:1px solid #2a2a2a;
bottom:0;
height:auto;
margin:15px 0;
position:absolute;
top:0;
width:1px;
}
#nav li div ul {
padding-left:5px;
padding-right:5px;
position:relative;
width:190px;
float:left;
list-style-type:none;
}
#nav li div ul li {
margin:0;
padding:0;
}
#nav li div ul li h3 {
border-bottom:1px solid #3a3a3a;
color:#1da0ff;
font-weight:bold;
font-size:0.95em;
margin:8px 0px;
padding:3px 0px;
}
#nav li div ul li h3 a {
color:#1da0ff;
display:block;
text-decoration:none;
}
#nav li div ul li h3 a:hover{
background-color:#d10e15;
color:#fefefe;
}
#nav li ul ul {
padding:0 0 8px;
}
#nav li ul ul li {
margin:0;
padding:0;
}
#nav li ul ul li a {
color:#eee;
display:block;
margin-bottom:1px;
padding:3px 5px;
text-decoration:none;
font-size:0.95em;
}
#nav li ul ul li a:hover{
background-color:#d10e15;
color:#fefefe;
}
The jquery.min.js is the latest from google. And jquery.tn3.min.js is from:
/*!
* tn3 v1.1.0.28
* http://tn3gallery.com/
*
* License
* http://tn3gallery.com/license
*
* Date: 29 Jul, 2011 16:21:54 +0300
*/
And by the way, the favicon can't show in google-chrome either, but successfully in firefox. Does anyone have any idea?

try using a css reset http://meyerweb.com/eric/tools/css/reset/, if you provide more information on how the page is behaving would be better