Im having trouble with my navigation bar hover effects specifically transitions(line 109/110). Essentially i want whichever link the mouse is hovering over to raise(margin increase of 2%) while the other links hold the margin of 0. The problem is that all the link margins increase by 2% whenever i hover on any of them. Its my first time posting so sorry for the messy code, if i broke any posting rules and/or if this question was unclear at all. I played around with it for abit and couldnt figure it out. Also if it is simpler i can figure out how to do it using javascript.
Cheers
<!DOCTYPE html>
<html>
<head>
<title>
Atticus Products
</title>
<script src="http://code.jquery.com
/jquery-1.9.1.js">
</script>
<script>
/*
$(document).ready(function(){
$("a").hover(function(){
$("a").animate({up:'250px'});
});
});
*/
</script>
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
font-size:100%;
background-color:#6ec247;
font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;
}
#wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
position: relative;
}
/*Header: Contains Logo and NavBar*/
#header {
border-bottom: 8px solid #f2f2f2;
overflow:hidden;
height: auto;
position:relative;
clear:both;
height:auto;
margin:0;
display:block;
}
#logoName {
max-width: 100%;
width:40%;
float:left;
height:150px;
}
#logoName a {
position:absolute;
bottom:0;
color:#FFFFFF;
text-decoration: none;
font-size:3em;
font-weight: bold;
}
/*NavBar*/
#nav {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
right:0;
width:60%;
float:right;
position:absolute;
bottom:0;
}
#nav li {
display: inline;
}
#nav li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
font-size:1em;
margin-bottom:0;
}
#nav li a:hover {
color: #c00;
background-color: #000000;
opacity:0.5;
transition-property: margin-bottom;
transition-duration:4s;
margin-bottom:2%
/*this is where the problem is*/
}
/*Content: Contains Container1, LogoWords and Logo1*/
#content {
height: 60%;
text-align: center;
/*background-color: #4d8e2f;*/
color:#FFFFFF;
margin:0;
top:0;
display:relative;
font-weight: bold;
}
#container1 {
display: block;
max-width: 100%;
position:relative;
height:40.5%;
width:100%;
margin:0;
background-color:#6ec247 ;
z-index:0;
border-bottom: 8px solid #f2f2f2;
}
#logoWords{
z-index:1;
display:block;
position:absolute;
width:auto;
height:auto;
top:18.5%;
right:0;
color:#FFFFFF;
text-decoration: none;
font-size:2.5em;
font-weight: bold;
text-align:left;
}
#logo1 {
display:block;
z-index:1;
position:absolute;
left:0;
top:18.5%;
width:auto;
height:auto;
}
#content{
background-color:#6ec247 ;
}
#content p {
margin:0;
}
#footer {
height:10%;
width: 100%;
position: absolute;
bottom: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li>About</li>
<li>Our Approach</li>
<li>Careers</li>
<li>Contact</li>
</ul>
<div id="logoName">
Atticus <br>Products</br>
</div>
</div>
<div id="content">
<div id="container1">
</div>
<img id="logo1" src="image/justlogo.png" alt="logo" width="207"
height="214">
<div id="logoWords">
<p><br>We find the people</br> that make your company succeed</p>
</div>
<div id="content">
<p>
<br>Careers with Atticus</br>
</p>
</div>
</div>
<div id="footer">
<p>bam</p>
</div>
</div>
</body>
</html>
Your problem is in your jQuery.
Because you have $('a').animate it will effect every a element on the page.
You can get around this by changing 'a' to 'this' without quotation marks.
$(document).ready(function(){
$("a").hover(function(){
$(this).animate({up:'250px'});
});
});
This will only effect the element being hovered over.
Best of luck.
Related
I'm re-designing a site to make it more mobile friendly. I've re-structured the whole site but can't get the main pages to show up. The logo, nav, asides and a mock img shows in the main section. I'm trying to not use iframes. I can't seem to get the nav to point to the local or internal pages I've re-created. I've tried researching this and can't find anything that will work. It's probably something simple but I can't seem to find the problem. PLEASE HELP...THX in advance.
// JavaScript Document
function openNav() {
document.getElementById("sidenav").style.width = "90px";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
}
#charset "UTF-8";
/* CSS Document */
body {
margin:0 0 0 0;
background-image:url(lines.png);
}
#wrapper {
width:95%;
min-width:340px;
max-width:1100px;
margin-left:auto;
margin-right:auto;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8rem;
font-weight:bold;
color:#ffffff;
background-color:#000000;
border-color:#ffffff;
border-style:solid;
border-width:0 1px 1px 1px;
position:inherit;
}
h1 {
font: inherit;
}
header {
margin:0 auto;
position:absolute;
z-index:6;
}
.logo {
width:100%;
max-width: 313px;
height: auto;
padding: 10px;
}
nav {
right:0;
text-align:right;
padding: 33px 10px 20px 10px;
background-color: #4C6972;
border-bottom: 1px solid #cccccc;
position:relative;
z-index:5;
}
.menu a {
text-decoration: none;
font-size:13px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:bold;
color: #f1f1f1;
padding:0 5px 0 10px;
}
.menu a:hover {
color: #111;
}
span {
color: #54d17a;
}
.hambtn, .closebtn {
display:none;
}
main {
height:100%;
position:relative;
z-index:3;
}
aside {
margin:0 auto;
top: 75px;
left:0px;
width:15%;
font-size: 18px;
position:absolute;
z-index:4;
}
/*top right bottom left*/
.icon-bar {
float:left;
clear:left;
}
.icon-bar a {
display: block;
text-align: center;
padding:5px;
transition: all 0.3s ease;
color: white;
}
.icon-bar a:hover {
background-color: #000;
}
section {
width:100%;
height: 100%;
position:inherit;
z-index:3;
display:block;
}
#home{
width:auto;
height:auto;
background:url(../home.html) no-repeat;
}
#music{
width:auto;
height:auto;
background:url(../music.html) no-repeat;
}
footer {
text-align: center;
font-size:9px;
font-weight:bold;
padding: 10px;
z-index:6;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7-2stackoverflow</title>
<link href="css/7-2stackoverflow.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/7-2indiwirenavcol.js"></script>
</head>
<body>
<div id="wrapper">
<header>xxxxxxx</header>
<nav>
<div class="hambtn" onclick="openNav()">☰</div>
<div id="sidenav" class="menu">
×
home
music
about
gigs
<span>contact</span>
</div>
</nav>
<main>
<aside>
<div class="icon-bar">
XXXXXXXXXXXXXXXX
</div>
</aside>
<section>
<div id="home"><!--one youtube vid goes here--></div>
<div id="music"><!--music player html goes here--></div>
<div id="about"><!--about html goes here--></div>
<div id="gigs"><!--gigs html goes here--></div>
<div id="contact"><!--contact form html goes here--></div>
</section>
<footer>®© xxxxxx 2001-2019 All rights reserved</footer>
</main>
</div>
</body>
</html>
Your code works perfectly fine. Here is the below snippet.You need to fill your div with videos, music etc. Below is the working snippet
// JavaScript Document
function openNav() {
document.getElementById("sidenav").style.width = "90px";
}
function closeNav() {
document.getElementById("sidenav").style.width = "0";
}
#charset "UTF-8";
/* CSS Document */
body {
margin:0 0 0 0;
background-image:url(lines.png);
}
#wrapper {
width:95%;
min-width:340px;
max-width:1100px;
margin-left:auto;
margin-right:auto;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8rem;
font-weight:bold;
color:#ffffff;
background-color:#000000;
border-color:#ffffff;
border-style:solid;
border-width:0 1px 1px 1px;
position:inherit;
}
h1 {
font: inherit;
}
header {
margin:0 auto;
position:absolute;
z-index:6;
}
.logo {
width:100%;
max-width: 313px;
height: auto;
padding: 10px;
}
nav {
right:0;
text-align:right;
padding: 33px 10px 20px 10px;
background-color: #4C6972;
border-bottom: 1px solid #cccccc;
position:relative;
z-index:5;
}
.menu a {
text-decoration: none;
font-size:13px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:bold;
color: #f1f1f1;
padding:0 5px 0 10px;
}
.menu a:hover {
color: #111;
}
span {
color: #54d17a;
}
.hambtn, .closebtn {
display:none;
}
main {
height:100%;
position:relative;
z-index:3;
}
aside {
margin:0 auto;
top: 75px;
left:0px;
width:15%;
font-size: 18px;
position:absolute;
z-index:4;
}
/*top right bottom left*/
.icon-bar {
float:left;
clear:left;
}
.icon-bar a {
display: block;
text-align: center;
padding:5px;
transition: all 0.3s ease;
color: white;
}
.icon-bar a:hover {
background-color: #000;
}
section {
width:100%;
height: 100%;
position:inherit;
z-index:3;
display:block;
}
#home{
width:auto;
height:auto;
background:url(../home.html) no-repeat red;
height:100vh
}
#music{
width:auto;
height:auto;
background:url(../music.html) no-repeat yellow;
height:100vh
}
footer {
text-align: center;
font-size:9px;
font-weight:bold;
padding: 10px;
z-index:6;
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7-2stackoverflow</title>
<link href="css/7-2stackoverflow.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/7-2indiwirenavcol.js"></script>
</head>
<body>
<div id="wrapper">
<header>xxxxxxx</header>
<nav>
<div class="hambtn" onclick="openNav()">☰</div>
<div id="sidenav" class="menu">
×
home
music
about
gigs
<span>contact</span>
</div>
</nav>
<main>
<aside>
<div class="icon-bar">
XXXXXXXXXXXXXXXX
</div>
</aside>
<section>
<div id="home"><!--one youtube vid goes here--> home</div>
<div id="music"><!--music player html goes here-->music</div>
<div id="about"><!--about html goes here-->about</div>
<div id="gigs"><!--gigs html goes here-->gigs</div>
<div id="contact"><!--contact form html goes here-->contact</div>
</section>
<footer>®© xxxxxx 2001-2019 All rights reserved</footer>
</main>
</div>
</body>
</html>
To load abc.html in your home page, you can use jQuery as follow. Make sure that you have added jQuery CDN
<script>
$(document).ready(function () {
$('#about').load('about.html');
$('#gigs').load('gigs.html');
$('#contact').load('contact.html');
})
</script>
Here is the code:
body{
background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header{
background-color:#F0F8FF;
text-align:center;
padding:3px;
opacity:0.2;
height:60px;
}
h1{
font-family:'Lucida Console';
font-weight:bold;
color:blue;
}
div.header ul {
font-style:none;
font-size:50%;
list-style-type:none;
position:relative;
right:700px;
bottom:50px;
}
ul{
list-style-type:none;
line-height:220%;
}
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:visited{
color:white;
font-size:150%;
text-decoration:none;
margin:10px;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
div.gallary img{
position:relative;
left:160px;
top:150px;
margin:5px;
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
border: 1px solid #ccc;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css">
</head>
<body>
<div class = "header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class +"nav" >
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>apply</li>
</ul>
</div>
<div class = "gallary">
<img src = "http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg"></img>
<img src = "http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg"></img>
<img src = "http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg"></img>
<img src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA"></img>
<img src = "http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300"></img>
</div>
</body>
</html>
My questions is when I run this code and hover over the links or the images,
They all seem to be connected through some invisible box. For example when I hover over the "Home" link. Every link and every img moves downward. How do I fix this? Thank you.
They are not connected at all, they are just responding to the elements growth because your links are making your font bigger on hover and your images are getting border on hover.
The best way to avoid this behavior is setting the border-sizing property:
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* { Box-sizing: Border-box } FTW by Paul Irish
https://jsfiddle.net/j9rxzc2n/
please check this one it's misbehaving because its size was being increased while hovering. so I fixed its size, now it's working fine without up and down.
I only added this one line: ul li{height:30px; }
I'm guessing this is what you wanted? https://jsfiddle.net/link2twenty/8ktphwyo/
body {
background-image: url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg');
}
div.header {
background-color: #F0F8FF;
text-align: center;
padding: 3px;
opacity: 0.2;
height: 60px;
}
h1 {
font-family: 'Lucida Console';
font-weight: bold;
color: blue;
}
div.header ul {
font-style: none;
font-size: 50%;
list-style-type: none;
position: relative;
right: 700px;
bottom: 50px;
}
ul {
list-style-type: none;
line-height: 220%;
}
a:link {
display: inline-block;
color: white;
font-size: 150%;
text-decoration: none;
transform-origin: left;
}
a:visited {
color: white;
font-size: 150%;
text-decoration: none;
margin: 10px;
}
a:hover {
transform: scale(1.2, 1.2);
color: #7CB9E8;
}
div.gallary img {
position: relative;
left: 160px;
top: 150px;
margin: 5px;
width: 200px;
height: 200px;
border: 1px solid rgba(0, 0, 0, 0);
}
div.gallary img:hover {
z-index: 100;
transform: scale(1.1, 1.1);
border-color: #ccc;
}
<div class="header">
<h1>Gordong Guitar Lesson</h1>
<ul>
<li>Mailbox:147ox</li>
<li>phone: (151)-232-4576</li>
<li>Zip:223</li>
</ul>
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Lessons</li>
<li>Videos</li>
<li>Apply</li>
</ul>
</div>
<div class="gallary">
<img src="http://www.londonguitaracademy.com/wp-content/uploads/guitar-lessons1.jpg" />
<img src="http://lessonsthatrock.com/wp-content/uploads/2012/02/guitar-lessons-long-beach1.jpg" />
<img src="http://tampabaymusicacademy.com/blog/wp-content/uploads/2015/10/guitarlessons.jpg" />
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTUpvERhA8lpbGi7ic9GGThcF20NZl1ZrDTT_N-mqvZwTqdpw7vMA" />
<img src="http://hobartguitarlessons.files.wordpress.com/2011/11/guitar-man-new_221.jpg?w=300&h=300" />
</div>
I've made it so none of the size changes effect the page flow. I've used css scaling rather than actually changing the size values and for borders I gave each image an invisible border that was coloured in rather than adding a border after.
You have:
a:link{
color:white;
font-size:150%;
text-decoration:none;
}
a:hover{
font-size:220%;
color: #7CB9E8;
}
This means when you move the mouse over a link (<a>), your font size becomes 220% instead of the regular 150% - that's what is causing the moving you describe - the size of any text will increase by approximately 50% (150/220).
EDIT / ADDED:
And the same with images (<img>tags) - you have:
div.gallary img{
width:200px;
height:200px;
}
img:hover{
width:220px;
height:220px;
}
which means: Your images in <div class="gallary">are 200x200px, but when you move the mouse over them, they become bigger: 220x220px, which also moves everything that comes after it...
this is my html and my script as well. i know this is all really messy code so i apologize for that as i'm still learning. I would really appreciate some help with this issue. Thanks in advance
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#home" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
$("#circle" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
});
</script>
</head>
<body>
<p class="header"></p>
<p id="yellow"></p>
<p id="circle"></p>
<p id="body"></p>
<p id="body2"></p>
<p id ="logo"></p>
<p id="wood"></p>
<p id ="body3"></p>
<p id ="getintouch"></p>
<div >
<p id ="home">HOME</p>
<p id ="about">ABOUT</p>
<p id="contact">CONTACT</p>
</div>
<p id="circle1" class="circle"></p>
<p id="circle2" class="circle"></p>
<p id="circle3" class="circle"></p>
</body>
</html>
and this is my css
* { margin: 0; padding: 0; }
#font-face { font-family: Basic; src: url('fonts/basictitlefont.ttf'); }
.header{
position:realtive;
display: block;
width:100%;
min-height: 100px;
padding:0px;
margin:0px;
margin-top: 0px;
background-image: url(images/creamconcrete.png);
}
#yellow{
position:realtive;
display: block;
width:100%;
min-height: 15px;
background-color: ffa407;
padding:0px;
margin:0px;
z-index: 11;
}
#circle{
background-image: url(images/Counter.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#body{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: white;
padding:0px;
margin:0px;
}
#body2{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: 494949;
padding:0px;
margin:0px;
}
#body3{
position:realtive;
display: block;
width:100%;
min-height: 200px;
background-color: white;
padding:0px;
margin:0px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#wood{
background-image: url(images/woodshop.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#getintouch{
width:500px;
height:200px;
top: 1760px;
position: absolute;
left: 50%;
transform: translatex(-50%);
border:solid 8px #6d6c6c;
}
#home{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#6d6c6c;
position: absolute;
top:40px;
left:10px;
}
#about{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:200px;
}
#contact{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:400px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#circle1{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left: 50%;
transform: translatex(-50%);
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle2{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left:70%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle3{
opacity:0.7;
width:250px;
height:250px;
top:225px;
left:10%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
.highlighted {
background-color:#556677;
}
.active{
background-color: red;
}
This is probably a simple issue, but why does my script only run in the section for the id of home and not in the id of circle. I'm applying the same code and class to both but when i hover over my circle it doesn't change. whyyyyy
Are you talking about #circle specifically, or the other circle elements? If you're expecting this to work on #circle1, 2, and 3, it won't. You've added a class to those circle elements, so you'll need use a class selector instead.
$(".circle" ).hover( ... );
You'll also need to be aware of CSS specificity. Your .active selector will need to be at least as specific, if not more specific, in order for it to take effect. For example:
.active, #circle1.active, #circle2.active, #circle3.active {
background-color: red;
}
This is a pretty poor solution, which is why many people recommend avoiding the use of IDs and just using classes. If you switch those IDs to classes, you won't have to modify your .active selector. For example:
<p class="circle circle1"></p>
<p class="circle circle2"></p>
<p class="circle circle3"></p>
Then the CSS:
.circle1 { background-color: #ded7c9; }
.circle2 { background-color: #ded7c9; }
.circle3 { background-color: #ded7c9; }
.active { background-color: red; }
You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, if you aren't performing any logic on hover, then you don't need javascript. Just use the :hover pseudoclass in your CSS.
your active class Should Be like This
.active{
background-color: red !important;
}
The Background color of #circle is already applied to the Circle object
so Giving An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has.
The issue seems to be that you are not overwriting the background image. So you simply can't see the background color if the background graphic doesn't have any transparent parts,
.active{
background-color: red !important;
background-image: none !important;
}
I have a slideshow with pager and some buttons next to pager of slideshow (here is html page) which I am trying to make responsive.
The images I am fetching from database. So that are varying in number.
The problem is that pager/navigation of slideshow is fine for less number of images but becomes problematic for more images. Pager is overlapping the buttons which are next to it. as shown below:
For Desktop screen:
For small screen:
Below is the div structure
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div> <!-- pager -->
</div>
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
I am finding the solution other than media queries if possible. I tried by giving width in % to all div, by putting container div to above structure and giving it 100% width and height, by $(width).width() function. But not getting the solution.
jsfiddle
Is there any way to dynamically adjust the width of div depending on browser's screen size?
You can use the #media queries. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (max-width: 300px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
...
</body>
</html>
This will change the background color of the body to lightblue. But when you resize your browser window to less than 300px it will change to lightgreen. I hope this will help you with your problem.
Here is simple solution using CSS and HTML, no #media queries no JavaScript,
I just modified some lines of HTML and CSS to your code those are below.
HTML
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div>
</div>
<div class="buton-controls">
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
</div>
css
/* I wanted to center my loader */
#cycle-loader {
height:32px;
left:50%;
margin:-8px 0 0 -8px;
position:absolute;
top:50%;
width:32px;
z-index:999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
display:none;/* Only use this if you fade it in again after the images load */
position:fixed !important;
}
#arrow_left, #arrow_right {
bottom:45%;
height:67px;
position:fixed;
right:3%;
width:36px;
z-index:1000;
}
#arrow_left {
left:3%;
}
#arrow_left:hover, #arrow_right:hover {
bottom:45%;
}
#arrow_left:active, #arrow_right:active {
bottom:45%;
}
a {color:#666;text-decoration:none;}
a:hover {text-decoration:underline;}
/*I want to style my pager*/
#cycle-nav {
/* float:left;*/
margin-top: 8px;
margin-left: 0;
text-align: center;
}
#cycle-nav ul {
list-style-type:none;
width: 100%
}
#cycle-nav ul li {
/* border:1px solid #FF8000;*/
display: inline-block;
margin:3px;
}
#cycle-nav ul li a {
/*background: #057c96;*/
background: #49BED8;
float:left;
height:10px;
margin:2px;
width:10px;
}
#cycle-nav ul li a:hover {
background: #000;
opacity:0.6;
}
#cycle-nav ul li.activeSlide {
/* border:1px solid #000;*/
/* background: #075262;*/
}
#cycle-nav ul li.activeSlide > a {
background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }
#controls { width: 50%; float: left; }
.buton-controls{
width: 50%;
float: left;
text-align: center;
}
.buton-controls > div{
display: inline-block;
}
.button2{
background-color: red;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
text-align: center;
width: 70px;
color:#FFFFFF;
}
.button2:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
}
.button2hoverBg{
background-color:#137087 !important;
cursor:pointer;
opacity:1;
}
.button3{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
position: relative;
text-align: center;
z-index: 10;
width: 70px;\
}
.button3:hover, a:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
text-decoration:none;
color:#FFFFFF;
}
.button3 a{
color:#FFFFFF;
text-decoration:none;
}
.button1{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
height: 20px;
text-align: center;
width: 70px;
z-index: 10;
opacity: 0.4;
}
.button1 a{
color:#FFFFFF;
text-decoration:none;
}
Yes, use the vw and vh CSS properties.
1vw = 1% of window width,
1vh = 1% of window height.
http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design
I have been created time-line for my web page, by using html,css3 and js.
html:
<div class="cntl-state">
<div class="cntl-content">
<h4>Title 4</h4>
<p>India’s Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain’s Carolina Marin in the final.</p>
</div>
<div class="cntl-image"><img src="img/timelinesn-12.jpg" alt="tm12"></div>
<div class="cntl-icon cntl-center">2014</div>
</div>
</div>
css:
.cntl-center {
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.cntl-bar {
position: absolute;
width: 10px;
top: 0;
bottom: 0;
background-color: #ccc;
box-shadow: inset 0px 0px 7px -2px #000;
}
.cntl-bar-fill {
background-color: #66cc00;
position: absolute;
left:0;
right:0;
top:0;
height:0;
}
.cntl-state {
position: relative;
width:100%;
min-height: 200px;
margin-bottom: 50px;
}
.cntl-state::after {
display:block;
content: ' ';
clear:both;
}
.cntl-icon {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #003300;
border: solid 3px #009900;
box-shadow: 0px 0px 19px -9px #000;
position: absolute;
top: 0;
text-align: center;
line-height: 100px;
font-size: 40px;
color: #fff;
}
.cntl-content {
width: 30%;
padding: 2%;
background-color: rgba(238, 238, 238, 0.25);
border-radius: 8px;
border-bottom: solid 3px #009900;
float:left;
opacity:0;
position:relative;
margin-left:-40%;
}
.cntl-state:nth-child(2n+2) .cntl-content {
float:right;
margin-right:-40%;
}
.cntl-image {
opacity:0;
width: 40%;
padding: 2%;
}
.cntl-state:nth-child(2n+1) .cntl-image {
float:right;
}
.cntl-content h4 {
font-size:20px;
font-weight: normal;
margin-bottom: 10px;
}
/*
animations
*/
.cntl-bar-fill,.cntl-content,.cntl-image {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
.cntl-state:nth-child(2n+2).cntl-animate .cntl-content {
margin-right:6%;
}
.cntl-animate .cntl-content {
opacity:1;
margin-left:6%;
}
.cntl-animate .cntl-image {
opacity:1;
}
And i have used js files also, i m trying to create jsfiddle, but can't able to get.
Now my page shows like this http://s30.postimg.org/54dkm4qoh/Untitled_2.png
I need like this dotted line, for joint the image and description.
http://s30.postimg.org/k522y658x/Untitled_1.png
Can anyone help me to give idea for creating dotted line that is join the both image and description?.
Thanks in advance.
If you want to know how to draw dotted line here is the code for it.
<head>
<title></title>
<style id="TempStyle"></style>
</head>
<body>
<hr style="height: 0;margin:50px;width: 200px;border-width: 5px;border-color: black;border-style: dotted;"><!-- horizontal line -->
<hr style="height: 200px;margin:50px;width: 0px;border-width: 5px;border-color: black;border-style: dotted;"><!-- vertical line -->
</body>
<script src="script.js"></script>
</html>
Actually its little messy when we try using CSS to do these sort of things. Still i think this is what you might be looking for Demo. I have just showed you the quick demo, but you will have to add cross browser support.
CSS & HTML
html, body {
height: 100%;
position:relative;
}
body{
color:#fff;
overflow:hidden;
}
.leftcont
{
position:absolute;
margin-left:0%;
display:block;
width:47%;
height:100%;
background:#333;
}
.timeline
{
position:absolute;
margin-left:47%;
display:block;
width:6%;
height:100%;
background:#ddd;
}
.rightcont
{
position:absolute;
margin-left:53%;
display:block;
width:48%;
height:100%;
background:#333;
}
.content1
{
padding:20px;
display:block;
height:150px;
width:200px;
float:right;
margin-right:10%;
margin-top:10%;
background:#ddd;
color:black;
}
.content2
{
padding:20px;
display:block;
height:150px;
width:200px;
float:left;
margin-left:10%;
margin-top:10%;
background:#ddd;
color:black;
}
.circle
{
display:block;
height:60px;
width:60px;
margin-top:100%;
border-radius:50%;
background:#000;
padding:15px 15px;
text-align:center;
font-size:22px;
}
#linel
{
position:relative;
float:right;
right:-44%;
top:17%;
display:block;
width:70px;
height:0.1px;
border:2px dashed green;
}
#liner
{
position:relative;
float:left;
left:-43%;
top:17%;
display:block;
width:65px;
height:0.1px;
border:2px dashed green;
}
<div class="leftcont">
<div class="content1">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div>
<span id="linel"></span>
</div>
<div class="timeline">
<div class="circle">2006</div>
</div/>
<div class="rightcont">
<div class="content2">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div>
<span id="liner"></span>
</div/>