Create an arrow-bar in HTML/CSS/JS - javascript

I am trying to create a progress arrow-bar which looks like similar to the image above. I started with a bar of columns (four col-sm-4) and do not know where to go from there.


I made (inspired by this post) a div with the shape you want:
.container{
width: 100%;
position: relative;
display: flex;
flex-direction: row;
}
.v-div {
width: 0;
height: 0;
border-bottom: 40px solid transparent;
border-top: 40px solid transparent;
border-left: 25px solid #f00;
}
.box{
height: 80px;
width: 320px;
background: red;
}
<div class="container">
<div class="box">
</div>
<div class="v-div">
</div>
</div>
Have a few of them overlap and you should be good to go!


A solution with :before and :after
.arrow {
font-size: 0;
}
.inner-arrow {
width:210px;
height:80px;
display: inline-block;
background-color:green;
text-align:center;
font-size:20px;
font-weight:bold;
line-height:80px;
vertical-align: middle;
}
.arrow:before,
.arrow:after {
content:'';
display: inline-block;
width:0;
height:0;
border:40px solid transparent;
vertical-align: middle;
}
.arrow:before {
border-top-color: green;
border-bottom-color: green;
border-right-color: green;
}
.arrow:after {
border-left-color: green;
}
<div class="arrow">
<div class="inner-arrow">Next step</div>
</div>


For someone else stumbling onto this post and looking for something slighly different.
This is another solution that looks good
Using: transform, border and box-shadow - along with a little creative positioning and size adjustments
.locbar {
border-radius:5px;
border:1px solid #ccc;
background-color:#fff;
height:35px;
padding-left:10px;
}
.item {
float:left;
display:inline-block;
line-height:35px;
padding-left:5px;
font-family:Arial;
}
.arrow {
float:left;
position:relative;
transform:rotate(-45deg) skew(-15deg, -15deg);
display:inline-block;
box-shadow:1px 1px 3px 0px rgba(0,0,0,0.15);
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
width:19px;
height:19px;
top:8px;
left:-8px;
}
<div class='locbar'>
<div class='item'>
Products
</div>
<div class='arrow'></div>
<div class='item'>
Electronics
</div>
<div class='arrow'></div>
<div class='item'>
LED Televisions
</div>
</div>


You can achieve this by using css pseudo elements :before and after.
Check the below snippet:
ul{
padding:0;
list-style-type: none;
border:1px solid #ccc;
}
ul:before,ul:after{
content:"";
display:table;
}
ul:after{
clear:both;
}
ul li {
display: inline-block;
width: 25%;
float: left;
text-align: center;
text-transform: uppercase;
font-size: 10px;
font-family: sans-serif;
}
ul li.active {
background: forestgreen;
color: #fff;
}
ul li a {
padding: 0 12px;
height: 40px;
line-height: 40px;
position: relative;
display: block;
}
ul li.active a:before,ul li.active a:after{
content: "";
position: absolute;
border-style: solid;
border-color: transparent transparent transparent white;
border-width: 20px;
left: 0px;
}
ul li.active a:after{
content: "";
right: -40px;
left: auto;
border-color: transparent transparent transparent forestgreen;
}
ul li.active a {
padding-left: 30px;
}
<ul>
<li><a>job post</a></li>
<li class="active"><a>invite</a></li>
<li><a>review</a></li>
<li><a>hire</a></li>
</ul>

Related

How to display clicked item from sidebar to first position and remaining list get hidden and on hover show the list

I want sidebar menu in such a way that when I click on clients option it should remove from its position
And display to the first position and remaining menu list get hidden and show when hover on "<" icon, so how to do this using CSS and jQuery actually I don't have that much idea about front-end part.
<html>
<head>
<style>
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
</style>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<script>
$(".main-menu li").click(function () {
$('li', $(this).closest('ul')).not(this).hide();
});
</scrip>
</body>
</html>
Expected output:
when clicking on clients option it should remove and show the first option and remaining option list get hidden like this but should show on mouse hover
Above image to show remaining options in hidden and on hover show list
Now list should be on hover

