Scrollbars and Elements - HTML/CSS - javascript

I have a little problem.
I tried to create a social-media plattform - everything is well working.
But this is anoying me: I want to create an area, where the post are. If there more then 3 you have to scoll with you mouse. The scrollbars are not in the correct place.
Here the wrong design (But "correct" technic):
Here it is more clearer and simplier to controll.
My Imagination was: The Posts-Area should be scrolled.
My CSS:
* {
box-sizing:border-box;
}
a {
text-decoration:none;
color:#FFF;
}
a:hover {
color:#F5F5F5;
}
body {
margin:0px;
width:100%;
height:100%;
background-color:#99cc99;
font-family:'Open Sans';
overflow-y: scroll;
}
.website {
position:absolute;
left:50%;
margin-left:-540px;
width:1080px;
height:100%;
background-color:#99cc99;
border-collapse: separate;
}
#menu {
position:fixed;
top:0px;
width:1080px;
height:50px;
background-color:#6dbd6c;
}
#partition-horizontal {
height:0px;
background-color:#99cc99;
}
#content {
width:100%;
height:auto;
background-color:transparent;
}
#left-top {
width:330px;
height:50px;
border-bottom:2px solid #437C42;
}
#partition1 {
background-color:#6dbd6c;
width:10px;
height:50px;
border-bottom:2px solid #437C42;
}
#right-top {
width:770px;
border-bottom:2px solid #437C42;
height:50px;
}
#right-top .menu {
position:relative;
float:left;
}
#right-top .menu a {
height:100%;
width:auto;
padding-top:15px;
padding-bottom:15px;
padding-left:15px;
padding-right:15px;
}
#right-top .menu a:hover {
background-color:rgba(0,0,0,0.15);
color:#fff;
}
#right-top .menu a:first-child {
margin-left:-0px;
}
#left-bottom {
clear:both;
width:330px;
height:auto;
background-color:#fff;
}
#right-bottom {
clear:both;
width:770px;
overflow:auto;
}
#partition2 {
background-color:#99cc99;
width:10px;
}
#left-bottom-area {
padding:;
width:100%;
height:851px;
clear:both;
}
#right-bottom-area {
padding:;
width:100%;
min-height:887px;
height:auto;
clear:both;
}
#right-bottom-area #poster {
width:100%;
height:300px;
background-color:#FFF;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin-bottom:10px;
}
#right-bottom-area #real-content {
width:100%;
height:auto;
background-color:#FFFFFF;
border-top-right-radius:3px;
border-top-left-radius:3px;
color:#111111;
overflow:hidden;
}
#real-content p {
width:100%;
height:200px;
background-color:#FFFFFF;
border-bottom:1px solid #99cc99;
padding:15px;
margin-top:0px;
margin-bottom:0px;
}
#real-content p:hover {
background-color:rgba(0,0,0,0.02);
}
#real-content p:last-child {
border-bottom:none;
}
My HTML/PHP:
<?php
$links = $_SERVER['REQUEST_URI'];
preg_match("/[^\/]+$/", $links, $matches);
$link = $matches[0];
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>box6</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./design.css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="./resources/scripts/js/main.js"></script>
</head>
<body>
<table class="website" cellspacing="0">
<tr id="menu">
<th id="left-top"></th>
<td id="partition1"></td>
<th id="right-top">
<div class="menu">
Home
Friends
Gallery
Settings
</div>
</th>
</tr>
<tr id="partition-horizontal"></tr>
<tr id="content">
<td id="left-bottom">
<div id="left-bottom-area"></div>
</td>
<td id="partition2"></td>
<td id="right-bottom">
<div id="right-bottom-area">
<?php
if($link == "me"){
?>
<div id="poster">
</div>
<div id="real-content" full-site="false">
<?php
//HERE IS THE POSTS-AREA
for ($i = 0; $i < 10; $i++) {
echo "<p>".$i."</p>";
}
?>
</div>
<?php
}else {
?>
<div id="real-content" full-site="true" style="border-radius:0px;">
</div>
<?php
}
?>
</div>
</td>
</tr>
</table>
</body>
</html>

