how to freeze a div depending on scroll - javascript

I'm a very newbie for javascript and I need help. I cannot handle the issue with position:sticky because of my need.
I want the "right-container" stop scrolling when "second" div is completely in the viewport while scrolling, sorry for the easy question.
Thank you so much!
body {
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
.heads {
font-size: 2vw;
font-weight:bolder;
padding-top:50px;
text-align:center;
}
.first {
height:1800px;
width:600px;
background-color:red;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.second {
height:200px;
width:600px;
background-color:blue;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.container-left {
float:left;
}
.container-right {
float:left;
}
.left {
height:3000px;
width:600px;
background-color:orange;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
<div class="container-left">
<div class="left">
<p class="heads">LEFT</p>
</div>
</div>
<div class="container-right">
<div class="first">
<p class="heads">FIRST</p>
</div>
<div class="second">
<p class="heads">SECOND</p>
</div>
</div>
codepen

I'm not sure if I understood your question but you can use the following properties of an element
element.offsetWidth
element.offsetHeight
element.offsetLeft
element.offsetTop
element.scrollX
element.scrollY

I guess I solved my issue, but there's still a problem, a flickering on the scroll when it comes to "second" div...
function sticktothebottom() {
let h = window.innerHeight;
let window_top = $(window).scrollTop();
let top = $('.dur').offset().top;
let panelh = $(".whole").height();
if (window_top + h > top ) {
$('.whole').addClass('sticky');
$('.dur').height($('.whole').outerHeight());
}
if (window_top + top < panelh ) {
$('.whole').removeClass('sticky');
$('.dur').height(0);
}
}
$(function() {
$(window).scroll(sticktothebottom);
sticktothebottom();
});
body {
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
.heads {
font-size: 2vw;
font-weight:bolder;
padding-top:50px;
text-align:center;
}
.first {
height:1800px;
width:200px;
background-color:red;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.second {
height:200px;
width:200px;
background-color:blue;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.container-left {
float:left;
}
.container-right {
float:left;
}
.left {
height:3000px;
width:200px;
background-color:orange;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.sticky {
margin-top: 0;
position: fixed;
bottom: 0;
z-index: 9999;
}
<div class="container-left">
<div class="left">
<p class="heads">LEFT</p>
</div>
</div>
<div class="container-right">
<div class="whole">
<div class="first">
<p class="heads">FIRST</p>
</div>
<div class="second">
<p class="heads">SECOND</p>
</div>
</div>
<div class="dur"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>

Related

Align the all content only on single line

I need to align all p element in a single line.But its not aligned.Its scroll append in vertical.But i need horizontal.And all the content align inline.
I Try with display:inline but no use.
see the below snippet:
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
z-index:1;
width:300px;
height:40px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>
Any one help me to solve my problem.
Thanks in advance.
You can use CSS Flexbox if you need your a fixed width (as you've right now - 300px). Just make your .pin_box a flex container.
Just like:
.pin_box {
display: flex;
}
Have a look at the snippet below:
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
display: flex;
z-index:1;
width: 300px;
height: 60px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>
Hope this helps!
You can make the width as auto in your css and increase the height to 50px
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
z-index:1;
width:auto;
height:50px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>

Pure CSS navbar :Hover on List not staying

I'm sure this is a common problem with pure css navbar. I have a navbar created with ul and li's but I can't get the menus to stay up when I hover. I know that the problem is that the menu is opening ONLY when I'm hovering over the link but I'm not sure how to get it work. I tried jQuery mouseover but it wasn't working for me:
#font-face{
font-family: Bebas;
src:url(BEBAS.TTF);
}
body{
margin:0 auto;
height:500px;
font-family: Bebas;
}
.header{
top:0;
position:absolute;
left:0;
right:0;
background:#ff6200;
height:50px;
width:100%;
color:white;
font-family: Bebas;
}
.header .call{
line-height:50px;
}
.call{
width:60%;
margin:0 auto;
}
.login{
float:right;
}
.callme, .loginme{
color:#AF2626;
}
.signup{
margin-left:10px;
}
.number{
margin-left:10px;
}
.navbar{
margin-top:50px;
right:0;
left:0;
position:relative;
height:130px;
width:100%;
background:#F7F7F7;
border-radius:0px;
padding:0px;
}
.inside-navbar{
line-height:130px;
width:60%;
margin:0 auto;
font-size:40px;
}
.logo{
color:#FF6200;
}
#navsman{
font-size:16px;
float:right;
display:inline-block;
min-width:300px;
position:absolute;
padding-right: 20%;
}
#navsman li{
display:inline;
position:relative;
padding-left:15px;
line-height:1.4;
}
#navsman li ul{
position:absolute;
display:none;
}
#navsman li:hover > ul.firstmenu{
display:block !important;
margin-top: -50px;
}
#navsman li ul li{
position:relative;
padding-left:15px;
}
#navsman ul.secondmenu{
margin-left: 40px;
padding-top:15px;
padding-top: 30px;
z-index: 2;
width: 120px;
display:none;
}
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
#navsman ul.firstmenu li:hover ul.secondmenu{
display:block !important;
margin-top: -50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet"/>
<div class="headwrapper">
<div class="header">
<div class="call"><span class="callme">CALL US NOW!</span> <span class="number">777.77.7777.777</span>
<span class="login"><span class="loginme">LOGIN </span><span class="signup">SIGNUP</span></span>
</div>
</div>
<div class="navbar">
<div class="inside-navbar">
<span>YOUR<span class="logo">LOGO</span></span>
<ul id="navsman">
<li>Title1</li>
<li class="title2">Title2
<ul class="firstmenu">
<li>SUBMENU1</li>
<li>SUBMENU2</li>
<li>SUBMENU3
<ul class="secondmenu">
<li class="secondli-first">Sub link 1</li>
<li class="secondli-second">Sub link 1</li>
</ul>
</li>
</ul>
<li>Title3</li>
<li>Title4</li>
<li>Title5</li>
<li>Title6</li>
<li>Title7</li>
</div>
</ul>
</div>
</div><!--Navbar end-->
</div>
Replace:
#navsman > li:hover > ul {
left: auto;
padding-top: 5px ;
min-width: 100%;
}
With:
#navsman > li:hover > ul li {
left: auto;
padding-top: 5px ;
min-width: 100%;
height: 10px;
margin-top:-15px;
padding-left: 10px;
}
Close the gap mentioned by #James Montagne
navsman li ul{
position:absolute;
display:none;
top:70px; <-- new line of code
}