Try This
I updated some css and Jquery Functions
Is It Perfect As Per Your Requirement ?
$(document).on('click','.sidenav a',function(){
$('.sidebar').show('slow');
$('.sidenav').append($('.topnav')[0].innerHTML);
$('.topnav').empty();
$('.topnav').append($(this)[0].outerHTML)
$('.sidenav a').hide();
$(this).remove()
});
$('.sidebar').hover(function(){
$('.sidenav a').show('slow');
$(this).hide('slow')
});
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
color:#2196F3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 30px;
}
.sidebar{
height:20px;
background:red;
color:#fff;
position:relative;
width:5px;
text-align:center;
line-height:40px;
}
.sidebar:after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border:10px solid transparent;
border-left: 5px solid red;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav"></div>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<br/>
<div class="sidebar" style="display:none"></div>

$(".sidenav>a").click(function () {
$(this).siblings('a').not(this).hide();
});
$(".sidenav").find('div').hover(function(){
$('a').css("display","block");
})
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px;
font-size: 28px;
padding: 0px 10px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
<div> < </div>
</div>
</body>
</html>

Try Following Whis includes the Css Slider
$('.sidenav a').click(function(){
$('.sidenav a').not(this).hide();
$('.sidebar').show('slow');
});
$('.sidebar').hover(function(){
$('.sidenav a').show('slow');
$(this).hide('slow')
});
.sidebar{
height:20px;
background:red;
color:#fff;
position:relative;
width:5px;
text-align:center;
line-height:40px;
}
.sidebar:after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border:10px solid transparent;
border-left: 5px solid red;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<br/>
<div class="sidebar" style="display:none"></div>

How to change active link color in navigation bar

Just like this http://www.w3schools.com/html/default.asp "HTML HOME" button color is green because that's the active link.
So how to do the same on my website?
My HTML code:
<!-- Website fixed header-->
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website"><div class="hoverwebsite">Website Name</div></button>
<div class="dropdown-content website" style="left:0;">
</div>
</div>
My CSS:
/* Top header orange color */
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;
}
/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
}
.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;
}
.dropdown-content.website {
display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}
.dropdown.website:hover .dropdown-content {
display: block;
}
.dropdown.website:hover .dropbtn.website {
background-color: #4CAF50;
}
.hoverwebsite {
color: #f2f2f2;
font-weight:bold;
}
a:active {
background-color: yellow;
}
</style>
Here is my JSFiddle. Let me know if you need more details.

Add class="active" in the anchor tag which you want to keep active
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;
}
/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;
}
.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;
}
.dropdown-content.website {
display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}
.dropdown.website:hover .dropdown-content {
display: block;
}
.dropdown.website:hover .dropbtn.website {
background-color: #4CAF50;
height:38px;
}
.hoverwebsite {
color: #f2f2f2;
font-weight:bold;
}
a{
height:38px;
display:block;
padding-top:16px;}
a.active {
background-color: #4CAF50;
color: #f2f2f2;
}
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website">Website Name</button>
<div class="dropdown-content website" style="left:0;">
</div>
</div>
</div>
EDIT 1:
Have this js code in the page where you want anchor tag to remain active. I have removed active class from anchor tag in html code. Have script reference to jquery library too.
JS:
$(document).ready(function() {
$('#website').addClass('active');
});
EDIT 2:
You possibly can't deal with margins in button, make button position absolute instead of fixed and align them using top, left, right, bottom css properties
.dropbtn.website {
top:0px;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;
position:absolute;
left:10px;
width:150px;
}
.dropdown.website {
Top:43px;
position: fixed;
display: inline-block;
margin-right:10px;
}
Codepen
Use this css to see how it can be aligned.
EDIT 3:
Use this in your index file
<script>
$(document).ready(function() {
$('#website').addClass('active');
if($('#website2').hasClass('active'))
$('#website2').removeClass('active');
});
</script>
and this script in your yooo.html file
<script>
$(document).ready(function() {
if($('#website').hasClass('active'))
$('#website').removeClass('active');
$('#website2').addClass('active');
});
</script>
Also check the updated html i have changed the id of second anchor tag to website2