Lots of issues with your code.
I suggest not using tables but divs for your layout. Tables should generally only be used to display tabular data.
Also, there are a lot of issues with your overflows and there shouldn't be any absolute positionning.
Finally, I recommend you use the CSS calc() function for your widths and heights. It's supported by IE9.
height: calc(100% - 30px);
Here's kinda how I would do it (might need some additional modifications):
http://codepen.io/jlowcs/pen/dPKKdB
HTML:
<div class="website" cellspacing="0">
<div id="menu">
<div id="left-top"></div
><div id="partition1"></div
><div id="right-top">
<div class="menu">
Home
Friends
Gallery
Settings
</div>
</div>
</div>
<div id="partition-horizontal"></div>
<div id="content">
<div id="left-bottom">
<div id="left-bottom-area"></div>
</div
><div id="partition2"></div
><div id="right-bottom">
<div id="right-bottom-area">
<div id="poster">
</div>
<div id="real-content" full-site="false">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</div>
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
}
* {
box-sizing:border-box;
}
a {
text-decoration:none;
color:#FFF;
}
a:hover {
color:#F5F5F5;
}
body {
margin:0px;
width:100%;
height:100%;
background-color:#99cc99;
font-family:'Open Sans';
}
.website {
margin: auto;
width:1080px;
height:100%;
background-color:#99cc99;
border-collapse: separate;
}
#menu {
width:1080px;
height:50px;
background-color:#6dbd6c;
}
#menu > * {
display: inline-block;
}
#partition-horizontal {
height:0px;
background-color:#99cc99;
}
#content {
overflow: hidden; /* FIXED */
height: calc(100% - 50px); /* FIXED */
width: 100%;
background-color:transparent;
}
#left-top {
width:330px;
height:50px;
border-bottom:2px solid #437C42;
}
#partition1 {
background-color:#6dbd6c;
width:10px;
height:50px;
border-bottom:2px solid #437C42;
}
#right-top {
width: calc(100% - 330px - 10px);
border-bottom:2px solid #437C42;
height:50px;
}
#right-top .menu {
height:100%;
position:relative;
float:left;
}
#right-top .menu a {
line-height: 48px;
padding-left:15px;
padding-right:15px;
}
#right-top .menu a:hover {
background-color:rgba(0,0,0,0.15);
color:#fff;
}
#right-top .menu a:first-child {
margin-left:-0px;
}
#content > * {
display: inline-block;
vertical-align: top;
}
#left-bottom {
width: 330px;
height: 100%;
background-color: #fff;
}
#partition2 {
background-color: #99cc99;
width: 10px;
height: 100%;
}
#left-bottom-area {
overflow: auto;
width:100%;
}
#right-bottom {
width: calc(100% - 330px - 10px);
height: 100%;
}
#right-bottom-area {
height: 100%;
}
#right-bottom-area #poster {
height:300px;
background-color:#FFF;
border-bottom-right-radius:3px;
border-bottom-left-radius:3px;
margin-bottom:10px;
}
#right-bottom-area #real-content {
width: 100%;
height: calc(100% - 300px - 10px);
background-color:#FFFFFF;
border-top-right-radius:3px;
border-top-left-radius:3px;
color:#111111;
overflow:auto; /* FIXED */
}
#real-content p {
width:100%;
height:200px;
background-color:#FFFFFF;
border-bottom:1px solid #99cc99;
padding:15px;
margin-top:0px;
margin-bottom:0px;
}
#real-content p:hover {
background-color:rgba(0,0,0,0.02);
}
#real-content p:last-child {
border-bottom:none;
}

Related

how to pass the dynamic image url to other function

