I want to:
A roll-out animation from the header's abbreviation into the written out meaning + subheading with information about that main header.
Edit: Example: S3 rolling out into "Solidify solid states" and have the subheading gradually increase in transparency right after this occurs
Expanding it from left to right when it is clicked (thus revealing the underlying information that is hidden).
What I've done in jsfiddle seems to be very choppy. (It opens the secondary text in two segments).
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class = "s3notebox">
<h1>S3</h1>
</div>
<div class = "sub-headings">
<p>S3 notes go in this section which should flare out.</p>
</div>
CSS:
.s3notebox{
background-color: rgba(174, 214, 241, 0.5);
display: flex, inline-block;
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Poppins', sans-serif;
border-left: 6px solid #48C9B0;
border-radius: 2px;
}
.sub-headings{
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-left: 6px solid yellow;
position:absolute;
}
JS:
$(document).ready(function(){
$(".s3notebox").click(function(){
$(".sub-headings").slideToggle();
});
});
https://jsfiddle.net/snpb0gau/
I just written a solution. Here I've made some changes in your html, css & js file. Hope it will help you.
$(document).ready(function(){
$(".s3notebox").click(function(){
$("#subHeading").toggleClass('left-to-right-slide');
});
});
.s3notebox{
background-color: rgba(174, 214, 241, 0.5);
display: flex, inline-block;
white-space: nowrap;
height: 3em;
width: 10vw;
font-family: 'Poppins', sans-serif;
border-left: 6px solid #48C9B0;
border-radius: 2px;
}
.sub-headings{
white-space: nowrap;
height: 3em;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
border-left: 6px solid yellow;
position: absolute;
transition: all 0.33s ease;
left: -100%;
}
.left-to-right-slide {
left: 1%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "s3notebox">
<h1>S3</h1>
</div>
<div id="subHeading" class = "sub-headings">
<p>S3 notes go in this section which should flare out.</p>
</div>
Related
I am trying to make multiple div h3 use the hide and show function. When the user first accesses the website on the faq page, the user hovers over the question, and when they click on it, the answers are shown below. When they click the question again, the answer is hidden. I need to do this for 3 more questions, but I don't know specifically how to.
I did the first question, it worked perfectly fine, but I'm stuck on the last three. I've tried following many examples but nothing has changed so far.
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BRICKSxMORTAR: F.A.Q.</title>
<script src="script/jquery-ui.js"></script>
<script src="script/jquery-3.6.0.min.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- jQuery Modal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<script>
$(document).ready(function() {
$("h3+i").hide()
$("h3:nth-of-type(1)").click(function() {
$("h3:nth-of-type(1)+i").toggle("drop");
$("i:nth-of-type(1)+h3").toggle("drop");
$("h3:nth-of-type(1)+p").toggle("drop");
$("h3:nth-of-type(1)+p").toggle("drop");
});
});
$(document).ready(function(){
$("def1").click(function(){
$("modal").modal();
})
})
</script>
<style>
h3.magenta{
cursor: pointer;
background-color: aquamarine;
transition-property: magenta;
}
</style>
</head>
<style>
#font-face {
font-family: 'agendaimport';
src: url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff2')
format('woff2'),
url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff')
format('woff');
font-weight: normal;
font-style: normal;
}
h1{
font-family: 'agenda';
font-size: 1.8em;
}
body{
background-image: url("images/BRICKSxMORTAR.jpg");
background-size: 200px;
background-color: black;
color: floralwhite;
font-size: 1.2 em;
font-family: 'Courier New', Courier, monospace;
width: 100%;
height: auto;
margin: auto;
}
a {
color: aquamarine;
font-size: 25px;
}
h3{
color: magenta;
font-size: 28px;
font-weight: bold;
}
b{
color: aquamarine;
font-size: 40px;
font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#wrapper{
width: 80%;
height: auto;
margin: auto;
padding: 1em;
background: #000;
position: relative;
top: 4.5em;
z-index: 0;
}
div {
color: rgb(255, 255, 255);
font-size: 22px;
}
q{
color: magenta;
}
i{
color: rgb(255, 255, 255);
font-size: 22px;
}
#img{
display: block;
margin: auto;
}
#logo{
display: block;
margin: auto;
width:60%;
height:auto;
}
nav{
width: 100%;
height: auto;
background: aquamarine;
margin-right: auto;
margin-left: auto;
margin-top: -99em;
padding: 1em 0;
text-align: center;
margin-bottom: 1em;
padding-top: 1em white;
padding-bottom: 1em white;
color: magenta;
/*border-top: 1px white;
border-bottom: 1px white;*/
transition: margin-top 0.8s ease-in-out;
}
a.menu:link{
display: block;
color: black;
}
a.menu:visited{
color: rgb(16, 20, 19);
text-decoration: none;
}
a.menu:hover{
color: magenta;
text-decoration: underline;
background-color: aquamarine;
}
a.menu:active{
text-decoration: underline;
background-color: aquamarine;
}
#magenta{
font-size: 0.8 em;
}
#smaller{
font-size: 0.8em;
color: black;
}
footer{
width: 100%;
background-color: floralwhite;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
clear: both;
}
footer p{
margin: auto;
width: 90%;
color: magenta;
}
footer a{
margin: auto;
width: 90%;
color: magenta;
}
footer p:link{
color:black;
}
footer a:link{
color:black;
}
.floatLeft{
float:left;
}
.floatRight{
float:right;
}
#banner{
width: 100%;
height: auto;
background: #000;
border-bottom: 1px solid #fff;
position: fixed;
z-index: +1;
top: 0;
left: 0;
right: 0;
}
header{
width: 100%;
height:auto;
margin-bottom:2em;
}
header p{
width: 99%;
height: auto;
color: black;
background-color: aquamarine;
font-weight:bold;
padding-left:1%;
}
header:hover nav{
margin-top:-1em;
}
header:hover p{
color: magenta;
cursor: pointer;
}
h1{
animation-name: strobe;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#keyframes strobe{
0%{
color: floralwhite;
}
50% {
color: magenta;
}
100%{
color:white;
}
}
a.definition:link{
color: white;
text-decoration-style: underline;
text-decoration-style: wavy;
}
a.definition:visited{
color: white;
text-decoration-style: underline;
text-decoration: wavy;
}
a.definition:hover{
cursor: pointer;
color: magenta;
}
a.definition:active{
cursor: pointer;
color: magenta;
}
#modal{
color: black;
}
h3:hover{
background-color: aquamarine;
}
</style>
</html>
<body>
<br>
<div id="banner">
<img src="images/logo.png" id="logo" /></div>
<br>
<br>
<div id="wrapper" max-width="50px">
<header>
<p>menu</p>
<nav>
<a class="menu" href="OURSTORY.HTML" >OUR STORY</a>
<a class="menu" href="#" >OUR SERVICES</a>
<a class="menu" href="#" >LOCATIONS</a>
<a class="menu" href="#" >F.A.Q</a>
<a class="menu" href="Indexxxx.html">HOME</a>
</nav>
</header>
/*<div id="def1" class="modal">
<p>
<strong>What Do We Mean By Galleries?</strong><br/><br/>
While we do sell a limited array of items off the rack, the majority of the clothes that we make are custom-to-order. So, we do not have stock to fill the shelves per se, let alone multiples of items in different sizes. Instead, what you'll find when you arrive is a curated collection of our best work displayed on mannequins of many different sizes and shapes.
</p>
</div>*/
<div id="mission">
<h1 style="color:magenta">The mission of BRICKSxMORTAR is to transform how Canadians think about fashion.</h1>
<hr>
<br>
<b style="font-family: Arial, Helvetica, sans-serif">F.A.Q</b>
<br>
<h3>
Do I need to make an appointment, or can I walk right in?
</h3>
<i>
While our physical locations are open to the public to come in and explore our galleries,
we do ask that you call or e-mail ahead of time if you're interested in a design consultation or a fitting. Just send us your name, a
number we can reach you with, and a preferred date and time, using the e-mail link at the bottom of the page.
</i>
<div id="def1" class="modal" color="magenta">
<q>
<strong>What Do We Mean By Galleries?</strong><br/><br/>
While we do sell a limited array of items off the rack, the majority of the clothes that we make are custom-to-order.
So, we do not have stock to fill the shelves per se, let alone multiples of items in different sizes. Instead, what you'll find when you arrive is a curated collection of our best work displayed on mannequins of many different sizes and shapes.
</q>
</div>
<br>
**<h3 id="h3+isecond">
Do I need to have my own fabric and materials picked out ahead of time?
</h3>**
<div>
No, that's all part of the fun and the customer experience. One of our talented designers will be happy to walk you through fabric samples,
make recommendations, and place orders on your behalf for everything you need to create the perfect custom look.
</div>
<br>
** <h3>
Do you make men's clothing?
</h3>**
<div>
Yes, we make clothing for all expressions of gender, whether that's cis-gendered men and women or a more androgynous look.
We want clothing to be comfortable for our clients physically, emotionally and psychologically.
</div>
<br>
** <h3>
What if I can't pay for everything up front?
</h3>**
<div>
We know that custom clothing can be expensive, but it's also an investment in you. That's why we're more than willing to work
with you to devise a payment plan for your custom outfit. We offer 2, 4 and 6-month instalment plans as well as free consultations
for low-income and precarious workers.
</div>
<br>
<br>
<br>
<hr>
<br>
<footer>
<h1>
<div class="magenta"</div>
<p>
<div class="smaller" font-size="0.8em"</div>
</p>
</h1>
<p>©BRICKSxMORTAR, inc. 2018-2020 // 1.888.708.9950 //
<a class="menu"href="mailto:info#bricksxmortar.com"
style="color:magenta"> <u>info#bricksxmortar.com</u></a></p>
</footer>
</div>
</body>
So this can easily be done with the following stept;
Make with css all the needed display:none;, that way they will al be hidden when the page loads.
Make a click event on the H3 that wil trigger a function
Make the function to toggle the next div.
Whit this way, when you click on the H3 it will open when it is hidden and it wil hide when it's visible. Very usefully.
HTML:
<h3 class="faq-question">Question 1</h3>
<div class="faq-answer">Answer 1</div>
<h3 class="faq-question">Question 2</h3>
<div class="faq-answer">Answer 2</div>
<h3 class="faq-question">Question 3</h3>
<div class="faq-answer">Answer 3</div>
<h3 class="faq-question">Question 4</h3>
<div class="faq-answer">Answer 4</div>
JavaScript (jQuery)
<script>
$('.faq-question').click(function(){
$(this).next().toggle();
});
</script>
CSS
<style>
.faq-answer {
display:none;
}
</style>
enter image description here
enter image description here
I am trying to achieve, image 1 with my code, But some how I am getting image 2. Although I have separate classes for my paragraphs, the colour and font size is not changing. Does someone know why this may be?
index.html file:
<!DOCTYPE html>
<html>
<!-- Link HTML to stylesheet-->
<link href="taniaWebsite.css" type="text/css" rel="Stylesheet" />
<body class="mainpage">
<h1 class="title">Project 180 Websites</h1>
<p class="intro">
Hey my name is Tania and I suck at web development so I am going to make 180 websites until I am better... <br>
<br>
This is the first one. I will list the other ones below this one.
<br>
<br>
You can follow the project here and on the blog.
</p>
<!-- Line decoration -->
<hr class="line">
<li> <p class="days"> Website 2 - </p> </li>
<li> <p class="days">Website 1 - Homepage</p></li>
css. file:
.eyes{
position: absolute;
top: 50%;
transform: translate(-50);
width: 100%;
text-align: center;
}
.eye{
width:240px;
height: 120px;
background: #fff;
display: inline-block;
margin: 40px;
border-radius: 50%;
position: relative;
overflow:hidden;
}
.ball{
width: 40px;
height: 40px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border:15px solid #333;
}
body.mainpage {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
color: #545454;
margin: 0 auto;
max-width: 800px;
padding: 2em 2em 4em;
background-color:white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.website2{
background-color:rosybrown;
}
.container{
text-align: center;
position:absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
width:100%;
}
.container span{
text-transform:uppercase;
display:block;
}
.text1{
color:white;
font-size:60px;
font-weight:700;
letter-spacing: 8px;
margin-bottom:20px;
position:relative;
animation: text 3s 1;
}
.text2{
font-size:30px;
color:indianred;
}
#keyframes text{
0% {
color:darkgray;
margin-bottom: -40px;
}
20%{
letter-spacing:25px;
margin-bottom:-40px;
}
75%{
letter-spacing:8px;
margin-bottom: -40px;
}
.line {
margin-top: 1vw;
}
h1{
color: rgb(45);
text-align: left;
font-weight: 500;
font-size: 2em;
}
p.intro {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16.5px;
line-height: 1.5;
}
p.days {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
color:darksalmon;
}
li {
list-style-type: none;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none; }
I have two html documents for this project, but I have having issues with the index.html page. Something in my style sheet isn't responding to the html doc. I have trying to do a 180 Website challenge and some guidance or help would be greatly appreciated!!
Give the A tags a class, like 'a-days' like this...
<li><p class="days">Website 2 - </p></li>
and then define their color like this
a.a-days:hover, a.a-days:visited, a.a-days:link, a.a-days:active {
color:darksalmon;
}
also you should enclose the LI tags inside a UL (unOrdered list) or OL (Ordered list) tag. And to hide the bullet the list-style-type applies to OL and not LI
ul {
list-style-type: none;
}
Lastly... your #keyframe style is missing a closing bracket that is why no matter what you do after it does not work.
Here is a working JSfiddle example
You are missing a closing bracket on your keyframe
75%{
letter-spacing:8px;
margin-bottom: -40px;
}
} <== you are missing this closing bracket.
I made that change and it fixed your issue.
First off let me say how much of a big help this website has been with my little project. Anyway on to my question.
So right now I'm creating a personal website for myself and I want to add some padding to something, but when I add padding, it ends up creating space between some stuff and making it completely white without using the background image or color. This is what I mean.
When I open up the "About" tab (I added padding to that one but not the one above), do you see how there's a lot of white space? How can I have that colored in grey and use the background image aswell?
And when I close the tab, there is a big white gap, which is (I'm pretty sure) the padding not closing
I only added padding to the "About" tab and as you can see, it is messed up compared to the others (This is the jsfiddle)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
padding: 15px;
margin: auto;
}
This is the css code for the class holding the info.
Take the padding off .two, and if you want the white border around the content in .four, you can use a margin:
$(document).ready(function(event) {
$('.one').click(function() {
$('.two').slideToggle();
})
$('.three').click(function() {
$('.four').slideToggle();
})
$('.five').click(function() {
$('.six').slideToggle();
})
$('.seven').click(function() {
$('.eight').slideToggle();
})
setTimeout(function() {
$('.two').slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.one {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.two {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.three {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.four {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
margin: 15px;
}
.five {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.six {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.seven {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.eight {
background-color: #333333;
display: none;
text-align: center;
background-image: url("noise.png");
color: white;
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<div class="container">
<div class="big1">
<div class="one">Main</div>
</div>
<div class="small1">
<div class="two">Welcome to my page!
<br>Click around
<br>Learn a thing or two about me</div>
</div>
<div class="big1">
<div class="three">About</div>
</div>
<div class="small2">
<div class="four">My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!</div>
</div>
<div class="big1">
<div class="five">Projects</div>
</div>
<div class="small1">
<div class="six">My projects can be found here</div>
</div>
<div class="big1">
<div class="seven">Contact</div>
</div>
<div class="small1">
<div class="eight">You can contact me here</div>
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>
Try moving the padding to the .four class, I think it will give you your desired result.
You could do some restructuring of the code to simplify it like
$(document).ready(function(event) {
$('.header').click(function() {
$(this).next('.content').slideToggle();
})
setTimeout(function() {
$('.content').first().slideToggle();
}, 500);
});
body {
margin: 0;
}
.container {
overflow: hidden;
}
.header {
position: relative;
top: 0;
background-color: #605F5F;
z-index: 1;
cursor: pointer;
text-align: center;
background-image: url("noise.png");
color: white;
}
.content {
background-color: #333333;
display: none;
text-align: center;
color: white;
background-image: url("noise.png");
}
.botbar {
background-color: #2b2a2a;
text-align: center;
color: white;
background-image: url("noise.png");
}
.big1 {
font-family: 'Megrim', serif;
font-size: 210px;
}
.small1 {
font-family: 'Ubuntu', serif;
font-size: 80px;
}
.small2 {
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
}
.botinfo {
font-family: 'Ubuntu', serif;
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="big1 header">
Main
</div>
<div class="small1 content">
Welcome to my page!
<br>Click around
<br>Learn a thing or two about me
</div>
<div class="big1 header">
About
</div>
<div class="small2 content">
My name is Bob and I currently attend University of Bob.
<br>If a passionate student that is always trying to learn new and exciting things and broaden their knowledge in the field of programming is someone you need, then I'm your guy.
<br>I have worked on projects ranging from this website that was created by yours truly, a game of solitaire with my own personal twist, and much more.
<br>All my projects can be found in the tab below!
</div>
<div class="big1 header">
Projects
</div>
<div class="small1 content">
My projects can be found here
</div>
<div class="big1 header">
Contact
</div>
<div class="small1 content">
You can contact me here
</div>
<div class="botinfo">
<div class="botbar">Made by Bob | Copyright 2016</div>
</div>
</div>
Use display : none; for .small2 in css. Even though it is hidden it is taking space on UI. (if you need padding when visible)
.small2{
font-family: 'Ubuntu', serif;
font-size: 30px;
background-clip: initial;
padding: 15px;
margin: auto;
display : none;
}
I wrote the code below and I was wondering if I could, in any way, make the white space of the body bigger. As of right now, I have the header color #444 and, I thin,k about 130px from the top and the footer is the same color and about 260px from the bottom. In the middle, I have the little tiny white space for the body. Is there any way to open that up with still keeping my header and footer the size they are — just moving the footer down? Then my next problem is that my text in my div tags, in my body will spawn behind my header and/or footer when they are in the body. Is there a way I can limit that so that they will have to spawn between my header and footer in the white space? Thanks for your help and time!
<!doctype html>
<html>
<title>Joes Nose</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
<body>
<header>
<div class="zebusoft-logo">
<img src="images/logo-3.png" alt="">
</div>
</header>
<div class="body-text">
<h1>Software Devlopment Company</h1>
</div>
</body>
<footer>
<div class="about-zebu">
<p>About ZebuSoft</p>
</div>
<div class="fast-nav">
<p>Nav</p>
</div>
</footer>
</html>
html, body {
padding: 0;
margin:0;
background: #444;
}
header {
position:fixed;
top:0;
width:100%;
height:102px;
background-color:#222;
padding:20px;
}
footer {
background: #222;
width: 100%;
height: 370px;
bottom: 0;
position: fixed;
}
.zebusoft-logo {
padding: 0;
top: 0;
position: fixed;
margin-left: 400px;
}
.body-text {
font-family: "Museo Sans",sans-serif;
color: #300000;
margin-top: 150px;
text-align: center
}
.about-zebu {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
margin-bottom: .8em;
margin-right: 1570px;
border-bottom: 1px solid #131313;
margin-left: 120px;
}
.fast-nav {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
margin-bottom: .9em;
margin-right:;
border-bottom: 1px solid #131313;
margin-left: 390px;
}
jsFiddle
Solution
jsFiddle
Here I made the changes to your HTML, you need to nest footer into the body, I have also made changes to your CSS.
So now your footer will stick to the bottom and if there is overflow of text in the middle it will scroll.
Good luck..
old
I am not 100% sure what you have asked but here is the sample:
jsFiddle
I have added a large paragraph and everything seems to be correct.
I have changed your <div> into a section and used <p> to add text. Tell me what is wrong with the page in the link? Thanks
ADDED CSS
.about-zebu {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
border-bottom: 1px solid #131313;
width: 75%;
float:left;
}
.fast-nav {
font-family: "Museo Sans",sans-serif;
font-size: 20px;
color: #606060;
font-weight: 300;
padding-bottom: .1em;
border-bottom: 1px solid #131313;
width: 25%;
float:left;
}
I'm trying to get my jQuery tabs to go all the way across the top and line up on the left and right side with the edges, I tried doing fixed widths but it doesn't seem to want to cooperate that way. Does anyone know how to do this? Also it keeps jumping around when you click on a tab, I saw it's because they are hiding the border of the content by moving the tab down over the border... is there anyway to connect the tabs to the content without moving the tab itself and creating that jumping?
http://jsfiddle.net/fun6faos/2/
<style>
.tabs-all {
width: 830px;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.etabs {
margin: 0;
padding: 0;
width: 100%;
}
.tab-container .panel-container {
background: #fff;
border: solid #c2c2c2 1px;
padding: 10px;
}
.panel-container {
margin-bottom: 10px;
}
.tab1 {
width: 209px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab2 {
width: 233px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab3 {
width: 124px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
}
.tab4 {
width: 207px;
display: inline-block;
*display:inline;
background: #fff;
border-bottom: none;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.tab1.active, .tab2.active, .tab3.active, .tab4.active {
background: #fff;
padding-top: 6px;
position: relative;
top: 1px;
border-color: #c2c2c2;
border-top: 5px solid #70bf47;
border-right: solid 1px #c2c2c2;
border-left: solid 1px #c2c2c2;
}
.tab1 a, .tab2 a, .tab3 a, .tab4 a {
font-size: 15px;
line-height: 2em;
display: block;
padding: 0 10px;
outline: none;
text-decoration: none;
color: #464646;
font-weight: 600;
}
.tab1 a:hover, .tab2 a:hover, .tab3 a:hover, .tab4 a:hover {
text-decoration: none;
}
.tab1 a.active, .tab2 a.active, .tab3 a.active, .tab4 a.active {
text-decoration: none;
color: #464646;
}
</style>
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
</head>
<body>
<div class="tabs-all">
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab1'>What is Community Solar?</li>
<li class='tab2'>Why Clean Energy Collective?</li>
<li class='tab3'>How it Works?</li>
<li class='tab4'>Community Solar Benefits</li>
</ul>
<div class='panel-container'>
<div id="tabs1">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs2">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs3">
<h2>TITLE</h2>
<p>Information</p>
</div>
<div id="tabs4">
<h2>TITLE</h2>
<p>Information</p>
</div>
</div>
</div>
</div>
You need to zero out the margins. Add this to your CSS:
body {
margin:0px;
}
Taking a cue from Bootstrap's tabs, we can apply table layout properties with CSS:
li.tab {display: table-cell; width: 1%;}
http://jsfiddle.net/isherwood/fun6faos/15
This example results in uniform tab widths. To have tabs sized somewhat proportionately to their text labels, remove the width property:
http://jsfiddle.net/isherwood/fun6faos/17
A note on your use of classes... A class, by definition, is a set of properties applied to multiple elements. When you're incrementing classes, you're using them wrongly. You should never have a list of elements in your CSS that have indexed numbers. I've stripped all such craziness out of your code.