Hide the bottom border of a selected Tab in HTML

I have a horizontal HTML tab , where i wish to make the bottom border of the selected tab hidden.
Here is the current code i have - https://jsfiddle.net/vgx2k7p5/
The question has been asked here and here
But both the solutions are not working , since i'm using a div structure and no much javascript.
jQuery('.tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery(currentAttrValue).show().siblings().hide(); //changed here
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
.tabs {
width: 90%;
margin: auto;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
margin: 0px;
}
.tab-links li {
margin: 0px 3px;
float: left;
list-style: none;
}
.tab-links a {
padding: 9px 15px;
display: inline-block;
border-radius: 3px 3px 0px 0px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #999;
transition: all linear 0.2s;
border: 1px solid #fff;
}
.tab-links a:hover {
text-decoration: none;
/*background: #f1f1f1;*/
/*border-bottom: 4px solid #999; */
}
li.active a,
li.active a:hover {
/* border-bottom: 4px solid #444; */
/*background: #ccc;*/
border: 1px solid #ccc;
border-bottom: 1px solid #fff;
color: #444;
}
/*----- Content of Tabs -----*/
.tab-content {
padding: 15px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
min-height: 300px;
z-index: -99;
}
.tab {
display: none;
min-height: 300px;
}
.tab.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs margintop20">
<ul class="tab-links">
<li class="active">PROFILE
</li>
<li>REVIEWS
</li>
<li>REWARDS
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active clearfix">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
<h3>Videos and Screenshots</h3>
</div>
</div>
</div>
</div>
What am i doing wrong here ? Both setting the Z-index and increasing the border-bottom width did not work.

I have updated your css with that :
/* ADDED */
.tab-links .active{
margin-top : 1px;
}
.active > a {
margin-bottom: -1px;
}
And now it seems to be working !
jQuery('.tab-links a').on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
jQuery(currentAttrValue).show().siblings().hide(); //changed here
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
.tabs {
width: 90%;
margin: auto;
}
/*----- Tab Links -----*/
/* Clearfix */
.tab-links:after {
display: block;
clear: both;
content: '';
}
.tab-links {
margin: 0px;
}
.tab-links li {
margin: 0px 3px;
float: left;
list-style: none;
}
.tab-links a {
padding: 9px 15px;
display: inline-block;
border-radius: 3px 3px 0px 0px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #999;
transition: all linear 0.2s;
border: 1px solid #fff;
}
.tab-links a:hover {
text-decoration: none;
/*background: #f1f1f1;*/
/*border-bottom: 4px solid #999; */
}
li.active a,
li.active a:hover {
/* border-bottom: 4px solid #444; */
/*background: #ccc;*/
border: 1px solid #ccc;
border-bottom: 1px solid #fff;
color: #444;
}
/*----- Content of Tabs -----*/
.tab-content {
padding: 15px;
border-radius: 3px;
border: 1px solid #ccc;
background: #fff;
min-height: 300px;
z-index: -99;
}
.tab {
display: none;
min-height: 300px;
}
.tab.active {
display: block;
}
/* ADDED */
.tab-links .active{
margin-top : 1px;
}
.active > a {
margin-bottom: -1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tabs margintop20">
<ul class="tab-links">
<li class="active">PROFILE
</li>
<li>REVIEWS
</li>
<li>REWARDS
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active clearfix">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
<h3>Videos and Screenshots</h3>
</div>
</div>
</div>
</div>

navigation on media cant get 100% width

My navigation cant get a full width on media, I tried every way and cant locate where my mistake is, so I attached you the code, please if any one have an idea how to solve this, and set the width to full width = 100%?
The HTML
<nav class="navi" id="target">
<div class="menu" id="header">
<li><a class="link-1" href="#">home</a></li>
<li><a class="link-1" href="#">second</a></li>
<li><a class="link-1" href="#">third</a></li>
<div class="logo">
<li><img alt="Brand" src="logo.png" height="40px" width="60px"><li>
</div>
</div>
<div class="handle"><p>menu</p></div>
</nav>
The CSS:
nav {
width:100%;
margin-top: 0;
padding: 10px;
text-align: center;
font-family: arial;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
position:fixed;
text-align:right;
z-index:10;
}
nav li{
display: inline;
}
nav ul{
min-height:20px;
}
.navi{
background: rgba(0,0, 0, 0.5);
}
.navi:hover{
background-color: rgba(0,0,0, 1);
}
.link-1 {
transition: 0.3s ease;
color: #fff;
font-size: 16px;
text-decoration: none;
border-top: 1px solid ;
text-align:right;
padding: 20px 0px;
margin: 0 20px;
font-weight: italic;
letter-spacing:2px;
}
.link-1:hover {
border-top: 2px solid #fff;
text-decoration: none;
color:#fff;
padding: 3px 6px;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
}
.menu {display:block;
}
.handle {display:none;}
/*media try*/
#media (max-width: 580px) {
#target{
}
nav {
width:100%;
margin-top: 0;
display:block;
max-height:0;
margin-top:-20px;
padding-top:18px;
padding-right:-20%;
}
nav li{
display:block;
padding:10px;
background:#000;
}
.navi{
background: rgba(0,0, 0, 0.9);
text-align:center;
border:0;
background:#000;
}
.navi:hover{
background-color: rgba(0,0,0, 1);
border:0;
}
.link-1 {
border:0px solid #bbb;
font-size:18px;
}
.link-1:hover {
text-decoration:underline;
border:0px solid #bbb;
}
.logo{
text-align:left;
margin-left:35px;
margin-top:-25px;
display: none;
}
.menu {display:none;
}
.handle {display:block;
color:#fff;
font-size:40px;
text-decoration:none;
text-align:right;
}
.handle:hover{
}
.handle p{
color:#fff;
cursor: pointer;
-webkit-text-stroke: 1px black;
-webkit-font-smoothing: antialiased;
}
}
I fixed the HTML.