I am trying to pass the path of image to onclick event. I am taking the image from folder dynamically. Now,I have to pass the path of image. I have tried, but I am not getting expected results. Please give me any advice.
My code:
<div class="col-md-2">
<div class="img-responsive">
<img id="prod" src="<?php echo base_url('uploads/store/'.$data->img);?>" style="height:350px;width:200px;display:none;" alt="Fjords">
</div>
My HTML & JS
<style type="text/css">
.button
{
width: 150px;
padding: 10px;
background-color: #FF8C00;
box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
font-weight:bold;
text-decoration:none;
}
#cover{
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
z-index:5;
width:100%;
height:100%;
display:none;
}
#loginScreen
{
height:380px;
width:340px;
margin:0 auto;
position:relative;
z-index:10;
display:none;
background: url(//here i have to pass above mentioned path src of image) no-repeat;
border:5px solid #cccccc;
border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
display:block;
opacity:2;
}
.cancel
{
display:block;
position:absolute;
top:3px;
right:2px;
background:rgb(245,245,245);
color:black;
height:30px;
width:35px;
font-size:30px;
text-decoration:none;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div align="center">
<br><br><br><br>
Click here to Log In
</div>
<div id="loginScreen">
×
</div>
<div id="cover" >
</div>
</body>
</html>

Automatically add new number page

$('button').click(function(){
$('.content').append('<div class="Box"></div>')
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
Hello,
I have one question about javascript I think. How add automatically new number page after added 5 boxes in <.content> e.g. like 1 2 3...10. I think it should create new with current page number after prpend fifth grey box, but I don't know how I can do it.
I will be grateful for any advices
Try this.
$('button').click(function(){
if ($('.content .Box').length == 5) {
$('.content .Box').remove();
var number = parseInt($('.numberPage span').text()) + 1;
$('.numberPage span').html(number);
}
$('.content').append('<div class="Box"></div>')
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
$('button').click(function(){
//chek if content height is biger than the sum of box heiht inclding the nmpage height and magin
if($('.content').height()>(($('.Box').height()+10)*($('.Box').length+1))){
$('.content').append('<div class="Box"></div>');
}else{
var currentPage=parseInt($('.numberPage .active').html());
PagesFiled[currentPage]=true;
currentPage++;
$('.numberPage .active').removeClass('active');
$('.numberPage').append('<span class="active">'+currentPage+'</span>');
//clear boxes and add in next page
$('.content').empty();
$('.content').append('<div class="Box"></div>');
}
});
var PagesFiled={};
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
display:flex;
width:20px;
height:20px;
position:relative;
top:-30px;
right: -7px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
.numberPage .active{
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span class='active'>1</span>
</div>
</div>
<button>Add new box</button>
try this one. adding the current page no. + 1 on every button click.
$('button').click(function(){
var counter = $('.numberPage span').text();
$('.content').append('<div class="Box"></div>');
if($('.content .Box').length == 6){
$('.content .Box').remove();
counter = parseInt(counter) + 1;
$('.numberPage span').text(counter);
}
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>
You can use following code for this
$('button').click(function(){
$('.content').append('<div class="Box"></div>')
$('.numberPage').append('<span>'+($('.numberPage span').length + 1 )+'</span>')
});
Try this solution
t = 0;
$('button').click(function(){
$('.content').append('<div class="Box"></div>');
t++;
if (t%5 === 0) {
$('.wrap').append('<div class="numberPage"><span>'+t+'</span></div>');
}
});
.wrap
{
position:relative;
}
.content
{
width:200px;
height:330px;
border:1px solid #000;
position:relative;
}
.Box
{
width:180px;
height:50px;
background-color:grey;
position:relative;
left:50%;
margin-left:-90px;
margin-top:5px;
top:5px;
}
.numberPage
{
width:20px;
height:20px;
border:1px solid #666;
position:relative;
top:-30px;
left:170px;
}
.numberPage span
{
margin-left:5px;
margin-top:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="content">
<div class="Box">
</div>
</div>
<div class="numberPage">
<span>1</span>
</div>
</div>
<button>Add new box</button>

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;
}

Make a div to fill the rest of the available screen height

I have this structure:
I would like to make content2's min-height = height of screen - height of other divs.
With the HTML/CSS below, the outcome is greater than the screen height. So How can I do what I wanted? The copyright part (footer) is inside the content2, so I want to make the content2's height to be exact in the screen.
body {
margin:0;
border:0;
background-color:#24373B;
color: #fff;
}
#headerBG {
min-width:980px;
background-color:#000;
}
#header {
width:980px;
}
#content1 {
width:980px;
}
#content2 {
width:960px;
padding:10px;
margin-top:30px;
background-color:#355258;
min-height:100hv;
}
<body>
<div id="headerBG">
<div id="header">header</div>
</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
</body>
You are using 100hv instead of 100vh as min height. Fixed:
#content2{
width:960px;
padding:10px;
margin-top:30px;
background-color:#355258;
min-height: calc(100vh - 50px);
}
But before you use vw or vh, you should define:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
}
You don't have to use viewport units (vw, vh). You could simply do it with CSS table layout as follows. The height of the pink area will expand and fill out all the free space automatically.
http://jsfiddle.net/qtu89zhm/
html, body {
height: 100%;
margin: 0;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
.box {
width: 500px;
margin: 0 auto;
}
.content-2 .cell, .content-2 .box {
height: 100%;
}
.header .cell {
background: gray;
}
.header .box {
background: teal;
}
.content-1 .box {
background: gold;
}
.content-2 .box {
background: pink;
}
<div class="table">
<div class="row header">
<div class="cell">
<div class="box">header</div>
</div>
</div>
<div class="row content-1">
<div class="cell">
<div class="box">content1</div>
</div>
</div>
<div class="row content-2">
<div class="cell">
<div class="box">content2</div>
</div>
</div>
</div>
If I understand your question correctly...
body{
margin:0;
border:0;
background-color:#555555;
height:100vh;
width:100vw;
}
#headerBG{
min-width:980px;
background-color:#AAAAAA;
height:10%;
}
#header{
width:980px;
height:100%;
width:10%;
background-color:#FFF;
}
#content1{
width:980px;
height:40%;
background-color:#000000;
margin-left:5%;
width:90%;
}
#content2{
margin-top:30px;
background-color:#FFFFFF;
margin-left:5%;
width:90%;
height:50%;
}
<body>
<div id="headerBG">
<div id="header">
</div>
</div>
<div id="content1">
</div>
<div id="content2">
</div>
</body>

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

Categories

Resources