jqueryUI Draggable mouse offset

Trying to code a similar feel to the ios8 Lockscreen, having a dragable item only move on the x axis.
$( "#IDlsDragable" ).draggable({ axis: "x" });
.lockscreen {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(89,54,158,1);
background-image:url('../pics/wall.png');
background-size:cover;
background-position:center center;
}
.lockscreenFace {
position:absolute;
top:0px;
left:1080px;
width:1080px;
height:1920px;
}
.lockscreenSlider {
position:absolute;
top:0px;
left:-1080px;
width:200%;
height:100%;
}
.lockscreenClock {
position:absolute;
top:110px;
left:0px;
width:100%;
height:300px;
font-size: 296px;
color:white;
text-align:center;
}
.lockscreenDate {
position:absolute;
top:432px;
left:0px;
width:100%;
height:80px;
font-size: 60px;
color:white;
text-align:center;
}
.lockscreenSlideText {
position:absolute;
bottom:234px;
left:0px;
width:100%;
height:80px;
font-size: 80px;
font-weight:bold;
color:white;
text-align:center;
background:url('../pics/highlight.png');
-webkit-animation: slidetounlock 3s infinite linear;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lockscreenSlideText:before {
content: "\f105";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size:85px;
line-height:1;
-webkit-font-smoothing: antialiased;
}
#-webkit-keyframes slidetounlock {
0% {
background-position: -880px 0;
}
100% {
background-position: 0px 0;
}
}
<div class="lockscreen">
<div id="IDlsDragable" class="lockscreenSlider">
<div class="lockscreenFace">
<div id="IDlsClock" class="lockscreenClock">
#TIME#
</div>
<div id="IDlsDate" class="lockscreenDate">
#DATE#
</div>
<div class="lockscreenSlideText">
slide to unlock
</div>
<div class="cameraGrabby">
</div>
</div>
</div>
</div>
When I begin to drag it to the right the div "lockscreenSlider" jerks to the right.
transform:scale([anything]);
this causes issues with mouse offset