Add box-sizing: border-box; for nav.
ul tag is missing in your html.
Also make sure to remove the default padding and margin for ul.
nav ul{ padding: 0; margin:0;}
To stretch menu to full width of the window, apply the bg colour for nav, Or remove the padding:10px from nav.

Removing the page flicker when loading javascript/css

I tried putting the inline javascript code after</body> , but it didn't help.
HTML code:
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="testCSS.css" />
<link rel="stylesheet" type="text/css" href="jquery.booklet.1.4.0.css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.min.js"> </script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.booklet.1.4.0.min.js" type="text/javascript">
</script>
</head>
<body>
<div id="container">
<div id="numb1">
<img src="images/number4.png" />
</div>
<figure id="logo">
<img src="images/logo23.png" alt="Foodstant Delivery logo" />
</figure>
<figure id="abtex">
<img src="images/abtext126.png" />
</figure>
<div class="Navigation">
<div id="navbar">
<ul>
<li class="OP"><img src="images/house.png" width="40" height="32" />
</li>
<li class="OP" id="OPM1"><img src="images/order.png" />Orders</li>
<li class="OP" id="OPM"><img src="images/menupic3.png" />Menu</li>
<li class="OP"> <img src="images/contact.png" />Contact
<div class="extended">
<div class="arrow-container"><div class="arrow-up"></div></div>
<ul class="smallNav">
<li>+65-65553333</li>
<li>Facebook</li>
<li>Twitter</li>
<li>enquiry [at] foodstant [dot] com</li>
</ul>
</div>
</li>
<li class="OP"><img src="images/Pen.png" />About Us</li>
<li class="OP"><img src="images/pin.png" />Jobs</li>
</ul>
</div>
</div>
<span id="papersl">
<img src="images/paperslant5.png" />
</span>
<div id="mybook">
<div>
<img src="images/CC1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/WC.png" width="100%" height="100%" />
</div>
<div>
<img src="images/ss1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/beverages.png" width="100%" height="100%" />
</div>
</div>
<form action="" id="search-form" class="SF">
<fieldset>
<input type="text" id="search" name="search" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." class="searchfield" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
<figure id="foot">
<img src="images/footer-comb1.png" usemap="#green" border="0">
<map name="green">
<area shape="rect" coords="503,41,614,85" href="http://www.trees.com/furniture.html">
<area shape="rect" coords="710,44,866,84" href="#0" id="se" >
</map>
</figure>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#numb1').hide().delay(800).fadeIn('normal');
$('#se').click(function() {
$('.SF').css('visibility','visible');
});
$(function() {
$('#mybook').booklet({
width:600,
height:350
});
});
});
</script>
</html>
CSS:
* {
margin: 0;
padding:0;
}
body {
background-image: url('images/BG-W1.png');
font-family: 'Conv_LITHOSPRO-REGULAR',Verdana,Helvetica,'Courier New',sans-serif;
/*height: 800px !important;*/
}
#font-face {
font-family: 'Conv_LITHOSPRO-REGULAR';
src: url('fonts/LITHOSPRO-REGULAR.eot');
src: url('fonts/LITHOSPRO-REGULAR.eot?#iefix') format('embedded-opentype');
src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg');
}
#container{
max-width:1000px;
margin: 0 auto;
position: relative;
padding: 0 auto;
/*height: 762px !important;*/
/*border: 2px solid blue;*/
}
#logo {
float:left;
/*border: 1px solid black;*/
height: 180px;
}
#abtex {
float: left;
/*border: 1px solid black;*/
height: 180px;
}
#navbar {
}
.ftex {
position: relative;
}
#qqq {
position: static !important;
border: 1px solid black;
background-image:url('images/bg-fs-5.png');
background-repeat:no-repeat;
height: 125px;
width: 800px;
/*padding:25px 0 0 0;*/
/*padding-top: 50px;
padding-left: 34px;*/
}
.ftex ul {
list-style-type:none;
/*border:2px solid yellow;*/
width:1200px;
}
.ftex ul li {
display:inline;
padding-right: 170px;
font-family: 'Conv_LITHOSPRO-REGULAR';
font-size: 20px;
/*border:2px solid red;*/
color:#ffbf81;
}
.ftex li a:link {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:visited {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:hover {
color: #ffbf81;
background:none;
border-radius: 0;
border-bottom:4px solid #ffbf81;
}
.ftex li a:active {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex ul li#ss {
border-bottom:4px solid #ffbf81;
padding-right:5px;
}
#footerBg {
position: relative;
bottom:-90px;
left:-50px;
}
#foot {
padding-top: 10px;
}
#foot img {
display: block;
}
#foothome{
padding-top:100px;
}
#foothome img {
display: block;
}
#numb1 {
position: absolute;
/*border:10px solid red;*/
top:10px;
right:-124px;
/*z-index: 100;*/
/*background:url(images/number2.png); */
}
#abt {
position: relative;
/*border: 1px solid red;*/
height: 400px;
left:180px;
top:-60px;
z-index: -2;
}
#papersl {
position: absolute;
left: 60px;
top: 222px;
z-index: -4;
}
.Navigation { background:background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
box-shadow: -3px -5px 10px #888888;
font-size: 26px;
/*position: relative;
top:-50px;*/
clear:both;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.Navigation ul li { position: relative; list-style: none; padding: 17px 10px; }
.Navigation ul li a { font-size: 26px; color: white; text-decoration: none; }
.Navigation ul li:hover { background: url(images/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4;}
.Navigation ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; }
.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; }
.Navigation ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(images/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; }
.Navigation ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); }
.Navigation ul li .extended a { font-size:14px;}
.Navigation ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(images/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.Navigation ul li .extended span { padding-left: 10px; font-size: 11px; }
.Navigation ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50); padding: 10px; height: 100px; }
.Navigation ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(images/linkback.png) no-repeat; }
.extended ul li {float:left;}
.Navigation ul li .extended ul.smallNav li:first-child { margin: 0; }
.Navigation ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; }
.Navigation ul li:hover .extended { display: block; }
.Navigation ul li ul li:hover a { color: white; }
#navbar ul {
list-style-position:inside;
padding-top: 10px;
padding-bottom: 10px;
}
#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
/*list-style-image:url('images/order.png'); */
padding-left: 15px;
}
#navbar ul li.OP img {
vertical-align: middle;
}
#navbar li a:link {
color: #EF174A;
}
#navbar li a:visited {
color: #BF4100;
}
#navbar li a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
#navbar li a:active {
color: #918FBC;
}
li a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
.Navigation ul li .extended ul.smallNav li a { color: #c7c7c7 !important; text-shadow: none !important; }
.Navigation ul li .extended ul.smallNav li a:hover { color: white !important;}
.arrow-container { margin-top:-16px; height:16px; }
fieldset {
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#main {
border: medium none;
/*height: 500px;*/
margin: 50px auto;
padding: 15px 0;
width: 326px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.or1 input {
background-color: #303030;
border: medium none;
border-radius: 0.4em 0.4em 0.4em 0.4em;
box-shadow: 0 -1px 0 0 #000000;
color: #FFFFFF;
font-size: 1.2em;
height: 27px;
letter-spacing: 2px;
margin: 15px 0;
padding: 0 0 0 10px;
width: 316px;
}
.ico {
float: right;
}
button {
background: -moz-linear-gradient(center bottom , #303030, #3A3A3A) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(100%,rgba(58,58,58,1)));
background: -webkit-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */
border: medium none;
border-radius: 0.2em 0.2em 0.2em 0.2em;
-webkit-border-radius: .2em;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
color: #FFFFFF;
float: right;
height: 24px;
text-align: right;
width: 79px;
}
button:hover {
background: -moz-linear-gradient(center bottom , #303030, #4B4B4B) repeat scroll 0 0 transparent;
}
button:active {
border: medium none;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
.note1 {
padding-top: 40px;
padding-left: 20px;
font-size: 20px;
text-align: center;
color: #F74E09;
}
#search-form { width: 190px; position: absolute; right: 100px;
bottom:55px;
visibility: hidden; display: block;}
#search { background: #b2a48c; border: 3px solid #402f1d; color: #2b1e11; height: 20px; line-height: 20px; width: 150px; padding: 2px 4px; position: absolute; top: 11px; left: 0}
#search-submit { background: #b2a48c url(images/search.png) no-repeat 12px 7px; border: 3px solid #402f1d; height: 50px; width: 50px; position: absolute; top: 0; right: 0; display:block;}
#search-submit img {
display: block;
}
#search-submit:hover { background-color: #c7bba7;}
/* CSS3 */
#search { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74));
background: -moz-linear-gradient(top, #b2a48c, #9b8d74);
text-shadow: rgba(0,0,0,.2) 0 0 5px;
display: inline;
}
#search-submit { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -mox-box-shadow: 0 0 5px black;display:block;
/* Webkit-transition */
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.4s, 0.4s;
-webkit-transition-timing-function: linear, ease-in;
}

Use css to set the visibility setting for body to hidden before the js is loaded then remove the property with js onload using jquery.
css:
body { visibility: hidden;}
javascript:
$().ready(function(){ $("body").css({visibility:'visible'})});

If I understand the question correctly, put this in testCSS.css...
#numb1 { visibility:hidden; }
or...
#numb1 { display:none; }
Whichever is more pleasing to you.
Doing that will hide the numb1 element before the page is displayed. What you're doing lets the page load before hiding it and then fading it in, so it's briefly visible.

Categories