Navigation - transparent, horizontale center, difficult with Subnavigation - javascript

i would create this Navigation.
i have try some things with css and js.
but it works not on every browser and i think the code is dirty.
the driangle of the navigation-hover is center of the length. the transparent driangle is lay under the blue driangle and the body of the Subnavigation (or undernavigation) is flexible in width.
have you some ideas to create this navigation clean? and possibly without JS?
i hope you can help me. i have spend so much hours and it does nt correct work.
yours, yellow
$( ".active" ).mouseover(function() {
var xbreite = this.offsetWidth;
//Breite von nav-sub
var ybreite = this.nextElementSibling.offsetWidth;
var zbreite = ybreite - xbreite;
var xb = xbreite/2;
xb = xb - 23;
var zb = ybreite - xb;
xb = xb+"px";
zb = zb+"px";
// console.log(this.nextElementSibling.firstElementChild.firstElementChild);
//div rest -> aber bekomme kein element und style unter gebracht
var rest = this.nextElementSibling.firstElementChild.firstElementChild;
rest.style.width=xb;
var eck = this.nextElementSibling.firstElementChild.lastElementChild;
eck.style.width=zb;
//Subnav sichtbar machen
// this.nextElementSibling.style.top='59px';
this.nextElementSibling.style.visibility='visible';
});
//Subnavi schließen
$( ".nav-sub" ).mouseleave(function() {
var navsubs = $('.nav-sub');
var subsCount = $(navsubs).length;
for( hilf = 0; hilf < subsCount; hilf++){
//navsubs[hilf].style.top='-9999999px';
navsubs[hilf].style.visibility='hidden';}
});
.bcg{
position:absolute;
z-index:2;
}
.header{
position:fixed;
height:84px;
z-index:10;
background-color:#579dd3;
opacity: 0.75;
width:100%;
z-index: 100;
}
.logo{
float:left;
padding-left:1.875em;
padding-top:0.938em;
}
.nav{
float:left;
}
/* Navigation Primär */
.nav-prim{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
position:absolute;
right:1.64em;
bottom: -1.2em;
font-size:17px;
text-transform:uppercase;
z-index:999;
}
/* Dreieck Navigation Primär */
.nav-prim ul li a {
position: relative;
}
.nav-prim ul li a:hover::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/*Aktiver Link */
.nav-prim .active{
position: relative;
}
.nav-prim .active::after{
background-image: url("http://mattgelb.canopus.uberspace.de/nav_active.png");
bottom: -12px;
content: "";
display: block;
height: 32px;
position: absolute;
width: 65px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
/* Ende Dreieck Navigation Primär */
.nav-prim ul li{
float:left;
list-style:none;
padding-left:0.7em;
padding-right:0.7em;
/* position: relative; */
}
.nav-prim ul li:last-child{
padding-right:0;
}
.nav-prim ul li a{
text-decoration:none;
color:white;
height:56px;
display:block;
}
/* Subnavigation */
.nav-sub{
position:absolute;
color:blue;
padding:0;
margin:0;
z-index:11111;
visibility:hidden;
top: 59px;
/*
display:none;*/
}
.nav-sub li{
clear:both;
padding:0 !important;
margin:0;
background-color:white;
width:100%;
}
.nav-sub li:first-child{
background-color:transparent;
padding:0;
margin:0;
}
.nav-sub .eck{
background-image:url('http://mattgelb.canopus.uberspace.de/nav_bg_active.png');
background-repeat:no-repeat;
height:25px;
float:left;
}
.nav-sub .rest{
background-color:white;
height:25px;
width:30%;float:left;
}
.nav-sub a{
color:blue !important;
text-transform:none;
}
.nav-sub a:hover{
color:red !important;
background-image:none !important;
}
.nav-sub a:hover::after{
border:0 !important;
background-image:none !important;
}
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<img class="bcg" src="http://www.jessicajonesdesign.com/downloads/lines-wallpaper-orange.gif">
<div class="header">
<div class="logo">
<img width="60" src="https://davidwalsh.name/demo/codepenLogo.png">
</div>
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"></div>
<div class="eck"></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
</div>

Hi You can use something like this
The HTML
<div class="nav">
<div class="nav-prim">
<ul>
<li>
<a class="active" href="#">Tätigkeitsbereiche</a>
<ul class="nav-sub">
<li>
<div class="rest">
<div class="eck"></div>
</div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Leistungen
</li>
<li>
Projekte
</li>
<li>
<a class="active" href="#">Fähigkeiten</a>
<ul class="nav-sub">
<li>
<div class="rest"><div class="eck"></div></div>
</li>
<li>Seite 1</li>
<li>Coperate dsfsdfsdf Events blubb blieeee</li>
</ul>
</li>
<li>
Aktuelles
</li>
</ul>
</div>
</div>
And some css
body
{
background-color : #eeeeee;
}
div.nav ul
{
list-style-type : none;
}
div.nav ul li
{
font-family: Arial, Haettenschweiler, "Arial Narrow Bold", sans-serif;
color:black;
float: left;
padding: 10px;
vertical-align: middle;
text-transform:uppercase;
position : relative;
background-color : #0000ff;
}
div.nav a
{
color:black;
}
div.nav li ul
{
display: none;
position : absolute;
top : 100%;
left : -40px;
padding-top : 5px;
}
div.nav li:hover ul
{
display: block;
position: absolute;
z-index: 999;
}
div.nav li:hover li
{
float:none;
padding: 0;
text-align:left;
}
div.nav li:hover li a
{
min-width: 150px;
display:block;
}
.rest {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #eeeeee;
margin-left : 10px;
position : relative;
}
.eck {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0000ff;
margin-left : 10px;
position : absolute;
top : -25px;
left : -30px;
z-index : 999;
}
You can also view the fiddle here https://jsfiddle.net/x8x2L93u/

Related

Link does not stay open and active

i have created a navigation that navigates back and forth between sections. I have styled two lists that are supposed to fulfill this task.
List: the active link works there as soon as I click a link. The text and the point are unfortunately upside down. When I change the order, the list name / Nav remains in the visible area
List: there the point and the name are arranged correctly but the active link cannot be combined somehow.
In both examples, the active link does not remain open. I've been trying it out for a long time and I'm a bit overwhelmed.
$('#menu li a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
#import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
#import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}
.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}
.main-menu {
background:rgba(255,255,255,.5);
border-right:1px solid #e5e5e5;
position:fixed;
top:0;
bottom:0;
height:100%;
right:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
a:hover,a:focus {
text-decoration:none;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#999;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
#font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
.active{
background-color:#f30;
}
section {
height: 100vh;
color: rgba(255,255,255, .5);
font-size: 20vh;
}
section:nth-child(odd) {
background: blue
}
section:nth-child(even) {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="nav" class="area"></div><nav class="main-menu">
<ul id="menu">
<li class="active">
<a href="#slide01" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 1
</span>
</a>
</li>
<li class="has-subnav">
<a href="#slide02" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 2
</span>
</a>
</li>
<li class="has-subnav">
<a href="#slide03" style="text-align:right">
<i class="fa fa fa-circle fa-2x"></i>
<span class="nav-text">
Nav 3
</span>
</a>
</ul>
</nav>
<section id="slide01">Section 1</section>
<section id="slide02">Section 2 </section>
<section id="slide03">Section 3</section>
</body>
</html>
h2 {
text-align: center;
font-size: 3em !important;
}
#nav {
position: fixed;
height: 100%;
right: 0;
z-index: 1;
top: 0;
background: rgba(255, 255, 255, .5);
padding: 5px;
box-shadow: 0 0 6px #555;
}
.list-group-item {
background-color: rgba(0,0,0,0) !important;
border: none !important;
font-size: 2em;
}
.list-group-item a, .list-group-item a:hover {
color: #fff;
text-decoration: none;
}
.inner {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.inner a, .inner a:hover {
color: #fff;
text-decoration: none;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
section {
height: 100vh;
color: rgba(255,255,255, .5);
font-size: 20vh;
}
section:nth-child(odd) {
background: blue
}
section:nth-child(even) {
background: red
}
.test {
padding: 0 15px !important;
}
.test:hover .later {
display: block;
text-align: right;
}
.test:hover .before {
display: none;
}
.test .later {
display: none;
z-index: 100;
}
.test .before {
display: block;
z-index: 50;
text-align: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section id="slide01">Section 1</section>
<section id="slide02">Section 2 </section>
<section id="slide03">Section 3</section>
<section id="slide04">Section 4</section>
<section id="slide05">Section 5</section>
<nav id="nav">
<div class="inner">
<ul class="list-group">
<li class="list-group-item"><a href="#slide01">
<div class="test"><span class="before"> •</span><span class="later">Nav 1 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide02">
<div class="test"><span class="before"> •</span><span class="later">Nav 2 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide03">
<div class="test"><span class="before"> •</span><span class="later">Nav 3 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide04">
<div class="test"><span class="before"> •</span><span class="later">Nav 4 •</span></a></div>
</li>
<li class="list-group-item"><a href="#slide05">
<div class="test"><span class="before"> •</span><span class="later">Nav 5 •</span></a></div>
</li>
</ul>
</div>
</nav>
-> Active status
The second example does not have an element with ID "menu," so your JavaScript isn't targeting anything. For the second example specifically:
Change your jQuery to
$('.list-group-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
This will properly apply the "active" class to your list-group-item when clicked.
However, the other issue is that ".active" won't do anything right now because you are overriding Bootstrap's built-in styles with this rule:
.list-group-item {
background-color: rgba(0,0,0,0) !important;
border: none !important;
font-size: 2em;
}
The !important on background-color is keeping the color the same even when ".active" is applied.
Instead of using !important, you could increase the specificity of your rule by writing it like so:
.list-group .list-group-item {
background-color: rgba(0,0,0,0);
border: none !important;
font-size: 2em;
}
However I'm not sure what you mean by "In both examples, the active link does not remain open." Your ".active" class currently only applies a background color to the active link (both in the way you've written it in example 1 and the way Bootstrap styles it in example 2) and this is what we fixed with the code above. If you want more styling applied to the active link, it will need to be added.

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 remove a gap between a slider image and a simple sidebar when opened?

I am using a simple sidebar for a menu, along with a slider.
The slider and the sidebar are functioning properly until I click
the cursor to open the sidebar navigation. The site is here:
http://newlifecorpus.com/demo/example.html
As you can see a gap occurs between the slider image and the sidebar.
How can I fix this? I am having a difficult time debugging this.
Please help.
HTML:
<html>
<body>
<div id="main-wrapper">
<div>
<!--start-->
<div id='ninja-slider'>
<ul>
<li><a data-image="images/test2.jpg"
href="http://www.menucool.com/responsive-slider">
<h3>The responsive image slider-1</h3></a></li>
<li><div data-image="images/test3.jpg"><h3>test this</h3></div>
</li>
<li><div data-image="images/test4.jpg">
<h3>Mobile friendly / Touch-enabled-3</h3></div></li>
</ul>
</div>
<!--end-->
</div>
</div><!-- end main wrapper-->
<---according to author, top bar and side bar logic must be
outside of main wrapper -->
<div id="top-bar">
<div id="menu-icon" class="menu-right">
</div>
</div>
<div id="sidebar">
<nav>
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
</ul>
<ul>
<li> Item 6 </li>
<li> Item 7 </li>
<li> Item 8 </li>
<li> Item 8 </li>
<li> Item 10 </li>
</ul>
</nav>
</div>
</body>
</html>
CSS:
#ninja-slider
{
width:100%;
margin:0 auto; /*center aligned*/
background:#222;
}
#ninja-slider > ul
{
padding:0;
margin:0;
}
/* slide */
#ninja-slider li > div, #ninja-slider li > a
{
/*max-width:960px;*/
margin:0 auto; /* center each slide */
/*border-radius:6px;
background:#333;*/
position: relative;
display:block;
box-shadow: 0 1px 5px rgba(0,0,0,.8),
inset 0 0 1px rgba(255,255,255,.4);
transition:none!important;
}
/* loading image indicator */
#ninja-slider div.preload
{
background: black url(images/loading.gif) no-repeat center 25%;
}
/*----- video -----*/
#ninja-slider a.video
{
position:absolute;
border:0;top:0;left:0;
width:100%;height:100%;
background:transparent url(images/video.png) no-repeat 50% 50%;
transition:none!important;
}
/*------ pager ------*/
/* The pager id should be: slider id + "-pager" */
#ninja-slider-pager
{
display:none;
}
/* --------- navigation controls ------- */
/* The nav id should be: slider id + ("-prev", "-next", and
"-pause-play") */
#ninja-slider-prev, #ninja-slider-next
{
position: absolute;
width:70px;
height:140px;
line-height:140px;
top: 50%;
margin-top:-70px;
display:inline-block;
background-image: url(images/navs.png);
background-repeat:no-repeat;
background-color:rgba(0,0,0,0.0);
transition:width 0.5s, background-color 1s;
color:white;
overflow:hidden;
opacity:0.4;
font-size:14px;
}
#ninja-slider-prev {
left: 0;
border-radius:0 5px 5px 0;
background-position:0 0;
}
#ninja-slider-next {
right: 0;
border-radius:5px 0 0 5px;
background-position:100% -140px;
}
#ninja-slider-prev:hover,
#ninja-slider-next:hover {
width:110px;background-color:rgba(0,0,0,0.5);cursor:pointer;}
/*pagination within the prev/next buttons*/
#ninja-slider-prev div {margin-left:74px;white-space:nowrap;}
#ninja-slider-next div {float:right;margin-right:74px;
white-space:nowrap;}
#ninja-slider-pause-play { display:none;}
/* Other settings
-------------------------------------------- */
#ninja-slider h2 {
position:absolute;font-size:100px;width:100%;
font-family:"Helvetica Neue", Helvetica, Arial;
font-weight:bold;top:20%;text-align:center;color:#FFF;
}
#ninja-slider h3 {
position:absolute;font-size:50px;width:100%;
font-family:"Helvetica Neue",Helvetica, Arial;
font-weight:lighter;top:20%;text-align:center;color:#FFF;
padding-top:140px;
}
/*styles for mobile*/
#media only screen and (max-width: 900px) {
#ninja-slider h2 {
top:22%;
font-size:40px;
}
#ninja-slider h3 {
top:22%;
font-size:20px;
padding-top:60px;
}
}
/* Usually you don't need to change the following settings
---------------------------------------------------------- */
#ninja-slider > ul
{
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000px;
backface-visibility: hidden;
perspective: 1000px;
-webkit-tap-highlight-color: transparent;
}
#ninja-slider-pager, #ninja-slider-prev, #ninja-slider-next,
#ninja-slider-pause-play
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#ninja-slider
{
position: relative;
overflow: hidden;
/*visibility: hidden;*/
padding:0;
}
#ninja-slider > ul
{
overflow: hidden;
position: relative;
list-style:none;
margin:0;
}
#ninja-slider > ul > li
{
float: left;
width: 100%;
position: relative;
list-style:none;
padding:0;margin:0;
}

How to center text in my div

I need to center the text in the div, but I have no idea how to. If someone could please help me, that would be absolutely wonderful.
CSS
#nav {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
float: left;
}
#nav li:hover {
opacity: .6;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li> </li>
<li>Soundcloud</li>
<li> </li>
<li>Facebook</li>
<li> </li>
<li>Contact</li>
</ul>
I have make a little fiddle you can see...
http://jsfiddle.net/Azzamean/fjnuw/67/
HTML:
<div id="menu">
<header>
<ul>
<li>Home
</li>
<li>Sound Cloud
</li>
<li>Facebook
</li>
<li>Contact
</li>
</ul>
</header>
</div>
And the CSS:
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link, a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#FFFFFF;
color:#E80000;
}
li {
display:inline-block;
}
#menu {
background-color:#E80000;
text-align:center;
}
Use the text-align property:
#nav li {
list-style: none;
float: left;
text-align:center;
}
But note that you are using float:left, so unless you set a width, you won't actually see any centering.
Here's a jsFiddle demo

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