Trying to make a thumbnail picture have a background color and text when hovered over

I am trying to make a thumbnail picture change to a solid background color with text as well when it is hovered.
function info(){
document.getElementById('thumbnail_1').style.backgroundColor='red';
}
<article id="thumbnail_1" onmouseover="info();">
<img src="http://placehold.it/200x100/" alt="taffies website thumbnail">
</article>
Full example
function info(){
document.getElementById('thumbnail_1').style.backgroundColor='red';
}
*{
margin:0;
padding:0;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
margin:0 auto;
}
.main_title{
float:left;
padding:20px;
font-size:35px;
font-family: 'Source Sans Pro', sans-serif;
}
.main_title a{
text-decoration:none;
color:#ffffff;
}
.main_header{
background-color:#000000;
color:#ffffff;
width:100%;
height:80px;
}
.header_wrapper{
width:960px;
margin:0 auto;
}
.main_nav{
float:left;
margin-left:400px;
}
.main_nav ul li{
float:left;
padding:35px 10px;
}
.main_nav ul li a{
text-decoration:none;
color:#ffffff;
font-family:myriad pro;
}
.main_nav a:hover{
color:#ccc;
}
.main_content{
width:960px;
height:800px;
}
.main_content article{
width:260px;
height:200px;
margin:30px;
float:left;
}
.about_content{
width:960px;
height:800px;
}
.about_content article{
margin:30px;
width:500px;
}
.about_title{
font-size:30px;
margin-bottom:40px;
font-family:myriad pro;
}
.about_name{
font-size:20px;
font-weight:bold;
font-family:myriad pro;
}
.contact_content{
width:960px;
height:800px;
}
.contact_content article{
margin:30px;
width:500px;
}
.contact_title{
font-size:30px;
margin-bottom:40px;
font-family:myriad pro;
}
.about_webdev{
font-family:arial;
}
.about_email{
font-family:arial;
}
footer{
width:100%;
background-color:#000000;
color:#ffffff;
height:80px;
}
footer ul li{
float:left;
padding:30px 10px;
}
footer ul li a{
text-decoration:none;
color:#ffffff;
font-family:myriad pro;
}
footer a:hover{
color:#ccc;
}
.footer_wrapper{
width:240px;
margin:0 auto;
}
span{
font-weight:bold;
}
<header class="main_header">
<div class="header_wrapper">
<p class="main_title">title</p>
<nav class="main_nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header> <!-- end of header -->
<div class="container">
<section class="main_content">
<article id="thumbnail_1" onmouseover="info();">
<img src="data:image/jpeg;base64,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" alt="taffies website thumbnail">
</article>
<article>
<img src="images/fitstyle-thumbnail.png" alt="fitstyle website thumbnail">
</article>
<article id="thumbnail_1" onmouseover="info();">
vbv
</article>
</section> <!-- end of section -->
</div> <!-- end of container -->
<footer>
<div class="footer_wrapper">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</footer> <!-- end of footer -->
You should really use the CSS :hover selector. for example:
#thumbnail_1 p {
display: none;
}
#thumbnail_1:hover {
background-color: red;
}
#thumbnail_1:hover p {
display: block;
}
#thumbnail_1:hover img {
visibility: hidden;
}
You don't need to use JS at all

Dropdown menu problems, DIV and or CSS issues

