I have a simple toggle event and everything works fine on desktop but when I go to phone I have to tap twice to get it to toggle open?
Here is what I have:
$(".service-m").click(function () {
$(this).next(".serviceinfo-m").toggle()
});
<a class="service-m">
Some Text
</a>
<div class="serviceinfo-m" style="display:none;">The First Line of Text.</div>
<a class="service-m">
Some Text
</a>
<div class="serviceinfo-m" style="display:none;">The First Line of Text.</div>
<a class="service-m">
Some Text
</a>
<div class="serviceinfo-m" style="display:none;">The Second Line of Text.</div>
<a class="service-m">
Some Text
</a>
<div class="serviceinfo-m" style="display:none;">The Third Line of Text.</div>
Also here is a link to jsfiddle http://jsfiddle.net/BrentRansom/tfM6E/1/
Thanks
I went though my css and found that I had a conflict in my css.
Here is what I had I am using less:
.service-m {
margin:0;
padding:5px 10px;
position: relative;
height:70px;
display: block;
font-family: #m;
font-size: 18px;
color: #light-gray;
border-top:2px dotted #light-gray;
.ico-nonhover {
visibility: visible;
position: absolute;
top:10px;
left:10px;
width:60px;
}
.ico-hover {
visibility: hidden;
}
h2 {
float:left;
position: relative;
top:26px;
left:70px;
margin:0;
padding:0;
}
}
.service-m:hover {
.ico-nonhover {
visibility: hidden;
}
.ico-hover {
visibility: visible;
position: absolute;
top:10px;
left:10px;
width:60px;
}
h2 {
float:left;
position: relative;
top:26px;
left:70px;
margin:0;
padding:0;
}
}
Here is what fixed it I am using less:
.service-m {
margin:0;
padding:5px 10px;
position: relative;
height:70px;
display: block;
font-family: #m;
font-size: 18px;
color: #light-gray;
border-top:2px dotted #light-gray;
.ico-nonhover {
position: absolute;
top:10px;
left:10px;
width:60px;
z-index:1;
}
.ico-hover {
z-index: 0;
position: absolute;
top:10px;
left:10px;
width:60px;
}
h2 {
float:left;
position: relative;
top:26px;
left:70px;
margin:0;
padding:0;
}
}
.service-m:hover {
.ico-nonhover {
z-index:0;
position: absolute;
top:10px;
left:10px;
width:60px;
}
.ico-hover {
z-index:1;
position: absolute;
top:10px;
left:10px;
width:60px;
}
h2 {
float:left;
position: relative;
top:26px;
left:70px;
margin:0;
padding:0;
}
}
Thanks for the help,
Related
The aim is to code the design below with 3 boxes appearing on top of a straight vertical line (Horizontal on desktop).
I have tried creating this using :: before pseudo selector.
Here is the code:
HTML
<div className={clsx(styles.container__box, styles['container__box--1'])}>
Box 1
</div>
<div className={clsx(styles.container__box, styles['container__box--2'])}>
Box 2
</div>
<div className={clsx(styles.container__box, styles['container__box--3'])}>
Box 3
</div>
CSS
&__box {
width: 25rem;
height: 25rem;
&:not(:last-child) {
margin-bottom: 5rem;
}
&--1 {
background-color: red;
z-index: 100;
}
&--2 {
background-color: green;
position: relative;
&::before {
content: "";
background-color: black;
color: red;
font-weight: bold;
height: 85rem;
width: 1rem;
display: block;
position: absolute;
top: -120%;
left: 50%;
}
}
&--3 {
background-color: yellow;
z-index: 100;
}
}
I'm unable to hide the pseudo selector behind the parent div.
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
.container{
position:relative;
}
.container span{
background:black;
height:300px;
display:block;
width:10px;
position: absolute;
left:47%;
top:20px;
}
.box1,
.box2,
.box3{
background:greenyellow;
width:100px;
height:100px;
border:1px solid blue;
margin:10px 0px;
position: relative;
}
<body>
<div class="container">
<span></span>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
try setting the parent divs position to relative then setting the before pseudo element's z-index to -1
.parent-div {
position: relative;
}
.parent-div::after {
content: "";
position: absolute;
z-index: -1;
}
#overlay{
display:none;
position:relative;
background-color:rgba(0,0,0,0.5);
top:0;
left:0;
z-index:0;
}
#main{
min-height:100px;
border:1px solid;
}
#main:hover #overlay{
display:block;
}
<div id="main">
<div id="overlay"></div>
this is something
</div>
I am trying to show a backgorund color on hover of the div and i have image in div instead of text in real code
You can use #main:hover:after for the overlay. Try this.
#main{
min-height: 100px;
border:1px solid;
position: relative;
display: inline-block;
}
#main:hover:after{
content: "";
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background-color:rgba(0,0,0,0.5);
}
<div id="main">
<img src="http://via.placeholder.com/640x360">
</div>
Use position:absolute, height:100% & width:100%
#overlay{
display:none;
position: absolute;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
#main{
position:relative;
min-height:100px;
border:1px solid;
}
#main:hover #overlay{
display:block;
}
<div id="main">
<div id="overlay"></div>
this is something
</div>
give position:relative to #main and add the below style to #overlay id:
#overlay {
display: none;
position: absolute;
background-color: rgba(0,0,0,0.5);
top: 0;
left: 0;
right: 0;
z-index: 1;
bottom: 0;
}
#overlay{
display:none;
position:absolute;
content:'';
left:0;
right:0;
bottom:0;
top:0;
background-color:rgba(0,0,0,0.5);
}
#main{
min-height:100px;
border:1px solid;
position:relative;
}
#main:hover #overlay{
display:block;
}
<div id="main">
<div id="overlay"></div>
this is something
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
I need to design a web page that should be look like the above page.
I finished the auto viewer, but I found that I can't print a word above the slideshow (1/6 & autoviewer). How can I print it out?
Also, I try the code and it still can't print the word out, here is the code
<style type="text/css">
#myslideshow {
border-spacing:10px 10px;
border-left:7px solid black;
border-right:4px solid black;
position:relative
}
#myslideshow > div.overlay-one {
position: absolute;
top: 5px;
right:10px;
color:#fff;
font-size:18px;
font-family:sans-serif;
}
#myslideshow > div.overlay-two {
position: absolute;
bottom: 5px;
right:10px;
color:#fff;
font-size:20px;
font-family:sans-serif;
font-weight:bold;
background:rgba(56,56,56,0.5);
padding:3px 6px;
border-radius:3px;
}
</style>
<div style="float:right;width:500px;>
<div "id="myslideshow">
<div class="overlay-one">1/6</div>
<div class="overlay-two">AUTOVIEWER</div>
</div>
</div>
It only apply the border space of the left and the top of the photo - it mean there are not blank between border and the photo in the right and bottom
How to fix it?
u haven't mentioned HTML
so here it is
#slideshow{
background: #fff url("https://i.ytimg.com/vi/sTX8qbOtPN8/hqdefault.jpg");
width: 480px;
height: 360px;
position:relative;
}
#slideshow>div.overlay-one{
position: absolute;
top: 5px;
right:10px;
color:#fff;
font-size:18px;
font-family:sans-serif;
}
#slideshow>div.overlay-two{
position: absolute;
bottom: 5px;
right:10px;
color:#fff;
font-size:20px;
font-family:sans-serif;
font-weight:bold;
background:rgba(56,56,56,0.5);
padding:3px 6px;
border-radius:3px;
}
<div id="slideshow">
<div class="overlay-one">
1/6
</div>
<div class="overlay-two">
AUTOVIEWER
</div>
</div>
It's all about position: add parent with relative and child with absolute and you are done.
I have three divs: head, foot and textbox.
The head and foot divs are fixed positions, and the third div is partly fixed (margin-top).
My question is: How can I change the textbox's div bottom to fix different monitors size? I can't use 100% height because it hangs on foot div. In this homepage I don't use scrollbar, because the backgrounk is changing image files. I woud like to make it somehow the margin-bottom part keep distance the monitor's bottom.
<html>
<head>
<title>Div bottom</title>
<style>
.head{
position:absolute;
clear:both;
top:0px;
right:0px;
float:right;
width:100%;
height:80px;
background-color:grey;
}
.foot {
position:fixed;
clear:both;
height:35px;
right:0px;
float:right;
width:100%;
background-color:grey;
bottom:0px;
}
.textbox {
overflow: hidden;
position: relative;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
margin-top:100px;
width:910px;
margin-left: auto;
margin-right:auto;
}
</style>
</head>
<body>
<div class="head">HEAD</div>
<div class="textbox">?</div>
<div class="foot">FOOT</div>
</body>
</html>
You could use javascript to accomplish this .. add in the following script to your head:
<script type="text/javascript">
window.onload=resize_height;
function resize_height(){
var height=0;
var divs=document.getElementsByTagName('div');
if(self.innerHeight){
height=self.innerHeight;
}else if(document.documentElement && document.documentElement.clientWidth){
height=document.documentElement.clientHeight;
}else if(document.body){
height=document.body.clientHeight;
}
divs[1].style.height=(parseInt(height)-200)+'px';
}
</script>
The 200 comes from height and padding and margins, you could dynamically generate the 200 by taking the height/padding from your other divs and offsetting it to achieve what you want.
EDIT:
also, for textbox, remove margin-top:100px; and replace with top:100px; ....
.textbox {
overflow: hidden;
position: relative;
top:100px;
padding:20px;
border: 1px solid gray;
background-color:red;
z-index:0;
text-align:justify;
color:black;
line-height: 2em;
border-radius: 3px;
/*margin-top:100px;*/
width:910px;
margin-left: auto;
margin-right:auto;
}
You don't have to use a script for that, here is a pure CSS solution for the 'header content footer' layout.
the margin between the sections is optional, so and so are the vertical & horizontal centering. and everything is totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper Content">
<div class="Centered">
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
/*For Centering only*/
.Content:before
{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-left: -5px;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
padding: 0 5px;
text-align: center;
}
.Header, .Footer
{
margin-bottom: 5px;
padding: 5px 0;
}
.Header
{
background-color: #bf5b5b;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
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>