Alright, I've periodically looked and messed around with this for around 6 weeks and so far have been unable to figure out how to solve this thing. Though I assume it's something small and relatively simple to people with more experience.
Background:
I am starting with a template that had a good js slideshow that I liked and started customizing it. When i got to a certain point I realized I wanted to add a drop-down menu. When I first added the ul sub-menu for the drop-down nothing appeared to happen. After messing with it for some time i created a test page where I only added the drop-down menu to see if the js was effecting it in any way and it worked as expected. I then added only the js in to see if my 0 knowledge of js was effecting it and it worked (no alignment info).
At this point i went back to the original code and it stopped working. so I went online and got some example code to put in that I knew worked and that too didn't work. At one point I started messing with the div tags in the html and was able to get some resemblance of what I was looking for though the content started shifting down sometimes on rollover; other times it would drop the content 100% of the time. I moved to playing with z-index's and no matter what I did that didn't seem to make a difference either.
The question:
What the heck am I not seeing here? All I'm looking for is a drop-down that goes over top of the js slideshow without pushing it down. I'm pretty sure this issue revolves around the fact that there are so many div's to make this layout and they're conflicting somehow. Any help someone could give would be absolutely amazing because I'm going crazy.
Here is the index page with issues:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mitchell Faherty</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:700" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/tms-0.3.js"></script>
<script src="js/tms_presets.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<!--[if lt IE 9]><script src="js/html5.js"></script><![endif]-->
</head>
<body id="page1">
<!--==============================header=================================-->
<header>
<div class="main">
<h1> Mitchell Faherty <em>Wedding photo / Videos</em> </h1>
</div>
<div class="menu-row">
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_12">
<nav>
<ul class="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<!--
<ul>
<li>About1</li>
<li>About2</li>
<li>About3</li>
</ul>
-->
<li>Photos</li>
<li>Videos</li>
<li>Links</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="main">
<div class="slider-wrapper">
<div class="slider">
<ul class="items">
<li> <img src="images/front-slider/slider-img1.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img2.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img3.jpg" alt=""> </li>
<li> <img src="images/front-slider/slider-img4.jpg" alt=""> </li>
</ul>
</div>
</div>
</div>
</header>
<!--==============================footer=================================-->
<footer>
<div class="main">
<div class="container_12">
<div class="wrapper">
<div class="grid_3 suffix_3">
<ul class="list-services">
<li><a class="item-1" href=""></a></li>
<li><a class="item-2" href=""></a></li>
<li><a class="item-3" href=""></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script>
$(window).load(function () {
$('.slider')._TMS({
duration: 1000,
easing: 'easeOutQuint',
preset: 'slideDown',
slideshow: 7000,
banners: false,
pauseOnHover: true,
pagination: true,
pagNums: false
});
});
</script>
</body>
</html>
And here is the CSS:
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
/*********************************Global Properties**********************************/
html {
width:100%;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
color:#000;
min-width:984px;
background:#f8f8f8
}
.ic {
border:0;
float:right;
background:#fff;
color:#f00;
width:50%;
line-height:10px;
font-size:10px;
margin:-220% 0 0 0;
overflow:hidden;
padding:0
}
#page3 {
min-width:1034px;
}
.main {
width:984px;
padding:0;
margin:0 auto;
font-size:14px;
line-height:25px;
}
a {
color:#f00058;
outline:none;
}
a:hover {
text-decoration:none;
}
.col-1, .col-2 {
float:left;
}
.wrapper {
width:100%;
overflow:hidden;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:18px;
}
.p1 {
margin-bottom:8px;
}
.p2 {
margin-bottom:15px !important;
}
.p3 {
margin-bottom:30px !important;
}
.p4 {
margin-bottom:40px;
}
.p5 {
margin-bottom:50px;
}
.reg {
text-transform:uppercase;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.it {
font-style:italic;
}
.color-1 {
color:#f00058;
}
.color-2 {
color:#7c7c7c;
}
.img-border1 {
float:left;
padding:3px;
background:#fff;
border:1px solid #e5e5e5;
}
.img-border2 {
float:left;
padding:3px;
margin-right:15px;
background:#fff;
border:1px solid #e5e5e5;
}
/*********************************Boxes**********************************/
.indent {
padding:0 15px;
}
.indent-top {
padding-top:5px;
}
.indent-left {
padding-left:30px;
}
.indent-right {
padding-right:35px;
}
.indent-bot {
margin-bottom:20px;
}
.indent-bot2 {
margin-bottom:18px;
}
.indent-bot3 {
margin-bottom:45px;
}
.prev-indent-bot {
margin-bottom:10px;
}
.img-indent-bot {
margin-bottom:25px !important;
}
.margin-bot {
margin-bottom:35px;
}
.img-indent {
float:left;
margin:0 20px 0px 0;
}
.img-indent2 {
float:left;
margin:0 30px 0px 0;
}
.img-indent3 {
float:left;
margin:0 10px 0px 0;
}
.img-indent-r {
float:right;
margin:0 0px 0px 20px;
}
.buttons a:hover {
cursor:pointer;
}
.menu li a, .list-1 li a, .list-2 li a, .link, .button, h1 a {
text-decoration:none;
}
/*********************************header*************************************/
header {
width:100%;
background:#fff;
position:relative;
z-index:2;
}
h1 {
padding:36px 0 0 22px;
position:relative;
overflow:hidden;
margin-bottom:27px;
}
h1 a {
display:block;
width:230px;
height:77px;
text-indent:-9999em;
background:url(../images/wedding-logo.png) 0 0 no-repeat;
float:left;
margin-right:5px;
}
h1 em {
display:inline-block;
font-family: 'PT Sans', sans-serif;
font-size:14px;
font-weight:400;
line-height:2em;
color:#888;
text-transform:uppercase;
padding-top:31px;
}
/*********************************Menu**********************************/
.menu-row {
width:100%;
padding:1px 0 5px;
background:url(../images/menu-row-tail.png) center top repeat-x;
}
#page1 .menu-row {
margin-bottom:22px;
}
.menu {
width:100%;
background:url(../images/menu-spacer.gif) left top no-repeat;
overflow:hidden;
}
.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) right top no-repeat;
}
.menu li a {
display:inline-block;
height:60px;
overflow:hidden;
font-family: 'PT Sans', sans-serif;
font-size:17px;
font-weight:400;
line-height:59px;
padding:0 50px;
color:#fff;
text-transform:uppercase;
}
.menu li a.active, .menu > li > a:hover {
background:url(../images/menu-active-tail.gif) 0 0 repeat-x #f00058;
}
/*********************************Drop Down**********************************/
ul#nav {
margin: 0 0 0 200px;
}
ul.drop a {
display:block;
color: #fff;
font-family: Verdana;
font-size: 14px;
text-decoration: none;
}
ul.drop, ul.drop li, ul.drop ul {
list-style: none;
margin: 0;
padding: 0;
border: 1px solid #fff;
background: #555; color: #fff;
}
ul.drop {
position: relative;
z-index: 107;
float: left;
}
ul.drop li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
padding: 5px 10px;
}
ul.drop li.hover, ul.drop li:hover {
position: relative;
z-index: 109;
cursor: default;
background: #1e7c9a;
}
ul.drop ul {
/*visibility: hidden;
position: absolute;
top: 100%;
left: 0; */
display:none;
z-index: 108;
width: 195px;
background: #555;
border: 1px solid #fff;
}
ul.drop ul li {
float: none;
}
ul.drop ul ul {
top: -2px;
left: 100%;
}
ul.drop li:hover > ul {
/*visibility: visible */
display: block;
}
/*********************************Slider**********************************/
.slider-wrapper {
width:745px;
height:540px;
padding:54px 0 0 150px;
background:url(../images/slider-bg.png) 0 0 no-repeat;
overflow:hidden;
}
.slider {
width:690px;
height:460px;
}
.items {
display:none;
}
.pagination {
position:absolute;
left:290px;
bottom:-62px;
z-index:99
}
.pagination li {
float:left;
padding-right:6px;
}
.pagination a {
display:block;
width:24px;
height:24px;
background:url(../images/slider-pagination.png) right top no-repeat;
cursor:pointer;
}
.pagination li.current a {
cursor:default;
}
.pagination li.current a, .pagination a:hover {
background-position:left top;
}
/*********************************Content*************************************/
#content {
width:100%;
padding:35px 0 53px;
background:#fff;
position:relative;
z-index:1;
}
h2 {
font-family: 'PT Sans', sans-serif;
font-size:37px;
font-weight:700;
line-height:1.2em;
color:#000;
margin-bottom:15px;
letter-spacing:-1px;
}
h3 {
font-family: 'PT Sans', sans-serif;
font-size:23px;
font-weight:700;
line-height:2em;
color:#000;
margin-bottom:7px;
}
h6 {
color:#f00058;
}
.tdate-1 {
display:block;
color:#7c7c7c;
font-size:14px;
line-height:20px;
}
.tdate-1 a {
color:#7c7c7c;
}
.border-bot {
width:100%;
padding-bottom:20px;
background:url(../images/pic-4.gif) 0 bottom repeat-x;
}
.q1, .q2, .q3 {
width:100%;
position:relative;
}
.quote-marker1 {
display:block;
width:15px;
height:21px;
background:url(../images/pic-1.png) 0 0 no-repeat;
position:absolute;
top:30px;
left:-1px;
z-index:2;
}
.quote-marker2 {
display:block;
width:15px;
height:21px;
background:url(../images/pic-2.png) 0 0 no-repeat;
position:absolute;
top:30px;
right:0;
z-index:2;
}
.q1 .quote-bot {
padding-bottom:5px;
padding-left:10px;
background:url(../images/quote-bot.jpg) right bottom no-repeat;
position:relative;
z-index:1;
}
.q2 .quote-bot {
padding-bottom:5px;
padding-right:10px;
background:url(../images/quote-bot.jpg) left bottom no-repeat;
position:relative;
z-index:1;
}
.quote-top {
width:100%;
padding-top:5px;
background:url(../images/quote-top.jpg) right top no-repeat;
}
.quote {
width:100%;
overflow:hidden;
color:#7c7c7c;
background:url(../images/quote-tail.jpg) right top repeat-y;
}
.quote .padding {
padding:18px 25px 19px 30px;
}
.q3 {
background:url(../images/pic-3.png) 0 3px no-repeat;
color:#7c7c7c;
font-style:italic;
margin-bottom:17px;
}
.q3 .padding {
padding:0 0 0 35px;
}
/* -- gallery begin --*/
#gallery {
width:1034px;
height:870px;
margin:0 auto;
position:relative;
overflow:hidden;
}
#js {
position:relative;
width:940px;
margin:0 auto;
font-size:14px;
line-height:25px;
}
div.content {
/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
width: 410px;
height: 340px;
overflow: hidden;
}
div.content img {
position: relative;
z-index: 2;
}
div.content a, div.navigation a {
}
div.content a:focus, div.content a:hover, div.content a:active {
}
div.controls {
position:relative;
}
div.controls a {
padding: 0px;
}
div.ss-controls {
float: left;
display:none;
}
div.nav-controls {
width:100%;
height:27px;
position:absolute;
left:0;
bottom:56px;
}
div.nav-controls a.prev {
display:block;
width:27px;
height:27px;
background:url(../images/gallery-prev.jpg) 0 0 no-repeat;
text-indent:-9999em;
position:absolute;
top:0;
left:-47px;
z-index:99;
}
div.nav-controls a.next {
display:block;
width:27px;
height:27px;
background:url(../images/gallery-next.jpg) 0 0 no-repeat;
text-indent:-9999em;
position:absolute;
top:0;
right:-47px;
z-index:99;
}
div.slideshow-container {
position: relative;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
z-index:1;
width:900px;
margin-right:48px;
float:left;
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
width: 900px;
height: 600px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {
}
div.caption {
width:100%;
height:100%;
}
div.slideshow span.image-wrapper {
display: block;
width: 900px;
height: 600px;
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}
div.slideshow a.advance-link {
display: block;
width: 900px;
height: 600px;
padding: 3px;
margin: 0;
font-size:0;
line-height:0;
text-decoration:none;
background:#fff;
border:1px solid #e5e5e5;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.download {
float: right;
}
div.caption-container {
float:right;
width: 270px;
height: 620px;
position:relative;
}
span.image-caption {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0;
z-index:10;
background:#fff;
}
div#thumbs {
padding: 0;
margin:0;
width:100%;
}
ul.thumbs {
padding: 0 0 0 0;
width:100%;
overflow:hidden;
position:relative;
}
ul.thumbs li {
float:left;
margin-right:20px;
width:140px;
}
ul.thumbs li.last {
margin:0;
}
ul.thumbs li span {
display:block;
font-size:15px;
line-height:1.2em;
color:#f9f9f9;
text-transform:uppercase;
font-weight:bold;
}
a.thumb {
display:block;
width:132px;
height:132px;
padding:3px;
background:#fff;
border:1px solid #e5e5e5
}
a.thumb:focus {
outline: none;
}
#controls {
width:100%;
}
div.pagination {
clear: both;
text-align:center;
position:relative;
z-index:10;
}
div.top.pagination {
display:none;
}
div.navigation div.bottom {
display:none;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
padding:0 4px;
font-weight:bold;
color:#fff;
}
div.pagination a:hover {
text-decoration: none;
color:#ffeaa8;
}
div.pagination span.current {
color:#ffeaa8;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
/* -- gallery end --*/
.list-1 li {
line-height:20px;
padding:5px 0 5px 15px;
background:url(../images/marker-1.gif) 0 12px no-repeat;
}
.list-1 li a {
display:inline-block;
color:#7c7c7c;
}
.list-1 li a:hover {
color:#f00058;
text-decoration:underline;
}
.link:hover {
text-decoration:underline;
}
.link-1 {
display:inline-block;
line-height:27px;
padding-left:39px;
background:url(../images/marker-2.gif) 0 0px no-repeat;
}
.link-1:hover {
text-decoration:none;
}
.text-1 {
display:block;
color:#f00058;
}
.text-2 {
display:block;
color:#000;
font-style:normal !important;
}
dl span {
float:left;
width:98px;
font-weight:bold;
}
/*********************************Contact Form**********************************/
#contact-form {
display:block;
width:100%;
}
#contact-form label {
display:block;
height:40px;
overflow:hidden;
}
#contact-form input {
float:left;
width:490px;
font-size:12px;
line-height:1.25em;
color:#000;
padding:7px 9px 6px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #e5e5e5;
background:#fff;
outline:none;
}
#contact-form textarea {
float:left;
height:339px;
width:490px;
max-height:339px;
max-width:490px;
font-size:12px;
line-height:1.25em;
color:#000;
padding:7px 9px;
margin:0;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #e5e5e5;
background:#fff;
overflow:auto;
outline:none;
}
.text-form {
float:left;
display:block;
font-size:14px;
line-height:30px;
width:75px;
color:#000;
font-family:Arial, Helvetica, sans-serif;
}
.buttons {
padding:13px 10px 0 0;
text-align:right;
}
.buttons a {
margin-left:25px;
}
/*********************************Footer**********************************/
footer {
width:100%;
padding:10px 0 10px;
background:url(../images/footer-tail.gif) center top repeat-x;
}
.list-services {
padding:7px 6px 0 0px;
float:right;
}
.list-services li {
float:left;
padding:0 9px 0 0;
}
.list-services a {
display:block;
width:41px;
height:46px;
text-indent:-9999em;
background:url(../images/social-icons.png) 0 0 no-repeat;
}
.list-services .item-2 {
background-position:-50px 0;
}
.list-services .item-3 {
background-position:-100px 0;
}
.footer-text {
text-align:left;
padding:10px 0 0px;
}
.footer-text span {
display:block;
}
try this CSS
<style>
#select-choice-2-button {float:right;}
.ui-header .ui-title {margin-left: auto; margin-right: auto;}
</style>
try this html
<select name="forma" id="select-choice-2" data-native-menu="false" onchange="location = this.options[this.selectedIndex].value;">
<option value="">More</option>
<option value="http://">Help</option>
<option value="http://">Info</option>

Categories